My Journey into the Basics of CSS for Beginners

Hello everyone! Today, I embarked on a journey to learn the basics of CSS, and I wanted to share my experience with you. CSS, or Cascading Style Sheets, is a style sheet language used to control the appearance of HTML documents. It allows us to create visually appealing web pages by defining styles for various elements.

What is CSS?

CSS is a powerful tool that separates the presentation of a web page from its content. It helps us maintain a consistent look and feel across multiple pages and makes it easier to update styles without changing the HTML structure.

Various ways to assign CSS and their precedence

I discovered that there are three main ways to assign CSS to an HTML document:

Inline styles: These are added directly to the HTML elements using the style attribute. For example:

  <h1 style="color: blue;">Hello World</h1>

Internal stylesheet: This involves adding <style> element within the HTML <head> section. For example:

  <style>
    h1 {
      color: blue;
    }
  </style>

External stylesheet: This method uses a separate .css file and links it to the HTML document using the <link> element. For example:

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

The precedence of these methods is: Inline > Internal > External. Inline styles have the highest precedence and will override internal and external styles.

What are selectors in CSS and how to use them?

Selectors are used to target specific HTML elements and apply styles to them. Some basic selectors I learned today are:

Element selectors: These target elements by their tag name, like h1.
Class selectors: These target elements with a specific class attribute, like .class_name.
ID selectors: These target elements with a specific ID attribute, like #id_name.
Descendant selectors: These target elements that are descendants of another element, like div p.
Child selectors: These target elements that are direct children of another element, like div > p.

Use of '!important' while defining property in CSS

Sometimes, we may need to give a style declaration the highest precedence. In such cases, we can use the !important rule. This will override any other declarations for that property on that element. For example:

p {
  color: blue !important;
}

I hope you enjoyed reading about my journey into the basics of CSS. If you have any questions or want to share your own experiences, please leave a comment below!

Questions for the readers:

Can you provide an example of using a class selector in CSS?
What is the main advantage of using an external stylesheet over inline styles?
How would you use a child selector to style only the direct children of a specific element?

Shiv's blog