So far we’ve worked with HTML alone.

While HTML forms the backbone of web content, the need for customization and visual appeal leads us to Cascading Style Sheets (CSS). CSS is a web standard designed for styling HTML elements, allowing us to control the presentation and layout of our web pages.

CSS Rule Example

Here’s a basic example of a CSS rule that styles paragraph tags:

p {
  color: red;
}
  • Selector (p): Identifies the HTML element to which the styling rules will be applied.
  • Declaration Block ({ color: red; }): Contains one or more declarations. Each declaration comprises a property (color) and its corresponding value (red).

Applying CSS

CSS can be applied in various ways:

1. Inline Style

<p style="color: red;">This is a red paragraph.</p>

2. Internal Style (Within HTML Document)

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

3. External Style (In Separate CSS File)

<head>
  <link href="style.css" rel="stylesheet" />
</head>

Multiple CSS Rules

You can list multiple CSS rules to apply different styles to various elements:

p {
  color: red;
}

a {
  color: blue;
}

A selector can target one or more items:

p, a {
  color: red;
}

Selectors and Spacing

Selectors can target one or more items, and spacing is insignificant in CSS:

p,a {
  color: red;}

p,a {              color: red;
         }

Best Practices

  • Each declaration in the declaration block should end with a semicolon (;).
  • Proper indentation and spacing enhance readability but are not required by the browser.

Understanding these fundamental concepts equips you to enhance the visual aspects of your HTML documents using CSS. As you delve deeper, you’ll discover the versatility and power CSS brings to web development. Stay tuned for more insights into advanced CSS techniques and best practices.

author avatar
Maria Lorena Assistant Professor II
See Full Bio

Categorized in:

Technology,