How to Create a CSS Embedded Style Sheet
See CSS: Tips and Tricks for similar articles.Embedded style sheets appear in the style element in the head of an HTML page. Follow these 10 steps to create a CSS embedded style sheet.
- Start by creating a simple HTML file.
The result will look like this:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Home Run Record</title> </head> <body> <h1>All-time Home Run Record</h1> <table> <tr> <th>Player</th> <th>Home Runs</th> <th>Team</th> </tr> <tr> <td>Hank Aaron</td> <td>755</td> <td>Braves</td> </tr> <tr> <td>Babe Ruth</td> <td>714</td> <td>Yankees</td> </tr> <tr> <td>Barry Bonds</td> <td>703</td> <td>Giants</td> </tr> <tr> <td>Willie Mays</td> <td>660</td> <td>Giants</td> </tr> </table> </body> </html>
- Add the
style
block in the head of the page. Don't forget to include thetype
attribute.<style type="text/css">
- Add a rule for
h1
elements as follows:h1 { text-align: center; font-size: 12pt; color: #000099; margin-bottom: 5px; text-decoration: underline; }
- Add a rule for
table
elements that contains the following property-value pairs:table { margin: 5px; width: 290px; }
- Add a rule for
th
elements.th { padding: 3px; }
- Add a rule for
td
elements.td { padding-left: 8px; padding-right: 8px; border: 1px solid #990000; background-color: #ffffcc; }
- Assign an
id
of"trHeader"
to the first table row and add a rule for thisid
.#trHeader { text-decoration: underline; color: #990000; }
- Assign a
class
called"centerCell"
to all of the center table data cells and add a rule for thisclass
..centerCell { text-align: center; }
- Add the closing
</style>
tag to the end of your style sheet. - Add the
class
attribute with the appropriate class to the associated HTML tags to preview the changes, as follows:
The result will look like this:<body> <div> <h1>All-time Home Run Record</h1> <table> <tr id="trHeader"> <th>Player</th> <th>Home Runs</th> <th>Team</th> </tr> <tr> <td>Barry Bonds</td> <td class="centerCell">762</td> <td>Giants</td> </tr> <tr> <td>Hank Aaron</td> <td class="centerCell">755</td> <td>Braves</td> </tr> <tr> <td>Babe Ruth</td> <td class="centerCell">714</td> <td>Yankees</td> </tr> <tr> <td>Willie Mays</td> <td class="centerCell">660</td> <td>Giants</td> </tr> </table> </div> </body> </html>
Related Articles
- Learn the Very Basics of CSS in One Minute
- How to Create a CSS External Style Sheet
- How to Align Text with CSS
- How to Create a Horizontal Navigation Menu with CSS
- How to Create a Fixed-Width Layout with CSS
- How to Remove Spacing Between Table Borders with CSS
- How to Set a Background Image with CSS
- How to Set Text Spacing and Placement in CSS
- How to Style a Table with CSS
- How to Create Boxes with Rounded Corners in CSS
- How to Create a Vertical Navigation Menu with CSS
- How to Use the CSS Opacity Property
- How to Use Multiple Background Images with CSS
- Absolute Positioning with CSS
- How to Use the CSS Border Shorthand Property
- How to Create CSS Button Links
- How to Create a Fluid-Width Layout with CSS
- How to Set Text and Background Color with CSS
- How to Create a CSS Embedded Style Sheet (this article)
- How to Add Inline Styles to CSS
- How to Create a Border with CSS
- How to Use the CSS Padding Shorthand Property
- How to Create a Fly-Out Menu with CSS
- How to Use CSS Media Queries in Responsive Design
- How to Adjust Margins with CSS
- How to Use the CSS Background Shorthand Property
- How to Create a Form without Tables Using CSS
- How to Modify Fonts in CSS
- How to Create a Drop-Down Menu with CSS
- How to Apply Padding with CSS
- Fixed Positioning with CSS
- How to Use CSS Transitions
- How to Use the CSS list-style Shorthand Property
- How to Change Text Style in CSS
- How to Create CSS Sprites
- How to Use CSS with Different Media Types
- How to Import Style Sheets with @import in CSS
- How to Use the CSS White-Space Property
- How to Use the CSS Z-index Property
- How to Create Drop Shadows with the box-shadow Property in CSS3