How Does CSS Work?

CSS, or “Cascading Style Sheets,” is used for styling and laying out webpages. It can be used to adjust content size, spacing, color and font or add decorative features, such as animations or split content into columns.

A Deeper Understanding of CSS

As a styling language, CSS specifies how users view documents, from the layout to the style. The documents affected are typically text files that get structure from a markup language, the most common of which is HTML, however, XML and SVG are also popular. In order to present the document to the user, CSS converts it from the text file into a useable form. With browsers, this presentation occurs on a computer screen, printer or projector. 

Impact of CSS on HTML

Since both HTML and CSS have a strong impact on how information appears, it’s crucial to understand the impact that CSS has on HTML. Simply put, web browsers follow CSS rules to determine how a document should be displayed. 

There are several ways to form CSS rules. It can be done via a set of properties, each with a value that updates the way the HTML content gets displayed. For example, a set of properties in the CSS might say the element should have a yellow background and a width that is 20 percent of that of the parent element. 

Alternatively, you can form CSS rules through selectors. As the name implies, selectors select an element or elements to apply to updated property values, for instance, the selector applying the CSS rules to every paragraph within an HTML document. 

The CSS rules are held in a stylesheet, which is responsible for determining the appearance of the webpage. With some experience and training, the typical syntax for CSS becomes obvious. 

Below, we’ll walk through a basic example of CSS code with two rules:

The h1 portion in the beginning of the first rule indicates that the stylistic elements outlined in the CSS code apply to anything that is labeled <h1> in the HTML. The CSS code has three separate properties, each with its own values in the form of a pair known as a declaration. The first indicates that the text color will be yellow, while the second indicates that the background color will be blue. The final property sets up a solid, 1-pixel wide border around the header.

The second rule in the above example applies to HTML elements labeled <p> since it begins with p. This rule is relatively simple, as it just sets the text color to orange. 

Keep in mind, most websites have more content and more rules, but you can use the above example to help you create your own CSS. The best way to do this is to create some basic HTML with a paragraph and header. You might also want to try list elements (<li> and <ul>), to include even more sets of rules in your CSS. 

How CSS Actually Works

Once you have loaded and parsed the HTML content and CSS styling, the process to combine them occurs in two separate stages. First, the browser converts them into the Document Object Model (DOM). Once the DOM combines the content and style of the document and is a representation of the document within the memory of the computer, the browser will display the content. 

Understanding the DOM

The DOM has a crucial role in the functionality of CSS. DOMs have tree-like structures made up of nodes. Every piece of text, attribute and element within the markup language (such as HTML) will become its own DOM node. 

Each node’s relationship is defined by how it connects with other DOM nodes, which can be child nodes, parent nodes or sibling nodes. Since this is the location where the content of the document and the CSS connect, a proper understanding of the DOM can better equip you to maintain, design and debug your CSS.

Consider the following HTML: 

Within the DOM, the node that corresponds to the HTML’s <p> element will be a parent. The children will be text nodes as well as those that correlate with the <span> elements. Each <span> node also serves as a parent, each with children in the form of text nodes. The browser will interpret the HTML snippet above as the DOM tree below. 

P

├─ “Let’s say:”

├─ SPAN

| └─ “Hello”

├─ SPAN

└─ “World”

Without any CSS code to add, the browser would simply interpret the HTML snippet as plain text via the DOM, appearing as “Let’s say: Hello World” without any changes in color, font or style. 

Applying CSS to the DOM

Continuing the above example, your CSS class can show what happens to the DOM and resulting display if you style the document via CSS. Using the same above HTML snippet:

Apply the following CSS:

Based on the above explanation, we know that the browser will begin by parsing the HTML. This process will lead to the creation of the above DOM from the previous section, then parse the CSS. The CSS only has a single rule, which uses a span selector. As such, that rule will apply to every occurrence of <span> in the HTML, of which there are two. 

Thanks to the CSS, rather than a simple plain text of “Let’s say: Hello World,” it will have stylistic elements attached: each “Hello” and “World” will appear in a box with an interior color of red and a border that’s a solid pink line and 1 pixel thick. 

Methods of Applying CSS to HTML

There are several methods of applying the CSS code for stylistic changes to HTML.

Via External Stylesheets

When CSS code is placed in a fully separate file, this is known as an external stylesheet. The file has a .css extension and is referenced via a <link> element within the HTML.

Many programmers strongly prefer using an external stylesheet due to its versatility. Because it’s possible to use a single stylesheet for setting the style and layout of multiple different documents, future changes only require a single update.

Via Internal Stylesheets

Another method of applying the CSS to your HTML is to use an internal stylesheet. In this case, rather than placing the CSS into an external file, you put it in the HTML head where it sits within a <style> element. 

This particular approach is highly useful in specific situations. One example would be a content management system or another program that doesn’t allow for direct modification of CSS files. Adding styling with internal stylesheets isn’t as efficient. In the case of a website, you’d have to repeat the CSS on each page. If you wanted to make changes, you’d have to do so on each one. By contrast, you could link the same external stylesheet on multiple pages and change just a single location for widespread adjustments to the style. 

Inline Styles

Inline styles are specific CSS declarations that affect a single element in the HTML. Unlike internal stylesheets, inline styles sit in a style attribute instead of a <style> element. 

Experienced developers tend to avoid this particular method whenever possible, as it requires them to update identical information multiple times in a single document and makes the CSS coding more challenging to understand and read. 

Instead, it’s better to separate various types of code, which will come in handy during the development and debugging process. Additionally, anyone who uses the code in the future will find it much easier to understand. 

The only time that it may make sense to use inline styles for your CSS is if your work involves a highly restrictive environment. For example, if you can only edit the body of the HTML and nothing else, you’d use this method.

Conclusion

If you’re ready to learn more about webpage styling, you can sign up for a CSS bootcamp to learn even more about the interactions between CSS, HTML and DOM as well as additional methods for applying the CSS. 

*Please note, these articles are for educational purposes and the topics covered may not be representative of the curriculum covered in our boot camp. Explore our curriculum to see what you’ll learn in our program.