CSS Tutorial
CSS - Introduction CSS - How CSS works? CSS - Syntax CSS - Colors CSS - Backgrounds CSS - Borders CSS - Margins CSS - Padding CSS - Height/Width CSS - Box Model CSS - Text CSS - Fonts CSS - Icons CSS - Cursor CSS - Outline CSS - Links CSS - Lists CSS - Tables CSS - Display CSS - Overflow CSS - Position CSS - Float CSS - Align CSS - Opacity CSS - Combinator CSS - Pseudo Classes CSS - Pseudo Elements CSS - Attribute Selector CSS - Buttons CSS - Pagination CSS - Navigation Bar CSS - Dropdowns CSS - Specificity CSS - Transition
CSS Advanced
CSS - Rounded Corners CSS - Border Image CSS - Background CSS - Gradients CSS - Shadow CSS - Text Effects CSS - 2D Transform CSS - 3D Transform CSS - Animation CSS - Object-fit CSS - Box Sizing CSS - Filters CSS - Style Images CSS - Variables CSS - Media Queries CSS - Flexbox Layout CSS - Grid Layout
CSS Responsive
RWD - Introduction RWD - Grid View RWD - Media Queries RWD - Images
CSS References
CSS - Reference CSS - Selectors CSS - Functions CSS - Units CSS - Animatable CSS - Entities

How CSS works?

CSS allows you to create great looking web pages, but how does it work under the hood? This article explains what CSS is, how the browser turns HTML into a Document Object Model (DOM), how CSS is applied to parts of the DOM, some very basic syntax examples, and what code is used to actually include our CSS in our web page.


What is CSS?

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 will also come across other markup languages such as XML. Presenting a document to a user means converting it into a usable form for your audience. Browsers, like Firefox, Chrome or Internet Explorer, are designed to present documents visually.


How does CSS affect HTML?

Web browsers apply CSS rules to a document to affect how they are displayed. A CSS rule is formed from:

  • A selector, which selects the element(s) you want to apply the updated property values to. For example, I want to apply my CSS rule to all the paragraphs in my HTML document.
  • A set of properties, which have values set to update how the HTML content is displayed, for example I want my element's width to be 75% of its parent element, and its background to be blue.

You will learn a lot more about what CSS syntax looks like in the next chapter.


What is DOM?

A DOM has a tree-like structure. Each element, attribute and piece of text in the markup language becomes a DOM node in the tree structure. The nodes are defined by their relationship to other DOM nodes. Some elements are parents of child nodes, and child nodes have siblings.

Understanding the DOM helps you design, debug and maintain your CSS because the DOM is where your CSS and the document's content meet up.

Below is an example which explains what is DOM.

The DOM represents of above code is like this:

HTML DOM

DOM representation of above example



How to apply CSS to your HTML

You can use CSS in three ways in your HTML document:

  • External stylesheet
  • Internal stylesheet
  • Inline style

External Stylesheet

An external stylesheet is when you have your CSS written in a separate file with a .css extension, and you reference it from an HTML <link> element. The HTML file looks something like this:

HTML file
example.css
Run code

This method is arguably the best, as you can use one stylesheet to style multiple documents, and would only need to update the CSS in one place if changes were needed.


Internal Stylesheet

An internal stylesheet is where you don't have an external CSS file, but instead place your CSS inside a <style> element, contained inside the HTML <head>. So the HTML would look like this:

Run code

This can be useful in some circumstances, but it isn't quite as efficient as external stylesheets. In a website, the CSS would need to be repeated across every page, and updated in multiple places if changes were required.


Inline Style

Inline styles are CSS declarations that affect one element only, contained within a style attribute:

Run code

Don't do this, it is really bad for maintenance and makes the CSS harder to read and understand.

Note: Internal stylesheet can overwrite the rules of external stylesheet and Inline stylesheet can overwrite the rules of Internal stylesheet.