What is CSS?

CSS or Cascading Style Sheets is a style language used to add styles to HTML elements on the web. The term “cascading” refers to the nature in which it is processed, the interpreter “cascades” down the file interpreting code on a first come first serve basis. However, CSS declarations further down the document can override those that came before them by having more specific selectors. I’ll cover more on that in my next post, but if you can’t wait, you can read more about it here.

Adding Styles to Your HTML Docs

To add styles to an HTML document, you’ll want to create and link a CSS document. If your not familiar with how to do this, check out this guide.

To add styles to our HTML we need to use “CSS Rules”. Each CSS Rule consists of a Selector and a Declaration Block. Each Declaration Block can contain one or more declarations separated by semicolons.

CSS Rule Examples:

selector {
  property-name: value;
}

p {
  background-color: green;
}

Selectors

The “selector” specifies the HTML Element or set of elements that the rule applies to.

For Example:

We select an HTML Paragraph element <p> like this:

p { property declaration goes here; }

Two other common ways to select HTML Elements are by their Class or ID.

<html_element class="classGoesHere" id="idGoesHere">

Note: Class can be applied to multiple elements while ID must be unique to a single element in your project.

To select an element by Class, you add a . in front, like this:

.classGoesHere { property declaration goes here; }

To select an element by ID, you add a # in front, like this:

#idGoesHere { property declaration goes here; }

Declarations

A property declaration is made up of a property name and one or more property values separated by. Each property declaration ends with a semicolon. The list of property declarations goes between curly braces.

For Example:

.classGoesHere {
  property-name: value;
}

.classGoesHere {
  font-size: 22px;
  color: blue;
  font-weight: bold;
}

For more info on CSS, rules, selectors, declarations, property names and values, check out these resources:

https://developer.mozilla.org/en-US/docs/Web/CSS/Reference

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS3