10Nov 2023

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.

amazon with css

Now, look at the image below.

amazon without css

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

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

css 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

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
  • Internal CSS
  • Inline CSS

External 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

  1. CSS saves a lot of time – Editing the design of webpages across a website is a bit of a task when you have to edit multiple HTML files. With cascading style sheets, maintaining and updating a website is easily possible as you need to edit only a single stylesheet and the styles get applied to multiple pages simultaneously. This saves a lot of time for designers and developers working on it.
  2. It helps to make consistent and spontaneous changes – Using CSS, not only saves time bringing about spontaneous changes but also ensures consistency in design across the website.
  3. It improves the loading speed of the page – Applying styles to multiple web pages is made easy by externally linking a single CSS file to an HTML document. Thus, upon opening a website, CSS file is downloaded and cached by the browser. Hence, the file need not be downloaded every time users visit the web pages. This improves the loading speed of the page.
  4. CSS has the ability to re-position – The positioning property is an advantage of using CSS, that allows the element to be placed anywhere on the webpage.
  5. It has better device compatibility – CSS helps with compatibility by providing a flexible framework with a responsive design. This helps with ease of website accessibility for users with various devices.

Disadvantages of CSS

  1. There could be cross-browser issues while using CSS – What works for one browser may not necessarily work for others. This might cause compatibility issues.
  2. There are multiple levels of CSS such as CSS, CSS 2, CSS 3. This can create confusion for non-developers and beginners.
  3. Lack of security is one of the major disadvantages of the Cascading style sheet. It is vulnerable to being injected with malicious code like Cross-Site Scripting (XSS).
  4. CSS has limited control over layouts. In order to achieve certain specific layout details like adding multiple columns to the table, other tools like Flexbox or Grid need to be used.

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

Looking for a good team
for your next project?

Contact us and we'll give you a preliminary free consultation
on the web & mobile strategy that'd suit your needs best.

Contact Us Now!
Rajeesh PK

Rajeesh PK

Rajeesh P.K. is the Director and Creative Head at Acodez . With an experience of 10+ years in UX Design & User Interface Design, when coupled with his expert coding skills in HTML5, CSS3 and Javascript, makes him one of the top UX Architects in India, with more than 15 international awards to his credit.

Get a free quote!

Brief us your requirements & let's connect

Leave a Comment

Your email address will not be published. Required fields are marked *