CSS Display: A Detailed Explanation

“Hey! I heard that a new cafe downtown is serving doughnuts. Wanna go check it out?”
“Nah, I passed by it a couple of days back, and it looked super dull.”

When you set up a location for your business, be it physical or digital, you want it to attract consumers. Just like people would ignore aesthetically unappealing cafes, the same way they wouldn’t want to visit your dull and boring website either.

Even if you are not a coder, you might have heard of the term HTML. HTML, short for HyperText Markup Language, is a standard markup language used for creating web pages. It is often assisted via CSS (Cascading Style Sheets) and JS (JavaScript). You would have heard your web designers talk about CSS when you asked them to make your website more attractive. But what is this CSS? Do you really need these other languages to create your website? Why isn’t HTML sufficient? Read along to find out the answers to all your questions.

What is CSS?

When the World Wide Web was created in 1989, there was no intention of offering style to a webpage. The webpages were presented simply as hypertext, i.e., a collection of plain text, images, and links to other such hypertext pages. It wasn’t long before the notion of adding styling arose. However, instead of presenting a separate language for styling, HTML tags were introduced for formatting a web page.

Developing large websites created the requirement to add different fonts, colored backgrounds, and multiple styles to it. This made the developers rewrite the code within HTML, which turned out to be a long, painful, and expensive process. Programmers realized that this approach of formatting via HTML tags wouldn’t be feasible for long.

To overcome these and many such issues, Håkon Wium Lie, in the year 1994, proposed a standard way to design web pages. This idea later came to be known as Cascading Style Sheets or CSS.

CSS was developed by the World Wide Web Consortium (W3C) as a stylesheet language responsible for the visual element or, as you may call it, the look and feel of the website. It is now among the core languages of the open web and one of the cornerstones of creating a web page.

CSS – Version History

Since its origin in 1994, CSS has evolved from time to time over the years, and W3C maintained these versions as CSS1, CSS2, and CSS3.

1. CSS1
   The initial release of CSS came to be known as CSS1 and was adapted in 1996. It was difficult to use. So, the then-recent browsers such as Internet Explorer 3, Internet Explorer 4, and Netscape 4.x didn’t adapt to it very well.
2. CSS2
   CSS2 removed the not fully interoperable features of CSS1. It had many new features and included browser extensions as well.
3. CSS3
   CSS3 is the most recent and currently used standard of CSS. It has XHTML specifications with support for almost all recent browsers. Its major focus lies on modularisation and separation of concerns.

Where is CSS Used?

A document is usually created using a markup language like HTML. The relationship between HTML and CSS is strongly tied together as the two synchronize well. While HTML is the very foundation of a site, CSS is all about its aesthetics. CSS is often used along with HTML and JavaScript in most websites to create a visually stunning and functional website.

The relation between these three is quite peculiar. One can understand it through the anatomy of a human body: HTML is like the entire build and structure of the body. The outer look, like skin and hair, is CSS, which helps enhance the visual appeal. However, the human body needs to move and function to get the work done. In websites, this is achieved through JavaScript.

It is to be understood that CSS is independent of HTML and can be used with any XML-based markup language. Separating HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments.

How does CSS Work?

HTML elements have certain default styles. Heading elements and containing elements typically span the page. If the webpage requires more styling than the default ones, CSS is used.

When a designer decides to use CSS for styling, they use the cascade algorithm to combine styling properties originating from different sources. The term “cascading” refers to the order in which styles are applied to the document. It is like a waterfall, where the browser will read the code in the order specified to create the layout of the page. This cascade helps define the origin and the layer that takes precedence when values from multiple origins exist for the same element. The property values with the highest precedence will get applied even if it has lesser specificity.

The CSS Syntax

CSS is a rule-based language whereby you specify certain rules of style to an element or a particular group of elements. 

The CSS syntax is pretty simple; it contains a selector and a declaration block which looks like this:

selector {property: value;}

CSS rule opens with a selector, which specifies the HTML element that you want to style. 

Inside the curly brackets are a set of declarations in the form of property and value pairs separated by a colon. These provide the specification of the design to the selector element.Properties are predefined terms within CSS that all web browsers understand. They are things like font family, font size, color, etc.

While value is a particular style or variable, you choose to assign to a property.

p {
font-family: Arial;
font-size: 16px;
color: gray;
  }

CSS Styling

There are three main ways to add CSS code to your HTML-styled pages.

1. Internal CSS
   Internal or embedded CSS can be used when a single HTML document needs to be styled uniquely. The CSS instructions are written with the <style> </style> tag directly into the header of the .html page.
2. External CSS
   A separate style sheet is saved with a .css extension, and it only contains the styling properties of the website. Here for each element, the style can be set only once and applied across web pages. The .css file is linked using the <link> </link> tag in the head tag.
3. Inline CSS
   Inline styles are snippets of CSS written directly into the HTML code and applied to a single coding instance. As it is more specific to the code, it overrides the external and internal styles.

Why Use CSS?

CSS is one of the most powerful tools for creating interesting and good-looking websites. With it, you can change the entire mood and experience of your website. Following are some of the reasons why CSS should be used for web designing:

1. Faster page speed
   More codes create a load on the server. As CSS can use a single CSS rule to apply to all occurrences of a specific tag within an HTML document, it leads to lighter page loads. Hence improving the page performance.
2. Saves time
   CSS helps in keeping the design of the page separate from the content. Hence changing the formats of specific pages can be done easily with the use of CSS.

3. Device friendly
   CSS changes are device friendly. Your website needs to be accessible and navigable across various devices. CSS helps in creating such responsive designs.

We hope that now you have a better understanding of what CSS is and how it affects your website. A boring page with HTML content won’t excite your consumers to visit the page because it wouldn’t create an engaging look. HTML is the very foundation of your beautiful mansion, but without good interiors (CSS), no visitor will ever be awestruck. And, well, if you need your consumers to happily engage with your website, you will definitely not miss out on styling it with CSS.