Breaking down CSS Methods 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, all you want is to turn over a new leaf and reset all elements or element's parent styling properties to a starting point. For that purpose, we use the all property.

There 3 types of values that you can apply:

Initial: This value resets all the properties you set for an element or its parent to their initial value.
Inherit: This value resets all the properties you set for an element or its parent to their parent value.
Unset: This value resets all the properties you set for an element or its parent to their parent value if those properties inherit. If not — to their initial value.

Exercise #8

Cascading order in CSS

The correct answer is blue. The cascading order implies that the style rules go down from top to bottom, allowing the following rules to override the above ones. In this example, both color values have an identical selector and carry the same specificity, which means the second line has a higher priority.

Exercise #9

Reseting all property values in CSS

The correct answer is unset. Being a part of the all property, the unset value allows you to reset all the properties you applied to an element or its parent to their parent or initial value if those properties don't inherit. In the example, the unset value will reset the color pink to the browser's default font color.

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]