What is CSS and how does it work?

Konfinity
August 2,2020 - 10 min read
what is css and how do we use it

CSS stands for Cascading Style Sheets. It is used together, with HTML and JavaScript, in most websites to create user interfaces for web applications and user interfaces for many mobile applications.

So what exactly does it do?

It is a style sheet language, which is used to describe the look and formatting of a document written in markup language, typically HTML. We use it to define styles for web pages, including the design, layout and changes in display for different devices and screen sizes.

CSS saves us a lot of work and time! It can control the layout of multiple web pages in one go i.e. the same CSS can be applied to multiple HTML pages simultaneously.

CSS is applicable to all major browsers and allows us to control

  • Color
  • Fonts
  • Position
  • Spacing
  • Size
  • Decorations
  • Transitions
  • Please note that CSS is case-sensitive so be careful with your capitalization.

A look at CSS syntax

A CSS rule-set consists of a selector and a declaration block. The selector is the selected block for which the CSS must be applied and the declaration block declares various attributes in key value pairs. The keys are attributes mentioned above like font-size, color, background etc.

The syntax looks like follows:

p { color: red; text-align: center; }

The above code block denotes that the all <p> elements will be center-aligned, with a red text color. The type of selector used in the above code is known as Element Selector. The element includes all the tags we use, for eg, <p>, <li>, <h1>, <body>, etc.

Look at the complete code and see what effect is there on the actual HTML after CSS is applied. Consider that the element selector is defined by simply writing the tag-name as follows:

<html> <head> <style> p { text-align: center; color: red; } </style> </head> <body> <p>The whole content within "<p>" tags will be affected.</p> <p id="para1">Me too!</p> <p>And me!</p> </body> </html>

To see how it looks, save the above file as index.html and open it in your browser. Once you open it, you will be able to see your output in the article section.

In the above example, we used a <p> tag, which will be applied to all the <p> tags, but if we want to apply CSS only to a specific <p> tag, we can use id selector by using the following syntax:

#para1 { text-align: center; color: red; }

The above CSS will only be applied to those blocks whose id is para1. id is given externally for all the elements within the HTML file. The id is selected by writing a # before id_value as defined externally in the HTML file.

To understand it more clearly, look at the following code:

<!DOCTYPE html> <html> <head> <style> #para1 { text-align: center; color: red; } </style> </head> <body> <p id="para1">Happy coding!</p> <p>This paragraph is not affected by the style.</p> </body> </html>

Consider that we have defined the id_value to be para1 and to denote it in CSS, we write a # before the id_value.

To see its output, modify your index.html file and copy the above code into it and open it in your browser.

There is another way to choose a selector block. This is known as Class Selector. Class is the property for each element which we need to define externally. The class-selector is denoted by a “.” before the class-name.

To define a class, the syntax is as follows:

<p class="myPara">paragraph</p>

To understand, look at the following code:

<!DOCTYPE html> <html> <head> <style> .change { text-align: center; color: red; } </style> </head> <body> <h1 class="change">Css applied to heading</h1> <p class="change">Same CSS applied to the paragraph and the heading</p> </body> </html>

Consider that the class we have defined has the value change and to define CSS we write a “.” before the class_value which is the change in this case.

This was a brief overview of CSS and how it works. Using CSS you can define your content’s style and how it is organized with ease and make changes without having to rewrite your entire web site.

Konfinity’s online coding courses, curated by our team from IIT Delhi, are trusted by students and graduates from IIT, DTU, NIT, Amity, DU and more. We'll help you launch a lucrative tech career and get you started by helping you get placed in a high paying job. No coding background required. You can learn more about how CSS is used to create software applications in our Web Development Course

Chat with us on WhatsApp