Search for Courses, Topics

CSS Full Form

Learn about CSS.

22 Dec 2021-11 mins read

Overview

CSS stands for Cascading Style Sheets. It describes how HTML elements should be displayed on screen. It is a powerful tool for web designers to change the design and control over web pages that how it should be displayed. It is supported by all browsers and is designed primarily to separate the document content from document presentation.

Scope

  • In this article, we will study about CSS, its usage and diffrent ways of using CSS.

Introduction

So you have learnt how to use HTML, which is like bones and organs of a web page, but how do you add the skin and accessories to make it stylish? That is where CSS comes in.

What does CSS stand for?

CSS stands for Cascading Style Sheets let’s try to understand what that means exactly by breaking it down.

Style : This is the easiest part , as mentioned before CSS deals with the styling of a web page hence the part ‘style’.This includes simple changes in font,color,layout etc to complex animations as well

Sheets : Say you are building a house and to tell the builder what type of paint you would like to use,the type of tile pattern, door design etc you write them all in a planner and give it him and the builder implements them. Similarly you write how you would like to style a file in a sheet using CSS , and the browser implements it. The file here is what we mean by sheet and it is usually called style sheet.

Note : Sometimes you don’t need a separate file to apply CSS more on this can be seen in the section Ways to apply CSS to HTML docs

Cascading : If you search for the word cascade in the dictionary one of the meanings would be a waterfall over step-like rocks . Let’s say there are 55 steps and there’s a pebble at the bottom step and when the water goes over each step it brings in a different kind of sand so each time water from a step flows over the pebble the previous step’s sand is removed and it’s own sand is deposited on it and finally the one from the lowest step would remain it means here the lowest step has the highest importance. Similarly on a particular element in a page there may be different styles applied, and all of them have different importance similar to the placement of steps in the previous example, the styles are said to be cascading over an element and the most important style is applied on the element.

Note: CSS stands for Cascading Style Sheets. It is used to style a webpage.

Ways to apply css to HTML docs

There are three ways to apply CSS to a HTML document.

  • Inline
  • Internal
  • External

Inline CSS

In inline css we use the keyword style as an attribute in an html element and specify the style properties.The properties will then be applied on that specific element.

Syntax:

<tagname style = “ property-name : property-value”> content </tagname>

Example:

<h1 style="color: mediumvioletred;">Scaler Topics</h1>

Explanation: Here we are trying to style a h1 element. We have used the attribute style in it and specified the value mediumvioletred for the property color.This will change the color of the text, as seen in the output.

Output:

Example Output 1

Internal CSS

In internal CSS we use the <style> tag and write the styles needed inside it. We can write them in the html file which has the elements we wish to modify. The <style> tag can be used inside head and body of the html file.

Syntax :

<style>
--- required styles--
</style>

Example :

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<style>
			body {
				background-color: black;
			}
			h1 {
				color: mediumvioletred;
			}
			h2 {
				color: powderblue;
			}
		</style>
	</head>
	<body>
		<h1>Welcome!!</h1>
		<h2>This is Scaler topics!</h2>
	</body>
</html>

Explanation:

  • Here we have used the <style> tag inside the head part of the html file.
  • We are defining the style properties for three elements body,h1,h2.
  • For body we have defined the background color property and for h1 and h2 we have defined the color property.
  • These style properties which we have defined are being applied on the elements as can be seen in the output.

Output:

Internal CSS example

External CSS

  • This is the most common and preferred style of applying CSS in HTML.
  • We create a file with the extension .css , write all our styles in it and use this css file in an HTML to apply the CSS rules written by us.
  • Using this approach improves readability as CSS and html are in separate files
  • To use this style sheet in an HTML file we should link it in the head section of it by using the link tag as shown below:

Syntax

<head>

  //if the css file is in another folder then
  //the href must contain the path to the file
  
  <link rel="stylesheet" href="nameOfTheSheet.css"> 
  
</head>

Example

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <h1>Welcome!!</h1>
        <h2>This is Scaler topics!</h2>
    </body>
</html>

CSS

body {
    background-color: black;
}
h1 {
    color: mediumvioletred;
}
h2 {
    color: powderblue;
}

Explanation:

  • We have seen a similar example in the previous section Internal CSS, here we are going to use the External CSS approach.
  • We write all our styles in an external file and name it with a .css extension, in this case it has been named styles.css
  • This styles.css in linked to our html file in the head tag by using the link tag.
  • Inside the link tag we specify that it is a stylesheet in the rel attribute and give the path to the stylesheet href attribute.

Output:

external css

Note: CSS can be applied to HTML in three ways : Inline, Internal, External (recommended way).

CSS Syntax

The CSS syntax has three parts selector, property and value.

Selector: The CSS selector tells the browser on which html element the styling should be applied on. There are different CSS selector like:

  • class selector - selects elements with a particular class name.
  • id selector - selects elements with a particular id name.
  • type selector - selects elements of a particular element and many more.

Property and value : CSS has certain properties like background-color, border, font-size and many such properties and a value can be defined for these based on how we want an element to be styled .

Syntax:

selector {
Property : value;
}

Syntax Explanation: The CSS property and value come as a key : value pair , an element may have a CSS property say color and we can give its value say blue and this color will then be applied on the element we have selected using selector.

Example:

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <h1 class="header">Welcome!!</h1>
        <h2 id="sub-header">This is Scaler topics!</h2>
    </body>
