CSS Basics

CSS is a language for specifying how documents are presented to users — how they are styled, laid out, etc.

A document is usually a text file structured using a markup language — HTML is the most common markup language.

Presenting a document to a user means converting it into a usable form for your audience.

A CSS rule is formed from:

A set of properties, which have values set to update how the HTML content is displayed.

A selector, which selects the element(s) you want to apply the updated property values to.

.selector {
    property_1: value;
    property_2: value;
    ...
}

Terminology

The "C" in CSS

CSS stands for Cascading Style Sheets. While "Style" and "Sheets" are pretty obvious, let's talk about "Cascading".

The "C" in CSS

cas·cade

noun

1. a small waterfall, typically one of several that fall in stages down a steep rocky slope.

2. a process whereby something, typically information or knowledge, is successively passed on.

/kaˈskād/

The Cascade

The cascade takes a unordered list of declared values for a given property on a given element, sorts them by their declaration’s precedence, and outputs a single cascaded value.

(CSS Cascade Level 4 Spec)

In CSS, the Cascade is the algorithm by which the browser decides which styles to apply to an element — a lot of people like to think of this as the style that “wins”.

Inheritance is when some properties set on elements will be inherited by their children, without needing to specify it again.

<style>
    body {
        color: red;
    }
       
    /* This next rule is redundant,
       since color is inherited */
    body p {
    	color: red; 
    }
</style>

<body>
    <div>
        <p>Hello, world!</p>
    </div>
</body>

Some properties are non-inherited, for example, border.

Using the inherit keyword as the value will cause the element to get the same property as its parent

<style>
    body {
        border: 1px solid red;
    }
       
    /* to make the P element get the same border,
    use inherit */
    body p {
    	border: inherit; 
    }
</style>

<body>
    <div>
        <p>Hello, world!</p>
    </div>
</body>

CSS Basics

CSS Basics

More from lurx