Coding Newbie

programmer, programming, code-1653351.jpg

What is CSS and why is CSS so important?

Although HTML is a first step into coding for most of us, we can say that true fun starts with CSS. How important is CSS actually? What is it, and why it is vital to understand it?

What does CSS stands for?

CSS stands for Cascading Style Sheet. Unlike HTML, which represents the structure of a website, we use CSS for styling of web pages. With CSS, we determine the layout and appearance of the website. Without it, it would be just plain text and images.

HTML is a language of website structure, while CSS is a language of website style.

How important is to understand CSS?

We can say that CSS is an essential part of web development.

Although CSS is not a programming language by default, it is not easy to master. However, it is a crucial language to learn if you wish to learn web development.

The best way to understand the importance of CSS is to compare a website layout with, and without CSS. This is the best approach to recognize the power of CSS.

Stackoverflow website with CSS
Stackoverflow website with CSS
Stackoverflow website without CSS
Stackoverflow website without CSS

As we can see in example above, CSS is what makes websites as we know them today. Thanks to CSS, web pages are not the gathering of plain, unstyled text, because CSS makes pages more enjoyable to visit and easier to read and understand by users.

How does CSS syntax look?

CSS is essentially structured from CSS blocks.

Each declaration block consists of a selector, and a set of declarations, positioned within curly brackets. Each declaration is a property-value pair:

CSS syntax declaration

By following these basic rules, we can target and style any html element. Our selector can be a paragraph (p), a link (a), headings (h1), a declared class or id, etc. Properties are font-size, color, background-color, width, height, etc.

What is the Cascading part of the name?

Cascade is what determines which style will apply on some HTML element, when multiple styling rules are present. It represents a rule to solve a problem, when two contradictory styling commands are applied to the same element.

Cascading means that in the case of two CSS rules, the one that comes last will be applied.

For example, if we declare the color of paragraph two times, the later color will be the active color:

Cascading rule example

What are some benefits of CSS?

CSS saves time and energy.

Before CSS, styling had to be repeatedly written on each web page. With CSS, we can target all the paragraphs, links, or any other element at once, with a single command.

CSS allows us to easily change the entire website with just one file.

CSS today is mostly written in a separate document. This way, just by applying different CSS files, you can completely change the look of an entire website.

With CSS, the code loads faster.

Before CSS, each HTML tag attribute had to load every time the page loads. After applying CSS, we can target multiple HTML tags with one CSS declaration, there is less code to load, so pages load much faster.

It is possible to adapt styling for different screen sizes.

With modifying styling declarations for different screens, we can make websites more transparent on various devices.

Conclusion

CSS is a language that allows you to specify how your web document will look. After you define the page structure using HTML, you can use CSS to set styling rules, which will allow you to create a great looking website.

CSS changed the complete look of internet, because before its invention, the internet was full of mostly plain and simple websites. CSS introduced the styling of web pages and added a new dimension to web development.

Today, we often use CSS together with HTML and JavaScript.

If you wish to learn more about HTML, the language of web structure, you can read it in the article “What Is HTML? Completely Understand HTML Basics”.

If you have interest about what JavaScript is, please feel free to read the JavaScript article.

%d bloggers like this: