It turns that there are a lot of CSS properties you can use to style elements. The point to is to look up for the particular property you need and not try to memorize all of them.
In this guide, we will talk about important CSS properties only.
To get started, let’s again create our basic HTML page.
<html>
<head>
<title> CSS Intro! </title>
</head>
<body>
<h1> This is the heading 1</h1>
<p> This is the paragraph </p>
</body>
</html>
Alright, let’s wrap our H1 and Paragraph inside the <div> tag. <div> is common HTML tag used to create sections inside the page.
<html>
<head>
<title> CSS Intro! </title>
</head>
<body>
<div>
<h1> This is the heading 1</h1>
<p> This is the paragraph </p>
</div>
</body>
</html>
Now, we will use <style> inside the head to add some styling to the <div> element. Since h1 and p are inside the <div> therefore all the styling we add to <div> will also apply to h1 and p elements.
Let’s add background colour to the <div> using background-color property.
<html>
<head>
<style>
Div {
Background-color: orange;
}
</style>
<title> CSS Intro! </title>
</head>
<body>
<div>
<h1> This is the heading 1</h1>
<p> This is the paragraph </p>
</div>
</body>
</html>
Now, let’s add width and height to set size for this <div> element.
<html>
<head>
<style>
Div {
Background-color: orange;
Width: 200px;
Height: 200px;
}
</style>
<title> CSS Intro! </title>
</head>
<body>
<div>
<h1> This is the heading 1</h1>
<p> This is the paragraph </p>
</div>
</body>
</html>
Now, we will add padding and margin to the <div> element.
Padding creates space inside of the border of the element and margin creates space outside the border of the element.
<html>
<head>
<style>
Div {
Background-color: orange;
Width: 200px;
Height: 200px;
Padding: 20px;
Margin: 20px;
}
</style>
<title> CSS Intro! </title>
</head>
<body>
<div>
<h1> This is the heading 1</h1>
<p> This is the paragraph </p>
</div>
</body>
</html>
Alright, let’s add some fonts, text size and make the text bold by using font-weight CSS property.
<html>
<head>
<style>
Div {
Background-color: orange;
Width: 200px;
Height: 200px;
Padding: 20px;
Margin: 20px;
Font-family: Arial, sans-serif;
Font-size: 28px;
Font-weight: bold;
}
</style>
<title> CSS Intro! </title>
</head>
<body>
<div>
<h1> This is the heading 1</h1>
<p> This is the paragraph </p>
</div>
</body>
</html>
Note that in font-family, we have used two fonts just in case the browser does not support the first one then it will fall back to the second one which is sans-serif. This is common practice to avoid a bad user experience.
We can also set the border around elements by specifying border: 3px solid black; You can use any size and colour for the border. Here we have kept them as 3px and black respectively.
Search Engine Code Team is comprised of SEO experts and strategists having more than 20 years of combined experience. We keep testing and delivering knowledge of SEO for the community of SEO.
Leave a Reply