Scribd
Upload
5 views4 pages

CSS Notes

The document provides examples of three types of CSS usage in HTML: internal, inline, and external. It showcases a pizzeria website with styling for body, headers, paragraphs, and buttons. Each example demonstrates different methods of applying CSS to enhance the visual presentation of the webpage.

Uploaded by

vaishnavi.r
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
5 views4 pages

CSS Notes

The document provides examples of three types of CSS usage in HTML: internal, inline, and external. It showcases a pizzeria website with styling for body, headers, paragraphs, and buttons. Each example demonstrates different methods of applying CSS to enhance the visual presentation of the webpage.

Uploaded by

vaishnavi.r
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as ODT, PDF, TXT or read online on Scribd
You are on page 1/ 4

Internal CSS

<!DOCTYPE html>
<html lang="en">
<head>
<title>Appus Pizzeria</title>
<style>
body {
background-color: lightyellow;
}
h1 {
color: red;
text-align: center;
}
p{
font-size: 20px;
}
</style>
</head>
<body>
<h1>Welcome to Appus Pizzeria!</h1>
<p>Delicious pizza made fresh every day.</p>
</body>
</html>

Inlign css
<!DOCTYPE html>
<head>
<title>Appu's Pizzeria</title>
</head>
<body style="font-family: 'Arial', sans-serif; background-color: #f8f9fa; text-
align: center;">
<header style="background-color: #ff5733; color: white; padding: 20px;">
<h1 style="color: #FFFF00; font-weight: normal;">Appu's pizzeria</h1>
</header>
<h2 style="color: #3366CC; font-weight: normal; letter-spacing: 4px;">Best
pizza in Bangalore</h2>
<p style="font-size: 18px; color: #333;">Our pizzas are made with the
freshest ingredients and baked to perfection!</p>

</body>
</html>

External css
body {
font-family: 'Arial', sans-serif;
background-color: #f8f9fa;
text-align: center;
margin: 0;
padding: 0;
}
header {
background-color: #ff5733;
color: white;
padding: 20px;
}
h1, h2 {
color: #3366CC;
font-weight: normal;
letter-spacing: 4px;
margin-bottom: 10px;
text-transform: lowercase;
}
p{
font-size: 18px;
color: #333;
margin: 10px 20px;
}
button {
background-color: #ff5733;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
font-size: 16px;
}
section {
padding: 20px;
}

Other page of external css


<!DOCTYPE html>
<head>
<title>Appus Pizzeria</title>
<link rel="stylesheet" href="external.css">
</head>
<body>
<header>
<h1>appus pizzeria</h1>
</header>
<h2>best pizza in town</h2>
<p>Our pizzas are made with the freshest ingredients and baked to
perfection!</p>
<button>Order Now</button>

<section>
<h2>Our Friendly Staff</h2>
<p>At Appus Pizzeria, our staff is dedicated to providing you with the best
service and making you feel at home.</p>

<h2>Cheap Prices & Special Offers</h2>


<p>Enjoy delicious pizzas at unbeatable prices! Check out our special
offers and discounts available every week.</p>
</section>
</body>
</html>

You might also like