HTML CSS
HTML Styles CSS
On this page
Inline CSS
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS</title>
</head>
<body>
<h1 style="color:#dc3545;">Inline CSS</h1>
<p style="color:green;">A Green Paragraph</p>
<p style="color:#0d6efd;">A Blue Paragraph</p>
</body>
</html>
Output
Inline CSS
A Green Paragraph
A Blue Paragraph
Internal CSS
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
body {
background-color: #11caf0;
}
h1 {
color: green;
}
p {
color:#0d6efd;
}
</style>
</head>
<body>
<h1>Internal CSS</h1>
<p>A Blue Paragraph</p>
</body>
</html>
Output
Internal CSS
A Blue Paragraph
External CSS
<!DOCTYPE html>
<html>
<head>
<title>External CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>External CSS</h1>
<p>This is a Paragraph</p>
</body>
</html>
Output
External CSS
This is a Paragraph
CSS Colors Fonts Sizes
<!DOCTYPE html>
<html>
<head>
<title>CSS Colors Fonts Sizes</title>
<style>
h1 {
color: #11caf0;
font-size: 200%;
}
p {
color: green;
font-size: 100%;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a Paragraph</p>
</body>
</html>
Output
This is a Heading
This is a Paragraph
CSS Border
<!DOCTYPE html>
<html>
<head>
<title>CSS Border</title>
<style>
p {
border: 2px solid #0d6efd;
}
</style>
</head>
<body>
<h1>CSS Border</h1>
<p>This is a Paragraph</p>
<p>This is a Paragraph</p>
</body>
</html>
Output
This is a Paragraph
This is a Paragraph
CSS Padding
<!DOCTYPE html>
<html>
<head>
<title>CSS Padding</title>
<style>
p {
border: 2px solid #1a8754;
padding: 10px;
}
</style>
</head>
<body>
<h1>CSS Padding</h1>
<p>This is a Paragraph.</p>
<p>This is a Paragraph.</p>
<p>This is a Paragraph.</p>
</body>
</html>
Output
This is a Paragraph
This is a Paragraph
This is a Paragraph
CSS Margin
<!DOCTYPE html>
<html>
<title>CSS Margin</title>
<head>
<style>
p {
border: 2px solid #11caf0;
margin: 10px;
}
</style>
</head>
<body>
<h1>CSS Margin</h1>
<p>This is a Paragraph.</p>
<p>This is a Paragraph.</p>
<p>This is a Paragraph.</p>
</body>
</html>
Output
This is a Paragraph
This is a Paragraph
This is a Paragraph
Link to External CSS
<!DOCTYPE html>
<html>
<title>CSS Margin</title>
<head>
<style>
p {
border: 2px solid #11caf0;
margin: 10px;
}
</style>
</head>
<body>
<h1>CSS Margin</h1>
<p>This is a Paragraph.</p>
<p>This is a Paragraph.</p>
<p>This is a Paragraph.</p>
</body>
</html>
Output
This is a Heading
This is a Paragraph