CSS Syntax
CSS syntax can be divided into 3 parts:
- Selectors – The list of Selectors are h1 to h6, p, id, class, grouping etc. Selectors are covered in detail in the next page(CSS Selectors).
- style – The keyword ‘style’ is used to provide the styling to the Selectors.
- Declaration – Declaration includes property and a value.
Example: a) background-color: green; b) border-style: solid; c) color:tomato;
| Selectors | Fixed Keyword | Declaration |
|---|---|---|
| <p> | style | property:value |
| <h1> | style | property:value |
CSS syntax examples
There are multiple syntaxes for CSS like the basic syntax in CSS is simple but the basic syntax of CSS will not help much.
You must know the syntax for –
- Color syntax
- Margin Syntax
- White space syntax
- Syntax for CSS pseudo classes
- Pseudo-element syntax
- attribute selector syntax
- background color syntax
- borders syntax
- padding syntax
- height and width syntax
- fonts syntax
- syntax for links, tables, lists.
We are covering a few of the CSS syntax examples here and rest of the others are covered as we move along.
The Basic syntax for CSS
There is no such thing called basic syntax in CSS. Suppose you want to know the basic syntax for CSS to style the paragraph, then Styling can be done for a paragraph in multiple ways based on the requirement. Suppose, you want to provide a background color to paragraphs and a particular color to the texts of the paragraph, then you style the Paragraph like below:
p { background-color:lightblue; color: pink; }
Similarly, you can also style the text color, font size, border, margin, padding, tables, links, blocks, lists, height, width and much more and these styling can be applied for headings, body, id, class etc.
color syntax
You can apply colors to texts, borders, background, entire paragraph etc.
Example:
<h2 style="color:aqua;">Changing the text color of h2</h2> <h4 style="background-color:lightblue;">Changing the background color of h4</h4> <p style="background-color:yellow;">The content of the paragraph will be changed to yellow.</p>
margin syntax
If you want to provide space outside a border, then you can use margin like below –
Basic margin Syntax:
margin: 12px 20px 35px 10px;
Here, the top margin is 12px, right margin is 20px, bottom margin is 35px and the left margin is 10px.
Note:
Please click on our CSS margin to master everything about margins.
white space syntax
By default, White-space is normal i.e.
white-space: normal;
There are other white-space property like nowrap, pre, pre-wrap, pre-line, inherit etc.
Note: Do not worry about white spaces as we will master this in detail here(link to the white space page).
The Syntax for pseudo classes
Pseudo-classes are classes with special meaning.
For example – If you want to change the color of an element when the user hovers over it.
Syntax:
selector:pseudo-class {
property:value;
}
pseudo-element syntax
If you want to style a particular part of an element, then you can use pseudo-elements.
The syntax is:
selector::pseudo-element {
property: value;
}
Example:
p::first-letter {
font-size: 150%;
}
In this case, the first letter of the paragraph will be 150%
attribute selector syntax
There is no basic syntax in CSS. Styling can be done for a paragraph like below:
p {
background-color:lightblue;
color: pink;
}
Similarly, you can also style the text color, font-size, border, margin, padding, tables, links, blocks, lists, height, width and much more and these styling can be applied for headings, body, id, class etc.
The Styling of the HTML elements can be defined using CSS syntax.
For example, if we want to give h1 in red color then the syntax for that is:
h1{ color:red;}
So in this way, we can define CSS syntax.
Selecting HTML elements to apply style properties is defined as CSS selectors.
Syntax:
elementName { property1: value1; property2: value2; }
There is no particular syntax for CSS. But, we can define a syntax for HTML elements in CSS.
For example,
Syntax for <p> tag:
p{ colo:green; font-size:18px;}