CSS Unveiled: A Step-by-Step Guide for CSS Beginners

3 min readSep 23, 2023

What is CSS exactly?

I have discussed all about HTML and its elements in my previous blogs. But HTML just is not enough for frontend web development.CSS stands for Cascading Style Sheets. It is a styling language used alongside HTML to beautify the HTML content.

It handles all the looks and animations used by HTML elements. Furthermore, it defines how the HTML element will look, including its font, colors, layout and other visual properties. It provides you with a set of rules and syntax to target and modify a certain element or similar group of elements.

Types of CSS

1. Inline CSS

It is the less used type of CSS. It is CSS used on a particular HTML element and has the highest priority over other types of CSS. Likewise, it is defined within style attribute of the element.

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

2. Internal CSS

It is the more used type of CSS. It is CSS used on the same HTML file and used only if the CSS is specific for that webpage. Likewise, it is defined within style tag inside head tag.

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

  <body>
    <p> This is a paragraph </p>
  </body>
</html>

3. External CSS

It is quite similar to the internal CSS. It provides more flexibility and usability to the webpage. It is the most used type of CSS and is used in the external file with file extension css. You can paste the CSS code inside style tag inside this file and have to link the HTML and CSS file using link tag with the relative path of the CSS file as value of href attribute.

Filename: style.css

p{color:red;}

Filename: index.html

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

  <body>
    <p> This is a paragraph </p>
  </body>
</html>

Selectors in CSS

In CSS, selectors are used to target specific HTML elements and apply styles to them. Selectors allow you to specify which elements on a web page should be affected by the CSS rules you define. Here are some commonly used CSS selectors:

Element Selector: Targets elements based on their HTML tag name. For example, to select all <p> (paragraph) elements, you would use the selector p.
Class Selector: Targets elements based on their class attribute. Classes are defined using the class attribute in HTML and are denoted by a leading dot (.) in CSS. For example, to select all elements with the class "my-class", you would use the selector .my-class.
ID Selector: Targets a specific element based on its ID attribute. IDs are defined using the id attribute in HTML and are denoted by a leading hash (#) in CSS. For example, to select the element with the ID "my-id", you would use the selector #my-id.
Attribute Selector: Targets elements based on their attribute values. You can select elements based on specific attributes, attribute values, or attribute value prefixes or substrings. For example, to select all <a> (anchor) elements with a target attribute, you would use the selector a[target].
Descendant Selector: Targets elements that are descendants of another element. It involves selecting an element within another element. For example, to select all <span> elements that are descendants of <div> elements, you would use the selector div span.
Child Selector: Targets elements that are direct children of another element. It involves selecting an element that is an immediate child of another element. For example, to select all <li> (list item) elements that are direct children of <ul> (unordered list) elements, you would use the selector ul > li.

This concludes the basic of CSS. I will discuss more about CSS values and properties in the next blog.