What Is CSS?

Date First Published: 19th July 2022

Topic: Web Design & Development

Subtopic: Web Design

Article Type: Computer Terms & Definitions

Difficulty: Medium

Difficulty Level: 5/10

CONTENTS

Methods Of Styling Webpages
Why Is It Called 'Cascading Stylesheets'?
History

Learn more about what CSS is in this article.

Stands for Cascading Stylesheets. CSS is a stylesheet language used to define how HTML elements are displayed in a web browser. CSS can be used to adjust the layout, text size, font colour, background colour, and more. Without CSS, it would be much more difficult to create an eye-catching website that engages visitors and websites would be much harder to navigate.

The W3C provides a free CSS validation service to validate CSS files here. A CSS file can be uploaded, checked by URL, or directly inputted.

Note:

CSS is not a markup or programming language. It is a stylesheet language. HTML is used to instruct the web browser on how to display content and define the layout of the webpage and CSS is used to define the appearance and look of the markup language.

Methods Of Styling Webpages

With CSS, the styles can be defined in three ways, which include internally, externally, and inline.

Internal stylesheet

In an internal stylesheet, the styles are defined in the head of the HTML document within the <style> element. Internal styles are often used when a single HTML page needs to have a unique style. An example of a HTML document within an internal stylesheet can be seen below:

<!DOCTYPE html>

<head>

<title>Type your title here.</title>

<style>

body {

background-color: #FDC6C6;

}

.div1 {

background-color: #F5F1F4;

display: block;

border-color: #003;

border-width: 3px;

border-style: solid;

margin: 0 auto;

}

p {

color: #09C;

margin-right: 10px;

}

</style>

</head>

<body>

<h1>Heading</h1>

<p>CSS example.</p>

</div>

</body>

</html>

The output of the HTML document with CSS is shown in the screenshot below.

The advantages of implementing stylesheets by internal linking and combining them with HTML documents are:

It is useful if every page needs to have a unique style. The unique style can be specified in every HTML document.
Unlike external stylesheets, no separate documents need to be created and uploaded.

The disadvantages of implementing stylesheets by internal linking are:

It is time-consuming on large websites - On large websites with thousands of pages, it will be necessary to edit every HTML page in order to change the style across the whole website. This will take a very long period of time.
It increases the chances of errors - Individually editing every HTML file to make modifications to the style increases the chances of errors and inconsistencies.

External stylesheet

In an external stylesheet, all the styles are saved into one or more files with the '.css' file extension, making it possible to change the look of a whole website just by editing one file. The file can be edited with a text editor, such as Notepad. This is useful for large websites with thousands of pages and the stylesheets can be linked to by this property in the head of the HTML document:

The path of the stylesheet needs to be specified. For example, if a file called ‘style.css’ was in a folder called ‘css’, the correct path would be /css/style.css. Most external style sheets are linked to every page of a website for the purposes of consistency.

The advantages of implementing stylesheets by external linking are:

It achieves consistency. On large websites, consistency is more difficult to achieve since not every page can be monitored. One external stylesheet controlling the style of every webpage will ensure that the style is consistent on every page.
It is less time-consuming - Even for a website with only a few pages, editing every HTML document just to change the style of a website will take a long period of time and it increases the chances of mistakes.
The page loading time is improved as the CSS file is downloaded once and applied to relevant pages when necessary. The CSS file can be cached in order to improve the loading speed of webpages.

The disadvantages of implementing stylesheets by external linking are:

It is not well-designed for pages that need to have a unique appearance on every page. One CSS file that is linked to every HTML page does not allow separate pages to have a different style unless the styles are individually defined on those webpages.
Changes made to the external stylesheet can take longer to take effect for all visitors of the website as the CSS file is usually cached and the cache takes some time to expire.

Inline styles

Inline styles are only applied to a single element rather than all elements with the same name on the entire page or all pages that an external stylesheet has been linked to. This was the original method of styling HTML elements before CSS was introduced. For example, the style below that is applied to a paragraph to change the font colour to white and highlight it in purple only applies to that single element.

