Basic CSS Styling

Below is a list of some of the most common CSS styles.

1. Background color

body { background-color: #cc9900; }

<html>   
<head>
<title>BODY</title>
<style type="text/css">
body {
background-color: #cc9900;
}
</style>
</head>
<body>
Some body text<br>
</body>
</html>

 

2. Background image

body { background-image: url(images/an_image.gif); }

<html>
<head>
<title>BODY WITH BACKGROUND IMAGE</title>
<style type="text/css">
body {
background-image: url(images/an_image.gif);
}
</style>
</head>
<body>
This file shows the use of a background image in the body tag<br>
</body>
</html>

 

3. Font

body{font-family: Arial, Verdana, sans-serif;}

<html>   
<head>
<title>BODY</title>
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
}
</style>
</head>
<body>
Some body text<br>
</body>
</html>

List of web-safe fonts
Web-safe fonts are fonts likely to be present on a wide range of computer systems, and used by Web content authors to increase the likelihood that content will be displayed in their chosen font. If a visitor to a Web site does not have the specified font, their browser will attempt to select a similar alternative, based on the author-specified fallback fonts and generic families or it will use font substitution defined in the visitor’s operating system.

There are about 15 fonts that are installed across almost all systems, termed web safe fonts because they are safe for use in your pages. The full list is:

Sans serif Serif
Arial Times New Roman
Helvetica Times
Verdana Georgia
Trebuchet Palatino
Tahoma Monospace
Geneva Andale mono, Courier, Monaco

Cursive: Fonts that have a decorative, often handwritten-looking style: Comic Sans

Fantasy: Fonts that have a bold, often ornamental or quirky style, which are meant to be used for headings, not body copy: Impact


4. Bold and italic

<strong>Some bold text</strong><br>

<em>Some italic text</em><br>

<strong>Some bold text AND <em>some bold and italic text</em></strong>

How would you use html markup to produce this sentence (bold & italic, then italic)?


5. Text colors

body {color:#ff0000;}
a:link {color: #003300; text-decoration: underline; }
a:visited {color: #000066; text-decoration: underline; }
a:hover {color: #000099; text-decoration: none; }
a:active {color: #000000; text-decoration: underline; }

6. Flowing text

around an image align=”left”, align=”right”, vspace=”pixels” margin above and below image, hspace=”pixels” margin left and right of image

<img src="images/an_image.gif" width="200" height="100" align="left" hspace="10" vspace="10">


7. Horizontal rule

<html>
<head>
<title>HR</title>
<style type="text/css">
hr {
border: 0;
color: #999999;
background-color: #999999;
height: 1px;
width: 100%;
}
</style>
</head>
<body>
This is some text above the horizontal rule.
<hr>
This is some text below the horizontal rule.
</body>
</html>

width: [ pixel or percentage value ] specifies the width of the element
height: [ pixel value ] specifies the line height of the element
border: [ pixel value ] in this case it should be set to zero
color: [ hex value ] this describes the color of text within an element
background-color: [ hex value ] sets the background color for the current element
text-align: details how the element will be horizontally aligned.

You’ll need to include both the color and background-color attributes in the style sheet as not all browsers will understand them. Browsers that understand both, will draw a border around the element so it is important to use the height attribute to control this.

Leave a Reply

Your email address will not be published. Required fields are marked *