Define CSS

CSS - Wikipedia

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.

CSS Tutorial (w3schools.com)

CSS is the language we use to style an HTML document. CSS describes how HTML elements should be displayed.

CSS can be summed up in two parts.

Style

A web page is made up of one or more components, such as text boxes, buttons and links. Each of those components needs to be told how to draw itself and how to interact with the user. Defining every component individually would be time consuming and error prone and would be difficult to maintain.

Styling tells the web browser how to draw components of a particular class. For example, it may say to draw all "Large Button" class of components with a green background, white writing and a black border.

Cascade

Even though styling through classes reduces the amount of work to format each component, many websites have a lot of classes. For example, a website may have Small Button, Medium Button, Large Button, Primary Button, Cancel Button etc. so cascading allows you to deal with this in a number of ways.

First, you can have multiple CSS definitions for a single web site. You may have a branding style sheet which covers the bulk of the colour and font definitions for your site. You may then have an input form style sheet which alters those definitions specifically for types of web pages that allow the user to enter data. CSS applies style sheets in the order you tell it to, adding new rules as it "cascades", updating the definition where necessary.

For example, our website could have a CSS definition for class "Button" which states:

• Background must be blue
• Text must be white

Our website has a Job Opportunities page which needs to have more exciting Apply buttons. Our page has a second CSS definition which states:

• Background must be green
• Border must be black

CSS automatically combines these rules:

• Background must be blue Background must be green
• Text must be white
• Border must be black

The result is a button with a green background, white text and black border specifically on the Job Opportunities page with the rest of the website using buttons with a blue background, white text and no border.

Second, the web page developer can specify more than one style on a single component. For example a style sheet defines a "Button" class as:

• Background must be blue
• Text must be white

The same style sheet also defines a "Default" class as:

• Border must be black

The develop can say their component is assigned to the classes "Button" and "Default". CSS automatically combines these rules as:

• Background must be blue
• Text must be white
• Border must be black

This approach, cascading through a set of rules applied by the web page developer, is very powerful as it allows standard styling of the class "Button" but also standard styling of any type of component assigned the class "Default". For example, imagine we now have a new class called "Text" which asks the users to input some text into a box:

• Background must be white
• Text must be black
• Border must be pale blue

When the developer defines a text input field with the classes "Text" and "Default" the rules applied will be:

• Background must be white
• Text must be black
• Border must be pale blue Border must be black

The resulting text input field will be formatted with a white background, black text and a black border indicating it is the default field.

CSS allows you to perform very complex logic including "if this then that" decisions and calculations as well as visually pleasing animations when the user takes actions such as moving the mouse or clicking on something. It is effectively a programming language in its own right and is often performed by a different person or team to the actual website functionality development.