View video tutorial
CSS TUTORIAL
CSS TUTORIAL
This tutorial is for those who want to learn CSS and create, design and style a website.
CSS creates the presentation.
➔ CSS is the language used to describe the presentation of web pages.
➔ It allows HTML elements to be styled in various aspects, including color, font, size, background, layout, and more.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Basic Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<style>
.section1 {
margin:40px 10px;
background-repeat: no-repeat;
background-image:url("resources/images/flowers-hibiscus.png");
background-position: center;
min-height:240px;
min-width:300px;
}
.section2 {
margin:40px 10px;
background-repeat: no-repeat;
background-position: center;
background-image:url("resources/images/flowers-tulip.png");
min-height:240px;
min-width:300px;
}
h2{
color: #106070;
}
p {
text-indent: 30px;
text-align:justify;
}
</style>
</head>
<body>
<h3>CSS Basic Example</h3>
<section class="section1">
<h2>Hibiscus Flower</h2>
<p>Hibiscus is a large species of flowering plant in the mallow family, known for its large,
bright, trumpet-shaped flowers in vibrant colors such as red, pink, yellow, and white,
with popular types including tropical and hardy varieties.</p>
</section>
<section class="section2">
<h2>Tulip Flower</h2>
<p>Tulips are spring flowers that belong to the lily family. Tulips originally come from Central
Asia and typically have two to six thick, bluish-green leaves and large, cup-shaped flowers
with three petals and three sepals.</p>
</section>
</body>
</html>
Click on the "Try it Now" button to see how it works.
Sample Code
Copy each file contents and paste it to your own project and run to see the final output
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Basic Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8" />
<style>
body {
margin:40px 10px;
background-repeat: no-repeat;
background-position: center;
background-color:#dafafa;
background-image:url("resources/images/flowers-tulip-t.png");
min-width:300px;
}
h2{
color: #106070;
}
p {
text-align:justify;
color:#000;
}
</style>
</head>
<body>
<h3>CSS Basic Example</h3>
<section class="section1">
<h2>Hibiscus Flower</h2>
<p>Hibiscus is a large species of flowering plant in the mallow family, known for its large,
bright, trumpet-shaped flowers in vibrant colors such as red, pink, yellow, and white,
with popular types including tropical and hardy varieties.</p>
</section>
<section class="section2">
<h2>Tulip Flower</h2>
<p>Tulips are spring flowers that belong to the lily family. Tulips originally come from Central
Asia and typically have two to six thick, bluish-green leaves and large, cup-shaped flowers
with three petals and three sepals.</p>
</section>
</body>
</html>
Copy the code and click on the "Try it Now" button to see how it works.