css syntax

When it comes to web design, the name Cascading Stylesheet (CSS) language comes first. Any website can be nicely decorated with CSS syntax.

The main function of CSS syntax is to improve the website or browser with color, font, position, border, margin, padding, and background.

Related: 5 Best examples of creating HTML Nav Bar

CSS syntax always works with property, value, and selector. The selector is the element of HTML that you have to style.

If you want to color your heading, then the “color” keyword is your property and whatever color you want to give like “red” then it is your value.

Related: Best 8 examples of using CSS background position

To give you a better understanding, we have shown in the table below how property and values work inside the CSS syntax.

CSS Properties

No.PropertiesValues
1colorred
2padding20px
3background-colorblue
4margin15px
5font-size16px
6border2px solid red
7text-aligncenter
8font-familysans-serif
9background-positioncenter
10font-weightbold

CSS Syntax Examples

We have some great examples of CSS Syntax which after watching, you will know how to write better CSS code.

<style>
p {
	font-size: 20px;
	color: #064857;
	font-family: sans-serif;
} 
h1 {
	font-size: 40px;
	color: #ed832f;
	text-align: center;
}
a {
	font-size: 18px;
	color: #ed982f;
	font-weight: bold;
}
div{
	background-color: red;
	padding:25px;
	border: 2px solid #000;
}
</style>


<div>
	<p>Want to learn CSS?</p>
	<h1>Get the best example to learn better</h1>
	<a>Yes, i want to learn CSS</a>
</div>

CSS Class Syntax

If you want to use CSS Class for your element then follow the example given below.

<style>
.myinfo {
	font-size: 20px;
	color: #064857;
	font-family: sans-serif;
} 
.myheading {
	font-size: 40px;
	color: #ed832f;
	text-align: center;
}
</style>

<p class="myinfo">Want to learn CSS?</p>
<h1 class="myheading">Get the best example to learn better</h1>

CSS Border Syntax

There are many ways to place CSS Border, let’s know how to use CSS Border property.

<style>
.mysection {
	border: 2px solid red;
	padding: 25px;
	border-radius: 20px;
}

OR

.mysection {
	border: 2px dashed;
	border: 2px dotted;
	border: 2px double;
	border: 2px outset;
	border: 2px inset;
	border-left: 2px solid green;
	border-right: 2px solid pink;
	border-top: 2px solid blue;
	border-bottom: 2px solid red;
}
</style>


<div class="mysection">
	<p>Want to learn CSS?</p>
	<h1>Get the best example to learn better</h1>
</div>

CSS Margin Syntax

If you want to give space to any of your element boxes from all four sides. So for that, you have to use CSS margin property.

<style>
.mysection {
    border: 2px solid red;
    margin: 50px;
}

OR

margin-top: 50px;
margin-bottom: 50px;
margin-left: 50px;
margin-right: 50px;

OR

margin: 50px 70px; /* Top, Bottom 50px And Left, Right 70px */

margin: 50px 40px 25px 45px; /* Top 50, Right 40, Bottom 25, Left 45px */
</style>


<div class="mysection">
	<p>Want to learn CSS?</p>
</div>

CSS Background Image Syntax

To apply an image, you have to use the Background Image property and its value will be the path of your image.

