Breaking down CSS Methods course lesson

Once you've had an intro to HTML and learned the basic CSS terminology, it's time to style your HTML document. But what is the preferred way of including CSS in your project? There are 3 options — inline styling, external, and internal stylesheet.

You'll develop an understanding of each option and prepare yourself for the roadblocks that might appear while applying CSS. You'll also get familiar with concepts like cascade, inheritance, and specificity and learn how they can resolve a CSS conflict.

Exercise #1

External CSS

There are 3 ways to apply CSS to your HTML file. The first one is an external stylesheet, and it's one of the most common ways to decorate multiple pages with one shot. What you do is insert a link to an external .css file using the HTML <link> element, and the <href> attribute should reference a file on your file system. We need to do that to locate the CSS code; otherwise, the page won't have any styling.

The <link> element can also include the type attribute that defines the file format that you link to. In the case of the CSS file, its value should be set to text/css. What is the rel attribute for? It specifies the relationship between the current document and the linked CSS file. Since you're referring to a stylesheet, the value should be, right, the stylesheet.

Exercise #2

Internal CSS

As the name suggests, an internal stylesheet sits inside the HTML document in the <head> section. You write down all styling rules inside the <style> element, which requires closing.

This type of applied style is pretty rare and works only if you need to add some unique properties to a single page. For websites with multiple pages, you'll be exhausted inserting the uniform internal stylesheet to every single page, not to mention changing one tiny piece of code in styling.

Exercise #3

Inline CSS

To style a specific HTML element, you can add the style attribute directly to the opening tag, like <p> or <h1>. This method is called inline styling. After you mention all styles using color or font-size properties, make sure to close it with a semicolon (;).

Inline styling should be your last resort. It messes up with HTML and content, making it harder to read and update. The only time it's justified to use inline styling is having access only to the HTML body.

Exercise #4

Cascading order in CSS

While shopping, you must have been in a situation when you and the other customer reached for the same product. Do you remember who stepped back and let the other get the "prize"? Likewise, a similar conflict occurs when multiple style rules are applied to one element. Since the order matters, which style wins the "battle"?

The cascading order sets priorities like this:

Inline styling
Internal stylesheet
External stylesheet
Browser defaults

The inline styling usually goes inside the <body> section, so it's always the last and has a higher priority. The internal styling overrides the external as it usually comes after the external. In other words, the closer the style is to the element or selector, the higher priority it has.

Exercise #5

CSS specificity

Specificity is a CSS rank principle that helps a browser decide which rule wins in a contradictory situation. Imagine you're a chef and receive an order for a sandwich, and the sticky note says, "One grilled cheese sandwich," and "One grilled cheese sandwich with extra tomatoes."

What kind of sandwich should you make? From the CSS perspective, the browser selects the most specific rule, and it overrides other less detailed rules. That means the chef should add extra tomatoes without thinking twice.

Each selector has its own place in the specificity ranking system:

Inline styling always has a higher priority
Id selectors are always more specific than universal and attribute ones
Contextual selectors are always more specific than a single element selector
Class selectors always win over any number of element selectors. That's why the headline from the example is blue and not black.

You can read more about ranking rules and learn the formula for calculating specificity on W3Schools.^[1]

Exercise #6

CSS inheritance

In the real world, inheritance means that kids inherit some parents' features and some don't. Likewise, child elements may inherit CSS property values of their parent element, but not always. For example, if you set font color and size for one element, all elements inside of it will inherit those properties unless you apply some styling directly to child elements.

You may feel overwhelmed with all these rules — which properties can inherit and which can't, but you'll start getting it by learning CSS more closely.

Exercise #7

Resetting all property values in CSS

Sometimes, users need to wipe existing styles and start from a clean baseline. That’s exactly what the all property is for. It lets you reset multiple CSS properties at once instead of overriding them one by one.

The all property supports 3 values, each with a slightly different behavior:

initial: Resets all affected properties to their default values defined by CSS. It ignores both the element’s previous styles and anything coming from its parent.
inherit: Forces all affected properties to take their values from the parent element, even for properties that don’t normally inherit.
unset: Acts as a smart reset. If a property normally inherits, it behaves like inherit. If it doesn’t, it falls back to initial.

This makes all especially useful when users want predictable resets without manually checking how each property behaves.

Exercise #8

Cascading order in CSS

The cascading order means that CSS reads style rules from top to bottom. When multiple rules target the same element, later rules can override earlier ones.

When color declarations use the same selector and have the same specificity, CSS falls back to source order. The rule that appears later in the stylesheet takes priority, so the second color value is applied.

This is a good reminder that when specificity is equal, order alone can change the final result.

Exercise #9

Reseting all property values in CSS

The correct answer is unset. This value resets a CSS property: if the property normally inherits, it will take the value from its parent; if it does not normally inherit, it will revert to its initial value. Unlike initial, which always resets to the browser’s default, unset may inherit styles from the parent if they exist. In the example, unset removes the pink color and lets the element inherit the color from its parent.

Exercise #10

Applying external CSS

To include an external .css file in your HTML document, you use the <link> element and place it inside the head section. One of the main benefits of this method to style your pages is that one file can change the entire website's look.

Exercise #11

Getting started with CSS-preprocessors

CSS has gone a long way from simple table-based CSS rules to making responsive elements and more. As a result, CSS code becomes more complex and challenging to maintain. Developers use CSS preprocessors to make their job easier, more organized, and maintainable.

A CSS preprocessor is a scripting language that acts as an extension of the default CSS ability. It allows you to use more complex programming concepts (operations, functions, etc.) while writing your regular CSS syntax and not repeating the code.

There are several CSS preprocessors available, the oldest and most popular being Sass and Less. Each of these CSS preprocessors is unique to its kind. While there’s a learning curve to getting started, when mastered, they can help you cut down the development time and power up the regular CSS capabilities.^[2]