Default Browser Display
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 will 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 folder in the code download at www.apress.com:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Content is King</h1>
<p>This is a paragraph. Nothing particularly special about it, but
the visitor is goingto 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 is true.</p>
</body>
</html>
A shrimp’s heart is actually in its head. But you did not know that, did you? This incredibly informative text (just two headings and two paragraphs) will be used throughout the rest of this tutorial.
Let’s get down to the serious business and forget about seafood. Firefox will display this (X)HTML as shown in Figure below using its default style sheet.
Default browser display (Firefox)
While this display is very legible, it is not 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.
0 Comments:
Post a Comment
Subscribe to Post Comments [Atom]