CSS can be added to an HTML document 3 different ways. You can use an External Style Sheet, dd CSS to the Head of the HTML document, and within the HTML tags themselves.
inlineCSS.html
<h1 style="text-align:center; color:red;">This is inline CSS</h1>
onPageCSS.html
<html>
<head>
<style>
body {
background-color: yellow;
}
h1 {
color: orange;
text-align: center;
}
p {
font-size: 30px;
}
</style>
</head>
<body>
<h1>On Page CSS</h1>
<p>This is an example of on page CSS</p>
</body>
</html>
externalSheet.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1> This is H1</h1>
<p>this is bolded text</p>
</body>
</html>
style.css
h1 {
color: blue;
text-align: center;
}
p {
font-weight: bold;
}
mixedSourceCSS.html
<html>
<head>
<link rel="stylesheet" href="style.css" />
<style>
p {
text-decoration: underline;
}
</style>
</head>
<body>
<p style="text-align: center; font-weight: normal;">This is text created from multiple CSS sources</p>
Be the first to comment