Page 120 - DCAP408_WEB_PROGRAMMING
P. 120
Web Programming
Notes 4.5.2 Embedded CSS or Internal Styles
When applying internal CSS you put all your CSS rules in the <head>...</head> part of your
HTML document and enclose it with <style type=”text/css”>...</style> tags. This CSS style
specification method is only used with HTML. An entire style sheet can be embedded in an
HTML document using the <STYLE> element contained within the <HEAD> block. The complete
range of CSS syntax is not explicitly tied directly to the document’s elements, so Selector syntax
is used to specify what styles attach to which portions of the document tree (the same as with
External Style Sheets, but in this case the style sheet is contained within the document itself).
Unlike external style sheets, this method can only specify style information for the current
document. If equivalent style rules are specified in an external and embedded style sheet, the
embedded style sheet rule will have higher precedence.
Syntax:
<style TYPE=”text/css”>
<!—
[CSS Style Sheet]
—>
</style>
Example: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8" />
<title>Internal CSS styles</title>
<style type=”text/css”>
p {border:2px solid #8dc919}
</style>
</head>
<body>
<p>1st paragraph ...</p>
<p>2nd paragraph ...</p>
</body>
</html>
Usage Guidelines:
1. Avoid if possible: Really, there’s not much point using internal CSS styles. You might as
well take all those CSS rules and put them into an external .css file so it can be re-used in
other pages.
[See complex HTML example using Internal Style Sheets]
<html>
<head>
<title>Document Title</title>
<style TYPE=”text/css”>
114 LOVELY PROFESSIONAL UNIVERSITY
