CSS Introduction

Introduction to CSS

What is CSS?

• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files

Styles Solved a Big Problem

• HTML was never intended to contain tags for formatting a document.
• HTML was intended to define the content of a document, like:
• <h1>This is a heading</h1>
• <p>This is a paragraph.</p>
• When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large web sites, where fonts and color information were added to every single page, became a long and expensive process.
• To solve this problem, the World Wide Web Consortium (W3C) created CSS.
• In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.
• All browsers support CSS today.

CSS Saves a Lot of Work!

CSS defines HOW HTML elements are to be displayed.

Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!

Creating lists in HTML

Creating lists in HTML

Lists are a commonly used way of displaying items such as shopping, tasks or in the index of a book. HTML provided three tags for the different types of lists. There are two types of lists, an unordered list, which indents each item in the list and adds a bullet, and an ordered list, which indents and numbers each item. To create a list, you will use the tags <ul> . . . </ul> to create an unordered list and the tags <ol> . . . </ol> to create an ordered list. Each item in the list will be enclosed by the tags <li> . . . </li>

Unordered List

Example of an <ul> tag

<ul type="disc"> 
<li>Tutorials</li>
<li>Online Practice Editor</li>
<li>Examples</li>
        <li>References</li>
        <li>Videos</li> 
</ul>



The <ul> tag stands for Unordered List and items are displayed as a bullet point list.  You can see that there is a single <ul> tag enclosing a number of <li> tags - one for each List Item. You can change the displayed bullet from the filled circle using the type attribute. An example of this can be seen above highlighted in blue. 

Ordered List

<ol type="A">

<li>Chapter 1</li>

<li>Chapter 2</li>

<li>Chapter 3</li>

</ol>

The <ol> tag stands for Ordered List and items are displayed as a numbered list. from the example above you are able to see that there is a single <ol> tag enclosing a number of <li> tags - one for each List Item. The numbers can be changed using the same type attribute we saw above. This is useful for nested lists where we want different numbering systems for different sub-lists. As with the unordered list the user is able to change the displayed from numbers to alphabetical letters using the type attribute, this can be seen highlighted  in blue.