selector The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. In the following example all <p> elements will be center-aligned, with a red text color: Example
p { color: lime; text-align: center;}
...is same as: p { color: lime ; text-align: center; }
Centered lime text
table{ border :2px solid #222222; } Table is a selector and border is a property and given value 2px solid #222222 is the value of that property.
Universal Selectors (*)
Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type:
*
{ color: #000000; }
Descendant Selectors
ul em { color: #000000; }
Class Selectors
h1
.
black { color: #000000; } This rule renders the content in black for only <h1> elements with class attribute set to black.
The ID Selectors
#
black { color: #000000; } This rule renders the content in black for every element with id attribute set to black in our document.
The Child Selectors
body
>
p { color: #000000; } This rule will render all the paragraphs in black if they are direct child of <body> element. Other paragraphs put inside other elements like <di> or <td> would not have any effect of this rule.
The Attribute Selectors
You can also apply styles to HTML elements with particular attributes. The style rule below will match all the input elements having a type attribute with a value of text : input[type = "text"]{ color: #000000; }
Multiple Style Rules
Multiple style rules for a single element: h1 { color: #661; font-weight: bold; margin-bottom: 2px; text-transform: none; }
Grouping Selectors
Separate the selectors with a comma:
h1, h2, h3
{ color: red; font-weight: normal; text-transform: lowercase; }
CSS Rules Overriding
1 Inline style sheet takes highest priority. 2 Rules defined in <style>...</style> tags will override rules defined in any external style sheet file. 3 Rule defined in external style sheet file takes lowest priority, and rules defined in this file will be applied only when above two rules are not applicable.