Webwork
/
Styling Basic HTML Tags

The basic HTML elements covered so far:

<body></body>
A "container" within an HTML document that holds the content that is visible in the browser window.
<p></p>
Paragraph
<h1></h1>
HTML heading. Numbered 1 through 6 with 1 being the largest.
<hr />
Horizontal rule
<a href="somewhere.html"></a>
Hypertext link
<img src="some.jpg" />
Image tag

Any of these tags can be styled using CSS.

Basic tags with basic styling:

Style tag:
<style type="text/css" media="screen">

p {
background-color: yellow ;
}

</style>
Web page:

The background of the paragraph is yellow .

<style type="text/css" media="screen">

p {
border: black solid 1px;
}

</style>

The border of the paragraph is solid black 1px.

<style type="text/css" media="screen">

p {
border: black solid 1px;
padding: 50px;
}

</style>

The border of the paragraph is solid black 1px and the padding is 50px .

<style type="text/css" media="screen">

p {
border: black solid 1px;
margin: 50px;
}

</style>

The border of the paragraph is solid black 1px and the margin is 50px.

<style type="text/css" media="screen">

p {
padding-top: 50px;
}

</style>
The top padding of every paragraph is 50 pixels.
<style type="text/css" media="screen">

p {
text-align: center;
}

</style>
All text in every paragraph in the document will be centered.
<style type="text/css" media="screen">

body {
background-color: blue;
}
p { background-color: red;
}

</style>
The background of the entire page is blue and the background of every paragraph on the page is red . (Not recommended.)

 
<style type="text/css" media="screen">

a {
text-decoration: none;
color: gray;
}
<style type="text/css" media="screen">

img {
border: green solid 10px; }
ape-silverback
Styling the img property will cause every image on the page to display the same style, in this case a 10 pixel green border.
<style type="text/css" media="screen">

h1 {
text-align: right;
color: purple; }

This is a styled
h1 tag.

It's also possible to individually style h2, h3, h4, and h5 tags.

Previous | Webwork Table of Contents | Next >


© Jay Boersma