Basic uses of CSS

1. Styling Text

CSS is used to style text, such as changing colors, font sizes, and alignment. Example:

This text is styled with inline CSS.

2. Adding Backgrounds

CSS can add backgrounds to elements, like colors or images:

This paragraph has a highlighted background using a class.

3. Styling Links

CSS can style links and add hover effects:

This is a styled link

4. Creating Layouts

CSS helps in creating layouts, such as setting dimensions and alignment:

Styled Box

5. Types of CSS

CSS can be added in three ways:

  • Inline CSS: Inside the style attribute of an element.
  • Internal CSS: Inside a <style> tag in the HTML.
  • External CSS: In a separate file linked to the HTML.

6. External CSS Example

Create a file named styles.css and add the following:

/* styles.css */
body {
    background-color: #f0f0f0;
    color: #333;
}
h1 {
    color: #4CAF50;
}

Link it to your HTML file using:

<link rel="stylesheet" href="styles.css">

Resources to Learn More