reading-notes

What is CSS?

kk (Cascading Style Sheets) allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is, with a simple syntax example, and also covers some key terms about the language.

What is CSS for?

As we have mentioned before, CSS is a language for specifying how documents are presented to users — how they are styled, laid out, etc.

A document is usually a text file structured using a markup language — HTML is the most common markup language, but you may also come across other markup languages such as SVG or XML.

Presenting a document to a user means converting it into a form usable by your audience. Browsers, like Firefox, Chrome, or Edge , are designed to present documents visually, for example, on a computer screen, projector or printer.

CSS syntax CSS is a rule-based language — you define rules specifying groups of styles that should be applied to particular elements or groups of elements on your web page. For example “I want the main heading on my page to be shown as large red text.”

The following code shows a very simple CSS rule that would achieve the styling described above

h1 { color: red;

font-size: 5em; }

We then have a set of curly braces { }. Inside those will be one or more declarations, which take the form of property and value pairs

CSS Modules:

MDN and many of the documentation pages are organized around a particular module. For example, you could take a look at the MDN reference to the Backgrounds and Borders module to find out what its purpose is, and what different properties and other features it contains. You will also find links to the CSS Specification that defines the technology

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

External CSS:

With an external style sheet, you can change the look of an entire website by changing just one file!

Each HTML page must include a reference to the external style sheet file inside the element, inside the head section.

!DOCTYPE html>

</head>

This is a heading

This is a paragraph.

</html>

inline <!DOCTYPE html>

This is a heading

This is a paragraph.

Cascading Order

What style will be used when there is more than one style specified for an HTML element?

All the styles in a page will “cascade” into a new “virtual” style sheet by the following rules, where number one has the highest priority:

Inline style (inside an HTML element) External and internal style sheets (in the head section) Browser default So, an inline style has the highest priority, and will override external and internal styles and browser defaults.