Syntax is the arrangement of words to create sentences. In computer code, it is the arrangement of symbols and statements that create instructions in a computer language.
CSS Syntax
CSS rule consists of a selector, which targets a specific HTML element and one or more declarations used to style its content.
Declarations are placed between curly brackets/braces ({ }), the declaration block. Each declaration defines a property and a value. The colon (:) symbol is used to separate the property and value and the semicolon (;) finishes the declaration.
Multiple declarations can be added in between the curly brackets.
Even though the above CSS rule is valid, it is better to write each declaration on separate lines so they are easier to read.
color: blue;
background-color: gray;
font-size: 24px;
text-align: center;
}
CSS Selectors
CSS Selectors identify which HTML item will be targeted by the CSS rule.
Different types and combinations of selectors can be used to target different elements, classes and IDs within an HTML document.
Element Selector
The Element Selector is the most basic type of selector. To target an HTML element we use the elements tagname as the selector in CSS.
color: blue;
font-size: 24px;
}
ID Selector
The ID Selector targets IDs within an HTML document. An ID selector is written with a hashtag (#) followed by the name of the ID.
background-color: blue;
font-color: #fff;
}
Class Selector
Class Selectors target classes within the HTML document. To write a class selector, add a period (.) followed by the name of the class.
background-color: #f5f5f5f;
color: blue;
font-size: 32px;
}
Universal Selector
One selectors targets all element within the HTML document. This is called the Universal Selector and is written with an asterisk (*) symbol.
background-color: #303030;
font-family: Helevtica, Arial,sans-serif;
font-size: 16px;
}
The Universal Selector is helpful to define the base styles for an HTML document, such as background colour, font, etc.
Grouped Selector
The Grouped Selector is used to target more than one element with the same CSS rule. To make a grouping of selectors we add the comma (,) symbol between each selector.
font-family: ‘Work Sans’, sans-serif;
color: blue;
}
This CSS rule will display all h1-h5 headlines in blue and in the Work Sans typeface or a default Sans Serif system font if Work Sans is unavailable.
Descendant Selector
To target any element (child) nested within another element (parent), we first add the selector for the parent element followed by a space and then the child selector.
color: blue;
font-style: italic;
}
The above CSS rule would make all <p> paragraph texts within the <div> element blue and italic.
Child Selector
To target the direct child element of a parent element, which ignores other descendants of the parent element, we use the greater-than symbol (>) between the parent selector and the child selector.
color: gray;
font-size: 20px;
}
This CSS targets all the child <p> paragraph texts directly nested inside the parent element and changes the colour of the text to gray and 20px in size. Any <p> paragraph texts within the parent element but nested within another <div> elements would be unaffected by this CSS rule.
Adjacent Sibling Selector
To style an element which immediately follows another element we use the plus symbol (+) as the combinator between the two selectors.
font-size: 18px;
font-style: italic;
}
This CSs would target the first <p> paragraph text following any <h1> headline and display this text in 18px and italicized.
General Sibling Selector
The General Sibling Selector is similar to the Adjacent Sibling Selector but allows for more elements to be targeted after the first element. This combinator uses the tilde (~) symbol placed between the sibling combinators.
background-color: yellow;
color:blue;
}
This would result in any <ul> unordered list following a <p> paragraph text, with the same parent, to display a list items in blue on a yellow background.
More selectors
This CSS selector tester is a really useful interactive guide to show how different selectors can target different content within a webpage.
We will look at more Selectors in detail in later chapters, for example, the :hover pseudo-class selector which alter the appearance of an element only when the cursor hovers over it (mouses over).
CSS Comments
CSS comments are super useful for designers/developers to add notes explaining what an area or line of code does and can be invaluable when returning to a project to understand what was written previously.
h1 {
color: blue;
text-align: right;
}
All CSS comments are ignored by the browsers, so whatever is written is only ever seen by designers/developers.
Next step
CSS – 2 – Box Model