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 >
photographs:

Semblance Portrait Project
The Built World
Greece
Hungary/Czech Republic
Poland
Graffiti
Simple Truths
Israel


Paris
Puebla, Mexico
Spain
Along the Mississippi
Italy
Santa Fe
The Reliance Building
Providence
archive:

Webwork
The Web Page from Hell
The Portals Project
Transition
Insights
Internet Spelling Guide
Ape Silverback (Primate Ruminations)
Revenge of the Movie Poster
GIFs 4 Us
The Web Rules
Webpix
Backgrounds 4 Us
Webpaper
Digital Sketches
Fonts
Sounds
© Jay Boersma   See also jayboersma.com