Lists and external style sheets

Lists in HTML

• Lists are a natual way to organize information.
• can be an Unordered List
  • a list of items with no specific order implied
  • often called a bulleted list
• can be an Ordered List
  • a list of items with an intended order
  • often called a numbered list

Unordered Lists - ul and li

• the <ul> tag marks unordered lists are in HTML
• the bullet symbols are automatically created by the browser
• ul is a container
  • it must have a closing </ul>
  • it contains all the individual list items
• a list item is created with the <li> tag
• li is a container
  • it must have a closing </li>
  • it contains the actual text of the item

Example 1, part A

        <ul>
            <li>Borders</li>
            <li>Lists</li>
            <li>Images</li>
        </ul>

Ordered lists - ol and li

• the <ol> tag marks ordered lists are in HTML
• the numbers are automatically created by the browser
• ol is a container
  • it must have a closing </ol>
  • it contains all the individual list items
• a list item is created with the <li> tag
• li is a container
  • it must have a closing </li>
  • it contains the actual text of the item

Example 1, part B

        <ol>
            <li>Read chapter</li>
            <li>Review notes</li>
            <li>Do homework</li>
        </ol>

Example 1 in a complete page

Nested lists

• Lists can be nested - an item in one list is another list
• the <ul>...</ul> or is <ol>...</ol>is between the <li></li>
• indentation is often use to help show the nesting

Example 2, part A

Notice that the complete UL container is between the opening <li> and closing </li>

        <ul>

            <li>Borders
                <ul>
                    <li>solid</li>
                    <li>dotted</li>
                    <li>double</li>
                </ul>
            </li>
            
            <li>Lists
                <ul>
                    <li>ordered</li>
                    <li>unordered</li>
                </ul>
            </li>

        </ul>

It creates the nested lists:

• Borders
  • solid
  • dotted
  • double
• Lists
  • ordered
  • unordered

Example 2, part B

Notice that the complete OL container is between the opening <li> and closing </li>

Browsers may or may not change the number style for the inner list. Firefox 2 and IE 7 do not.

   <ol>
            <li>Some types of borders 
                <ol>

                    <li>solid</li>
                    <li>dotted</li>
                    <li>double</li>
                </ol>

            </li>
            <li>The nested list must be inside the containing list item</li>

 
            <li>Some types of lists
                <ol>
                    <li>ordered</li>

                    <li>unordered</li>
                </ol>
            </li>
           <li>The nested list is inside the containing list item</li>
        </ol>

It creates the nested lists:

Example 2 in a complete page

List markers

• the symbol in front of a list item is called a marker, its appearance can be changed
• there are only 3 different shapes for use with unordered lists, there are many different options for use with ordered lists

The list-style-type property

• specifies the appearance of the marker
• values depend on whether the list is unordered or ordered
• none means no marker will be shown.
• browsers use default settings unless you provide different rules

Example 3

The unordered list styles

        <ul style="list-style-type: square">
            <li>Borders
                <ul style="list-style-type: disc">
                    <li>solid</li>
                    <li>dotted</li>
                    <li>double</li>
                </ul>
            </li>
            
            <li>Lists
                <ul style="list-style-type: circle">
                    <li>ordered</li>
                    <li>unordered</li>
                </ul>
            </li>
        </ul>

Creates the nested lists:

• Borders
  • solid
  • dotted
  • double
• Lists
  • ordered
  • unordered

The ordered list styles

        <ol style="list-style-type: upper-alpha">
            <li>Borders
                <ol style="list-style-type: lower-roman">
                    <li>solid</li>
                    <li>dotted</li>
                    <li>double</li>
                </ol>
            </li>
            
            <li>Lists
                <ol style="list-style-type: decimal">
                    <li>ordered</li>
                    <li>unordered</li>
                </ol>
            </li>
        </ol>

Creates the nested lists:

1. Borders
   1. solid
   2. dotted
   3. double
2. Lists
   1. ordered
   2. unordered

Example 3 in a complete page

Types of Lists: Description lists

 <dl>
    <dt>...</dt>
    <dd>...</dd>
 </dl>
  

<dl>
 <dt>IT 180 Elements of Web Development I</dt>
 <dd>
An introduction to languages and programming 
 techniques for the World Wide Web, including the Hypertext 
 Markup Language, Cascading Style Sheets and a client-side 
 scripting language. 
 </dd>

 <dt>IT 180 Elements of Web Development II</dt>
 <dd>Topics include Web standards and their applications; 
 advanced techniques using XHTML and CSS and selected concepts.
 </dd>
</dl>

External style sheets

• Writing style rules in documents can be tedious
  • if the same set of rules is to be used in more than one document, you have to copy them
  • if you want to change one rule, you have to retype it in all the documents
• The solution is to use an external style sheet
  • saved in a separate file, the file is usually given the file extension .css
  • contains the same rules you would write in a <style> section in the document head
  • same sheet can be used with many documents
• the external file should not include the <style> tags, only the rules .

Example 4A, external style sheet

• here is a link to an example style sheet.
• the file is named styles_one.css.
• the rules in the file are:

body {background-color: white; 
      color: black;}

h1  {background-color: #ccc;
     margin: 15px;
     color: red;}

strong {color: red; 
        font-style: italic;}

