Class Notes


CSS

  1. CSS Types
  2. Embedded CSS
  3. Working with divs, ids and classes

CSS Types

Three ways of using CSS:

Inline - the CSS is in the tag in the body of the html page.

<body>
    <p style="text-size:10px;">Text Here</p>
</body>

Internal - CSS is specified in the <head>

<head>
<style type="text/css">
    body {
        background-image:url("images/back40.gif");
    }
</style>
</head>

<body>

</body>

External - CSS is located outside of the html page - you need to call it from within the head tag

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

<body>

</body>


CSS Selectors:

Selectors are used in the External and Internal CSS to figure out what to apply the style to. All instances of that tag will be effected by the style.

Type selectors:

These selectors are the same as the tag names:

h1, h2, ..., p, a, body, hr, ol, ul, tr, td, table, etc..

In the CSS:

<style type="text/css">

h1 {
    color:#FF0;
}

</style>

In the BODY:

<h1>Title</h1>


Class Selectors:
You must indicate the element in the body that is to be effected by including a " class". In the CSS the selector always starts with a DOT . The same class can be placed multiple places on the page.

In the CSS:

.bigFont {
    font-size:120%;
    font-weight:bold;

}


In the BODY:

<p class="bigFont">
    This is the text
</p>


ID Selectors:
IDs are UNIQUE to a page and there will never be more than one per page. They start with a #.

In the CSS:

#uniqueParagraph {
    color:#FFFF00;

}


In the BODY:

<p id="uniqueParagraph">
    This is the text
</p>


Pseudo-class Selectors:
This is used to effect special attributes of some selectors.

In the CSS (they MUST come in this order):

<style type="text/css">
	a:link {
        color:#FF0000;
	}                                                 /* unvisited link */
	a:visited {
        color:#00FF00;
	}                                                  /* visited link */
	a:hover {
         color:#FF00FF;
	}                                                  /* mouse over link */
	a:active {
         color:#0000FF;
	}  
</style>                                                /* selected link */ 

In the BODY (nothing special needs to be written in the tag - it already understands the link, visited, etc.):

<a href="go.html">
 


More on CSS and Selectors:
There is so much more to tell you about CSS Selectors but you may not need it right away so here are a number of useful links.

CSS Intro (w3schools.com) - use the NEXT CHAPTER button to get to very useful stuff.

w3.org Editor's Draft - Selectors


Using CSS

Font Styles

font-size options:
font-size:16px;
font-size:150%;
font-size:x-large;

font-family options:
font-family:'Times New Roman', Times, serif;
Different Family names: Arial, Helvetica,Times New Roman, Times, Courier New, Courier
Generic names: sans-serif, serif, monospace, cursive, fantasy

font style and weight options:
font-weight:bold;
font-style:italic;

Multiple CSS font definitions:
style="font-size:16px; color:#CC0000; font-weight:bold;"


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">
		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 {
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</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 </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</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>