CSS Syntax/Rules

A style sheet as a set of instruction that tells a browser how to display a particular type of HTML element. Each of these instruction or rules has two parts: Selector and declaration

Selector: HTML element are known as selectors in css, at which a style will be applied.

There are two kind of selectors:

Type: The and element are used as selector. This is called element type selector.

Attribute: class and Id.

Declaration: A property and its associated value is known as a declaration.

Property: The property defined for each rule will apply to every element in the document. Include: color, background-color, border, etc..

Value: Values are dependent on the property. Include: blue, #f1f1f1, green, 1px, etc.

CSS style rule syntax
The combination of a declaration and a selector is known as a rule. Each property is identified by the property name, followed by a colon and the property value, within the curly braces.

Selector {property: value;}

Example to make green paragraph

p { color: green;}
Here p is the selector and color is a property and given value green the value of that property. Always end declaration with a semicolon (;).

Multiple style rules


Example to define multiple style rules for a single element. Separated by semicolon (;)

h1 {
color: #f1f1f1;
font-weight: normal;
letter-spacing: 5em;
text-transform: lowercase;
margin: 3em;
}

Leave a Reply