<style>
.mysection {
    background-image: url(myimage.jpg);
    padding: 100px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
</style>


<div class="mysection">
	<p>Want to learn CSS?</p>
</div>

CSS Padding Syntax

The CSS padding property is used to give space to any element or box inside.

<style>
.mysection {
    border: 2px solid red;
    padding: 50px;
}

OR

padding-top: 50px;
padding-bottom: 50px;
padding-left: 50px;
padding-right: 50px;

OR

padding: 40px 60px; /* Top, Bottom 40px And Left, Right 60px */

padding: 50px 40px 25px 45px; /* Top 50, Right 40, Bottom 25, Left 45px */
</style>


<div class="mysection">
	<p>Want to learn CSS?</p>
</div>

CSS Font Syntax

Many CSS properties are used to decorate the font better.

<style>
.myinfo {
    font-size: 20px;
    font-family: sans-serif;
    font-weight: 700;
    letter-spacing: 4px;
    text-align: center;
    color: #570fe4;
}
</style>

<p class="myinfo">Want to learn CSS? Get some best examples</p>

CSS Color Syntax

Color syntax is written in many ways within CSS like RGB values, HEX values, and others. Let’s know that all one by one.

<style>
.myinfo {
    color: #fff;
	background-color: red;
}

OR

background-color: rgb(191, 109, 94);
background-color: #3F51B5;
background-color: rgba(37, 234, 52, 0.5);
background-color: hsl(188, 100%, 64%);
</style>

<p class="myinfo">Want to learn CSS? Get some best examples</p>

CSS Hover Syntax

When you move your mouse over an element, the movement that occurs is called the Hover effect. Let’s know how to use CSS Hover property.

<style>
.myinfo {
    color: #000;
    font-size: 18px;
}
.myinfo:hover {
    font-size: 25px;
    color: #E91E63;
    border-bottom: 2px dashed;
}
</style>

<p class="myinfo">Want to learn CSS? Get some best examples</p>

Media Query Syntax

Media Query is used inside CSS to make the design responsive according to the screen size of the device. The CSS property below will work for up to 480px screens.

.myinfo {
	color: #000;
	font-size: 18px;
}

@media screen and (max-width: 480px) {
.myinfo {
	color: red;
	font-size: 25px;
	background-color: yellow;
  }
}

<p class="myinfo">Want to learn CSS? Get some best examples</p>

CSS Comment Syntax

There are 2 ways to comment within CSS, one is single-line comment and the other is a multi-line comment.

<style>
.myinfo {
	/*color: red;*/
	font-size: 18px;
}
.myinfo {
	/*color: red;
	font-size: 18px;*/
}
</style>

Internal Stylesheet

Internal CSS is included with a style tag inside the head section. If you have a very short CSS code, you can put it in your head section.

<html>
	<head>
		<style>
			.myinfo {
				color: #000;
				font-size: 18px;
			}
		</style>
	</head>
	<body>
		<p class="myinfo">Want to learn CSS? Get some best examples</p>
	</body>
</html>

External Stylesheet

If you want to use External CSS for your CSS code, then for that you will have to create a separate CSS file. After creating the file, you have to link it inside the head tag.

<html>
	<head>
		<link rel="stylesheet" href="mystyle.css">
	</head>
	<body>
		<p class="myinfo">Want to learn CSS? Get some best examples</p>
	</body>
</html>

Inline styles

Inline CSS is rarely used, if you want to give inline style, then for that you have to use style attribute.

<p style="color: blue;">Want to learn CSS?</p>
<h1 style="font-size: 15px;">This is my heading</h1>

Frequently Asked Questions

We have answers to some questions that people search on the Internet every day. Let’s know what those questions are and what their answers are.

How do I link CSS to HTML?
To link CSS with html, you can place your file inside the head tag. For example link rel = “stylesheet” href = “mystyle.css”

What are the 3 types of CSS?
There are 3 types of CSS, internal, external, and inline

How do you put a full background image on HTML?
If you want to apply the full background image, then you can apply the image above your body tag. for example Background-image: url (“myimage.jpg”).

What is div in HTML?
In simple language, div is a box inside which you set your elements.

How do you underline in HTML?
With the u tag you can underline your text.

Where do I put CSS in HTML?
There are 3 ways to apply CSS, either you can link your file inside the head tag, or you can add inline CSS, or you can place your CSS on the same page with the style tag.

What is text formatting in HTML?
To make the text appear well, the text is formatted with a few HTML tags.

What is BR tag?
br tag is used to break the line.

What is the HTML code for bold?
You can use b tag and strong tag to bold your text.

Related: Easiest way of applying HTML background color and image