HTML Styles

HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size, and more.
<!DOCTYPE html>
<html>
<body>
<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>
</body>
</html>
Setting the style of an HTML element, can be done with the style attribute. The HTML style
attribute has the following syntax:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
The CSS background-color property defines the background color for an HTML element.
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
Set background color for two different elements:

<body>
<h1 style="background-color:powderblue;">This is a heading</h1>

<p style="background-color:tomato;">This is a paragraph.</p>
</body>
The CSS color property defines the text color for an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>
</body>
</html>
The CSS font-family property defines the font to be used for an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-family:verdana;">This is a heading</h1>

<p style="font-family:courier;">This is a paragraph.</p>
</body>
</html>
The CSS font-size property defines the text size for an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="font-size:300%;">This is a heading</h1>

<p style="font-size:160%;">This is a paragraph.</p>
</body>
</html>
The CSS text-align property defines the horizontal text alignment for an HTML element:
<!DOCTYPE html>
<html>
<body>
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
</body>
</html>
Chapter Summary
 Use the style attribute for styling HTML elements
 Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text sizes
 Use text-align for text alignment
HTML Text Formatting

HTML contains several elements for defining text with a special meaning.
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><i>This text is italic</i></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
HTML Formatting Elements

Formatting elements were designed to display special types of text:
 <b> - Bold text
 <strong> - Important text
 <i> - Italic text
 <em> - Emphasized text
 <mark> - Marked text
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text
 <sub> - Subscript text
 <sup> - Superscript text
Background Image on a HTML element
To add a background image on an HTML element, use the HTML style attribute and the CSS
background-image property:
<!DOCTYPE html>
<html>
<body>
<h2>Background Image</h2>
<p>A background image for a div elememt:</p>
<div style="background-image: url('img_girl.jpg');">

You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a div element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</div>
<p>A background image for a p elememt:</p>
<p style="background-image: url('img_girl.jpg');">

You can specify background images<br>
for any visible HTML element.<br>
In this example, the background image<br>
is specified for a p element.<br>
By default, the background-image<br>
will repeat itself in the direction(s)<br>
where it is smaller than the element<br>
where it is specified. (Try resizing the<br>
browser window to see how the<br>
background image behaves.
</p>
</body>
</html>
To avoid the background image from repeating itself, set the background-repeat property to no-
repeat.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('example_img_girl.jpg');
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h2>Background No Repeat</h2>
<p>You can avoid the image from being repeated by setting the background-repeat
property to "no-repeat".</p>
</body>
</html>
If you want the background image to cover the entire element, you can set the background-size
property to cover.
Also, to make sure the entire element is always covered, set the background-attachment property
to fixed:
This way, the background image will cover the entire element, with no stretching (the image will
keep its original proportions):
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('img_girl.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</head>
<body>
<h2>Background Cover</h2>
<p>Set the background-size property to "cover" and the background image will cover
the entire element, in this case the body element.</p>
</body>
</html>
HTML Tables
HTML tables allow web developers to arrange data into rows and columns.
The <table> tag defines an HTML table. Each table row is defined with a <tr> tag. Each table
header is defined with a <th> tag. Each table data/cell is defined with a <td> tag. By default, the
text in <th> elements are bold and centered. By default, the text in <td> elements are regular and
left-aligned.
<!DOCTYPE html>
<html>
<body>
<h2>Basic HTML Table</h2>
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
To add a border to a table, use the CSS border property:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2>Table With Border</h2>
<p>Use the CSS border property to add a border to the table.</p>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
To let the borders collapse into one border, add the CSS border-collapse property:
table, th, td {
border-collapse: collapse;
}
Cell padding specifies the space between the cell content and its borders. If you do not specify a
padding, the table cells will be displayed without padding. To set the padding, use the CSS padding
property:
<style>
table, th, td {
}
th, td {
padding: 20px;
}
</style>
By default, table headings are bold and centered. To left-align the table headings, use the CSS text-
align property: Example
<style>
table, th, td {
}
th, td {
padding: 5px;
}
th {
text-align: left;
}
</style>
To make a cell span more than one column, use the colspan attribute:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two columns</h2>

<p>To make a cell span more than one column, use the colspan
attribute.</p>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
</body>
</html>
To make a cell span more than one row, use the rowspan attribute:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows</h2>

<p>To make a cell span more than one row, use the rowspan attribute.</p>
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html>
<caption>Monthly savings</caption>
</table>
Now you can define a special style for this table:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
}
th, td {
padding: 15px;
text-align: left;
}
#t01 {
width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<h2>Styling Tables</h2>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Chapter Summary
 Use the HTML <table> element to define a table
 Use the HTML <tr> element to define a table row
 Use the HTML <td> element to define a table data
 Use the HTML <th> element to define a table heading
 Use the HTML <caption> element to define a table caption
 Use the CSS border property to define a border
 Use the CSS border-collapse property to collapse cell borders
 Use the CSS padding property to add padding to cells
 Use the CSS text-align property to align cell text
 Use the CSS border-spacing property to set the spacing between cells
 Use the colspan attribute to make a cell span many columns
 Use the rowspan attribute to make a cell span many rows
 Use the id attribute to uniquely define one table

HTML Styles

Uploaded by

Copyright:

Available Formats

HTML Styles

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Styles

Uploaded by

Copyright:

Available Formats

HTML Styles

Set background color for two different elements:

<h1 style="background-color:powderblue;">This is a heading</h1>

<h1 style="color:blue;">This is a heading</h1>

<h1 style="font-family:verdana;">This is a heading</h1>

<h1 style="font-size:300%;">This is a heading</h1>

HTML Text Formatting

HTML Formatting Elements

<p>A background image for a div elememt:</p>

<div style="background-image: url('img_girl.jpg');">

<p>A background image for a p elememt:</p>

<p style="background-image: url('img_girl.jpg');">

<h2>Table With Border</h2>

<p>Use the CSS border property to add a border to the table.</p>

<h2>Cell that spans two columns</h2>

<h2>Cell that spans two rows</h2>

You might also like