Scribd
Upload
38 views

Syntax

Embedded style sheets allow you to define styles for an HTML document within <style> tags in the <head> section. The CSS syntax for embedded style sheets is the same as external style sheets. Styles defined within <style> tags will apply to applicable elements throughout the document. Embedded style sheets are best for single documents with unique styling needs, while external style sheets should be used for styles across multiple documents.

Uploaded by

Russel Patrick
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
38 views

Syntax

Embedded style sheets allow you to define styles for an HTML document within <style> tags in the <head> section. The CSS syntax for embedded style sheets is the same as external style sheets. Styles defined within <style> tags will apply to applicable elements throughout the document. Embedded style sheets are best for single documents with unique styling needs, while external style sheets should be used for styles across multiple documents.

Uploaded by

Russel Patrick
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

Embedded style sheets allow you to define styles for the whole HTML document in one place.

Embedded style sheets refer to when you embed style sheet information into an HTML
document using the <style> element. You do this by embedding the style sheet information
within <style></style> tags in the head of your document.

Syntax
The CSS syntax for embedded style sheets is exactly the same as other CSS code.

For example, to use the following code, simply place it between the <head></head> tags of your
HTML document:

<style>
p {
font-family: georgia, serif;
font-size: x-small;
}
hr {
color: #ff9900;
height: 1px;
}
a:hover {
color: #ff0000;
text-decoration: none;
}
</style>

Now, whenever any of those elements are used within the body of the document, they will be
formatted as instructed in the above style sheet.

Demo
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {
font-family: georgia, serif;
font-size: x-large;
color:#ff9900;
}
a:hover {
color: LimeGreen;
text-decoration: none;
}
</style>
</head>
<body>
<p>This paragraph tag has been preset using embedded style sheets. Same for
the horizontal rule below and the hyperlink under that. </p>
<p>Also see <a href="/css/external_style_sheets.cfm" target="_blank">external
style sheets</a></p>
</body>
</html>

Embedded style sheets are suited for documents with unique design requirements. If the styles
need to be applied across muliple documents, you should link to an external style sheet instead of
using an embedded style sheet.

You might also like