Download presentation
Presentation is loading. Please wait.
1
Cascading Style Sheets
Basic CSS Cascading Style Sheets
2
CSS – Rules Review CSS Rule Syntax has 3 parts: Selector Property
Value Selector Rule Property Value
3
CSS – <link> tag review
<head> <title>My title</title> <link href=“foo.css” rel=“stylesheet” type=“text/css” /> </head>
4
How it works HTML File CSS File #foo{ color:red; } <head>
<link href=“mystyles.css”…> </head> .bar { color:blue; } <p id=“foo”>Hello</p> <p class=“bar”>World</p> h1.bar { bgcolor:yellow; } <h1 class=“bar”>My header</h1> Hello World My header
5
Categories of Selectors
{ property: value; } Syntax: Five categories of selectors HTML tag selector ID selector Class selector Pseudo-class selector (for hover, visited, etc.) Combinations of the above with modifiers
6
HTML Tag Selector Styles can be applied to each HTML tag
For example, we have done several exercises with the <p> tag We can also apply style for other tags such as <h1>, <h3>, <ul>, <li>, <body>
7
ID Selector <p id=“IntroItalics”>Intro</p>
The HTML id attribute Allows you to give a unique ID to any single element on the page Each ID must be unique; can only be used once in the page Does not affect the HTML output <p id=“IntroItalics”>Intro</p> <p id=“mission”>Our mission… </p>
8
ID Selector (continued)
CSS ID selectors Applies style only to the paragraph that has the ID of mission Elements can be specified explicitly: p#mission {…} #mission {…} #mission{ font-style: italic; font-family:”Garamond”, “Century Gothic”, serif; } Exercise Practice using the ID selector on the favorites assignment
9
Class Selector <p class=“shout”>Hey!</p>
The HTML class attribute Classes are a way to group some elements and give a style to only that group (“I don’t want ALL paragraphs to be yellow, just these three…”) Unlike an id, a class can be reused as much as you like on the page <p class=“shout”>Hey!</p> <p class=“special”>Check out our specials!</p> <p class=“special”>They are great!</p>
10
Class Selector CSS class selectors
Applies rules to any element with class All tags with class special All p tags with class shout All h2 tags with class shout .special { font-style: italic; } p.shout{ font-size: 36px; } h2.shout{ color:#FF0000; }
11
Class Selector Exercise
Create 2 different CSS classes for the favorites assignment and apply them to the page
12
Multiple Classes <h2 class=“shout”>Hey!</h2>
An element can be a member of multiple classes (separated by spaces) <h2 class=“shout”>Hey!</h2> <p class=“special shout”>See our specials!</p> <p class=“shout”>We’ll beat any price!</p>
13
CSS pseudo-classes selector:pseudo-class{ property:value; } a:link{
CSS pseudo-classes are used to add special effects to some selectors (no HTML changes needed) Syntax: selector:pseudo-class{ property:value; } a:link{ color:#FF0000; } a:hover{ color:#00FF00;
14
CSS pseudo-class details
Can also use this format if your anchor tag has a class: a.myclass:hover { color:blue; } Always use this order when customizing links: a:link {color:#FF0000;} /* unvisited link */ a:visited {color:#00FF00;} /* visited link */ a:hover {color:#FF00FF;} /* mouse over link */ a:active {color:#0000FF;} /* selected link */
15
CSS pseudo-classes Class Description :active
An active/selected element :focus An element that has keyboard focus :hover An element that has the mouse over it :link A link that has not been visited :visited A link that has been visited :first-letter The first letter of text inside an element :first-line The first line of text inside an element :first-child The first element to appear inside another
16
Class Selector Exercise
Use CSS pseudo-classes to add style to the <a> tags in your favorites assignment
17
Class Assignment Use CSS rules to format a Calendar for the month of March Criteria Max points possible Earned points Table is used to create calendar with 7 columns, each column represents a day (e.g Monday…). 5 Month is displayed 2 Days are displayed 1st October 2012 is a Monday 3 All 31 days are correctly displayed (no dates are missing) Multiple images Good visual design Total points 25
Similar presentations
