HTML and CSS

Introduction of HTML and CSS

shataksahi's photo
shataksahi
·

7 min read

HTML:-

HTML (Hypertext Markup Language) is the standard markup language used to create and structure content on the web. It forms the backbone of web pages by defining elements like headings, paragraphs, links, images, and more. Here's a basic example of an HTML document:

example :-

<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

CSS:-

CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML. It controls the layout, colors, fonts, and overall visual style of a webpage. CSS works by selecting HTML elements and applying styles to them.

example :-

<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>
<p>My first paragraph.</p>

</body>
</html>

html tags : -

About -:

HTML tags are the building blocks of web pages. They define the structure and content of a webpage by enclosing elements. Each tag has a specific purpose and can include attributes to provide additional information. Here’s a list of common HTML tags categorized by their use:

tags :-

Basic Structure Tags

  1. <``!DOCTYPE html>: Declares the document type and version (HTML5).

  2. <html>: The root element of an HTML document.

  3. <head>: Contains meta-information about the document (e.g., title, styles, scripts).

  4. <title>: Sets the title of the webpage (displayed in the browser tab).

  5. <body>: Contains the visible content of the webpage.

  6.  <!DOCTYPE html>
 <html>
 <!-- head tag -->

 <head>
     <title>Welcome to Geeksforgeeks</title>
 </head>
 <!-- Body tag -->

 <body>
     <h2>Geeksforgeeks</h2>
     <p>
         A Computer Science Portal for Geeks
     </p>
     <p>
         Please change the code and click the
         Run the button to see the changes.
     </p>
 </body>
 </html>

Text Formatting Tags

  1. <h1> to <h6>: Headings (h1 is the largest, h6 is the smallest).

  2. <p>: Paragraph of text.

  3. <strong>: Bold text (semantically indicates importance).

  4. <em>: Italicized text (semantically indicates emphasis).

  5. <br>: Line break.

  6. <hr>: Horizontal rule (a thematic break).

  7. <span>: Inline container for styling or scripting.

Example:

<h1>Main Heading</h1>
<p>This is a <strong>bold</strong> and <em>italic</em> text.</p>
<hr>
<p>This is another paragraph.<br>With a line break.</p>

  1. <a>: Anchor tag for hyperlinks.

    <a href="https://example.com">Visit Example</a>

  2. <img>: Embeds an image.

     <img src="image.jpg" alt="Description of image">

List Tags

  1. <ul>: Unordered list (bullet points).

  2. <ol>: Ordered list (numbered).

  3. <li>: List item.

Example:

<ul>
    <li>Item 1</li>
    <li>Item 2</li>
</ul>
<ol>
    <li>First</li>
    <li>Second</li>
</ol>

Table Tags

  1. <table>: Defines a table.

  2. <tr>: Table row.

  3. <th>: Table header cell.

  4. <td>: Table data cell.

Example:

<table>
    <tr>
        <th>Name</th>
        <th>Age</th>
    </tr>
    <tr>
        <td>John</td>
        <td>25</td>
    </tr>
</table>

Form Tags

  1. <form>: Container for form elements.

  2. <input>: Input field (text, password, checkbox, radio, etc.).

  3. <textarea>: Multi-line text input.

  4. <button>: Clickable button.

  5. <label>: Label for form elements.

  6. <select>: Dropdown list.

  7. <option>: Option in a dropdown list.

Example:

<form>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="age">Age:</label>
    <input type="number" id="age" name="age">
    <br>
    <button type="submit">Submit</button>
</form>

Semantic Tags

  1. <header>: Represents the header of a section or page.

  2. <nav>: Navigation links.

  3. <main>: Main content of the document.

  4. <section>: A standalone section of content.

  5. <article>: Self-contained content (e.g., blog post).

  6. <aside>: Sidebar or tangential content.

  7. <footer>: Footer of a section or page.

Example:

<header>
    <h1>Website Title</h1>
    <nav>
        <a href="#">Home</a> |
        <a href="#">About</a> |
        <a href="#">Contact</a>
    </nav>
</header>
<main>
    <article>
        <h2>Article Title</h2>
        <p>Article content goes here.</p>
    </article>
</main>
<footer>
    <p>&copy; 2023 My Website</p>
</footer>

Multimedia Tags

  1. <audio>: Embeds audio files.

     <audio controls>
     <source src="audio.mp3" type="audio/mpeg">
 </audio>

    <video>: Embeds video files.

     <video controls width="320">
     <source src="video.mp4" type="video/mp4">
 </video>

Other Useful Tags

  1. <div>: Block-level container for grouping content.

  2. <span>: Inline container for styling or scripting.

  3. <iframe>: Embeds another webpage or content.

     <iframe src="https://example.com" width="600" height="400"></iframe>

  4. <meta>: Provides metadata (e.g., charset, viewport).

     <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">

Self-Closing Tags

Some tags don’t require a closing tag:

  • <br> (line break)

  • <hr> (horizontal rule)

  • <img> (image)

  • <input> (input field)

  • <meta> (metadata)

Example of a Complete HTML Page

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sample Page</title>
</head>
<body>
    <header>
        <h1>Welcome to My Website</h1>
    </header>
    <main>
        <p>This is a sample paragraph.</p>
        <ul>
            <li>Item 1</li>
            <li>Item 2</li>
        </ul>
    </main>
    <footer>
        <p>&copy; 2023 My Website</p>
    </footer>
</body>
</html>

CSS selectors :-

CSS uses selectors to target HTML elements and apply styles. Below, I'll explain the key concepts and provide examples of how CSS works with HTML elements.

selectors :-

  1. Element Selector*:*
    Targets all instances of a specific HTML tag.

     p {
     color: blue;
 }

    This styles all <p> elements with blue text.

  2. Class Selector*:*
    Targets elements with a specific class attribute (prefixed with a .).

     .highlight {
     background-color: yellow;
 }

    This styles all elements with class="highlight".

  3. ID Selector*:*
    Targets a single element with a specific ID attribute (prefixed with a #).

     #header {
     font-size: 24px;
 }

    This styles the element with id="header".

  4. Attribute Selector*:*
    Targets elements with a specific attribute or attribute value.

     input[type="text"] {
     border: 1px solid #ccc;
 }

    This styles all <input> elements with type="text".

  5. Pseudo-class Selector*:*
    Targets elements in a specific state (e.g., hover, focus).

     a:hover {
     color: red;
 }

    This changes the color of links when hovered over.

  6. Pseudo-element Selector*:*
    Targets specific parts of an element (e.g., first line, first letter).

     p::first-letter {
     font-size: 2em;
 }

    This styles the first letter of every <p> element.

  7. Combined Selectors*:*

    • Descendant Selector*:* Targets elements inside another element.

        div p {
      color: green;
  }

      This styles all <p> elements inside a <div>.

    • Child Selector*: * Targets direct children of an element.

        ul > li {
      list-style-type: square;
  }

      This styles only <li> elements that are direct children of <ul>.

    • Adjacent Sibling Selector: Targets an element immediately following another.

        h1 + p {
      font-weight: bold;
  }

      This styles the <p> element that directly follows an <h1>.

    • General Sibling Selecto**r**: Targets all siblings of an element.

        h1 ~ p {
      color: purple;
  }

      This styles all <p> elements that are siblings of an <h1>.

Common CSS Properties

Here are some commonly used CSS properties:

  1. Text and Font Properties*:*

    • color: Sets text color.

    • font-size: Sets the size of the text.

    • font-family: Sets the font family.

    • text-align: Aligns text (left, right, center, justify).

Example:

    h1 {
        color: red;
        font-size: 32px;
        font-family: Arial, sans-serif;
        text-align: center;
    }

  1. Box Model Properties*:*

    • width and height: Set the size of an element.

    • margin: Sets the space outside an element.

    • padding: Sets the space inside an element.

    • border: Sets the border around an element.

Example:

    div {
        width: 300px;
        height: 200px;
        margin: 10px;
        padding: 20px;
        border: 2px solid black;
    }

  1. Background Properties*:*

    • background-color: Sets the background color.

    • background-image: Sets a background image.

    • background-size: Controls the size of the background image.

Example:

    body {
        background-color: lightblue;
        background-image: url('image.jpg');
        background-size: cover;
    }

  1. Flexbox and Grid Properties

    • Flexbox: display: flex, justify-content, align-items.

    • Grid: display: grid, grid-template-columns, grid-gap.

Example (Flexbox):

    .container {
        display: flex;
        justify-content: center;
        align-items: center;
    }

  1. Transitions and Animation

    • transition: Smoothly changes property values.

    • animation: Creates complex animations using @keyframes.

Example (Transition):

    button {
        background-color: blue;
        transition: background-color 0.3s ease;
    }
    button:hover {
        background-color: red;
    }

Example (Animation):

    @keyframes slide {
        from { transform: translateX(0); }
        to { transform: translateX(100px); }
    }
    .box {
        animation: slide 2s infinite;
    }

Example of CSS with HTML

Here’s how CSS can be applied to an HTML document:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        h1 {
            color: #333;
            text-align: center;
        }
        .container {
            width: 80%;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .button {
            display: inline-block;
            padding: 10px 20px;
            background-color: #007BFF;
            color: #fff;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }
        .button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Welcome to My Website</h1>
        <p>This is a paragraph with some styled text.</p>
        <a href="#" class="button">Click Me</a>
    </div>
</body>
</html>
HTML and CSS