Most would agree that a browser’s default style sheet does a pretty good job of making text
legible. Typically, the font size will be a non-squint-inducing 16px, with black text on a white
background. In the following sections, we’ll start with this default styling and apply numerous
CSS properties to the markup (without adding any further elements to it) in order to explore
the multitude of available techniques for creating good-looking web text.
Create a new document called text.html and type the following (X)HTML into it. You
can also grab the complete text.html file from the Chapter 4 folder in the code download at
www.apress.com:
<html>
<head>
<title>Chapter 4: Text</title>
</head>
<body>
<h1>Content is King</h1>
<p>This is a paragraph. Nothing particularly special about it, but the ➥
visitor is going to read it anyway, so it may as well say something useful.</p>
<h2>True Fact</h2>
<p>Useful. OK. Did you know that a shrimp's heart is actually in its head? ➥
It's true.</p>
</body>
</html>
A shrimp’s heart is actually in its head. Bet you didn’t know that, did you? This incredibly
informative text (just two headings and two paragraphs) will be used throughout the rest of this
chapter.
Let’s get down to the serious business and forget about seafood. Firefox will display this
(X)HTML as shown in Figure 4-5 using its default style sheet.
While this display is very legible, it isn’t very stylish. It is likely that the default style sheet
will specify either Arial or more likely Times New Roman for the font, giving that classic
“unstyled” feel.
No comments:
Post a Comment