</html>

CSS

body {
    background-color: black;
}
.header {
    color: mediumvioletred;
}
#sub-header {
    color: powderblue;
}

Explanation:

  • We have already seen the CSS syntax in the example under Internal and External CSS, there we have used type selectors body,h1,h2 and defined the CSS rules inside them
  • In this example we slightly modify it and use class, id selectors.
  • We have added the class header for the h1 tag and sub-header for the h2 tag, and to use these in the CSS file we must follow some syntax rules to select a class we must use the . and for an id # that is why we use .header and #sub-header here

Output:

css syntax

Note: CSS syntax has three parts CSS selector, CSS property and its value.

CSS version release

Several CSS versions have been released ever since the introduction of CSS, but there are majorly three versions CSS1, CSS2 and CSS3. Each version build on the last one with some added features and enhancements. Currently CSS3 is the recommended version by W3C and it is the one in popular use.

CSS1 : CSS1 was the first official W3C Recommendation. It was published in December 1996. It supported simple visual formatting such as Font propertie,Color of text, backgrounds, and other elements, text attributes etc.

CSS2 : CSS2 was made the official W3C recommendation in May 1998 and it is build upon CSS1 with additional support for absolute, relative, and fixed positioning of elements and z-index property etc.

CSS3 : CSS3 is the latest and currently recommended version. It was published as a W3C recommendation in June 1999 and is based on the older CSS versions. CSS 3 is divided into several separate documents called "modules". Each module adds new capability or extends features defined in CSS 2.

CSS version release

There are three CSS versions CSS1,CSS2,CSS3. Currently CSS3 is the recommended and most used one.

Frameworks of CSS

A CSS framework can be thought of as a collection of style sheets which have some common web designs, say a menu, button , navbar etc . These are ready to use and can be customized if necessary. It’s kind of like how you can order a ready-made dish and all you need to do is heat it and add your own spices to eat it. Currently (2021) the trending CSS frameworks are :

  • Tailwind CSS
  • Bootstrap
  • Bulma CSS
  • Foundation CSS
  • Pure CSS
  • Skeleton CSS
  • Materialize CSS
  • Semantic UI
  • UIKit

Using frameworks saves from reinventing the wheel and helps us save development time. Though it is recommended that beginners should not jump directly into using frameworks and spend time practicing with just the basics and plain css initially.

section{.tip} Note:** CSS frameworks are libraries which have ready to use CSS code

Features/Characteristics of CSS

  • Maintenance : Easier to maintain since all the styling is contained in separate files (in external CSS) and style changes in just one place are reflected in the entire web page
  • Time Saving : We can reuse the CSS styles thus saving time. The same style sheet can also be used for different HTML pages just by adding a link to it.
  • Separation of business and presentation logic : CSS helps us in separating the presentation logic from the business logic.
  • Offline support : CSS can be stored locally with the help of cache so the web pages can be viewed even when offline.
  • Several properties : CSS has a wide range of properties for styling which can help create a visually appealing web page
  • Multiple Frame works : There are many frameworks in CSS which makes developers life easy. Example: Bootstrap,Bulma etc

Takeaway:

Take away can be in graphical form

features of css

Why use CSS

  • Styling with HTML is cumbersome : Before CSS, HTML tags and attributes were used for styling and the larger the website the more cumbersome it was. Introduction of CSS made styling of web pages better and easier.
  • Maintenance of the application is easier with CSS.
  • Writing in CSS saves time and effort because of reusability of code used for styling an html element.

Note: CSS makes styling for complex websites simple.

Advantages of CSS

  • Multiple Device Compatibility : CSS is compatible with all devices be it desktop, mobile etc.
  • Better than HTML styling : Styling with CSS is far less cumbersome and better than with HTML
  • Easy maintenance : Easier to maintain since all the styling is contained in separate files and style changes in just one place are reflected in the entire web page
  • Faster page loading: Page loading is faster with CSS since multiple pages share the same formatting it reduces file transfer size which helps pages load faster
  • Time Saving : We can reuse the CSS styles thus saving time. The same style sheet can also be used for different HTML pages just by adding a link to it.
  • Browser support : CSS supports almost all the latest browsers like Chrome,Safari,Firefox etc.

Takeaway:

advantages of css

Disadvantages of CSS

  • Cross browser issues : CSS works differently with different browsers so the developers needs to check whether the code for one browser is consistent with the others as well
  • Lack of security : CSS doesn’t offer much protection and hence leaving it vulnerable
  • High chance of confusion : As we do more and more styling to the application we might start using various levels of specificity, inheritance and cascade on the html elements.This might lead to increasing confusion.
  • Unexpected behaviour : CSS has some unexpected behaviour in cases such as collapsing margins, fragmentation etc , developers need to be careful in such cases to avoid pitfalls

Takeaway:

Disadvantages of css

Conclusion

  • CSS is used to style a webpage.
  • CSS stands for Cascading Style Sheets.
  • There are three ways to add CSS to a HTML file Inline, Internal and External. Adding external is the recommended way
  • CSS3 is widely used version of CSS
  • There exists many CSS frameworks most popular ones are Tailwind CSS, Bootstrap and Bulma CSS.
  • Most of the apps/sites you see on the web have been styled with CSS.Some examples include: Google products like its search engine,Gmail,Gdrive,YouTube and so on E-commerce sites like Amazon,Flipkart Social Media sites like Twitter,Insta etc.