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> Hello CSS File #foo{ color: red; }. bar { color: blue; } World <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 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 Intro Our mission…

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 Hey! Check out our specials! They are great!

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> See our specials! We’ll beat any price!

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