Notes on CSS Syntax

Introduction

CSS stands for cascading style sheets

CSS is the standard way to specify the visual style of a web page

it was initially created by Hakon Wium Lie

CSS has hundreds of pre-defined properties and values

so you must have a CSS reference handy when you are using it

Basic Rule Structure

most of the CSS we’ll write consist of rules

here’s an example of a CSS rule:

h1 {
    color: blue;
    background-color: yellow;
    border: 1px solid black;
}

h1 is the rule’s selector: it selects the DOM elements that the rule will apply to; this rule applies to all h1 elements

between the { and } brackets come declaration; there are three declarations here, each ending with a ;

each declaration has this form:

property: values;

for example, consider this declaration:

color: blue;

color is the property, and blue is its value

a declaration can have multiple values, e.g.:

border: 1px solid black;

the border property has three separate values, 1px, solid, and black

CSS has 100s of properties, and even more possible values. Not all properties allow the same values, so you’ll need to have access to a CSS reference to figure out what’s possible

Formatting CSS Rules for Human Readability

CSS does not usually care about extra spaces or blank lines in a rule

but humans do care about spacing, so we will using extra lines and consistent indentation to make our CSS rules easy to read

Other Kinds of CSS Statements

rules are the most common kind of CSS statement, but sometimes you may encounter others

@-rules are used for meta-data, e.g. @import can be used in CSS to import other CSS style files

a nested rule is a kind of @-rule that allows for style to be nested

source code comments are comments for human readers; CSS comments always start with /* and end with */