HTML (HyperText Markup Language) is the foundation of every webpage on the internet. It provides the structure and content of a webpage, while CSS (Cascading Style Sheets) is responsible for the presentation and styling of that content. In this tutorial, we’ll cover the basics of CSS and HTML5 layout elements, as well as the box model and CSS display property.

CSS Basics

CSS is a style sheet language used for describing the presentation of a document written in HTML. It allows web developers to apply styles to HTML elements, such as fonts, colors, and layout, and create a cohesive visual design.
To use CSS, you need to create a separate CSS file and link it to your HTML document using the <link> tag. Here’s an example:

 

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>Welcome to my webpage.</p>
  </body>
</html>

 

In the example above, the <link> tag is used to link the HTML document to the style.css file, which contains the CSS styles for the webpage. The styles in the CSS file are written in a selector-declaration format, where the selector identifies which HTML element the styles will be applied to, and the declaration specifies the styling properties and their values.

HTML5 Layout Elements

HTML5 introduced a set of new semantic elements that can be used to define the different sections of a webpage. These elements are called semantic because they provide meaning to the content they enclose, making it easier for search engines and screen readers to understand the structure of the webpage.
Some of the most common HTML5 layout elements include:

  • <header> – Defines the header section of a webpage
  • <nav> – Defines a set of navigation links
  • <main> – Defines the main content area of a webpage
  • <aside> – Defines a sidebar section of a webpage
  • <footer> – Defines the footer section of a webpage

Here’s an example of how these elements can be used:

 

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <h1>My Webpage</h1>
      <nav>
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </nav>
    </header>
    <main>
      <article>
        <h2>My Article</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </article>
      <aside>
        <h3>My Sidebar</h3>
        <p>Here's some sidebar content.</p>
      </aside>
    </main>
    <footer>
      <p>Copyright © 2023 My Webpage</p>
    </footer>
  </body>
</html>

 

Box Model

The box model is a fundamental concept in CSS that defines how every HTML element is rendered on the webpage. It consists of four main components: content, padding, border, and margin.

  • Content – This is the actual content of the HTML element, such as text, images, or videos.
  • Padding – This is the space between the content and the border. Padding can be added to an element using the `padding` property in CSS.
  • Border – This is the line that surrounds the content and padding of an element. Borders can be customized using the `border` property in CSS.
  • Margin – This is the space between the border of an element and the neighboring elements. Margins can be added to an element using the `margin` property in CSS.

Here’s an example of how the box model works:

 

<!DOCTYPE html>
<html>
  <head>
    <title>Box Model Example</title>
    <style>
      div {
        width: 200px;
        height: 100px;
        padding: 20px;
        border: 1px solid black;
        margin: 30px;
      }
    </style>
  </head>
  <body>
    <div>This is a box</div>
  </body>
</html>

 

In the example above, we’ve created a `<div>` element with a width of 200px and a height of 100px. We’ve added padding of 20px, a border of 1px solid black, and a margin of 30px. This means that the total width of the element will be 200px + 220px + 21px + 230px = 302px, and the total height will be 100px + 220px + 21px + 230px = 202px.

CSS Display Property

The `display` property in CSS is used to control the layout behavior of an HTML element. It determines how an element is rendered, such as block-level or inline-level, and whether it takes up the full width of its parent element or only the width of its content.
Some of the most common values for the `display` property include:

  • `block` – This value makes an element a block-level element, which takes up the full width of its parent element and starts on a new line. Examples of block-level elements include `<div>`, `<p>`, and `<h1>-<h6>`.
  • `inline` – This value makes an element an inline-level element, which only takes up the width of its content and does not start on a new line. Examples of inline-level elements include `<a>`, `<span>`, and `<img>`.
  • `inline-block` – This value makes an element an inline-level block container, which takes up the width of its content but can have a height and width set. Examples of inline-block elements include `<input>`, `<button>`, and `<select>`.

Here’s an example of how the `display` property works:

 

<!DOCTYPE html>
<html>
  <head>
    <title>Display Property Example</title>
    <style>
      div {
        display: inline-block;
        width: 100px;
        height: 50px;
        background-color: blue;
        color: white;
        text-align: center;
        line-height: 50px;
      }
    </style>
  </head>
  <body>
    <div>Box 1</div>
    <div>Box 2</div>
    <div>Box 3</div>
  </body>
</html>

 

In the example above, we’ve created three `<div>` elements with a width of 100px, a height of 50px, and a background color of blue. We’ve set the `display` property to `inline-block`, which makes them inline-level block containers. We’ve also added some styling to center the text vertically and horizontally within the boxes.

Conclusion

In this tutorial, we’ve covered some important aspects of HTML layout and styling. We started by discussing CSS basics, including the syntax, selectors, and properties. We then moved on to HTML5 layout elements, which are designed to provide more semantic and meaningful structure to web pages.
Next, we covered the box model, which is essential to understanding how the layout of an HTML element is constructed. We looked at the four components of the box model, including content, padding, border, and margin, and how they can be customized using CSS.
Finally, we discussed the `display` property in CSS, which is used to control the layout behavior of an HTML element. We explored some common values for the `display` property, including block-level, inline-level, and inline-block.
By understanding these concepts, you can create well-structured and visually appealing web pages. There’s much more to learn about HTML and CSS, but this tutorial should provide you with a solid foundation to build upon.