<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<style>
h2 {
color: blue;
font-size: 40px;
margin: 0px; /* remove standard margin on all sides */
}
</style>
</head>
<body>
<div>
<section>
<h2>Latest Deals</h2>
<h3>See latest holiday deals here</h3>
<article>
<h4>Holiday 1</h4>
<p>A lovely break in spain</p>
</article>
</section>
</div>
</body>
</html>
We’ve removed the margin around the text on the top, bottom, left and right. Let’s add some margin and see what happens.
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<style>
h2 {
color: blue;
font-size: 40px;
margin: 50px; /* add 50 px margin on all side of h2 text */
}
</style>
</head>
<body>
<div>
<section>
<h2>Latest Deals</h2>
<h3>See latest holiday deals here</h3>
<article>
<h4>Holiday 1</h4>
<p>A lovely break in spain</p>
</article>
</section>
</div>
</body>
</html>
Let’s add background colour to h2 text
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<style>
h2 {
color: blue;
font-size: 40px;
margin: 50px; /* margin of 50px around h2 text */
background-color: yellow; /* yellow background */
}
</style>
</head>
<body>
<div>
<section>
<h2>Latest Deals</h2>
<h3>See latest holiday deals here</h3>
<article>
<h4>Holiday 1</h4>
<p>A lovely break in spain</p>
</article>
</section>
</div>
</body>
</html>
Centering the text using text-align
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<style>
h2 {
color: blue;
font-size: 40px;
margin: 50px; /* margin of 50px around h2 text */
background-color: yellow; /* yellow background */
text-align: center; /* center the text */
}
</style>
</head>
<body>
<div>
<section>
<h2>Latest Deals</h2>
<h3>See latest holiday deals here</h3>
<article>
<h4>Holiday 1</h4>
<p>A lovely break in spain</p>
</article>
</section>
</div>
</body>
</html>
Styling another tag, the paragraph tag <p> with css. We can use colors as hex format or RGB as well.
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<style>
h2 {
color: blue;
font-size: 40px;
margin: 50px; /* margin of 50px around h2 text */
background-color: yellow; /* yellow background */
text-align: center; /* center the text */
}
p {
color: #55CC77;
background-color: rgb(120,20,56);
}
</style>
</head>
<body>
<div>
<section>
<h2>Latest Deals</h2>
<h3>See latest holiday deals here</h3>
<article>
<h4>Holiday 1</h4>
<p>A lovely break in spain</p>
</article>
</section>
</div>
</body>
</html>
Putting this style information in a single file. We have now created a stylesheet called style.css which looks as follows.
h2 {
color: blue;
font-size: 40px;
margin: 50px; /* margin of 50px around h2 text */
background-color: yellow; /* yellow background */
text-align: center; /* center the text */
}
p {
color: #55CC77;
background-color: rgb(120,20,56);
}
We have modified the main html to read this file and removed the actual css from the html.
<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<meta charset="UTF-8">
<link rel="stylesheet" a href="style.css">
</head>
<body>
<div>
<section>
<h2>Latest Deals</h2>
<h3>See latest holiday deals here</h3>
<article>
<h4>Holiday 1</h4>
<p>A lovely break in spain</p>
</article>
</section>
</div>
</body>
</html>
When we load this into our browser, we see it looks exactly the same except the css is now completely separate from out HTML code.