Basic CSS Cascading Style Sheets CSS Rules Review
Basic CSS Cascading Style Sheets
CSS – Rules Review CSS Rule Syntax has 3 parts: Selector Property Selector Value Rule Property Value
CSS – <link> tag review <head> <title>My title</title> <link href=“foo. css” rel=“stylesheet” type=“text/css” /> </head>
How it works HTML File <head> <link href=“mystyles. css”…> </head> <p id=“foo”>Hello</p> CSS File #foo{ color: red; }. bar { color: blue; } <p class=“bar”>World</p> <h 1 class=“bar”>My header</h 1> Hello World My header h 1. bar { bgcolor: yellow; }
Categories of Selectors selector { property: value; } Five categories of selectors HTML tag selector ID selector Class selector Pseudo-class selector (for hover, visited, etc. ) Combinations of the above with modifiers Syntax:
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 <h 1>, <h 3>, <ul>, <li>, <body>
ID Selector 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=“Intro. Italics”>Intro</p> <p id=“mission”>Our mission… </p>
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{ font-style: italic; font-family: ”Garamond”, “Century Gothic”, serif; } Exercise Practice using the ID selector on the favorites assignment
Class Selector 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>
Class Selector CSS class selectors Applies rules to any element with class All tags with class special All p tags with class shout All h 2 tags with class shout . special { font-style: italic; } p. shout{ font-size: 36 px; } h 2. shout{ color: #FF 0000; }
Class Selector Exercise Create 2 different CSS classes for the favorites assignment and apply them to the page
Multiple Classes An element can be a member of multiple classes (separated by spaces) <h 2 class=“shout”>Hey!</h 2> <p class=“special shout”>See our specials!</p> <p class=“shout”>We’ll beat any price!</p>
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: #FF 0000; } a: hover{ color: #00 FF 00; }
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: #FF 0000; } a: visited {color: #00 FF 00; } a: hover {color: #FF 00 FF; } a: active {color: #0000 FF; } /* unvisited link */ /* mouse over link */ /* selected link */
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
Class Selector Exercise Use CSS pseudo-classes to add style to the <a> tags in your favorites assignment
Class Assignment Use CSS rules to format a Calendar for the month of March Criteria Table is used to create calendar with 7 columns, each column represents a day (e. g Monday…). Month is displayed Days are displayed 1 st October 2012 is a Monday All 31 days are correctly displayed (no dates are missing) Multiple images Good visual design Total points Max points possible 5 2 5 3 5 2 3 25 Earned points
- Slides: 17