Home /Blog/ Introduction to CSS 🚀

CSS, Fundamentals, HTML

Introduction to CSS 🚀

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.

Raman Singh

Raman is a digital marketing expert with over 8 years of experience. He has a deep understanding of various digital marketing strategies, including affiliate marketing. His expertise lies in technical SEO, where he leverages his skills to optimize websites for search engines and drive organic traffic. Raman is passionate about staying up-to-date with the latest industry trends and sharing his knowledge to help businesses succeed in the online world.