How does CSS work?
CSS is the thing you use to dress up your documents and determine how things should look. It can sit inside a single .css file or exist across several files. CSS is its own entity and is not exclusively tied with HTML, despite being shipped together when it comes to learning it.
In fact, it is designed in a way that it can be used with any XML based language.
XML, XHTML, HTML, Documents
In the grand scheme of things, without structure, data would just sit on one big line. This is where markup languages come into play.
XML, XHTML, and HTML are all markup languages that are used to structure a document.
As we have all encountered at some point, HTML is the acronym that is commonly associated with CSS and stands for HyperText Markup Language.
All markup languages have two common features – they’re used to structure data and work in pairs of closing tags.
The biggest difference between XML and HTML is that the latter has a predefined list of built-in element names and associated attributes. XML has no such list and can exist on a free-for-all naming basis.
For this book, CSS will be talked about in relation to styling HTML. However, what you end up learning can also be applied to other markup languages since they follow the same general concepts.
Parts of a CSS Rule
A CSS rule is made up of two components – the selector and the declaration block.
A declaration block contains one or more declarations. Each declaration contain a property and value pair.
The linear arrangement of rules determines what the final HTML page looks like. So, for example, if you have the same selector declared, the last one in the file will be applied. In the code snippet below, h1 tags will be red and not green because there is another h1 selector that overrides the color property. Font-size will remain the same.
How it works with HTML
A browser applies CSS rules to an HTML page to change the way things are displayed. CSS selectors tell the browser which element to apply the visual rules set to the declaration block.
When a browser renders an HTML page, it parses the HTML code and creates a Document Object Model in the computer’s memory. During parsing, it loads the associated files declared in the HTML and parses it accordingly. With CSS, the browser attaches the style to the created DOM nodes. The browser then displays the DOM on the screen.
The DOm works in a tree-like structure. This means that each element, attribute and any piece of text becomes part of the DOM node in this tree structure. Relationships between DOM nodes use the same language as we would in relation to a gender-neutral family.
Elements can be parents of child nodes and child nodes can have siblings. Understanding how DOM nodes are related to one another can help you design and debug your CSS. This is because CSS selectors are traced through the DOm tree and applied accordingly.
Take a look at the code below.
What the relationships look like in the DOM.
Inline, internal and external Stylesheets
There are three different ways to apply CSS to an HTML document. One way is to load an external stylesheet. This is a separate CSS file with a .css extension. You reference its existence and association with the HTML document through the <link> element.
Here is an example of a reference to an external stylesheet:
An internal stylesheet means that you’ve placed your CSS inside a pair of <style> elements on your HTML document. This often sits at the top of your HTML page in the <head> area.
While this can be useful in some cases, it is not recommended and can be highly inefficient when compared to external stylesheets. This is because you have the potential to repeat the same code over and over again on other pages in order to apply the same rules.
Here is an example of what an internal stylesheet looks like:
Inline styles refers to the CSS declarations that impact one element only. This is contained within the style attribute of your HTML tag.
Like internal stylesheet, this is not recommended as it is very hard to manually maintain across multiple pages. It also mixes your domain of separation between structural rules.
Keeping structural (HTML) and visual (CSS) rules physically separated from one another is good practice and maintains code sanitation over time. Just because you can do it doesn’t mean you should. It is recommended that this method be used as a last resort when there are restrictions in place.
Here is an example of an inline style:
And that’s basically it for this post.
This post is part of a Front End Mastery Series.
You can find part 01 here – What exactly is CSS?
Part 03 coming soon…