CSS Tutorial

Applying CSS

CSS (Cascading Style Sheets) allows you to style your web pages, controlling their appearance and layout. Here's how you can use CSS effectively:

Inline Styles:

  • Add styles directly to HTML elements using the style attribute.
  • Example: <p style="color: red;">This text is red.</p>

Embedded Stylesheets:

  • Define styles within the <style> element in the <head> of your HTML document.
  • Example:
    <head>
  <style>
    body {
      font-family: Arial, sans-serif;
    }
  </style>
</head>

External Stylesheets:

  • Create a separate CSS file, link it to your HTML using the <link> element.
  • Example:
    <head>
  <link rel="stylesheet" href="style.css">
</head>

Note: External stylesheets are preferred as they allow for easy maintenance and reuse of styles.

Example:

To apply a background color and font size to a paragraph, you can use the following CSS:

p {
  background-color: #f0f8ff;
  font-size: 1.2rem;
}

Tips for Accessibility:

  • Use semantic HTML elements (e.g., <h1>, <h2>) for structure and meaning.
  • Provide text alternatives for images and other non-text elements.
  • Choose colors and fonts that are easily readable.