All About CSS (Cascading Style Sheets), Top Features and How to Use it

If you have any experience in web development, you may have heard these three words – HTML, CSS, and Javascript. These are the core technologies of the World Wide Web, commonly known as WWW. HTML is a mark-up language used to design the structure while javascript makes a web page attractive. Cascading Style sheets, commonly known as CSS has a different role. Although a web page works fine with HTML and Javascript only. Have a look at the following image. It the homepage of amazon’s website.

Now, look at the image below.

This is the same homepage of amazon’s website but without CSS. Feel the difference. The web page looks so dull and unattractive. This is why CSS is used. CSS makes a web page attractive and the website actually looks like a website when CSS is there.

History of CSS

Hakon Wium Lie first proposed CSS in 1994. He was working with Tim Berners-Lee, the father of HTML at CERN. Many other styling languages were also proposed at that time. CSS2 came out in 1998 with better features such as absolute, relative, fixed, positioning, z-index, the concept of media type, bidirectional text, and new font properties such as shadows. The development of CSS3 started later that year, but it was never completed.

Syntax

The syntax of CSS is very simple and easy to learn. There are two parts of CSS rule-set – selector and declaration. Let’s understand the syntax of CSS with the help of an example.

p { 
color: red;
font-size: 20px;
}

<p> tag is the selector here. The declaration is written inside the curly brackets. In the example above, there are two declarations, separated by a semicolon. There can be any number of declarations.

A declaration has two parts – property and value. For example, color is the property and red is the value. Property and value are separated by a colon.

Selectors

What do you think the above CSS will do? Looking at the declarations, it will change the color to red and font-size to 20px. But what will be affected in the HTML by this? The selector defines what will be affected. In this case, we used p as a selector. This CSS will be applied to each <p> in the HTML file. There are different types of selectors that we can use in CSS. Let’s discuss them briefly.

Element Selector

Earlier, we used an element selector.

p { 
color: red;
font-size: 20px;
}

As discussed earlier, when an HTML element is used as a selector, it affects all those elements in the HTML.

ID Selector

We define id to an element using id attribute. Id can be given to any HTML element.

<p id="demo1"> CSS will be applied to this paragraph </p>
<p id="demo2"> CSS will not be applied to this paragraph </p>

Now we have two <p> tags – one with id “demo1” and second with id “demo2”. Let’s apply some CSS to the <p> tag with id “demo1” using id selector.

#demo1{
color: red;
font-size: 20px;
}

Instead of writing the element’s name, we used the id of the first <p> tag preceded by a number(#) sign. CSS will be applied to the <p> tag where id is demo1. The second <p> tag will not be affected.

Class Selector

Similar to id, we can also define a class for HTML element(s) using the class attribute. The only difference is, instead of the number sign, a single dot(.) is used.

.demo1{
color: red;
font-size: 20px;
}

The difference between id and the class selector is that usually, the id is unique for each element while a class can be the same.

Universal Selector

The universal selector is used to select every element in the HTML. It is denoted by a (*).

* {
color: red;
font-size: 20px;
}

Grouping Selector

Suppose, we want to apply the same CSS on multiple HTML elements. So instead of writing the same declarations for multiple elements, we can group them.

p, h1, h2{
color: red;
font-size: 20px;
}

CSS Combinators

We can also create combinations among selectors. There are four combinators in CSS.

Descendant Selectors

It is used to match all the elements that are descendants of a specified element. Space is used to specify a descendant selector.

div h2 {
	color: red
}

The CSS will be applied on all the <h2> tags that are descendant of any <div> tag in the HTML file. Every <h2> tag will be affected, regardless of how deep it is nested inside the <div> tag.

<body>
<h2> heading 1 </h2>

<div>
<h2> heading 2 </h2>
<section>

<h2> heading 3 </h2>
</section>
</div>

<h2> heading 4 </h2>
<h2> heading 5 </h2>
</body>

Every <h2> tag will be affected that is inside the <div> tag.

Child Selector

The child selector is used to apply CSS to all the selected child elements of an element. A greater-than (>) sign is used to specify a child selector.

div > h2 {
	color: red
}

CSS will be applied only to those <h2> tags that are direct children of the <div> tag.

<body>
<h2> heading 1 </h2>

<div>
<h2> heading 2 </h2>
<section>

<h2> heading 3 </h2>
</section>
</div>

<h2> heading 4 </h2>
<h2> heading 5 </h2>
</body>

There are two <h2> tags inside the div tag. But only “heading 2” will be affected because “heading 3” is not a direct child of <div> tag.

Adjacent Sibling Selectors

The adjacent sibling selector is used to apply CSS on the adjacent siblings of the specified element. A plus (+) sign is used for adjacent sibling selectors.

div + h2 {
	color: red
}

CSS will be applied only to that <p> tag that is the adjacent sibling of the <div> tag.

<body>
<hr>
<h2> heading 1 </h2>

<div>
<h2> heading 2 </h2>
</div>

<h2> heading 3 </h2>
<h2> heading 4 </h2>
<h2> heading 5 </h2>
<hr>
</body>

Only the adjacent sibling, i.e., heading 3 is affected.

General Sibling Selector

Unlike the adjacent sibling selectors, the general sibling selector is used to apply CSS on every sibling of the specified element. A tilde (~) symbol is used for the general sibling selector.

div ~ h2 {
color: red
}

Observe the following HTML code.

<body>
<h2> heading 1 </h2>

<div>
<h2> heading 2 </h2>
</div>

<h2> heading 3 </h2>
<h2> heading 4 </h2>
<h2> heading 5 </h2>

</body>

heading 3, heading 4 and heading 5 will be affected because these three are general siblings of the div tag.

CSS will be applied to all the <p> tags that are siblings of the <div> tag.

Different Ways of Using CSS

There are three ways in which we can use CSS.

External CSS

The idea of external CSS is to change the CSS of multiple files by making a change in only one file. The styles are written in an external file that is linked to the HTML files using proper syntax. The external CSS file should have a .css extension.

Suppose, we have styles.css file and we want to link it with an HTML file. All we have to do is add a <link> tag in the head of the HTML file.

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">  
</head>

To link the file, we used three attributes – rel, type and href. 

rel: It specifies the relationship between the linked document and the current document. It is required.

type: It specifies the media type of the document.

href: It specifies the location of the file.

Internal CSS

The internal CSS can be used to define unique CSS to a single HTML page. Unlike external CSS, there is no external file for CSS, instead, CSS is written inside the HTML file only. The style tag is placed between the head tag. Let’s understand this with the help of an example.

<html>
<head>
<style>
p { 
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<p>
This is internal CSS
</p>
</body>
</html>

Inline CSS

The inline CSS can be used to define unique CSS to an element in the HTML page. The style attribute is added to the element.

<p style="color: red; font-size: 20px"> This is inline CSS <p>

Inline CSS has higher priority over external and internal CSS.

Advantages and disadvantages of CSS

Advantages of CSS

Disadvantages of CSS

Conclusion

Without CSS, web development is not possible. CSS might look difficult in the beginning, but after learning a few concepts, CSS will feel very simple and easy. There are many options to apply CSS and we have discussed some of the most common ones.

Acodez IT Solutions is a web development and web design company in India, offering all kinds of web design services to our clients in India and abroad. We are also a digital marketing agency providing inbound marketing and digital marketing solutions to our clients at affordable prices. For more information, contact us today