How to Use CSS for Style

Page Index

Introduction

Most web designers use CSS primarily to manipulate the style of elements that display on the web. CSS enables a site designer to drastically change the look and style of a page by simply changing a handful of elements on the stylesheet. This page gives example of small changes you can make to a CSS document that will appear dramatically on your website.

Text

In the About CSS page, we discussed the ability to manipulate text using CSS. First select the element whose text you want to manipulate, such as paragraph text, header text, or body text. Then choose which properties you wish to modify, such as font, font-weight, font-size, or font-style. For each of these properties, you then choose the value you wish.

The following code uses font-size to make h1s large, h2s medium and paragraph text small.

h1 {font-size:large;}
h2 { font-size:medium;}
p {font-size:small;}

The following code will will make h1s heavy, h2s medium, and paragraph text light:

h1 {font-weight: heavy;}
h2 {font-weight: medium;}
p {font-weight: light;}

The following code uses font-style and font-variant to specify that h1s will be in italics, h2s will be oblique, and paragraph text will be in small caps.

h1 {font-style: italic;}
h2 {font-style: oblique;}
p {font-variant: smallcaps;}

The following code modifies the previous declarations slightly to accomplish a more visually appealing result.

h1 {font-weight: heavy; font-style: italic; font-size:30;}
h2 {font-weight: medium; font-style: oblique; font-size:20;}
p {font-weight: light; font-variant: smallcaps; font-size:16;}

Color

By using CSS to control the colors of elements, you can easily make dramatic changes to the look of your site. The following code will make the page background dark green, table background light green, and text dark blue.

body {background-color: darkgreen;}
table {background-color: lightgreen;}
body {color: darkblue;}

The following code specifies color in the same way as above, but makes paragraph text red, while non-paragraph text will remain dark blue. Furthermore, paragraph backgrounds will be yellow.

body {background-color: darkgreen;}
table {background-color: lightgreen;}
body {color: darkblue;}
p {color: red; background-color: yellow;}

The following code uses the same properties as in the above code, but changes some values, sometimes using hexadecimal color codes, to make them somewhat more appealing.

body {background-color: #4682B4; color: black;}
table {background-color: #EECBAD;}
h2 {background-color: lightblue;}
p {color: #00009C; background-color: #F0F8FF;}

The following code combines all the code given thus far in the instructions:

body {background-color: #4682B4; color: black;}
table {background-color: #EECBAD;}
h1 {font-weight: heavy; font-style: italic; font-size:30;}
h2 {font-weight: medium; font-style: oblique; font-size:20; background-color: lightblue;}
p {font-weight: light; font-variant: smallcaps; font-size:16; color: #00009C; background-color: #F0F8FF;}

Borders

Changing the borders of element boxes can add a professional and attractive touch to web pages.

Setting the border thickness enables you to determine how strong the border will appear. The following code will set the top and bottom border of every table to thick, and both sides thin, and set all borders of paragraphs to thin. Note that, in order to display the results, border-style must also be controlled. This step will be addressed soon, so we abstract away from it here.

table {border-width: thick thin thick thin;}
p {border-width: thin;}

In order to make borders better coordinate with, and even define, the color scheme of the page, it is important to set border color. The following code will make the table borders dark blue, and the paragraph borders red.

table {border-color: darkblue;}
p {border-color: red;}

It is also possible to set the style of an element's border. The following code will make the top and bottom borders dashed, and the paragraph borders dotted.

table {border-style: dashed none dashed none;}
p {border-style: dotted;}

The following code uses the same properties as above, but makes some adjustments to increase the appeal of the page.

table {border-width: thick thin thick thin; border-color: darkblue; border-style: dashed none dashed none;}
td {border-right: 0px; border-left: 3px; border-top:3px; border-bottom:0px; border-style: solid; border-color: darkblue;}
p {border-width: thin; border-color: red; border-style: dotted;}
img {border-width: thin; border-color: darkblue; border-style: solid;}

The final product

The following code combines all code given so far in the instructions on this page:

body {background-color: #4682B4; color: black;}
table {background-color: #EECBAD; border-color: darkblue; border-width: thick thin thick thin; border-color: darkblue; border-style: dashed none dashed none;}
td {border-right: 0px; border-left: 3px; border-top:3px; border-bottom:0px; border-style: solid; border-color: darkblue;}
h1 {font-weight: heavy; font-style: italic; font-size:30;}
h2 {font-weight: medium; font-style: oblique; font-size:20; background-color: lightblue;}
p {font-weight: light; font-variant: smallcaps; font-size:16; color: #00009C; background-color: #F0F8FF; border-width: thin; border-color: red; border-style: dotted;}
img {border-width: thin; border-color: darkblue; border-style: solid;}

The result of combining the styling code established on this page with the layout code that was established on the Layout page uses CSS exclusively for style and layout. The CSS code is as follows:

body {background-color: #4682B4; color: black; margin: 50px;}
table {background-color: #EECBAD; border-color: darkblue; border-width: thick thin thick thin; border-color: darkblue; border-style: dashed none dashed none; margin: 10px 5px 10px 100px; padding: 10px 5px 10px 5px;}
td {border-right: 0px; border-left: 3px; border-top:3px; border-bottom:0px; border-style: solid; border-color: darkblue; margin: 0px; padding: 3px;}
h1 {font-weight: heavy; font-style: italic; font-size:30; margin-left: 350px;}
h2 {font-weight: medium; font-style: oblique; font-size:20; background-color: lightblue; margin: 10px -10px -20px 10px; padding: 10px;}
p {font-weight: light; font-variant: smallcaps; font-size:16; color: #00009C; background-color: #F0F8FF; border-width: thin; border-color: red; border-style: dotted; margin: 10px 65px 10px 65px; padding: 10px 15px 10px 15px;}
img {border-width: thin; border-color: darkblue; border-style: solid; margin-right: 80px; margin-top: 20px; float: right;}

User Contributed Notes
CSS Style
+ Add a comment
  + View comments

Back to top Credits | Glossary | Help | Navigation | Site Map | Site Search