HTML Styles

In HTML, “styles” refer to the visual appearance of elements on a webpage, such as colors, fonts, margins, and layout. Styles can be applied directly to HTML elements or through external stylesheets using CSS (Cascading Style Sheets).

How to Add Styles in HTML

There are three main ways to apply styles:

1. Inline Styles

  • Styles are added directly to an HTML element using the style attribute.
  • Example: 
    <p style="color: blue; font-size: 20px;">This is a blue paragraph.</p>

    Try It Now

2. Internal Styles

  • Styles are defined within a <style> block in the <head> section of the HTML document.
  • Example: 
    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Internal Styles Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
    p {
      color: green;
    }
  </style>
</head>
<body>
  <p>This is a paragraph with internal styling.</p>
</body>
</html>

    Try It Now

3. External Styles

  • Styles are placed in a separate CSS file and linked to the HTML document using the <link> tag.
  • Example:
    • Create a CSS file named styles.css: 
      body {
  background-color: lightgray;
}
h1 {
  color: darkblue;
}
p {
  color: darkgreen;
}

      Try It Now

    • Link the CSS file in your HTML document: 
      <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>External Styles Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph styled with an external stylesheet.</p>
</body>
</html>

      Try It Now

Common Style Properties

Here are some commonly used CSS properties you can use in HTML styles:

Property Description Example
color Sets the text color color: red;
background-color Sets the background color background-color: yellow;
font-size Specifies the font size font-size: 16px;
font-family Specifies the font type font-family: Arial, sans-serif;
text-align Aligns the text text-align: center;
margin Sets the outer space around an element margin: 10px;
padding Sets the inner space within an element padding: 15px;
border Adds a border around an element border: 2px solid black;
width Sets the width of an element width: 50%;
height Sets the height of an element height: 100px;

 

Example: Styling Elements

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Styled Elements</title>
  <style>
    h1 {
      color: purple;
      text-align: center;
    }
    p {
      font-size: 18px;
      line-height: 1.6;
      background-color: #f0f0f0;
      padding: 10px;
    }
    a {
      color: blue;
      text-decoration: none;
    }
    a:hover {
      text-decoration: underline;
    }
  </style>
</head>
<body>
  <h1>Welcome to HTML Styling</h1>
  <p>This is a paragraph with a background color and padding. HTML styles make your webpage look better!</p>
  <a href="#">Learn more about HTML styles</a>
</body>
</html>

Try It Now

Best Practices for Styling

  1. Use External Stylesheets:
    • Keep your styles in a separate CSS file for better organization and reusability.
  2. Avoid Inline Styles:
    • Inline styles can clutter your HTML code and make it harder to maintain.
  3. Use Classes and IDs:
    • Apply styles using class or id attributes for greater flexibility.
    • Example: 
      <p class="highlight">This paragraph has a special style.</p>

      Try It Now

      .highlight {
  color: red;
  font-weight: bold;
}

      Try It Now

  4. Responsive Design:
    • Use CSS properties like max-width and media queries to make your webpage responsive on all devices.

Practice Exercise

Create a styled webpage using these requirements:

  • A heading with blue text.
  • A paragraph with a light gray background and 20px padding.
  • A link that changes color when hovered over.

HTML styles play a crucial role in making your webpages visually appealing. By using CSS effectively, you can create beautiful, maintainable, and user-friendly designs.