Class Notes


CSS and Divs

  1. Embedded CSS
  2. Divs

Embedded CSS

CSS can work throughout the page by placing CSS it in the HEAD of the file. This is called Embedded CSS.

a:link - a = selector, which happens to be the tag for links.

<HEAD>
<title> my webpage</title>
<style type="text/css">

<!-- linked text -->

a:link {

text-decoration: none;
color: #00FF99;

}

<!-- visited text -->

a:visited {

text-decoration: none;
color: #0033FF;

}

<!-- rollover text -->

a:hover {

text-decoration: none;
color: #CC0000;

}

<!-- active link -->

a:active {

text-decoration: none;
color: #990099;

}

</style>
</HEAD>

NOTE: Defining the various links in the HEAD, will automatically change any LINK within the document.

If you want two selectors, such as, hover and visited to be the same, use a comma to combine like items:

a:visited, a:hover {

text-decoration: none;
color: #0033FF;

}

You can also add to your STYLE tag to customize any of the tags we have seen so far, for example:

ul {

list-style-type: disc

}

-or- multiple UL designations:

ul.disc {

list-style-type: disc

}

ul.circle {

list-style-type: circle

}

ul.square {

list-style-type: square

}

ul.none{

list-style-type: none

}

NOTE: Unlike the LINKs above, if you define multiples for many tags, you need to specify which one you want to use. In this example of UL, if we don't specify which CLASS, then the default -- generic UL with the list-style-type = disc -- will be used.

If your document has multiple ULs and you want to use various looks, then you need to be more specific in the definition and the call.

Call:

<UL class = "circle">

<LI>first list item</LI>
<LI>second list item</LI>

</UL>

 

Define (in the HEAD) a consistent P look (P = paragraph tag - <p></p> - used for chunks of text):

--effects all P tags
--can add other attributes, ie., color

p {

font-family: courier;
font-size:16px;

}

--effects designated P tags

p.small {

font-family: sans-serif;
font-size:10px;

}

p.big {

font-family: Times;
font-size:30px;

}

Call (in the BODY):

<p>chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text</p>

<p class="small>chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text </p>

<p class="big>chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text chunk of text</p>

 


Working with Divs

div and span tags

div tag:
• defines a section of the page
* it puts a line above and below it
* it is a block-level element
* used to apply styles to a section of html code
• a div tag cannot be inside a p tag
• label your div tags <div id="header"></div> - then you can apply styles to them in the CSS
* you may nest div tags inside each other

Examples:

<body>
    <div id="header">
        <h1>
             <a href="go.html">Click Here</a>
        </h1>
    </div>
</body>

OR another example:

<body>
    <div id="header">
        This is the stuff on top of the header div

        <div id="inner">
             <a href="go.html">This is inside the inner div</a>
        </div>
        This is the bottom of the header div

    </div>
</body>

Div adds a new line but if you do not want a new line, you can use the SPAN tag.

<body>
    <div id="header">
        This div will have a span inside it

        <span class="importantStuff">Read this!</span>

    </div>
</body>