Using an internal style sheet
Applying styles to individual elements quickly becomes cumbersome when
you have a large web page. As you see in the preceding exercise, in order
to make the text of the two <div> elements bold you needed to add a style
attribute to each of the <div> elements. Luckily, there’s a better way.
You can create a special area of the web page to store styling information.
This styling information is then applied to the appropriate elements within
the HTML. This alleviates the need to add a style attribute to each element. You add internal styles within the <head> portion of a web page using the <style> element. Listing 2-1 shows HTML with a <style> element.

Using an Internal Style Sheet
<!doctype html>
<html>
<head>
<title>A CSS Exercise</title>
<style type=”text/css”>
div {
font-weight: bold;
}
span {
font-style: italic;
}
</style>
</head>
<body>
<div>This is my web page.</div>
<div>
This is the <span>nicest</span> page I’ve made yet.
</div>
<div>Here is some text on my page.</div>
</body>
</html>

The page adds an internal style sheet to add a bold font to <div> elements
and an italic styled font to all <span> elements in the page.
<style type=”text/css”>
div {
font-weight: bold;
}
span {
font-style: italic;
}
</style>
The <style> element uses a type attribute to tell the browser what type of
styling information to expect. In this case, we’re using text/css type
styling. Notice also the closing tag, which is required.