View video tutorial
CSS Introduction
CSS
CSS is cascading style sheets and is used to style web pages.
What is CSS?
➔ CSS stands for Cascading Style Sheets.
➔ Using CSS we can style the color, font, size, background, layout and more of the web page and its elements.
➔ CSS helps developers separate content structure from its visual design.
Practice with examples "Try it Now"
You can run the examples to see the output and modify the code for further practice.
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 {
background-color: rgb(173, 180, 182);
}
h1,
p {
color: white;
text-align: justify;
}
p {
font-family: verdana;
font-size: 18px;
}
</style>
</head>
<body>
<p>CSS Example</p>
<h1>Heading1</h1>
<p>Heading1 details... Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
<h1>Heading2</h1>
<p>Heading2 details... When an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries</p>
</body>
</html>
Click on the "Try it Now" button to see how it works.
CSS background-color property
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>
section {
background-color:#c2f2d2;
margin:20px 10px;
padding:5px;
}
</style>
</head>
<body>
<h3>CSS background-color 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.