CSS Basics

What is CSS?

Like HTML, CSS is not a programming language. It's not a markup language either. CSS is a style sheet language.

CSS is what you use to selectively style HTML elements. For example, this CSS selects paragraph text, setting the color to red:

p {
                    color: red;
                }

Anatomy of a CSS ruleset

Let's dissect the CSS code for red paragraph text to understand how it works :

The whole structure is called a ruleset. (The term ruleset is often referred to as just rule.) Note the names of the individual parts:

Selector
Declaration
Properties
Property value

To modify multiple property values in one ruleset, write them separated by semicolons, like this:

p {
                    color: red;
                    width: 500px;
                    border: 1px solid black;
                }

Fonts and text

Now that we've explored some CSS fundamentals, let's improve the appearance of the example by adding more rules and information to the style.css file.

First, find the output from Google Fonts that you previously saved from What will your website look like?. Add the link element somewhere inside your index.html's head (anywhere between the head tags).
Next, delete the existing rule you have in your style.css file. It was a good test, but let's not continue with lots of red text.
Add the following lines (shown below), replacing the font-family assignment with your font-family selection from What will your website look like?. The property font-family refers to the font(s) you want to use for text. This rule defines a global base font and font size for the whole page html { font-size: 10px; /* px means "pixels": the base font size is now 10 pixels high */ font-family: "Open Sans", sans-serif; /* this should be the rest of the output you got from Google fonts */ }
Now let's set font sizes for elements that will have text inside the HTML body. We'll also center the heading. Finally, let's expand the second ruleset (below) with settings for line height and letter spacing to make body content more readable. h1 { font-size: 60px; text-align: center; } p, li { font-size: 16px; line-height: 2; letter-spacing: 1px; }
Adjust the px values as you like. Your work-in-progress should look similar to this:

CSS: all about boxes

Something you'll notice about writing CSS: a lot of it is about boxes. This includes setting size, color, and position.

Most HTML elements on your page can be thought of as boxes sitting on top of other boxes.

CSS layout is mostly based on the box model. Each box taking up space on your page has properties like:

padding, the space around the content. In the example below, it is the space around the paragraph text.
border, the solid line that is just outside the padding.
margin, the space around the outside of the border.

References

All the documentation in this page is taken from MDN

The images and information are credited to their rightful owners