JWS Docs / CSS Intro

The most important thing to remember when setting out to learn about CSS is that you don't need to know it all to get started.

The best way of learning CSS in our opinion is to know the basics and common syntax, plus an understanding of how and where to find further details when you need them. Also a knowledge on how to use the browser developer tools to inspect your code, along with how to change or add new selectors, properties and values.

CSS, or Cascading Style Sheets, is a language used for describing presentation its look and formatting of a document written in HTML, XML and more. It controls the layout of multiple web pages all at once, allowing you to define the style of elements like fonts, colours, margins, and spacing plus so much more, we are just getting started with that list!

Here’s a simple example of what CSS can do:

body {
  font-family: Arial, sans-serif;
  background-color: #f2f2f2;
}

h1 {
  color: rebeccapurple;
  text-align: center;
}

p {
  font-size: 1.2rem;
  line-height: 1.5;
}

The above snippet shows the layout of 3 CSS selectors or sometimes referred to as CSS rules. Each CSS selector is made up of three parts a selector which may have multiple properties each having a value defined like so

selector {
    property: value;
}

• The body selector sets the font for the entire webpage and gives the background a light grey colour.
• The h1 selector styles the main heading to be purple and centred.
• The p selector sets the font size and line spacing for paragraphs.

You can see we have defined h1 colour using what's called a named colour and have defined the body background using a colour written in hexadecimal colour code (HEX). We have many options available when it comes to colour which we will explore soon, but for now another common format for colour you will see is RGB.

RGB stands for Red, Green, Blue these letters are then followed by a number value inside parentheses, with each of the comma separated numbers relating in order to each colour. Here are a few examples of RGB colours, followed by the corresponding HEX values:

• Black: RGB(0, 0, 0) - No light, resulting in black. In HEX is #000000
• White: RGB(255, 255, 255) - Full intensity of all three colours, resulting in white. In HEX is #ffffff
• Red: RGB(255, 0, 0) - Full intensity of red, no green or blue. In HEX is #ff0000
• Green: RGB(0, 255, 0) - Full intensity of green, no red or blue. In HEX is #00ff00
• Blue: RGB(0, 0, 255) - Full intensity of blue, no red or green. In HEX is #0000ff
• Yellow: RGB(255, 255, 0) - Full intensity of red and green, no blue. In HEX is #ffff00

This is only a very quick view into colour we've lots more to come on this topic. If you want to explore some more colours in the mean time take a look at our variables page.

How CSS started

CSS was invented by Håkon Wium Lie, a Norwegian web pioneer, while he was working at CERN (the European Organization for Nuclear Research) in 1994. He proposed the concept of Cascading Style Sheets to separate a document's content from its presentation, which was a significant advancement in web design. The first standardized specifications for CSS, known as CSS1, were adopted by the World Wide Web Consortium (W3C) in 1996, this laid the foundation for modern web design and allowed for more flexible and sophisticated styling of web pages.

Why is it sometimes called vanilla CSS

"Vanilla CSS" is a term often used to describe plain, unadorned CSS without any pre-processors, frameworks, or libraries added. It's just the basic CSS that you write and use directly without any additional tools or extensions.

The term "vanilla" itself is commonly used in tech to describe something in its simplest, most standard form, much like plain vanilla ice cream without any toppings or flavours. So, when people refer to "vanilla CSS," they mean writing and using CSS in its pure, straightforward form, without relying on extras like Sass, LESS, Tailwind, Bootstrap, or any other CSS framework or pre-processor.

Browser support of CSS features

One of the great things about CSS is that it's constantly evolving with new features being added. Though this does means that the browser companies also have to evolve their browsers in order to support these new features, so unfortunately when a great new feature is released it can take some time for it to be fully supported by just the major browsers alone.

The good news is the major browsers do regularly update themselves by bringing out new versions that contain new feature support, so keeping up with which one supports what can be a bit of a nightmare.

But there are websites out there that can help you search which web features (CSS & HTML) are supported by browsers and devices such as :

caniuse.com built and maintained by Alexis Deveria, (with occasional updates provided by the web development community.)

Googles Web Platform Status

You can also read our Evergreen Browsers vs Published Websites Sprout of Wisdom that talks about browser support, the Baseline initiative and Progressive Enhancement. We also have a growing number of other articles and tips in our Sprout of Wisdom tips section that talk about some of the newly supported CSS features we think are great.

CSS can do

Building & layout design

Control how HTML elements react to each other enabling us to build/design layouts.

Helps create flexible content layouts and sizing for different screens and devices

Visual design

Set the font, font size, font weight plus lots more in regards to Typography.

Set colours, background colours or import images to build backgrounds.

Animations, interactions & transitions

We are also able to use transitions and scroll to offer interactions to the users.

Brings us the ability to animate SVG images and HTML elements.

Functionality & validation

We can validate or offer feedback to users using forms

Add calc functions to help with font and layout sizing

Plus so much more...

Using it

The first area we are going to take a look into is how you link HTML elements to CSS selectors that will then effect the styling of that HTML element.

First we need to make sure that our CSS is linked to our HTML page we do this by adding a link into the head section of the page which will look like

<!DOCTYPE html>
<html lang="en">
   <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> </title>
   	<meta name="description" content=" ">
	<link rel="stylesheet" href="/css/style.css">
</head>
<body>

In the above example the link tag inside the head section links to an external CSS file named styles.css.

Within the link tag a rel="stylesheet" attribute is used to specify the relationship between the current document and an external resource. In this case, it indicates that the linked file is a stylesheet, which contains CSS rules that define the presentation and layout of the web page.

The href="/css/style.css" part defines the file style.css is stored within the folder called css.

By linking an external stylesheet, you can keep your HTML and CSS separate, making your code more organized and easier to manage. It also allows you to reuse the same CSS file across multiple HTML pages.