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>
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>
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>
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>
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>
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>
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>
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;
}
a {
text-decoration: none;
color: gray;
}
<style type="text/css" media="screen">
img {
border: green solid 10px; }
img {
border: green solid 10px; }
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; }
h1 {
text-align: right;
color: purple; }
