Use cascading style sheets

On this page:

Insert a style sheet

Cascading style sheets (CSS) let you specify style information in many ways, such as inside a single HTML element, inside the head section of an HTML page, or in an external CSS file. A single HTML page can reference multiple external style sheets.

External style sheet

With an external style sheet, you can change the look of an entire website by changing one file. Each page must link to the style sheet using the <link> tag, which goes inside the head section.

<head>
  <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Internal style sheet

Use an internal style sheet to apply a unique style to a single page. Define internal styles in the head section with the <style> tag:

<head>
  <style type="text/css">
   body {
     font-family: Arial, Helvetica, sans-serif;
     color: black;
   }
  </style>
</head>
Note:
Older browsers that are unaware of the <style> element will normally show the style contents as if they were part of the <body>, thus making the style sheet visible to the user. To prevent this, enclose the contents of the <style> element in comment tags.

Inline styles

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly, such as when you need to apply a style to a single occurrence of an element. 

<p style="color: sienna; margin-left: 20px">
  This is a paragraph
</p>

Selectors

Selectors are the names that you give to your different styles. In the style definition, you define how each selector should work (for example, font color). Then, in the body of your pages, you refer to these selectors to activate the styles. The general syntax for a selector is: 

Selector {Property:Value;}

Separate multiple style declarations for a single selector with a semicolon: 

Selector { Property1: Value1; Property2: Value2 }

HTML selectors

Use HTML selectors when you want to redefine the look for an entire HTML tag. The general syntax for an HTML selector is:

HTMLSelector {Property:Value;}

For example:

<style type="text/css">
   h1 {font-size:xx-large;}
   h2 {font-size:x-large;}
   h3 {font-size:large;}
   h4 {font-size:medium;}
   h5 {font-size:small;}
</style>

Class selectors

Use class selectors when you want to define a style that does not redefine an HTML tag entirely. The general syntax for a class selector is: 

.ClassSelector {Property:Value;}

For example:

<html>
<head>
  <style type="text/css">
  .headline {
    font-family:arial;
    font-size:14px;
    color:red
  }
  </style>
</head>
<body>
<b class="headline">This is a bold tag carrying the headline class</b>
</body>
</html>

ID selectors

An ID selector defines a style relating to an object with a unique ID. The ID selector syntax is:

#IDSelector {Property:Value;}

For example:

<html>
<head>
<style type="text/css">
#top {
  background-color: #900;
  color: #fff;
  padding: 1em
}
</style>
</head>
<div id="top">
<body>
<h2>Indiana University</h2>
<h2>University Information Technology System</h2>
</div>
</body>
</html>

ID selectors are most widely used with layers (as in the above example), since layers are always defined with a unique ID. The difference between an ID and a class is that an ID can be used to identify one element, whereas a class can be used to identify more than one.

Contextual selectors

Contextual selectors are strings of two or more simple selectors separated by white space. You can assign normal properties to these selectors.

Due to the rules of cascading order, contextual selectors take precedence over simple selectors. In the following example, emphasized text within a paragraph should have a yellow background, while emphasized text in a heading would be unaffected:

P EM { background: yellow }

Anchor pseudo-classes

You can assign pseudo-classes to the <a> element to display normal, active, and visited links differently:

a:link {text-decoration: none; color:#990000;}    
a:active {text-decoration: underline; color:#FF0000;}              
a:visited {color:#666;}

Grouping

You can decrease repetition in style sheets by grouping selectors and declarations. For example, you can give all headings identical declarations through a grouping:

h1, h2, h3, h4, h5 {
   color: #000000;
   font-weight: bold;
   }

Additional resources

This is document bfse in the Knowledge Base.
Last modified on 2023-07-24 12:13:23.