CSS: The basics

This article assumes you have a basic understanding of HTML

What is CSS?

CSS (Cascading Style sheets) are the instructions for how HTML elements should be displayed to the user. It's a powerful emotive tool that can help convey a range of information to the user.

It's used to define the aesthetics of your web page. It encompasses the styling, layout and movement for your web application on different device styles and screen sizes.

When a webpage is responsive is can be viewed on any sized screen and will be designed optimally for each. Typically, we want to design for mobile-first. It's important to consider that we are in an age where people are more likely to use their computer in their pocket than boot up the old pc in the corner of the living room.

Where does CSS go?

There are three different ways to write CSS: inline, internal, external

Inline - is an attribute written inside the element where it is defined on the HTML page.

Internal - is written at the top of the HTML page where the rest of the elements are defined. It's added to an element using a class or ID name.

External - is written in a separate style sheet (e.g. styles.css) and linked into the desired page through a hyperlink in the head of that page.

The best industry practice and most advantageous way to write your CSS is in an external style sheet. You can style multiple pages using one file, so if you have a multi page site you can make all of the pages look similar with ease. Down the line it will allow you to create much more complex styling.

Precedence

Where you write your CSS makes a difference, the order of precedence goes: inline, internal, external.

Inline CSS (an HTML style attribute) will override CSS rules in the internal style tag and external CSS file.

More specific selectors takes precedence over less specific ones.

Rules that appear later in the code override earlier written rules if both have the same specificy.

div{
    color: blue;
    color: red;
    color: green;
}

The colour of the font in the div will be green since that's the last rule we write..

**It's standard practice to write "color" when writing this in CSS styling. Needless mistakes are likely to be made by you or anyone else that reads your code if you chose to write in the British way.

A CSS rule with !important always takes precedence - however it is not best practice to sprinkle these throughout your code. As they can be hard to find and manage.

How do I write CSS?

Here is an example of how we would write some CSS. There are no limits to how many declarations that one CSS statement can hold.

selector{
    property: value; 
    property: value;
}

Below is an example with actual values included.

h1{
    color: pink;
    font-weight: bold;
}

What is a selector?

A selector is how we can define what element we are looking to target with our styling. Is it a h1 tag with a specific ID or all the p tags or is it everything with the class name "container"?

What we write before the curly brackets is what we are going to apply our styling to.

What is a declaration and a declaration block?

A declaration is the name we give to the property and value pair. It is our style declaration! The h1 we styled above WILL be pink and it WILL be bold!!

These are written inside curly braces which become what we call our declaration block.

What is a property?

A property is is the thing about the element that we want to change. Some examples of that are "font-size, width, height, background-color, padding, margin, line-height"

What is a value?

Values are what we pair with the properties to tell them how much or in which way to affect the element by.

Why are there semi-colons?

Semi-colons are used to separate each statement we write, think of it like commas in a list. It's best practice to include the semi-colon after every declaration.
If there was only one declaration then we wouldn't need any semi-colons.

Selector types

Universal

* {
  property: value;
} 

Placing '' as the selector for a declaration block will select *every element on the page.

This is commonly used when we create a reset.css which allows us to remove auto styling applied by different browsers. The intention behind doing this is so that there are no browser inconsistencies in your styling. If Chrome wants to add some sneaky padding this file gives it a hard NO. It increases the cross-browser compatibility of your site which is desirable as you'll never know what browser someone may be using to access your site.

A popular reset stylesheet is the Meyerweb reset styling.

This would be hyperlinked in the head of your html page before your personal CSS style sheet **** so that your personal styles are laid on a clean page.

https://meyerweb.com/eric/tools/css/reset/

Element name/Type selector

li {
    property: value
}

The previous example looks for all the elements of that category. Writing "li" here will look for all li elements on the page, writing "p" here will effect all p tags on the page as shown below.

<li></li>

Class name

 .box{
    property: value
 }

Looks for all elements that have this class name and will apply the styling to all those elements with that name. This selector is preceded by a '.' (period).

<div class="box"></div>
<h3 class="box"></div>

This selector for styling is one of the more valuable options. Not only are you able to style multiple different elements with an easily identifiable name (that you get to choose!) you can also add multiple classes to one element by separating them with a space.

<div class="box main-container party-box "> 

The example above's element has three classes

ID

#mainContainer {
    property: value
}

This is more specific than using a class, it will only find the one element with the defined id attribute. You, the developer, will define this name to be almost anything you want, then to identify it in the CSS file your selector is preceded by a '#' (hash). You should not give more than one element the same ID.

<div id="project-container"></div>

CSS Naming Conventions

Camel casing is common for JavaScript writers, however this should not be used when naming your CSS classes and ID's.

Correct:

.purple-box{
    background-color: purple
}

Incorrect:

.purpleBox{
    background-color: purple
    }

Hyphen delimited strings are much more consistent with the CSS property names and are much more readable.

When creating class and ID names for your elements it should be easy to identify what the object is you are styling. One way to make this clear is to use the BEM naming convention.

Single Selector Precedence

These single selectors are considered by the browser in a specific order, top to bottom as follows:

• id
• classes, attribute selectors, pseudo classes
• elements

A deeper dive into CSS specificy can be explored here: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/

Combinator Selectors -

Descendant Combinators

div p {
    color: purple
}

This will find all elements that are descendants of the specified element. In this example the we are selecting all

elements that are found inside a

Child Selectors

div > p {
    color: purple
}

These select all elements that are the children of the specified element. So here we are taking all

elements that are the child (nested inside) of a

Adjacent Sibling Selectors

div + p {
    color: purple
}

This style of selector is used to select and element that is immediately after the first element. So we will be targeting the first

tag that is used after the

General Sibling Selector

div ~ p {
    color: purple
}

With similar function to the last selector, this one will select ALL elements that are a sibling of the first element specified.