CSS Syntax

The CSS provides the style to the HTML element, which the browser interprets. After being interpreted by the browser, the CSS style property will be applied to all the elements of the HTML. We can provide style property to the HTML element in three parts. These three parts are as follows.

Key Points on CSS:

Syntax

We must provide the CSS property to the HTML element in a proper way. We must follow the syntax below to implement the CSS property.

Syntax Example

selector { property: value;}

Example

Code Example: Styled Button with Header


<!DOCTYPE html>  
<html lang="en">  
<head> 
<meta charset="UTF-8"> 
>meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>Document</title>  
<style>  
/* styles.css */  
body {  
font-family: Arial, sans-serif;  
margin: 0;  
padding: 0;  
background-color: #f2f2f2;  
}  
#header {  
background-color: #333;  
color: white;  
text-align: center;  
padding: 20px;  
}  
h1 {  
font-size: 36px;  
margin-bottom: 20px;  
}  
p {  
font-size: 18px;  
margin-bottom: 10px;  
}  
.button {  
background-color: pink;  
color: white;  
padding: 10px 20px;  
border: none;  
text-align: center;  
text-decoration: none;  
display: inline-block;  
font-size: 16px;  
border-radius: 5px;  
cursor: pointer;  
}  
.button:hover {  
background-color: #990000;  
}  
</style> 
</head>  
<body>  
<div id="header"> 
<h1>Hello, CSS Example!</h1> 
<p>Welcome to Shorat. Here is a styled button:</p>
<button class="button">Click Me!</button>  
</div>  
</body>  
</html>

Output

Explanation Of Above Example