Using an external style sheet - link

• How does the browser know what style sheet to use?
• tell it with a special tag - link
• the link tag
  • must be in the document's head
  • is not a container
  • type is not needed in html5
• the link tag is written

      <link rel="stylesheet"     
            href="URL_of_file" 
            type="text/css" >

• the only part that changes is the URL

Example 4B

• This link tag tells the browser to use the CSS rules in the file named styles_one.css
• the URL in this example is a relative URL

    <link rel="stylesheet"     
          href="styles_one.css" >

Complete example 4

Location of external stylesheets

• the stylesheet file can be anywhere, even on another web server
• the W3C provides several example stylesheets that you can link to and use W3C Core Style Sampler.
• You can use them for your own pages
• use the URL of the desired style as the href value in the link tag
• For example, href = "http://www.w3.org/StyleSheets/Core/Chocolate"
• note: the W3C files don't have the .css extension

Example 5 - a remote stylesheet

• if the URL in the link is changed, the page uses a different stylesheet.
• this page is exactly the same as example 6.1 except for the stylesheet
• the stylesheet used is http://www.w3.org/StyleSheets/Core/Chocolate.
• look at the source code to see how the link is changed.

Complete example 5 page

The cascading effect

• What does the "Cascading" in "Cascading Style Sheets" mean?
• Cascading refers to the way in which the rules are interpreted
• later-defined rules take precedence over earlier ones.
• when the page is loaded, all the stylesheets are combined into one long stylesheet in the order in which they appear in the head
  • linked external stylesheets (there can be more than one)
  • internal stylesheets in <style> sections (there can be more than one).
• the browser then uses the closest rule to determine the style for an element property,
  • A rule further down the stylesheet is closer.
  • An inline style is closer than one for the same element in a <style> section or external stylesheet.
  • The more specific element is closer than a less specific one. For example, a:hover takes precedence over just a.
• if there are a lot of rules, the precedence can get complicated and hard to predict.

Example 6A - cascading styles

This example uses the same external style sheet as example 6.1

It also has a stylesheet in the document head.

the rule embedded in the document comes after the one in the external file, and is the one used

    <link rel="stylesheet"     
          href="style_one.css" >

    <style type="text/css">
      h1 { color: #ff0;}
    </style>

link to the complete example 6A page

Example 6 B - cascading styles, continued

This example uses the same external style sheet as example 6.3.a

It also has a stylesheet in the document head.

the order of the link and style tags is reversed from 6.3.a.

the rule in the external file comes after the one embedded in the document, and is the one used

    <style type="text/css">
      h1 { color: #ff0;}
    </style>

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

link to the complete example 6B page

Validating stylesheets

• he W3C also provides a service for validating stylesheets.
• the W3C service is located at http://jigsaw.w3.org/css-validator/.
• the validator will check
  • separate stylesheet files, by entering URL or by file upload
  • CSS embedded in <style> sections by entering URL only
  • CSS code by direct input
• checking for valid CSS is a good way to uncover typing errors that may be preventing your styles from being applied.
• once you have a valid stylesheet, you can keep reusing it for many documents
• Remember! the <style> tag is HTML, not CSS. Do not put it in the external file.

Setting (and resetting) styles

        /* 
        A stylesheet designed to set all properties to a minimal standard.
        It eliminates unpredictable variations caused by different browser defaults.
        
        You can use it by including the following line at the beginning of your own stylesheet:
        
           @import "http://wyrd.hood.edu/~dong/it581/s2015/reset.css";
        
        Then in your custom stylesheet add rules to create the design you want.  
        */
       
        html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote,
        pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd,
        q, s, samp,small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt,
        dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot,
        thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption,
        footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark,
        audio, video {
        	margin: 0;
        	padding: 0;
        	border: 0;
        	outline: 0;
        	font-size: 100%;
	        font-weight: normal;
	        font-style: normal;
        	vertical-align: baseline;
        	background: transparent;
        }
        article, aside, details, figcaption, figure, footer, header, hgroup, 
        menu,nav, section {
            display: block;
        }
        body {
            line-height: 1.2;
        }
        
        ol {
            padding-left: 1.4em;
            list-style: decimal;
        }
        ul {
            padding-left: 1.4em
            list-style: square;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }

         <div> 
           <h2>First DIVision</h2> 
           <p> A short paragraph of text</p> 
           <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed at quam non neque vestibulum pretium.</p> 
         </div> 
         
         <div> 
           <h2>Second DIVision</h2> 
           <p> Another short paragraph of text</p> 
           <p> Donec blandit. Praesent eget lectus. Sed nisi. Pellentesque tempor imperdiet enim. Pellentesque mattis elit eget eros. Sed adipiscing ligula nec mauris.</p> 
         </div> 

       div {background-color: yellow; 
            border: solid medium red;
            margin: 10px;}

   <p>Some words in <span class="one">red</span>, 
     <span class="two">blue</span>, 
     and <span class="three">lime green</span> text.</p>
     
    <p>Another <span class="one">span belonging to class one span </span>, 
     and an additional <span class="two">span with class two </span>, 
     and <span class="three">some more class three span </span> content.</p>

    span.one {color: red}
    span.two {color: blue}
    span.three {color: lime}