What is CSS and how does it work?

CSS is a language of front-end development technology for styling the documents created with HTML. Its primary role is to improve the attractiveness of our webpages by applying styles. The primary function of HTML is to create simple webpages with only a white background and black text, while CSS improves their appearance and makes them more engaging by applying different colors. Without CSS, a website appears ugly. CSS turns a simple webpage into an engaging one.

How CSS works

We use CSS to style various elements, such as paragraphs and buttons. We can style a specific property in this way.

propertyName: value

background-color: yellow;

CSS Selectors

A selector is the method to select elements to be styled. The most used are

i. element selector: We use this method to select an element by its tag name. Since text is left-aligned by default, I want to center the heading.

h1{ 
 text-align: center;
}

ii. id selector: The id is a unique name for each element. We assign this id as an attribute to HTML tags.

For instance, I have many paragraph tags, but I want to change the color of Sunday to red. Here, I want to style only one element in a specific way. I will assign an ID to the < p> tag containing ‘Sunday’. To select id of an element, we use the # symbol before id name.

<p>Friday</p>
<p>Saturday</p>
<p id="holiday">Sunday</p>
<p>Monday</p>

#holiday{
  color: red;
}

iii. class selector: The class name is not unique to a single element. We can assign the same class name to multiple elements to assign the same styling to all elements together, rather than writing it again. The “.” symbol is used to select a class name.

For instance, I have different subjects in a p tag, and I will give the easy subjects a green color using a class selector.

<p>Physics</p>
<p>Chemistry</p>
<p class="easy">Math</p>
<p>Biology</p>
<p class="easy">Statistics</p>
<p class="easy">Differential Equation</p>

.easy {
  color: green;
}

I know CSS has many properties. But it is not essential to learn each one of them. I believe in learning only what matters, not everything.