HTML styles

HTML styles refer to the way elements on a web page are presented and formatted. These styles are typically defined using CSS (Cascading Style Sheets), which allows you to control the appearance of HTML elements, such as text, images, and layouts. Here are some key concepts:

  1. Inline Styles: These are applied directly within an HTML element using the style attribute.

<p style="color: blue; font-size: 16px;">This is a blue paragraph.</p>

2. Internal Styles: These are defined within the <style> tag in the <head> section of an HTML document.


<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>This is a blue paragraph.</p>
</body>

3. External Styles: These are defined in a separate CSS file, which is linked to the HTML document.


<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>This is a blue paragraph.</p>
</body>

And in the styles.css file:


p {
  color: blue;
  font-size: 16px;
}

4. CSS Selectors: These are patterns used to select the elements you want to style.

Element Selector: Selects elements based on the element name.


p {
  color: blue;
}

Class Selector: Selects elements based on the class attribute.

in css file


.blue-text {
  color: blue;
}

in html file


<p class="blue-text">This is a blue paragraph.</p>

ID Selector: Selects a single element based on the id attribute.

in css file


#unique-text {
  color: blue;
}

in html file


<p id="unique-text">This is a blue paragraph.</p>

5. CSS Properties: These define the specific style characteristics of an element. Common properties include:

  1. color: Sets the text color.
  2. font-size: Sets the size of the text.
  3. background-color: Sets the background color of an element.
  4. margin: Sets the space around elements.
  5. padding: Sets the space inside elements.
  6. border: Sets the border around elements.