HTML PRIMER

by Jim Gordley
2008-2016 HomeSpun Internet Enterprises

Cascading Style Sheets

What are style sheets

Style sheets are used to describe the presentation properties of a document written in a markup language. Presentation includes, but is not limited to, background colors, font colors, font sizes, font style, font face, line spacing, paragraph alignments, and much more. Using style sheets gives the web author better control of presentation. CSS was created to resolve problems that web authors had in attempts to create web pages that would display the same way across various platforms and browsers. All browser applications have defaults that are used to present the content of an HTML document, those defaults varied among the many different browsers. Using CSS web authors can set presentation properties.

CSS Syntax and Selectors

A style sheet consists of a selector and a declaration block:
CSS Sytax layout

  • The selector points to the HTML element (tag) you want to style.
  • The declaration block contains one or more declarations separated by semicolons.
  • Each declaration includes a CSS property name and a value, separated by a colon.
  • A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

CSS Selectors

CSS selectors are used to select HTML elements based on their element name, id, class, attribute, and more.

The element Selector

The element selector selects elements based on the element name. (tag)

EXAMPLE

<stlyle>
p {
   text-align: center;
   color: blue;
   background-color: red;
}
</style>

The above example woul make any text between the <p></p> tag set be center aligned and colored blue on a red background.

The id Selector

The id selector uses the id attribute of an HTML element to select a specific element.
To select an element with a specific id, write a hash (#) character, followed by the id of the element.

Example of the CSS id selector
EXAMPLE

<stlyle>
#example {
   color: green;
   background-color: black;
}
</style>

<p id="example">

Any element using the id attribute with a value of example would be green on a black background.

This paragraph uses the attribute id with a value of example causing the text to be green and the background black.

Class Selector

The class selector selects elements with a specific class attribute.
To define a specific class, write a period (.) character, followed by the name of the class

CSS Class selector example
EXAMPLE

.center {
  text-align: center;
   color: red;
}

<p class="center">

Any element using the class attribute with a value of center would be centered and red.

Just like it says, centered red colored text.

Three Types of style sheets

  • External Style Sheets
  • Internal Style Sheets
  • In Line Style

External Style Sheet

An external style sheet is a separate document that can be linked to an HTML document using the <link> tag. External Style sheets affect the presentation properties of any HTML linked to it. The advantage of using this method is that an author can change styles over an entire web site by changing attributes in only one document.

<link href="url" rel="stylesheet" type="text/css" title="name">

External Style Sheet Example
EXAMPLE
CSS HTML



body {background-color:#000000;
color:#000000;}

p {font-size:14;
font-family:verdana;
color:#990099; }

p.small {font-size:8;
font-family:verdana;
.color:#cccccc;}

h1,h2,h3 {font-family:verdana;
color:#999999;}
.red {color:#ff0000;}








<!DOCTYPE HTML>
<html lang="en-US">
<!-- NOTE -->
<head>
<title></title>
<link href="mystyle.css" rel="stylesheet" type="text/css">
</head>
<body>
</body>
</html>

Copy and paste the CSS text in the example above (left side) into a blank note pad. Use the Save As "mystyle.css" to save that file in the same place you have been saving HTML documents. We will use this later

Internal Style Sheet


Internal style sheets are part of an HTML document. This type of style sheet is defined within the <head></head> tag set. An Internal Style Sheet affects the presentation of the document in which it is contained. Internal style sheets have priority over external style sheets.

<html>
<head>
<!-- NOTE -->
<style type="text/css">

<!--
body {background-color:#000000;
color:#ffffff;}

p {font-size:14;
font-family:verdana;
color:#990099; }

p.small {font-size:8;
font-family:verdana;
color:#cccccc;}

h1,h2,h3 {font-family:verdana;
color:#999999;}
-->


</style>

<title>My First Web Page</title>

</head>

<body>
Hello world!
</body>

</html>

Inline Style Sheet


Inline styles are created by using the "style" attribute within an HTML tag. Inline Style Sheet affects the content of the tag set and have priority over both external and internal Styles

.

<span style="color:red; font-size:18px;">
<p style="color:white;background-color:black; font-size:12px;">


 

Presentation tags are quickly becoming obsolete in HTML. Learning CSS now is highly recommended for anyone that plans on creating web pages. While it is not the intent of this primer to teach CSS it will be used for presentation properties.

To learn more about Style Sheets and CSS follow this link to W3 Schools

2008-2016 HomeSpun Internet Enterprises