CSS syntax includes the selector and declaration block, as shown below. A CSS selector defines the HTML tag to style. A selector can be <title> or <h1>.
Semicolon-separated declarations can be found in this block. Here are two types of declarations for the example:
 |
CSS Syntax
In general css syntax can be devide into 3 parts
Selector: Selectors are nothing but the html tags like h1 to h6, p, body and also we can use id and class
Style: To add style we will use style keyword to apply the css style the selector
Declaration: This part includes property and value
| SELECTORS | FIXED KEYWORD | DECLARATION |
|---|---|---|
| <p> | style | property:value |
| <h1> | style | property:value |
The following syntax uses for the styling of the html element.
|
Selector{property : value; property2 : value2; } |
Explanation
There are multiple types of syntaxes in CSS. Basic syntax is simple but this basic syntax declaration can't help to become a pro HTML devloper, You should have to know below syntaxes
The following example shows the proper syntax declaration of the CSS with HTML.
|
<!DOCTYPE html> <html> <head> <style> p { color: blue; text-align: left; } h1 { color: orange; background-color: green; } </style> </head> <body> <h1>Hello Tutor!</h1> <p>This lines are styled with CSS.</p> </body> </html> |
Output
The following image returns the output of the CSS property and its value.
 |
You can change the color, font size, place, and background color of the html attribute
CSS Color Syntax:
A simple example to apply the color for the h2, p tags by applying the color style
|
<h2 style="color:red;">How to change the text color of h2</h2> <h4 style="background-color:yellow;">How do i change the background color of h4</h4> <p style="background-color:green;">How do i change the Paragraph background color in HTML CSS</p> |
Conclusion
In this CSS tutorial section we covered what is CSS syntax in HTML and types of css syntaxes and how to use them.
|
Article Contributed By :
|
|
|
|