The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Styling HTML Elements

Next ►
►

In this section, we will explore how to style HTML elements using CSS. Styling is a crucial part of web development as it enhances the visual appeal and usability of a website. We will cover various methods to apply styles to HTML elements and provide practical examples to illustrate these concepts.

Key Concepts

  1. CSS Syntax
  2. Applying Styles to HTML Elements
  3. Common CSS Properties
  4. Practical Examples
  5. Exercises

  1. CSS Syntax

CSS (Cascading Style Sheets) is used to style HTML elements. The basic syntax of a CSS rule consists of a selector and a declaration block.

selector {
  property: value;
}
  • Selector: Specifies the HTML element to be styled.
  • Property: The aspect of the element you want to change (e.g., color, font-size).
  • Value: The value assigned to the property.

Example

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

This CSS rule will style all <p> elements to have blue text and a font size of 16 pixels.

  1. Applying Styles to HTML Elements

There are three main ways to apply CSS to HTML elements:

  1. Inline CSS: Using the style attribute directly within an HTML element.
  2. Internal CSS: Using a <style> tag within the <head> section of the HTML document.
  3. External CSS: Linking to an external CSS file using the <link> tag.

Inline CSS

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

Internal CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Internal CSS Example</title>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>This is a styled paragraph.</p>
</body>
</html>

External CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>External CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>This is a styled paragraph.</p>
</body>
</html>

styles.css

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

  1. Common CSS Properties

Here are some common CSS properties used to style HTML elements:

Property Description Example Value
color Sets the text color red, #ff0000, rgb(255, 0, 0)
font-size Sets the size of the text 16px, 1em, 100%
background-color Sets the background color of an element yellow, #ffff00, rgb(255, 255, 0)
margin Sets the outer spacing of an element 10px, 1em, auto
padding Sets the inner spacing of an element 10px, 1em, 5%
border Sets the border around an element 1px solid black, 2px dashed red
width Sets the width of an element 100px, 50%, auto
height Sets the height of an element 100px, 50%, auto

  1. Practical Examples

Example 1: Styling a Heading

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Styling a Heading</title>
  <style>
    h1 {
      color: green;
      font-size: 24px;
      text-align: center;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
</body>
</html>

Example 2: Styling a Button

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Styling a Button</title>
  <style>
    .btn {
      background-color: blue;
      color: white;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <button class="btn">Click Me</button>
</body>
</html>

  1. Exercises

Exercise 1: Style a Paragraph

Task: Style a paragraph to have red text, a font size of 18px, and a background color of light gray.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercise 1</title>
  <style>
    /* Add your CSS here */
  </style>
</head>
<body>
  <p>This is a paragraph that needs styling.</p>
</body>
</html>

Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercise 1 Solution</title>
  <style>
    p {
      color: red;
      font-size: 18px;
      background-color: lightgray;
    }
  </style>
</head>
<body>
  <p>This is a paragraph that needs styling.</p>
</body>
</html>

Exercise 2: Style a List

Task: Style an unordered list to have a blue background, white text, and a padding of 10px.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercise 2</title>
  <style>
    /* Add your CSS here */
  </style>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</body>
</html>

Solution

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Exercise 2 Solution</title>
  <style>
    ul {
      background-color: blue;
      color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
  </ul>
</body>
</html>

Conclusion

In this section, we learned how to style HTML elements using CSS. We covered the basic syntax of CSS, different methods to apply styles, and common CSS properties. We also provided practical examples and exercises to reinforce the concepts. In the next module, we will delve into responsive web design, which is essential for creating websites that look great on all devices.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved