What is CSS? – The Style Statement of the Internet

In this article, we discuss What is CSS? – The Style Statement of the Internet

What is CSS? – The Style Statement of the Internet

What is CSS? – The Style Statement of the Internet
What is CSS? – The Style Statement of the Internet

What is CSS? – The Style Statement of the Internet

What is CSS? – The Style Statement of the Internet

Anybody who has used the internet has probably heard about the trio of –  HTML, CSS & JavaScript. While HTML and JavaScript handle the structure and dynamic elements of a webpage respectively, CSS is meant for how a website is stylised. In this ‘what is CSS’ article, we will be taking a brief look into the technology and achieve a general overview of ‘how it works?’

The following topics have been covered in this blog

  1. Introduction to CSS
  2. How CSS Cascades?
  3. Selectors
  4. Properties & Values

What is CSS?

CSS stands for Cascading Style Sheets. CSS is a technology proposed and developed by the World Wide Web Consortium, or W3C for short. It was released to help free web-developers from the tedious process of inline styling and make styling a separate entity in itself. Today, if you were to download the excerpt of a functioning web-page, you will find a lot of files and folder, but the three major elements are HTML, CSS and JavaScript. I’ll explain what each does in short.

  1. HTML – Provide the structure to the website. Think about it like the skeleton of your body.
  2. CSS – Style. The clothes you wear, the way you wear them can be thought of as a simple analogy of CSS.
  3. JavaScript – Making the webpage come alive. Everything that you see moving on a website – from the simple animation of a button-press to detailed gaming animation. That’s the job of JavaScript.

Before CSS was released, there was only HTML and JavaScript. Developers would have to sit and style each individual element, which happens to be not only tedious but also a cumbersome process. Today, with the help of CSS, enterprise-level websites can be stylised in a matter of hours. This is due to the cascading nature of CSS.

So let’s take a moment to understand how CSS cascades.

What is CSS? – The Style Statement of the Internet

How Does CSS Cascade?

CSS brought about a revolution in web-development and how people perceive the process of building a website. Prior to the existence of CSS, elements had to be styled in an in-line fashion or the style were implemented in the head section of an HTML page. changed due to the cascading nature of CSS. Here are the three major ways CSS cascades:

  1. Elements –  The same CSS style can be applied to multiple elements to achieve the same style.
  2. Multiple Style One Element – Multiple styles can be applied to a particular HTML element to achieve a unique style.
  3. Same style, Multiple Pages – The same stylesheet can be applied to different HTML pages altogether to achieve a template styling very quickly.

Now, let’s take a look at a very important concept of CSS, selectors.

Selectors

Selectors, as the name suggests is a way to target specific HTML elements for styling purposes. If you are well versed with HTML, you will remember the two special attributes that can be added to any HTML elements i.e. ID and CLASS. With the help of these two attributes, CSS can be targeted at specific elements.

Let’s understand the fundamentals of these two selectors:

ID – An ID is unique. A particular ID can be only assigned to a single element. IDs are used when specific styling is being tried to be achieved over a single element. Below is a pictorial example of how to use an ID.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>

</body>
</html>

OUTPUT

What is CSS? – The Style Statement of the Internet
What is CSS? – The Style Statement of the Internet

What is CSS? – The Style Statement of the Internet

Class – Just like the word suggests, a class is a collective way of targetting HTML elements for styling. Classes are not unique and multiple elements can have the same class. In fact, multiple classes can also be added to the same element to achieve the desired style and look. Below is an example of the usage of classes.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>
<p class="center">Red and center-aligned paragraph.</p> 

</body>
</html>

OUTPUT

What is CSS? – The Style Statement of the Internet
What is CSS? – The Style Statement of the Internet

What is CSS? – The Style Statement of the Internet

Properties & Values

Ok, so we have read about how CSS selects elements on an HTML page. In this section, we will be addressing how CSS is written. Below is a picture of an example of CSS code.

What is CSS? – The Style Statement of the Internet
What is CSS? – The Style Statement of the Internet

So if you look at the above image, you will notice that the styling commands are written in a property & value fashion. In the picture above, the property is font-color while the value is yellow. The CSS syntax also incorporates a statement terminator in the form of a semi-colon ‘;’. The entire style in then wrapped around curly braces and then attached to a selector(.boxes here). This creates a style that can be added to a style sheet and then applied to an HTML page. This is how CSS is written everywhere.

Now, there are a lot of properties and they can have a host of values. It’s almost impossible to cover all of them in a single write up

This brings us to the end of this “What is CSS” blog. I hope you have a general idea of what is CSS, why it is needed, and how it works.

Source: Various

Also Check out How To Create a Fixed Social Bar

If you interested in the Entertainment genre please check this also thebiographys.com

cascading style sheets,cascading style sheets overview,html5 and css3,introduction to cascading style sheets,webkit css,what is css,what is css and html,what is css and its types,what is css bootstrap,what is css class,what is css em,what is css float,what is css html,what is css id,what is css in html,what is css margin,what is css padding,what is css positioning,what is css selector,what is css z-index,what is css3

Related Posts

One thought on “What is CSS? – The Style Statement of the Internet

Leave a Reply

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

How to Protect yourself from CovidVaccination saves lives at every stage of life
  • Clean your home regularly, particularly frequently touched surfaces like
  • Stay home stay safe. Follow the Golden Rule. Wash your hands frequently with soap and water or use alchohol based hand-rub.
  • Stay home stay safe. Stay physically fit. Exercise regulary. Eat a nutritious diet. Don’t smoke.
  • Stay home stay safe. If you show symptoms of COVID-19, self isolate yourself, wear a mask around others and seek medical advice