Author: Matt Blanco
Last Updated: 26 December, 2021
CSS stands for Cascading Style Sheets and it’s the technology that allows the structure of an HTML document to look good and bring a prototype’s design into life.
There are three main ways to implement CSS code into a webpage:
Linking to an external CSS file (Preferred)
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
Directly inside an element using the style attribute
<div style=”background-color: blue; text-align: center”>Using the <style> element inside the <head>
<head>
<style>
p {
color: red;
...
}
</style>
<head>
h1 {
color: blue;
}
In CSS the h1 is the selector and indicates what elements will by styled (there are many different ways to select HTML elements that will be discussed further on).
The color is one of many different CSS properties that can be used to style elements (list of all the different properties that can be used).
The blue is the value of the CSS property. Each property has it’s own values that can be applied to it.
As mentioned above, selectors are used to locate the HTML elements you want to style. There are five different categories for selectors:
Select elements based on name, id, class
Element Selector: p { ... }
Id Selector: #idName{ ... }
Class Selector: .className{ ... }