There are 3 ways to style an HTML element (or more), using CSS:
1: Inline style:
<!doctype html)
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Doc</title>
</head>
<body>
<!-- This paragraph will have red color and gray background -->
<p style="color: red; background-color: gray;">Some text in here</p>
</body>
</html>
2. Internal style
<!doctype html)
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Doc</title>
<style>
/* style all paragraphs */
p {
color: red;
background-color: gray;
}
/* to apply style to only one element, use an ID */
#p-with-id {
fond-size: 20px;
}
/* to apply style to multiple tags, use classes */
.blue-text { color: blue; }
.yellow-bkg { background-color: yellow; }
.red-text { color: red; font-weight: bold; font-style: italic; }
</style>
</head>
<body>
<!-- This paragraph will have red color and gray background -->
<p>Some text in here</p>
<p id="p-with-id">Paragraph with ID</p>
<p class="blue-text">Blue text class</p>
<p class="blue-text yellow-bkg">Blue text and yellow background</p>
<p class="red-text">Red text</p>
</body>
</html>
3. External style
In this case, CSS code goes in a file with .css extension.
In this example, both index.html and style.css will be located in same directory
<!-- index.html file -->
<!doctype html)
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Test Doc</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- This paragraph will have red color and gray background -->
<p>Some text in here</p>
<p id="p-with-id">Paragraph with ID</p>
<p class="blue-text">Blue text class</p>
<p class="blue-text yellow-bkg">Blue text and yellow background</p>
<p class="red-text">Red text</p>
</body>
</html>
/* style.css file */
/* style all paragraphs */
p {
color: red;
background-color: gray;
}
/* to apply style to only one element, use an ID */
#p-with-id {
fond-size: 20px;
}
/* to apply style to multiple tags, use classes */
.blue-text { color: blue; }
.yellow-bkg { background-color: yellow; }
.red-text {
color: red;
font-weight: bold;
font-style: italic;
}
There are 3 ways to style an HTML element (or more), using CSS:
1: Inline style:
2. Internal style
3. External style
In this case, CSS code goes in a file with .css extension.
In this example, both index.html and style.css will be located in same directory