Control How Your Website Looks

Cascading Style Sheets (CSS) are an important way to control how your web pages look. CSS controls the fonts, text, colors, backgrounds, margins, and layout. CSS offers several significant advantages over alternative approaches to web design.

Basic Selectors
Universal selector Selects all elements. Optionally, it may be restricted to a specific namespace or to all namespaces. Syntax: * ns|* *|* Example: * will match all the elements of the document.
Type selector Selects all elements that have the given node name. Syntax: elementname Example: input will match any <input> element.
Class selector Selects all elements that have the given class attribute. Syntax: .classname Example: .index will match any element that has a class of "index".
ID selector Selects an element based on the value of its id attribute. There should be only one element with a given ID in a document. Syntax: #idname Example: #toc will match the element that has the ID "toc".
Attribute selector Selects all elements that have the given attribute. Syntax: [attr] [attr=value] [attr~=value] [attr|=value] [attr^=value] [attr$=value] [attr*=value] Example: [autoplay] will match all elements that have the autoplay attribute set (to any value).
Specificity
The following list of selector types increases by specificity
Universal selector (*) Have no effect on specificity
Combinators (+, >, ~, ' ', ||)
Negation pseudo-class (:not())
Type selectors (e.g., h1) and pseudo-elements (e.g., ::before).
Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover).
ID selectors (e.g., #example).
The !important exception This declaration overrides any other declarations. More details here