IS1825 Multimedia Development for Internet Applications Lecture 12: IDs, Classes and Internal CSS Rob Gleasure

IS1825 Today’s lecture  CSS Classes  CSS IDs  Lists in CSS  Links in CSS  Exercise

The class Selector With the class selector you can define different styles for the same type of HTML element. Say that you would like to have two types of text alignment in your document: one right-aligned paragraph, and one centre-aligned paragraph. Here is how you can do it with styles:.right {text-align: right}.center {text-align: center}

The class Selector continued… You then have to use the class attribute in your HTML document: This heading will be right-aligned. This paragraph will be center-aligned.

The class Selector continued… You can also restrict the HTML elements that can apply the class by specifying one tag type before the class name: p.center {text-align: center} now.center can only be referenced legally by tags

The ID selector We declare an ID with "#" and ID name. Two examples: #exampleID1 { background-color: white; } #exampleID2 { text-transform: uppercase; }

The ID selector To use these in our HTML e.g. This heading has an ID name of "exampleID1" and has a white CSS defined background This paragraph has an ID name of "exampleID2“ and has had its text transformed to uppercase letters.

The ID Selector continued… As with classes, you can also restrict the HTML elements that can apply the ID by specifying one tag type before the ID name: p#exampleID1 { background-color: white; } now #exampleID1 can only be referenced legally by tags

IDs vs. Classes What’s the difference between IDs and classes?  An ID can only be referenced once within a page or document. i.e. Only one element will have any given ID!  Classes can be used many times  Use IDs when there is only one occurrence per page (often for layout purposes).  Use classes when there are one or more occurrences per page.

IDs vs. Classes Try out the following code.para1 { text-align:center; color:red; } #para2 { text-align:right; color: blue; } This paragraph is affected by para1 class This paragraph is not affected by any style. This paragraph is affected by the para1 class This paragraph is affected by the para2 id

In HTML we encountered ordered, unordered and definition lists. With CSS we can choose exactly how to format them This may be done using  Style types  Images  Position CSS lists

CSS allows you to chose from a variety of list styles, these include Unordered lists  disc, square, circle, and none e.g. ul {list-style-type: square } Ordered lists  decimal, upper-alpha, lower-alpha, upper-roman, lower-roman, and none e.g. ol {list-style-type: upper-alpha } CSS lists (continued)

CSS list images  You may also want to use an image as a marker for the bullet points e.g. ol { list-style-image: url(“anImage.gif"); } ul { list-style-image: url(“anImage.gif"); } … Try and keep the images relatively simple though CSS lists (continued)

CSS List Positioning  You may also want to adjust the indentation of list items, namely “inside” or “outside”. e.g.ul { list-style-position: inside; } ol { list-style-position: outside; } Note – you may also combine all of these into a single statement e.g.ul { list-style: upper-roman inside url(" CSS lists (continued)

CSS List Positioning  Try out the following code #images { list-style-image:url(' #outside { list-style-type: square } Burger Pizza Chips Water Juice Coke CSS lists (continued)

CSS Links  Links in HTML have 4 states they can be in 1. Link (the link hasn’t been clicked and the mouse isn’t over it) 2. Visited (link has been clicked) 3. Hover (mouse is over it) 4. Active (link is being clicked) Note – the ordering of these states is important CSS links

The format is slightly different for modifying how to display links using CSS. We can change the appearance of each individual state using a slightly modified syntax i.e. a:state { attribute: value } e.g. a:link { color: green } CSS links (continued)

When we are changing more than one state however, we must do so in the correct order, i.e. 1. Link 2. Visited 3. Hover 4. active e.g. a:link { color: blue; } a:visited { color: red; } a:hover { color: green; } a:active { color: white; } CSS links (continued)

Try out the following code a:link { color: blue; } a:visited { color: red; } a:hover { color: green; text-decoration:none; font-size: 500%} a:active { color: orange; font-size:1000%;} Click Me for robot dance! CSS links (continued)

Exercise In this Exercise you must adapt last week’s code to look exactly the same but replace all inline CSS with internal CSS, Open your completed exercise from lecture 02, or copy and paste the solution file from the class share folder into your own is1825 folder Re-save this file as lecture03.html i.e. go file  save as (don’t forget to make sure it saves as type ‘all files’

Exercise (continued) This will require you to create a new internal style sheet in your HTML document’s, using the tag i.e. You will then need to override the defaults for,, and e.g. p { /* CSS code goes in here */}

Exercise (continued) You will then need to create an ID for each of the 6 types of table cell e.g. td#topleft { /* CSS code goes in here */ } which can then be referenced in the HTML e.g.

Exercise Again, you should end up with a page that looks like this