What is a Cascading Style Sheet (CSS)?

A Cascading Style Sheet (CSS) is a sheet that determines how HTML elements in a web page will be styled.

So, in essence, the Cascading Style Sheet is a bunch of programming instructions for how the HTML elements will look like that are displayed on a web page.

A Cascading Style Sheet gives the various fonts of HTML elements, such as the font of the heading of a tag, the color, etc.

Look below at these lines which show up in an HTML web page:

Cascading Style Sheet Capability

This paragraph in CSS is styled to be of Arial font, 22px, and of maroon color.

This paragraph in CSS is styled to be of Impact font, 20px, and of green color.

This paragraph in CSS is styled to be of courier font, 26px, and of red color.

You can see how all these paragraph tags are styled so differently, though they're all paragraph tags. The first is in Arial font, the second in Impact font, and the third in Courier font. The first is 22px, the second is 20px, and the third is 26px. The first is a maroon color, the second a green color, and the third a red color.

Below is a the part of the CSS file which produces all the different paragraphs above:

The CSS to create the above header and paragraphs are:


h5 {
font:20px "Times New Roman"; font-weight:bold; color:red;}

#paragraph2 {
font:22px "Arial"; color:maroon }

#paragraph3 {
font:20px "impact"; color:green }

#paragraph4 {
font:26px "courier"; color:red }

The header which displays "Cascading Style Sheet Capability" is the h5 tag. The first, second, and third paragraphs are #para2, #para3, and #para4.

The header is made to be of Times New Roman font, 20px in size, a red color and bold.

The #paragraph2 tag is made to be of Arial font, 22px in size, and a maroon color.

The #paragraph3 tag is made to be of Impact font, 20px in size, and a green color.

The #paragraph4 tag is made to be of Courier font, 26px in size, and a red color.

Cascading style sheets is a simply a list of all the formatting rules which tell CSS how HTML elements should look like, the font, the color, the size. etc. Cascading style sheets supply all the formatting to how elements will look on a web page. By allowing you to modify fonts, sizes, and colors, CSS allows you to have dynamic-looking websites. This shows the vast capabilities of CSS in styling in an HTML web page. You can change fonts, sizes, colors, spacing, bold, italics, line spacing, and many other things, all by configuring the CSS to appropriately display them. This is the role of a Cascading Style Sheet.