<p style="color:#FFF; font-family: Verdana; background-color: #93F";>Inline Style Paragraph</p>

The output of the inline style paragraph can be seen below:

Inline Style Paragraph

The advantage of implementing inline styles are:

It is sufficient if a unique style for an element is required on every page as the style can be altered within the HTML file.
Inline stylesheets precede before all other styles, so if an external stylesheet could not be edited because it is hosted on a third-party website, the inline style would override the external stylesheet.
No additional files need to be created in order to apply an inline style.

The disadvantage of implementing inline styles are:

It is time-consuming to manually style every element.
Individually styling multiple elements can cause the size of the HTML document to increase and the page loading speed to slow down.
The styles cannot be reused anywhere else or style multiple elements at the same time.

Why Is It Called 'Cascading Stylesheets'?

The name 'cascading' in CSS comes from the styling rules cascading down from several sources. Styles of a higher precedence will overwrite styling rules of a lower precedence. The cascading order of CSS in order of highest priority to lowest priority is:

Inline styles.
External stylesheets.
Internal stylesheets.
Browser default.

The way that these levels of precedence can be thought of is in layers. The closer the style is to the element, the higher the priority. For example, if an external stylesheet defined the <p> tag as having a background colour of yellow and the internal stylesheet defined the <p> element as having a background of green, the internal stylesheet would override the external stylesheet. As a result, the internal style will be applied to the <p> element.

Note:

The '!important' rule in CSS can override all previous styling rules for an element. It is useful when a CMS is being used and the CSS code cannot be edited. However, it should only be used when absolutely necessary.

Note:

Since HTML and CSS are American inventions, you will have to use the American spelling of colour, which is 'color' without the 'u'. For example, specifying the background colour of an element as 'background-colour: #F5F1F4' would not work and it wouldn't be recognised as a CSS property. Instead, you would have to use 'background-color: #F5F1F4'.

History

CSS was introduced by the W3C on 17th December 1996 with the aim of allowing a single place for all colours, fonts, text sizes, and other styles to be saved. Originally, webmasters had to manually add styles to individual elements on every single page, becoming a long and time-consuming process to change the look of a website. CSS was then introduced to allow the layout of multiple webpages to be controlled at once.

As of now, CSS is maintained by the CSS Working Group of the W3C, which create documents, called specifications. Once a specification has been discussed and officially approved by the members of the W3C, it becomes a recommendation. It is called a recommendation as the W3C has no control over the implementation of the language and independent companies and organisations create that software.

CSS 1

The first version of CSS was introduced on 17th December 1996. The original developers of this version were Håkon Wium Lie and Bert Bos. This version had support for font properties, such as typeface and emphasis, alignment of text, images, tables, margin, border, padding, positioning for most elements, text attributes, such as spacing between words, letters, lines of text, and more. This version is no longer maintained by the W3C.

CSS 2

This version of CSS was introduced in May 1998 by the W3C. It added capabilities for:

Absolute, relative, and fixed positioning of elements.
Support for aural stylesheets.

This version is no longer maintained by the W3C.

CSS 2.1

CSS version 2.1 fixes errors in CSS 2 and removes unsupported and not fully interoperable features. In order to comply with the W3C process for standardising technical specifications, CSS 2.1 varied between Working Draft and Candidate Recommendation statuses for a lot of years. CSS 2.1 became a Candidate Recommendation on 25th February 2004, but was changed back to a Working Draft on 13th June 2005 for further review. On 19th July 2007, it returned to Candidate Recommendation and was updated twice in 2009. Due to the changes made, it went back to Last Call Working Draft on 7th December 2010. On 12th April 2011, CSS 2.1 went to Proposed Recommendation. Eventually, it was introduced as a W3C Recommendation on 7th June 2011 after being reviewed by the W3C Advisory Committee.

CSS 3

A key change in this CSS version was the division of the standard into separate modules making it easier to understand. This module introduces new capabilities defined in CSS 2. Around the time of the introduction of the original CSS 2 recommendation, work on CSS version 3 began.