The span Element
You can easily color a whole paragraph like this, but more often than not, you'll want to pick out just a couple of specific words to highlight within a paragraph. You can do this using a span element, which can be wrapped around any content you like. Unlike p, which means paragraph, or blockquote, which signifies a quotation, span has no "meaning." A span is little more than a tool for highlighting the start and end of something to which you want to apply a style. (Applying a span also gives you the ability to do some other clever things to your web page with scripting, but for our purposes, its scope is limited to the things it allows you to do with CSS.) Instead of making that whole paragraph blue, we might want just the first two words, "Bubble Under," to be blue and bold. Here's how we can use the span element to achieve this:
<p><span style="color: blue; font-weight: bold;">Bubble
Under</span> is a group of diving enthusiasts based in the
south-west UK who meet up for diving trips in the summer
months when the weather is good and the bacon rolls are
flowing. We arrange weekends away as small groups to cut the
costs of accommodation and travel and to ensure that everyone
gets a trustworthy dive buddy.</p>
When we view that markup in a browser, we see the display shown in Figure 3.2.
Figure 3.2. Using the span element to pick out specific words for styling
Let's take a quick look at other ways that we can apply inline styles (don't worry, this isn't part of our project site; feel free to experiment).
<p style="font-style: italic">The quick brown fox jumped over the
lazy dog.</p>
Not surprisingly, that CSS declaration will italicize all the text in the paragraph. Here's another example, in which span is used to highlight specific words:
<p>The quick brown fox <span style="font-style: italic;
font-weight: bold">jumped</span> over the lazy dog.</p>
Embedded Styles
Inline styles are a simple, quick way to apply some 'makeup' to specific sections of a document, but this is not the best method of styling a page. Wouldn't it be better if you could set styles in just one place, rather than having to type them out every time you wanted to use them?
Embedded style sheets are a logical step up. An embedded style allows you to add to the start of a web page a section that sets out all the styles that will be used on that page. To do this, you need to use the style element inside the head:
<head>
<title>Bubble Under - The diving club for the south-west
UK</title>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<style type="text/css">
p {
font-weight: bold;
}
</style>
</head>
Report a bug