How to Change Font Color and Style with HTML5
The title of this tutorial is very misleading since HTML5 no longer lets you change font style or color. HTML5 defers these style customizations to CSS code.
Wait, we just started learning HTML and now we have to learn
CSS! Don’t worry. I won’t go into too much CSS code just yet, only enough to
personalize your font characters for now.
CSS stands for
Cascading Style Sheets and there are a few simple ways to use this code.
One method is to type CSS code into the start tag of an HTML
element. Like this…
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p style='color: blue;'>This text is blue.</p>
</body>
</html>
That is right. You can type CSS code directly into your HTML
document. Your web browser knows CSS code.
Start tags in HTML can have attributes placed in them. The
style attribute tells the browser that here is some CSS code.
If you want to change the color of a single word or just a
few words, you can use the <span> element.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>Here is a line of text with one <span style='color: red;'>red</span> word.</p>
</body>
</html>
Of course, if you want to change the color of your entire
web page, place the CSS code in the <body> element.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body style='color: red;'>
<p>Here is a paragraph of text with all red words.</p>
<p>More red words.</p>
</body>
</html>
Another way to use CSS code is with a <style> element
placed in the <head> section of your Web document.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<style>
body {
background-color: lightblue;
}
p {
color: green;
}
</style>
</head>
<body>
<p>The background is light blue and the words are green.</p>
<p>More green words.</p>
</body>
</html>
In that example, the <style> element defined color
choices for the <body> element and <p> elements separately.
The last way is to write a separate CSS document and
link it to your Web page. You can write some CSS code and save it as
“myStyleSheet.css”. Then in your HTML document include a <link> element.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
<link rel='stylesheet' href='myStyleSheet.css'>
</head>
<body>
<p>Here is a paragraph of text with all red words.</p>
<p>More red words.</p>
</body>
</html>
Notice the <link> element does not need an end tag.
Now create a new document called “myStyleSheet.css”, and save it in the same directory as your HTML document. Edit your CSS file by adding this to it.
body {
background-color: lightblue;
}
p {
color: red;
}
You can also use CSS code to change the font style or size, like this.
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body style='font-family: Brush Script MT, Lucida Handwriting, Comic Sans MS; font-size: 50px'>
<p>Here is a line with a fancy font style.</p>
</body>
</html>
The font-family property lets you list more than one font style. The Web browser will apply the first font style to your Web page if it has that font available. If not, then it will try the next font style in your selection. If none of your chosen font styles are available then it will use its default font.
The font-size property lets you set the size of your font
characters. In the above example, we set the font size to a height of 50
pixels.
This concludes our discussion on font style and color for
now.
In the next tutorial, we will learn how to add pictures to
our Web page.
Comments
Post a Comment