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 :
|
|
|
|