CSS02: Syntax of CSS

a CSS code consist of three components: the selector, property and value of the property

selector{
  property : value;
}

It starts with a selector. selector is any HTML tags. the styles specified in the brackets will be applied to this tag. a selector also can be a class name or id of a tag to apply style to more specific part of the HTML.

Then it is followed by opening curly bracket. after the bracket is property of the html tag such as color, font, background and many more.

After the property is a colon and followed by the value for that property. this property and value pair must end with semicolon. finally closing bracket concludes all the style for the selector. Inside the bracket there can be more than one pair of property and value.

For example,

body {
  background-color: cyan;
}

So the selector is body. the property that this CSS code want to set style to is the background-color and the value set to this property is cyan.

A universal selector selects all the tags, meaning all tag will use this style. Universal selector uses the astrick symbol * as shown in the example below

* {
  color : blue;
}

This will cause all the elements in that html file has font with blue color.

A decedent selector is a selector that is inside of another tag. For example <tr> which resides inside of the <table> tag.

table tr{
  padding : 10px;
  color: black;
}

so the <tr> tag inside the <table> tag will follow this style.

another type of selector is the class selector. Where when a element or tag has its class sttribute specified.all element having this class name follows the style.

.status {
  color:green;
}

a class selector start with a dot. to select a more specific class according to specific element. we can specify the tag name as well.

h1.redHeading{
  color:red;
}

so any element written in HTML as follows will ne displayed red color font,

<h1 class = "redHeading">This font will appear red</h1>

<h1>This one appear black(default color)</h1>

Output in browser:

This font will appear red

This one appear black (default color)

Finally ID selector uses element's id attributes to apply the style. the selector start with hash #

#red{
  color: red;
}

Attribute selectors

input[type="text"]{
  color: red;
}

To apply style to element with specific attribute. like this one will apply to input type text. other input types like textarea, buttons, submit, select and etc will not.

Type something here :  

you can specify same style to a group of selectors

h1 h2{
  color: green;
  margin: 1 px;
}

this will apply same style for both h1 and h2.

<h1>the h1 heading</h1>
<h2>the h2 heading</h2>

Following is the output in browser for HTML code above:

the h1 heading

the h2 heading