Beyond the Basics: Stylesheets


CSS Basics

  • Style: collects all the properties to be applied to a section of similar text (headers, titles, paragraphs, etc.)
  • CSS:  Put CSS in a central location -- can affect appearance of HTML tags on an individual web page OR across an entire web site.

SYNTAX of STYLES

Basic Syntax:

someTag { propertyName : propertyValue;
propertyName : propertyValue
}		 H1 {font-size: 15pt;
font-weight: bold;
}

Placement of CSS Rules to Declare Styles:

  1. Inline styles (put the style right within the tag -- applies to an individual tag)

Affect ONE occurrence

<H5  STYLE="background-color:blue;
color:white; font-size:20px">
Cascading style sheets
</H5>
Change appearance of an ENTIRE SECTION: use the <DIV> tag to define styles globally for that section. <DIV STYLE="font-size: 20pt; color: red">
<P> The style specification affects everything on this     page until the DIV close tag.
<UL>
<LI>This is red and 20 pt.
<LI>So is this.
</UL>
</DIV>
  1. Embedded Styles (use STYLE tag within the head of the HTML document -- applies to current web page)
Using STYLE within the heading area

<html>
<head>
<STYLE type="text/css">
H5{background-color:blue; color:white; font-size:20px}
P {font-family: helvetica, sans-serif; font-size: 12pt;}
</STYLE>
<body>
<H5>Cascading style sheets</h5>
</body>
</html>

STYLE within heading area uses CLASSES (now, some of the P tags on a page can be normal and some can be formatted as bold, some H1s can be red, others can be blue)

<HEAD>
<STYLE type="text/css">
.myPara{font-weight:bold}

H1.red {font: 15pt/17pt;
color: red}
H1.green {font: 15pt/17pt;
color: green}
H1.blue {font: 15pt/17pt;
color: blue}
</STYLE>
</HEAD>

<BODY>

<P CLASS="myPara">This is bold text!</p>
<P> This is a regular paragraph </P>
<H1 CLASS=red>This is the red heading</H1>
<H1 CLASS=blue>This is the blue heading</H1>
<H1 CLASS=green>You get the picture...</H1>

</BODY>
  1. External Styles (CSS rules are in an external document -- can apply to entire web site) : Linked vs Imported
 Create a file called ficekStyle.css containing exactly these lines H1, H2, H3 {
font-size: 15pt;
font-weight: bold;
color: maroon}
Using that style -- put a line into the HEAD area <HTML>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="ficekStyle.css" title="style1">
</HEAD>