01. Introduction to CSS

Recall from our HTML Tutorial series that HTML defines the content of the page. This tutorial series will teach you how to use CSS, which is used to define the presentation. We will then go over JavaScript, which handles the behavior.

Long, long ago, developers used to placed their styling rules within HTML elements. However, it soon became too complex to keep track of everything, let alone apply stylings to multiple elements. To make life easier, the World Wide Web Consortium (W3C) created CSS!

The Basics

CSS stands for Cascading Style Sheets and is used to define how HTML elements should appear.

CSS rules contain two parts: a selector and a declaration. The declaration consists of a property and value:

/* My first CSS block! */
p {
  color: red;
  font-size: 20px;
} 

Selectors

Here, the selector is the p element. This means that all corresponding <p> tags within our HTML documents are chosen.

Declarations

The declaration then applies styles to the chosen element. It is wrapped in curly braces {}.

Properties

Within the declaration are properties. Here, they arecolor, and font-size, which sets the text color and size respectively.

The property values are red and 20px, making our text look like this!

Notice how each declaration is separated by a semi-colon. Think of this as the English sentence, "Select all paragraph tags in our HTML document and set the color to red and font-size to 20px."

Comments

And lastly, to add comments within CSS documents we start with a /* and end with a */.

Simple enough, right? Now let's learn how to link your CSS rules to an HTML document!

Build modern and responsive webpages

HTML & CSS

Build modern and responsive webpages Try Front-end

This book teaches HTML as if it's for anyone - hobbyists, students, and professionals - and it's full-color throughout. It utilizes information graphics and lifestyle photography to explain the topics in a simple way that is engaging. You can progress through the chapters from beginning to end or just dip into topics of particular interest at your leisure.

$ Check price
29.9929.99Amazon 4.5 logo(926+ reviews)

More Front-end resources

Aching back from coding all day?

Inversion Therapy Table

Aching back from coding all day? Try Back Problems

Stretch out your back and relieve your back muscles with inversion therapy. This device counteracts the forces of gravity on the body by decompressing and elongating the spine. By using this product just ten minutes a day, you can be well on your way to improved circulation and posture while relieving muscle aches, back pain and stress.

$$ Check price
119.98119.98Amazon 4.5 logo(1,700+ reviews)

More Back Problems resources

Ad