CSS styles in HTML

CSS styles in HTML

CSS (Cascading Style Sheets) is a style language used to define the appearance and layout of an HTML document. With CSS, you can separate the document's content from its visual presentation, making maintaining and updating your site easier and more efficient.

There are three ways to add CSS styles to an HTML document:

• Inline styles: are applied directly to an HTML element, using the "style" attribute.
• Internal styles: are defined within the "head" section of the HTML document, using the "style" tag.
• External styles: are defined in a separate CSS file and linked to the HTML document via the "link" tag.

Regardless of the form chosen, CSS styles are composed of a selector and a set of properties and values. The selector is used to choose the HTML elements to receive the styles, while the properties and values ​​define the appearance and layout of these elements.

For example, the following CSS code defines a style for all h1 headings in the document:

  
    h1 {
      color: red;
      fontsize: 24px;
      text-align: center;
    }
  

In this case, the selector is "h1" and the properties and values ​​set the text color to red, the font size to 24 pixels, and the text alignment to center.

In addition to basic style properties such as color, font, and size, CSS provides a wide variety of properties to control the appearance and layout of HTML elements. Some of the more common properties include:

• background-color: sets the background color of the element.
• border: defines the border of the element, including its thickness, style and color.
• padding: defines the space inside the element, between its content and its border.
• margin: defines the space outside the element, between its border and the next element.
• display: defines how the element is displayed on the page, such as block, inline, or flexible.
• position: defines the element's position on the page, such as static, relative, or absolute.

By combining these properties and values, you can create complex, custom layouts for a website. However, it is important to remember that CSS must be used responsibly and efficiently, avoiding excessive use of styles and ensuring the accessibility and usability of the site for all users.

Next page of the Free Ebook:

12Introduction to JavaScript in HTML

1 minutes