CSS: the style of websites

7 min readJun 2, 2020

When the web browser renders a plain HTML page, it looks boring. CSS (“Cascading Style Sheets”) is the programming language that gives web pages their specific look & feel. This article sums up the basic syntax, elements, and style properties of CSS.

What is CSS?

CSS is a programming language, that defines the style of your web content. CSS code is based on a list of rules, identifying which elements in the HTML document to style (a subset of elements)and how we want these elements to look like (declare their style).

Some examples of CSS rules:

“all li elements have a color blue”.

li {
  color: blue;
}

“select all of the paragraph elements, and make their color green”.

p {
  color: green;
}

CSS Rules

A CSS rule consists of four main parts:

pSelector: which elements in the document to apply the CSS styles to
color Property
greenValue: what value the property will contain.
{color: green;}Declaration: how to change the element chosen by the selector.
;A semicolon: to finish the declaration.

All together they form the CSS rule:

p {
  color: green;
}

Always include a semicolon at the end of a declaration. If not, CSS will not be able to understand when one declaration ends and another begins. Instead, the entire rule will stop working.

Types of CSS Selectors

ELEMENT SELECTOR

An element selector is simply the name of the element to select, followed by double curly braces.

p {} selects all paragraph elements
h1 {} selects all h1 elements.

Use: to apply a set of styles to ALL elements of a type.

ID SELECTOR

HTML attributes and CSS selectors work together. In HTML, the id attribute identifies an element. In CSS, we write a rule that selects the specific element with that id using the id selector:

#opening-paragraph {}

Use: to apply a set of styles to ONE specific element of a type.

idattribute identifies one specific element.
#The hash sign makes it clear that we’re writing an id selector.

CLASS SELECTOR

HTML attributes and CSS selectors work together. In HTML, the class attribute identifies more than one, but not all elements. In CSS, we write a rule that selects these elements with that class using the class selector:

.very-important {
  color: red;
  font-weight: bold;
}

Use: to apply a set of styles to MORE THAN ONE, NOT ALL element of a type.

classattribute identifies more than one, but not all elements.
.The dot makes it clear that we’re writing a class selector.

With the class selector .it is easy to “classify” elements in a document.

CASCADING STYLES

In CSS, certain CSS rules “cascade” -overwrite- over other rules, which is influenced by two factors :

The order in which the rules are written in your code
The specificity of the selector used.

ORDER OF RULES

The order in which you write CSS rules in your source code matters: Rules written later will overwrite rules written earlier.

All p elements have the color green because the rule that specifies p to be green comes after the rule that turns them blue:

p {
  color: blue;
}p {
  color: green;
}

SPECIFICITY

The specificity of the selector that’s used. CSS will respect this order of specificity in determining which rules to apply:

id selector (specific): “only this one element is green”
class selector (a bit specific): “some, not all elements have the color green”
element selector (general): “all elements have the color green”

For example:

<p id="greeting" class="cool">Hello</p>.cool {
  color: blue;
}#greeting {
  color: red;
}p {
  color: green;
}

In the above code, three selectors try to change the color of the paragraph:

class selector .
id selector #
element selector

Based on the order the CSS rules are written in, you would expect the color of the paragraph to be color: green

Yet, CSS will choose the style for the rule with the id selector (in this case, color: red), because an id selector is the most specific of all.

REMEMBER

If multiple styles apply to an element, CSS first checks the specificity of the selector. The most specific rule wins.
If rules are equally specific, the rule that comes in later in the code wins.

With CSS you apply general rules to any element, and then overwrite these rules for specific elements. In this way, we do not have to style each element in the document individually. With CSS we apply a base layer and then add more specific details on top of it.

Inheriting Styles

Child elements in HTML inherit the styles of their parents:

CSS:

#menu {
  color: light-blue;
  background-color: black;
}

HTML:

<div id="menu">
  <p>HTML: Structure</p>
  <p>CSS: Style</p>
</div>

Result: All p tags inside of the div with id="menu"> inherit the parent CSS style: color: light-blue;and background-color: black;.

To style many different elements the same way: add a style rule to the parent and it will apply to all elements.

CSS Comments

A code comment is a “grayed-out” text in code: CSS comments start with a /* and end with */. The browser will ignore any text inside the comment.

CSS comments are used for:

Documentation: to explain how bits of code work.
Troubleshooting: temporarily disabling some lines of code from executing. “commenting out” code

Avoid over-commenting. Helpful documentation is great to have, yet unnecessary comments make coder harder to read.

/* 
The following selector turns all paragraphs green
*/
p {
  color: green;
}

CSS Properties

1. Color property: to give the text color.

There are two color types: Named Colors and Hex Equivalents.

p {
  color: green;
}

A hexadecimal value starts with a # followed by six digits values ranging from 0 (low) to F (high). This color code represents how intense the red, blue, and green components of the color are.
#FF0000 The primary color red: the first two digits have the highest values, and the remaining digits are all 0.
#00FF00 The primary color green: the second two digits have the highest values, and the remaining digits are all 0.
#0000FF The primary color blue: the last two digits have the highest values, and the remaining digits are all 0.

Discover different hex values for all colors in the spectrum, with a color picker.

2. Background Color

background-color property: change the background color of an element.

p {
  background-color: blue;
}

Don’ t confusecolor andbackground-colorThey are similar, not the same.

3. Font Family

font-family property: determines the text font.

Many fonts exist: some are generic browser default “font-families”, others are less known. Not all render equally well by web browsers. Find the most common web fonts here.

GENERIC FONT FAMILY

In CSS, there are six generic font families, that render well by web browsers:

serif: often used in printed documents, because of print readability.
sans-serif: often used on computer screens, because of web readability.
monospace: a font of which all characters- even frequently- used coding symbols <, >, {, } take up the same amount of space width. often used for programming, because of readability.
cursive: Font with cursive characteristics.
fantasy: Font with decorative characteristics
system-ui: Falls back to the default font on the user's operating system (macOS, Windows, Ubuntu, Linux.)

Alternative fonts:

serif: Arial; Helvetica
sans-serif: Times New Roman

The downside of alternative fonts is that not all browser viewers have these fonts available. If not, they will use a default font instead.

Fall back fonts:

The font-family property supports a syntax where you can specify a list of fonts -separated by commas- to "fall back" if the alternative font isn't found:

most desired font > next font > default (generic) font

/* fall back fonts */
.no-serifs {
  font-family: Helvetica, Arial, sans-serif;
}

4. Font Characteristics

FONT STYLE

The font-style property: to make the text italic, with values:

italic
normal

p {
  font-style: italic;
}

FONT WEIGHT

The font-weight property: to make text bolder (or lighter), with values:

lighter
normal
bold
bolder

.light-text {
  font-weight: lighter;
}.bold-text {
  font-weight: bold;
}.bolder-text {
  font-weight: bolder;
}

Applied these styles to elements with class names, it looks like:

Lighter text
Normal text
Bold text
Bolder text

5. Text Align

The text-align property is like aligning text in a word processor, with values:

left
right
center
justified

6. Text Decoration

The text-decoration property: to add a decorative line to certain text, with the most common values:

overline: Overline.
underline: Underline.
line-through: "strikethrough" in word processors.
none: Removes any text decoration that appears by default. If links (a tags) to not have an underlined!

p {
  text-decoration: overline underline line-through;
}

These are only the most basic CSS rules, selectors, and properties.

To know more about CSS, you can use the below resources:

The Mozilla Developer Network (MDN-web documentation)
Stack Overflow, a Questions & Answer site for developers by developers.
CSS-Tricks, a popular blog for CSS techniques.
W3Schools, a popular resource for basic web development.