logo
Documents |

Introduction to CSS

Table of Content

Cascading Style Sheet


It's important to remember that there are many ways to style your HTML elements, so there will be CONFLICTS!!!! The conflicts are resolved by Style Cascade.

Cascade

At a very simple level, this means that the order of CSS rules matters; when two rules apply that have equal specificity the one that comes last in the CSS is the one that will be used.

h1 { 
    color: red; 
}
h1 { 
    color: blue; 
}
<h1>This is my heading.</h1>

css-example-1
It's blue! Why?????


Specificity

Specificity is how the browser decides which rule applies if multiple rules have different selectors, but could still apply to the same element. It is basically a measure of how specific a selector's selection will be:

  • An element selector is less specific — it will select all elements of that type that appear on a page — so will get a lower score.

  • A class selector is more specific — it will select only the elements on a page that have a specific class attribute value — so will get a higher score.

.main-heading { 
    color: red; 
}
        
h1 { 
    color: blue; 
}
<h1>This is my heading.</h1>

css-example-2
It's red! Why?????


!important

There is a special piece of CSS that you can use to overrule all of the above calculations, however, you should be very careful with using it — !important. This is used to make a particular property and value the most specific thing, thus overriding the normal rules of the cascade.

#winning {
    background-color: red;
    border: 1px solid black;
}
    
.better {
    background-color: gray;
    border: none !important;
}
    
p {
    background-color: blue;
    color: white;
    padding: 5px;
}
<p class="better">This is a paragraph.</p>
<p class="better" id="winning">One selector to rule them all!</p>

css-example-3


Inheritance

Some CSS property values set on parent elements are inherited by their child elements, and some aren't.

For example, if you set a color and font-family on an element, every element inside it will also be styled with that color and font, unless you've applied different color and font values directly to them.

body {
    color: blue;
}

span {
    color: black;
}
<p>As the body has been set to have a color of blue this is inherited through the descendants.</p>
<p>We can change the color by targetting the element with a selector, such as this <span>span</span>.</p>

css-example-4

Controlling Inheritance

CSS provides four special universal property values for controlling inheritance. Every CSS property accepts these values.

[inherit](<https://developer.mozilla.org/en-US/docs/Web/CSS/inherit>)

Sets the property value applied to a selected element to be the same as that of its parent element. Effectively, this "turns on inheritance".

[initial](<https://developer.mozilla.org/en-US/docs/Web/CSS/initial>)

Sets the property value applied to a selected element to the initial value of that property.

[unset](<https://developer.mozilla.org/en-US/docs/Web/CSS/unset>)

Resets the property to its natural value, which means that if the property is naturally inherited it acts like `inherit`, otherwise, it acts like `initial`.

There is also a newer value, revert, which has limited browser support.

css-rendering


The effect of CSS location

Inline CSS

An inline style may be used to apply a unique style for a single element.

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

</body>
</html>

Inline CSS cannot be re-used easily (which is bad). Inline CSS has very high specificity and will always override other CSS (except with !important).

Internal CSS

An internal style sheet may be used if one single HTML page has a unique style.

The internal style is defined inside the <style> element (normally inside the head section).

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color: linen;
}

h1 {
  color: maroon;
  margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


External CSS

The style is defined inside an external CSS file (or multiple external CSS files)

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>


Order matters

All the styles on a page will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority:

  1. Inline style (inside an HTML element)

  2. External and internal style sheets (in the head section)

  3. Browser default

Share

DIscord chat

We're available Monday–Friday, security and critical bug fixes are available 24/7.

Facebook page

Get the latest news and updates regarding Nilead platform and services.