Design a Web Page Using HTML & CSS
Make your HTML document presentable with CSS(Cascading Style Sheets). CSS allows you to make your web page look beautiful and well organized like all the other websites you visit on the internet.
You should know the basic of HTML to follow this post, at least you have to know how to create a web page or article. What I am going to talk about is very basic of CSS. It's a very powerful style sheet language which is not something you can learn through one blog post.
If for some reason you don't understand any part of this post you can find the completed HTML file in here.
Let's get started.
How to add CSS in HTML
If you want to style your web page there is something you should do besides your HTML code.
We will use an HTML tag called <style> in the <head> tag. It will allow you to put style sheet rules in the head of the document.
Designing HTML means apply styles at HTML tags like <body>, <p> etc. So, we will target the HTML tags that we want to customize which is called selectors.
After selecting the HTML element we will have to add curly braces {}. Between the curly brackets, we will add one or more declarations.
Let me explain with different examples.
How to change the text color in HTML using CSS
First, create an HTML web page and add <style> tag in the <head> tag like below.
<!DOCTYPE html>
<html>
<head>
<title>Here goes the title of the document</title>
<style>
h1 {
color: green;
}
</style>
</head>
<body>
<h1>How to Design a HTML Web Page With CSS</h1>
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit integer, magna
consequat nostra magnis commodo quis praesent. Lobortis nostra aliquam
quam ac platea nam at ut tempor conubia cubilia etiam sociis neque cras,
lectus sodales venenatis nunc molestie iaculis mus dignissim aenean mauris
magnis mi feugiat. Posuere odio per aenean torquent litora feugiat potenti
duis mollis eu, metus condimentum ut taciti vestibulum non mauris
malesuada a facilisi, tellus tempus vivamus mattis nostra nullam turpis
euismod pretium.
</p>
<p>
Magnis eleifend aenean condimentum est sodales purus sagittis duis
parturient nulla vulputate cubilia, eget urna natoque dictum etiam eros
convallis bibendum rhoncus egestas. Nisl platea aliquam lacus ridiculus
odio fringilla lacinia urna phasellus ornare, ultricies condimentum
praesent luctus pretium convallis placerat tempor. Id vivamus vitae
lobortis in suscipit aenean diam sociosqu commodo non lacinia, dui mi
integer hendrerit nisl habitant cubilia nibh fames nunc. Lobortis semper
cubilia morbi tristique vestibulum, per nulla mi euismod inceptos nibh,
convallis id varius quis. Sollicitudin pellentesque himenaeos sed proin
habitant gravida, metus etiam eu blandit potenti primis vehicula, molestie
nascetur duis bibendum commodo. Pretium ut turpis id bibendum magnis ad
iaculis leo, tempus facilisi fringilla varius velit inceptos vel est,
himenaeos urna a lacinia conubia quisque nulla. Ante parturient commodo
nunc in leo quam imperdiet euismod, dictum etiam morbi fermentum quis ad
pellentesque porttitor scelerisque, sociosqu ultrices nam at hac molestie
dapibus.
</p>
</body>
</html>
As you can see, I added one declaration in the <h1> selector. After saving the HTML file if you open it on the browser, you will see the color of level one heading is changed.
In the declaration, the color is called a CSS property and the green is called value and they are separated by semicolons and they end by a colon.
The color property changed the text color and the green value make the default text color green. You can try others like blue, yellow etc. Visit w3schools to get the all color names.
How to style HTML <body> tag using CSS
You have to add <body> selector with declarations in the <style> tag to style your HTML <body> tag.
Open the HTML file on your browser at the maximized window, you will notice that the article width takes over the whole browser window size which doesn't look cool. To reduce the width of the article we will use the width property.
Also, the paragraph lines are too close to each other which makes reading the text harder. To increase the gap between lines we will use the line-height property.
Try the CSS code below and also remember to refresh the web page on the browser after every time you change your code and save it.
<!DOCTYPE html>
<html>
<head>
<title>Here goes the title of the document</title>
<style>
body {
width: 60%;
line-height: 1.5;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>How to Design a HTML Web Page With CSS</h1>
<!-- Three dots means the paragraph text from above -->
<p>...</p>
<p>...</p>
</body>
</html>
The width property sets the width of an element and the line-height property changes the height of a line.
Try changing width(i.e., 80%) and line-height(i.e., 1.8) value to practice more.
How to center an HTML element using CSS
To make an element center you have to set the margin property value auto. The margin property sets the margin for all four sides of an element.
There are also margin-top, margin-right, margin-bottom, margin-left CSS properties which add margins on top, right, bottom & left side.
If you add margin-left: 10rem; in the <body> selector, it will add 10rem space on the left side. 10rem means 160px size. It's an alternative of pixel size.
<!DOCTYPE html>
<html>
<head>
<title>Here goes the title of the document</title>
<style>
body {
width: 60%;
line-height: 1.5;
margin-left: 10rem;
}
h1 {
color: green;
}
</style>
</head>
<body>
...
</body>
</html>
Or if you add margin-left: auto;, it will add margin from the remaining space.
<!DOCTYPE html>
<html>
<head>
<title>Here goes the title of the document</title>
<style>
body {
width: 60%;
line-height: 1.5;
margin-left: auto;
}
h1 {
color: green;
}
</style>
</head>
<body>
...
</body>
</html>
Now, if you add margin-right: auto;, it will give the <body> tag equal margin from remaining space on both left and right side which will center the element horizontally.
body {
width: 60%;
line-height: 1.5;
margin-left: auto;
margin-right: auto;
}
The same method applies for centering element vertically with margin-top: auto; and margin-bottom: auto;. To center an element in both positions you just have to add margin: auto;.
How to change HTML default font or text style using CSS
font-family CSS property changes the font style of an HTML element. If you want to change the whole font style of your web page you can target the <body> tag which represents the body of the document.
You can add multiple fonts with font-family property but for now, we will go with the default system font name called sans-serif. A browser has some default fonts, if you go to the font setting of your browser you will see there are some default options for fonts called Serif, Sans-serif & Standard Font, etc.
Now, add the CSS code like below, and after saving the file refresh the web page to see the changes of your font style.
body {
width: 60%;
line-height: 1.5;
margin-left: auto;
margin-right: auto;
font-family: sans-serif;
}
How to add a background color to an HTML element using CSS
The background-color property applies background color of an HTML element. If you add background-color for <body> tag, it will set the background color for the whole page. And if you add background-color just for the <h1> tag, it will only apply for the <h1> tag.
Let's test with the <h1> tag of our web page.
<!DOCTYPE html>
<html>
<head>
<title>Here goes the title of the document</title>
<style>
body {
width: 60%;
line-height: 1.5;
margin-left: auto;
margin-right: auto;
font-family: sans-serif;
}
h1 {
background-color: darkslategray;
color: white;
}
</style>
</head>
<body>
<h1>How to Design a HTML Web Page With CSS</h1>
...
</body>
</html>
I went with the darkslategray color from the default CSS color list and I changed the text color to white which makes the heading more readable. Try with your own favorites colors to practice more.
How to add inner space to an HTML element
We know margin property adds space outside of an element. But what if we want to add inner space around an element. If you look at the heading now, the background color should have more width and height to make the heading look nice.
padding property adds inner space around an HTML element. There is also padding-left, padding-bottom, padding-right & padding-top property if you want to add padding on some specific sides only.
Let's add padding to our <h1> HTML tag like below.
h1 {
padding: 2.5rem;
background-color: darkslategray;
color: white;
}
If you look at the screenshot the text starts from the right side. But what if you want to align the text in the center like Microsoft Office or other office apps. Of course, there is will be ways to do that with CSS. Because CSS is more flexible than any apps.
text-align property set which side the text should show horizontally. We want to center the heading, So we will try text-align: center; like below.
h1 {
text-align: center;
...;
}
Now, let's style the paragraph text. There are two <p> tags in HTML. If we target the <p> tag for CSS it will apply the CSS style for the <p> tags individually. But we want to style the whole paragraph at once.
So, How do we do that? We have to group those <p> tags by <div> tag then we can call those <p> tags as one selector.
What is <div> tag in HTML?
The <div> tag group one or more HTML elements as a division or a section so that you can call single or multiple HTML elements as one HTML element. It does not make any changes to the HTML tags or style sheets.
You can add <div> multiple times and you can nest <div> tag inside another <div> tag also.
Let's wrap the two <p> tags with <div> tag like below. Remember, the rule to add wrap HTML elements with <div> tag is to put the opening <div> tag at the top and the closing </div> tag at the bottom of the elements.
<!DOCTYPE html>
<html>
<head>
<title>Here goes the title of the document</title>
<style>
body {
width: 60%;
line-height: 1.5;
margin-left: auto;
margin-right: auto;
font-family: sans-serif;
}
h1 {
text-align: center;
padding: 2.5rem;
background-color: darkslategray;
color: white;
}
</style>
</head>
<body>
<h1>How to Design a HTML Web Page With CSS</h1>
<div class="paragraph">
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit integer, magna
consequat nostra magnis commodo quis praesent. Lobortis nostra aliquam
quam ac platea nam at ut tempor conubia cubilia etiam sociis neque cras,
lectus sodales venenatis nunc molestie iaculis mus dignissim aenean
mauris magnis mi feugiat. Posuere odio per aenean torquent litora
feugiat potenti duis mollis eu, metus condimentum ut taciti vestibulum
non mauris malesuada a facilisi, tellus tempus vivamus mattis nostra
nullam turpis euismod pretium.
</p>
<p>
Magnis eleifend aenean condimentum est sodales purus sagittis duis
parturient nulla vulputate cubilia, eget urna natoque dictum etiam eros
convallis bibendum rhoncus egestas. Nisl platea aliquam lacus ridiculus
odio fringilla lacinia urna phasellus ornare, ultricies condimentum
praesent luctus pretium convallis placerat tempor. Id vivamus vitae
lobortis in suscipit aenean diam sociosqu commodo non lacinia, dui mi
integer hendrerit nisl habitant cubilia nibh fames nunc. Lobortis semper
cubilia morbi tristique vestibulum, per nulla mi euismod inceptos nibh,
convallis id varius quis. Sollicitudin pellentesque himenaeos sed proin
habitant gravida, metus etiam eu blandit potenti primis vehicula,
molestie nascetur duis bibendum commodo. Pretium ut turpis id bibendum
magnis ad iaculis leo, tempus facilisi fringilla varius velit inceptos
vel est, himenaeos urna a lacinia conubia quisque nulla. Ante parturient
commodo nunc in leo quam imperdiet euismod, dictum etiam morbi fermentum
quis ad pellentesque porttitor scelerisque, sociosqu ultrices nam at hac
molestie dapibus.
</p>
</div>
</body>
</html>
What is class in <div> HTML tag?
As I said above, you can add <div> tag as much as you want and you can even nest <div> tag inside <div> tags like below.
<html>
<body>
<div>First div</div>
<div>
Second div
<div>Nested div as many you want</div>
</div>
</body>
</html>
Now, If I want to style one specific <div> tag how can I call that <div> tag from many <div> tags?
That is where the class attribute comes to play. HTML attributes give informations about HTML elements. With the class attribute we can name the <div> tag we want so that we can apply CSS styles to that specific <div> tag.
By the way, I named the <div> tag paragraph. You can give any name you want but try to name related to your document body parts so that you can understand easily which element is the class name for.
What is the rule to apply CSS styles with HTML class attributes?
You just have to add a dot(.) before the class name and the rest of the rule is like other HTML tags. For HTML tags, the HTML tags themselves were the selectors but for class attributes, the class name is the selector with a dot at the beginning.
See the code and the screenshot below.
<!DOCTYPE html>
<html>
<head>
<title>Here goes the title of the document</title>
<style>
body {
width: 60%;
line-height: 1.5;
margin-left: auto;
margin-right: auto;
font-family: sans-serif;
}
h1 {
text-align: center;
padding: 2.5rem;
background-color: darkslategray;
color: white;
}
.paragraph {
padding: 2rem;
background-color: aliceblue;
margin-bottom: 2rem;
}
</style>
</head>
<body>
<h1>How to Design a HTML Web Page With CSS</h1>
<div class="paragraph">
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit integer, magna
consequat nostra magnis commodo quis praesent. Lobortis nostra aliquam
quam ac platea nam at ut tempor conubia cubilia etiam sociis neque cras,
lectus sodales venenatis nunc molestie iaculis mus dignissim aenean
mauris magnis mi feugiat. Posuere odio per aenean torquent litora
feugiat potenti duis mollis eu, metus condimentum ut taciti vestibulum
non mauris malesuada a facilisi, tellus tempus vivamus mattis nostra
nullam turpis euismod pretium.
</p>
<p>
Magnis eleifend aenean condimentum est sodales purus sagittis duis
parturient nulla vulputate cubilia, eget urna natoque dictum etiam eros
convallis bibendum rhoncus egestas. Nisl platea aliquam lacus ridiculus
odio fringilla lacinia urna phasellus ornare, ultricies condimentum
praesent luctus pretium convallis placerat tempor. Id vivamus vitae
lobortis in suscipit aenean diam sociosqu commodo non lacinia, dui mi
integer hendrerit nisl habitant cubilia nibh fames nunc. Lobortis semper
cubilia morbi tristique vestibulum, per nulla mi euismod inceptos nibh,
convallis id varius quis. Sollicitudin pellentesque himenaeos sed proin
habitant gravida, metus etiam eu blandit potenti primis vehicula,
molestie nascetur duis bibendum commodo. Pretium ut turpis id bibendum
magnis ad iaculis leo, tempus facilisi fringilla varius velit inceptos
vel est, himenaeos urna a lacinia conubia quisque nulla. Ante parturient
commodo nunc in leo quam imperdiet euismod, dictum etiam morbi fermentum
quis ad pellentesque porttitor scelerisque, sociosqu ultrices nam at hac
molestie dapibus.
</p>
</div>
</body>
</html>
I added padding to add some inner space around the paragraph and added background color, margin at the bottom of the page to separate the paragraph from the page.
That is it! The very simple basic of CSS with HTML.
Conclusion
There are other ways to add CSS in HTML markup language. I went with the easy one so that you can understand better. Still, If you don't understand any part of this post please do comment below about which part I should explain or update here. Also, don't forget to share if you learned something new here.