CSS, or Cascading Style Sheets, is the preferred way to style text and elements on webpages made in HTML.
At its simplest, it is made up of rules that apply to elements specified by a selector.
CSS rules are created with a property name and property value, separated by a colon, and a semicolon at the end.
Example: color: blue;
The rules modify CSS properties, like color, font, and size.
There are hundreds of CSS properties, allowing almost anything about the text to be changed.
CSS selectors tell the rules what to apply to.
There are dozens of css selectors, each with a different function and use.
The simplest one is just the name of a tag, for example, p.
That will select all <p> elements on the page.
Another useful one is to select an element based on its id, which is done by #elementid.
That will select the element on the page with an id of elementid.
Similarly, .classname will select every element on the page with the class of classname.
These should be enough for basic webpages.
There are 3 ways to add css to a webpage: inline, globally in the document, and globally with an external stylesheet. This page will cover the first two methods.
Inline CSS is created by setting the style attribute on an element, like this:
<div style="css here">text and <p>elements</p> that the style will apply to</div>
It does not require a selector as it only applies to one element(the element the style attribute was set on).
Because it has to be declared on each element, it is clumsy and hard to change.
For this reason, it is preferred to use CSS globally.
Global CSS is placed in a <style> element inside the <head> element, like this:
Global CSS is written as above, with a selector, then braces surrounding the rules.
This sections covers the values of CSS properties.