Hello guys evening and welcome to this tutorial, in my last tutorial i introduced Cascading Style Sheets to you guys. Today i want to talk about the Syntax used in Cascading Style Sheets. Now without wasting much time lets get down to the business of the day.
A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your HTML document. A Style Rule is made up of three parts:
A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your HTML document. A Style Rule is made up of three parts:
- Selector: A selector is a HTML tag at which a style will be applied. This could be any tag like
or
etc.- Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border, etc.
- Value: Values are assigned to properties. For example, color property can have the value either blue or #FFFFFF etc.
selector {property: value}
Example: You can define a table border as follows:
table{ border : 2px solid green; }
Here table is a selector and border is a property and the given value 1px solid green is the value of that property.
You can define selectors in various simple ways based on your comfort. Let take a look at the various ways in which selectors can be defined.
The Type Selectors
This is the same selector we used in the above example. Again one more example to give a color to all level 2 headings:
h2 {
color: green;
}
The Universal Selectors
Instead of selecting elements of a specific type, the universal selector simply matches the name of any element type:
* {
color: #FFFFFF;
}
This Style Rule Renders the content of every element in this document in white.
The Descendant Selectors
Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the example below, the style rule will apply to element only when it lies inside the- tag.
ul em {
color: #FFFFFF;
}
The Class Selectors
You can define style rules based on the class attribute of the the HTML elements. All the elements having that class will be formatted according to the rule that is defined.
. blue {
color: blue;
}
This Style rule renders the content in blue for every element with class attribute set to blue in our HTML document. You can also decide to make it a little more particular. For example:
h3.blue {
color: blue;
}
This Style rule renders the content in blue for onlyelements with class attribute set to blue.
The ID Selectors
You can define style rules based on the id attribute of the HTML elements. All the elements having that id will be formatted according to the style rule defined.
#blue {
color: blue;
}
This Style rule renders the content in blue for every element with id attribute set to blue in our HTML document. You can make it a little more particular. For example:
h3#blue {
color: blue;
}
This Style rule renders the content in blue for onlyelements with id attribute set to blue.
The true power of id selectors is when they are used as the foundation for descendant selectors. For example:
#blue h3 {
color: blue;
}
In this example, all level 3 headings will be displayed in blue color when those headings lies within tags having id attribute set to blue.
The Child Selectors
You have seen the descendant selectors. There is one more type of selector, which is very similar to the descendant selectors but have different functionality. Consider the following example below:
body > p {
color: blue;
}
This Style rule renders all the paragraphs in blue if they are a direct child of the element. Other paragraphs put inside other elements like orwould not have any effect of the style rule.
The Attribute Selectors
You can also apply style rules 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: blue;
}
The advantages to this method is that the element is unaffected, and the color applied only to the desired text fields.
Below are the following rules applied to attribute selector.- p[lang] - Selects all paragraph elements with a lang attribute.
- p[lang="fr"] - Selects all paragraph elements whose lang attribute has a value of exactly "fr".
- p[lang~="fr"] - Selects all paragraph elements whose lang attribute contains the word "fr".
- p[lang| = "en"] - Selects all paragraph elements whose lang attribute contains values that are exactly "en" , or begin with "en-"
You may need to define multiple style rules for a single element. You can define these rules to combine multiple properties and corresponding values into a single block as defined in the following example below:
h1 {
color: blue;
font-weight: normal;
letter-spacing: 6em;
margin-top: 3em;
text-transform: uppercase;
}
Here all the property and vaue pairs are seperated by a semicolon (;). You can keep them in a single line or multiple lines. For better readability, it is recommended for them to be kept in seperate lines.
For a while, don't bother about the properties mentioned in the example above. These properties will be explained in details in the coming tutorials.
Grouping Selectors
You can apply a style to many selectors if you like. Just seperate the selectors with a comma, as given in the following example below:
h1, h2, h3 {
color: blue;
font-weight: normal;
letter-spacing: 6em;
margin-top: 3em;
text-transform: uppercase;
}
This defined style rule will be applicable to h1, h2 and h3 element as well. The order of the list is irrelevant. All the elements in the selector will have the corresponding declarations applied to them.
You can also combine the various class selectors together as shown below:
#content, #footer, #supplement {
position: relative;
left: 400px;
}
