amitguptablogs-how-css-works

How CSS works?

Have you ever wondered how a website becomes so beautiful and amazing? Are you amazed by the design and animation of that website? Then the answer is Cascading Style Sheet or CSS. CSS like a magic wand transforms the plain and boring structure of your HTML into a stylish and interactive design. In this article, let us understand how CSS works. I will try to explain the way of working on CSS engagingly and easily.

What is CSS?

CSS is a short form of Cascading Style Sheets, a stylesheet language, that is used to design the webpage to make it more attractive. As we know HTML is just a skeleton of a webpage, it is CSS that a meaning.

The full form of CSS is Cascading Style Sheets. Its job is to give style to web pages— color, font, layout, and even animations! HTML is just a skeleton of a webpage. With the use of CSS, the webpage gets its color, interaction, animation, and styles. The CSS describes each HTML element and how it is going to be rendered on the screen.

HTML:

<p>This is a skeleton html content.</p>

CSS:

p {
    color: blue;
    font-size: 16px;
}

Result: You will see the above paragraph in ‘blue’ color with a font-size of 16px.

This is skeleton content.

What are the 3 concepts upon which CSS works?

There are three basic concepts of CSS:

  1. Selectors
  2. Properties and Values
  3. Cascade Rule

Selectors

HTML elements like p, H1, img, div, etc. are known as CSS selectors. CSS tells the browser which HTML elements should be selected to have the CSS property values.

CSS:

h1 {
    color: red;
}

Here, selector ‘h1’ would style all h1 elements of the web page in ‘red’ color.

There are four types of selectors:

  1. HTML tag selectors
    • A tag name or element selector selects an HTML tag/element in your document.
  2. Class selectors
    • These selectors select everything in the document with that class applied to it. These selectors are case-sensitive and start with a dot (.) character.
  3. ID selectors
    • The ID selector works the same as class selectors. But, it can be defined once for an HTML element. It is also case-sensitive but starts with # character.
  4. Universal selector
    • There is another selector called the universal selector. It is denoted by an asterisk (*). It selects everything in the document.

Properties and Values

There are many properties applicable to the selectors like font size, color, position, animation and so on. Each property has its own values that define the selector and how it will appear on the screen.

p {
    font-size: 20px;
    color: green;
    position: fixed;
}

Here, element ‘p’ has been styled with some properties and their relevant values. Like, how much would be the font size of paragraph content, what would be the text-color and how it is positioned on the screen.

Cascading Rule

“Cascading” means priority rules. Let’s understand this if multiple styles are being applied to an element, the browser will decide which style will take priority.

How to add CSS to your document?

To style your webpage, you have to tell the HTML document which CSS rule to apply on priority. There are 3 different ways through which you can apply your CSS on your HTML document:

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Inline CSS

Such styles are declared within an HTML tag. It styles only that particular HTML tag. This is written with style=”” attribute.

Example:

<p style="color: green;">This is an example of inline styling.</p>

Internal CSS

Internal CSS are being declared within <style>…</style> elements, that goes inside HTML <head></head> element.

Example:

<head>
  <style>
    body {
      background-color: lightyellow;
    }
  </style>
</head>

External CSS

External CSS styles are being declared in an external stylesheet file having a .css extension. This is the most common and useful practice of bringing CSS to a document. You can link a single CSS file to multiple web pages, styling all of them together with the same CSS stylesheet.

To link this external CSS to your HTML document, you have to link this external stylesheet to your web page’s index.html file.

1. For the external CSS stylesheet, assume you have created a file with the name styles.css and its location is the same as that of your HTML document.

h1 {
  color: blue;
  text-align: center;
}

2. In an HTML document, you should write the following snippet within <head>…</head> section to create a link for your external CSS styles.css.

<link rel="stylesheet" href="styles.css" />

Result: Your browser will show your HTML document having the heading h1 in blue color and centre-aligned.

What are the 3 real-life use cases of CSS?

The three real-life use cases of CSS are- Responsive design, Animations, and Theming.

Responsive design

To make your website mobile-friendly, your website should be responsive to multiple devices. This can be achieved by the use of media-queries.

@media (max-width: 768px) {
  body {
    font-size: 14px;
  }
}

Animations

You may also want your website to be interactive and engaging to make it more attractive.

div {
  animation: move 2s infinite;
}

@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}

Theming

There can be multiple themes for your website. Popular of them are dark mode and light mode. It can be developed using CSS.

How can you learn CSS?

What are the benefits of learning CSS?

  1. To have the skill of making the websites attractive, interactive and engaging to have a better user experience
  2. If you are learning Web development, then CSS is the most essential ingredient
  3. You can do freelancing and can have better job opportunities after learning CSS.

Conclusion: The Future of CSS

CSS is an evolving technology, with new features (like CSS Grid and CSS Houdini) being added all the time. This is an essential skill if you want to become a web developer.

So what are you waiting for? Explore the magic of CSS and give a boost to your website!

Thank you for reading this article. Please let me know how are you using CSS in your profession in the comments section below.

Leave a Comment