Hello dear readers! welcome back to another section of my tutorial on Css. In this tutorial post, am going to be discussing about the Syntax used in Css. Now without wasting much time lets get down to the business of the day.
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 <table> or <div> 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.
RECOMMENDED: Css cursor
You can put CSS Style Syntax as follows:
selector {property: value}
Example: You can define a table border as follows:
table {
border : 2px solid green;
}
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 needs. 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;
}
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;
}
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 <em> element only when it lies inside the <ul> tag.
ul em {
color: #FFFFFF;
}
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 defined.
. blue {
color: 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 decide to make it a little more particular. For example:
h3.blue {
color: blue;
}
color: blue;
}
This Style rule renders the content in blue for only <h3> elements 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;
}
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;
}
color: blue;
}
This Style rule renders the content in blue for only <h3> elements with id attribute set to blue.
The true power of id selectors is when used as the foundation for descendant selectors. Example:
#blue h3 {
color: blue;
}
color: blue;
}
In this example, all the level 3 headings will be displayed in blue color when those headings lies within tags having id attribute set to blue.
RECOMMENDED: Css outline
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;
}
color: blue;
}
This Style rule renders all the paragraphs in blue if they are a direct child of the <body> element. Other paragraphs put inside other elements like <span> or <td> would 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;
}
color: blue;
}
The advantages to this method is that the <input type="submit" /> element is unaffected, and the color applied only to the desired text fields.
Below are the following rules applied to attribute selector.
- p[lang] - It selects all the paragraph elements with a lang attribute.
- p[lang="fr"] - It 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 holds values that are exactly "en" , or begin with "en-"
RECOMMENDED: Css Layer
Multiple Style Rules
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;
}
color: blue;
font-weight: normal;
letter-spacing: 6em;
margin-top: 3em;
text-transform: uppercase;
}
All the property and vaue pairs are seperated by a semicolon (;). You can keep them in a single line or multiple lines. For easy readability, it is recommended for them to be kept in seperate lines.
For a while, do not 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 below example:
RECOMMENDED: Css border
h1, h2, h3 {
color: blue;
font-weight: normal;
letter-spacing: 6em;
margin-top: 3em;
text-transform: uppercase;
}
color: blue;
font-weight: normal;
letter-spacing: 6em;
margin-top: 3em;
text-transform: uppercase;
}
This defined style rule is going to be applicable to h1, h2 and h3 element. The order of the list isn't important. All the elements in the selector will have corresponding declarations applied to them.
You can also combine the various class selectors together as shown below:
#content, #footer, #supplement {
position: relative;
left: 400px;
}
position: relative;
left: 400px;
}
Alright guys! This is where we are rounding up for this tutorial post. In my next tutorial, we are going to be studying about CSS Inclusion.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and i will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.