How to Add Inline Styles to CSS
Inline styles are created by adding the style
attribute to a tag. As with the class
and id
attributes, almost all elements can take the style
attribute. (Exceptions include html
, head
, title
, meta
, script
, and style
.) The value of the style
attribute is a list of one or more property-value pairs separated by semicolons. Learn how to add inline styles to CSS in these six steps.
- Save the following as
StyleSheet.css
:h1 { text-align: center; font-size: 12pt; color: #000099; margin-bottom: 5px; text-decoration: underline; } table { margin: 5px; width: 290px; } th { padding: 3px; } td { padding-left: 8px; padding-right: 8px; border: 1px solid #990000; background-color: #ffffcc; } #trHeader { text-decoration: underline; color: #990000; } .centerCell { text-align: center; }
- Copy this text and paste into a new HTML file named
InlineStyleSheet.html
. This HTML contains a link to the external style sheet you created above.<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Inline Style Sheet</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css"> </head> <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>
- Add an inline style to the table data cell that contains the word "Braves".
<td style="font-style: italic; color: #ff0000;">Braves</td>
- Add an inline style to the table data cell that contains the word "Yankees".
<td style="font-style: italic; color: #000033;">Yankees</td>
- Add an inline style to the table two data cells that contain the word "Giants".
<td style="font-style: italic; color: #cc3300;">Giants</td>
- Open the HTML file in a browser. It should look like this:
Final HTML should look like this:<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>Inline Style Sheet</title> <link href="StyleSheet.css" rel="stylesheet" type="text/css"> </head> <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 style="font-style: italic; color: #cc3300;">Giants</td> </tr> <tr> <td>Hank Aaron</td> lt;td class="centerCell">755</td> <td style="font-style: italic; color: #ff0000;">Braves</td> </tr> <tr> <td>Babe Ruth</td> <td class="centerCell">714</td> <td style="font-style: italic; color: #000033;">Yankees</td> </tr> <tr> <td>Willie Mays</td> <td class="centerCell">660</td> <td style="font-style: italic; color: #cc3300;">Giants</td> </tr> </table> </div> </body> </html>