Embed Size (px)
DESCRIPTION
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}
Citation preview
IS1825Multimedia Development for Internet ApplicationsLecture 12: IDs, Classes and Internal CSSRob Gleasure
[email protected]://corvus2.ucc.ie/phd/rgleasure/index.html
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:
<h1 class="right"> This heading will be right-aligned.
</p> <p class="center">
This paragraph will be center-aligned. </p>
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 <p> 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. <h1 id="ExampleID1">
This heading has an ID name of "exampleID1" and has a white CSS defined background
</p> <p id="ExampleID2">
This paragraph has an ID name of "exampleID2“ and has had its text transformed to uppercase letters.
</p>
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 <p> 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
<html><head>
<style type="text/css">.para1 {
text-align:center;color:red;
} #para2 {
text-align:right;color: blue;
}</style>
</head><body>
<p class="para1">This paragraph is affected by para1 class</p><p>This paragraph is not affected by any style.</p><p class="para1">This paragraph is affected by the para1 class</p><p id="para2">This paragraph is affected by the para2 id</p>
</body></html>
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 includeUnordered 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("http://www.example.com/notHere.gif");}
CSS lists (continued)
CSS List Positioning Try out the following code
<html><head><style type="text/css">#images { list-style-image:url('http://bis.ucc.ie/images/1301867755_feed.png'); }#outside { list-style-type: square }</style></head><body><ul id="images"><li>Burger</li><li>Pizza</li><li>Chips</li></ul><ul id="outside"><li>Water</li><li>Juice</li><li>Coke</li></ul></body>
</html>
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 syntaxi.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. Link2. Visited3. Hover4. 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
<html><head><style type="text/css">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%;}</style></head><body style="text-align:center">Click <a href="http://bunkstrutts.files.wordpress.com/2009/08/robot-dance_gif-anime-090820.gif?w=450"> Me</a> for robot dance!</body>
</html>
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 <head>, using the <style> tagi.e.
<style type = "text/css"> </style>
You will then need to override the defaults for <table>, <h1>, <h2> and <p>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
celle.g.
td#topleft { /* CSS code goes in here */ }
which can then be referenced in the HTMLe.g.
<td id="topleft">
Exercise Again, you should end up with a page that looks like this
