CSS - What is CSS? [LESSON]

What is CSS?

History of Cascading Style Sheets

Cascading Style Sheets (CSS) is the language used to add the style, or design, to websites. When HTML was first created, it just provided basic websites that were very plain. The original purpose was just to provide information for research and the military, so there was no need for color or design. However, after hyperlinks were added to the web and it became available to the public, there became a need to add some design to the sites. In 1996 the W3C published the first standards for CSS. The purpose of CSS was to make it easier and more efficient to add design to websites. Prior to CSS, if a web developer wanted to change the appearance of an element on the web page, they had to add it to the code of each, individual element. This is extremely time consuming and it is easy to make mistakes. CSS allowed web developers to add style to multiple elements at once and it made it easier to make changes. CSS1 allowed developers to change font style, font color, and backgrounds. In 1998, CSS2 came out and allowed the web developer to manipulate layouts. CSS3 came out in 1999 and is the current standard. Rather than adding more versions, the W3C just updates CSS3. With CSS3 there are 3 ways to enter the style into your code: Inline styles, Internal style sheets, and External style sheets. 

HTML is the structure of the web page; it tells the browser what the page has on it (the content) and where. CSS is the way the elements appear on the web page. CSS adds the design in web design, it allows the developer to add color, font size and style, backgrounds, layouts, appearance of images, and so much more. There are hundreds of CSS rules.   

What is CSS?

CSS is the language used to describe the content on the web page. It makes websites more like presentations. It is very simple, using plain text that is easy to understand.

  • Cascading Style Sheets – 3 types of CSS are used to design the page
  • Adds the style to the site with color, design, backgrounds, layouts, filters for images, and more
  • Describes how the HTML elements will appear on the page
  • Saves time in development and allows for much quicker changes

CSS Rules

CSS is written in declarative statements that are called rules.  There is a specific way you write the rule, so the browser knows what to do. 

 Below is an example of the CSS rule.  There are 3 parts to the rule: the selector, the declaration, and the property/value pair.

Image showing a CSS Rule.

  • Selector – What is being changed, the “p” in the circle in the image.
  • Declaration Block– Includes the curly brackets and the declarations inside them, if there’s more than 1 declaration then they are separated by semi-colons.
  • Declaration - The statement of how that item will be changed, the item inside the orange brackets, the declaration includes the property a colon, the value, and a semi-colon.
  • Property – How the selector is to be changed.
  • Value – How much the property is being changed.

The green dotted lines separate the property/value pairs. Every CSS rule must have a property/value pair.

CSS Rules are written in the style sheets.  Most of the time you should write the rules on a separate text-editor document that just has CSS rules on it. This document is saved as a .css file and is linked to the HTML document inside the head. This is called an external style sheet and is the most efficient way for developers to add style and change styles for a website. Sometimes you will put the rules inside the head to just change the style(s) for that page, these are put inside a <style> element. This is called an internal style sheet. You can add a rule to a specific element within the page, this is very rare and will be discussed in the next lesson. This is called Inline CSS. 

Try the CSS Rule Matching below to make sure you know the correct term for each part.

[CC BY 4.0] UNLESS OTHERWISE NOTED | IMAGES: LICENSED AND USED ACCORDING TO TERMS OF SUBSCRIPTION