casc style sheets ii
DESCRIPTION
TRANSCRIPT
Cascading Style Cascading Style SheetsSheets
Introduction
1. CSS types
2. Pseudo classes and pseudo elements
3. Other considerations
4. Worked example
Reminder:Reminder:
Inline Affects individual HTML tag
<html>...
<body>...<p style=“font-family: Arial, sans-serif; ”>some text</p>
</body></html>
Reminder:Reminder:
Embedded Affects individual document
<html><head>
... <style type=“text/css”>
p {font-family: Arial, sans-serif;} </style></head>
<body>...
<p>some text</p> </body></html>
Reminder:Reminder:
Separate text file (.css) e.g. styles.css
p {
font-family: Arial, Sans-serif;
}
<html><head> ... <link href=“styles.css”
rel=“stylesheet” type=“text/css” />
</head><body> ... <p>some text</p></body>
</html>
Reminder:Reminder:
Imported
Into HTML file
<head> ... <style type=“text/css”>
@import url(“styles.css”); </style></head>
Into another style sheet
- @import instruction must be first line of file!
@import url(“styles.css”);
/*other stylesheet starts here*/
h1 { font-size: 200%; color: #6b84b5 }
Order of PrecedenceOrder of Precedence
1. HTML formatting instructions (e.g. <font> tags)
2. Inline styles
3. Embedded styles
4. Linked styles
5. Imported styles
6. Default browser styles
Types of CSS stylesTypes of CSS styles
Styles assigned to a HTML element Class selector styles
Define different styles for one or more HTML elements
Assigned to the class attribute within an HTML element
ID selector styles Define different styles for one and the same HTML
element Assigned to the ID attribute within an HTML
element
Class Selector Styles
CSS:….blue {color: #082984}.red {color: #de2131}.green {color:green}
HTML:…<h1 class="red">Headline</h1><p class="green">a summary</p><p class="blue">some text</p>
…
ID Selector styles
CSS…#red_heading {color: red}#summary {color: red}#conclusion {color: blue}
HTML…<h1 id=“red_heading”>Headline</h1><p id=“summary”>Summary</p><p id=“conclusion”>Conclusion</p>…
What is the Difference between class & id?
The difference between an ID and a class is that an ID (#) can be used to identify one element, whereas a class (.red) can be used to identify more than one.
If you have a style that you want to apply several times throughout the document, you need to use a Class. However, it if only want to apply the style once (for instance, to position a particular element, such as a banner) you should use the ID.
Using PseudoclassesUsing Pseudoclasses
Pseudoclasses are identifiers that are understood by user agents and apply to elements of certain types without the elements having to be explicitly styled
They are tracked by other means than the actual class attribute
Example: A handful of pseudoclasses can be used with anchor elements <a>
Using PseudoclassesUsing Pseudoclasses
PseudoclassPseudoclass MatchMatch
:link
:visited
:active
:hover
:focus
Unvisited links
Visited links
Active links
The link that the browser pointer is hovering overThe link that currently has the user interface focus
Pseudoclasses examplePseudoclasses example
<HTML><HEAD>
<style type="text/css">
a:link {color:green} a:visited {color:red} a:hover {color:black} a:active {color:blue}
</style> </HEAD>
<BODY><a href=“http://www.dit.ie">click here for DIT</a>
</BODY></HTML>
Cascading - Order of Cascading - Order of PrecedencePrecedence1. HTML formatting instructions (e.g. <font>
tags)
2. Inline styles
3. Embedded styles
4. Linked styles
5. Imported styles
6. Default browser styles