Cascading Style Sheets Basic CSS Cascading Style Sheets
CSS – Rules Review Selector Rule Property Value CSS Rule Syntax has 3 parts: Selector Property Value Selector Rule Property Value
CSS – <link> tag review <head> <title>My title</title> <link href=“foo.css” rel=“stylesheet” type=“text/css” /> </head>
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
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>
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>
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
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>
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; }
Class Selector Exercise Create 2 different CSS classes for the favorites assignment and apply them to the page
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>
Review With your neighbor, discuss the following How many times can you use an ID selector on an HTML page? How many times can you use a Class Selector on an HTML page? How would you style multiple HTML tags, including <p> and <h1> tags with a color of #ff0000 and set the font name for a few of the <p> tags, but not all to be Comic Sans MS?
CSS pseudo-classes selector:pseudo-class{ property:value; } CSS pseudo-classes are used to add special effects to some selectors (no HTML changes needed) Syntax: a:link{ color:#FF0000; } a:hover{ color:#00FF00; selector:pseudo-class{ property:value; }
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 */
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
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
Class Assignment Use CSS rules to format a Calendar for the month of November Criteria Table is used to create calendar with 7 columns, each column represents a day (e.g Monday…). Month is displayed Days are displayed 1st November 2015 is a Sunday All 30 days are correctly displayed (no dates are missing) A days are underlined and B days are bold Holidays (November 11, 26, and 27) have a background color of grey. font-weight : bold; text-decoration: underlined;