1 / 17

Basic CSS

Basic CSS. Cascading Style Sheets. CSS – Rules Review. 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>.

jesus
Download Presentation

Basic CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 selector { 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 • The HTML id attribute • Allows you to give a unique ID to any singleelement 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 • 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 • 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 • 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

  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 monthof March

More Related