Elevate Your Web Design Skills: External Styles, Class Selectors, & Hexadecimal Color

1. Objectives • Use External Styles • Use Multiple and Class Selectors • Hexadecimal Color • Hex to RGB conversion

2. Use External Styles • An external style sheet is separate from the Web page • Allows designer to create a uniform style for all pages in Web site • Formatting is easier because you only have to change the style sheet, not each individual Web page in the site

3. Use External Styles • A separate document that is linked to a Web page to provide formatting • Modify the style sheet; Web pages are updated automatically • Use the .css extension • Syntax for a comment is /* comment */ • Use the link element to link external style sheet to the XHTML document

4. Linking up a Stylesheet • The syntax to link a style sheet is <link href = “filename.css” rel=“stylesheet” type=“text/css”/> • The href value is the name of the file • The rel attribute specifies the relationship between the current document and the target URL • The type attribute specifies that the document is CSS

5. Classes • A class selector is used to define more than one element • Class name must begin with full stop represented by a period (.) • Apply class using syntax class=“class name”

6. Reality Check • Perfect XHTML coding requires that all CSS is put into the stylesheet • Reality says that if you are using padding or margin on a single element it makes more sense to put directly into the XHTML page • Note: ALL colors, font sizes, font family's, bolding, etc, belong in the stylesheet (ALWAYS).

7. Multiple • A multiple selector is used to apply styles to several elements at once • Elements are separated by commas • Example • .this, .that {color:#blue} • H1, h2, .this {font-family:verdana}

8. Hexadecimal Color

9. Hexadecimal Color • How many colors are there to choose from? • Hint: this is a 16 bit number • A hex code consist of a 6 values • Each value is from 0-9 and/or A-F • When referencing Hex values you always start with the # sign • First 2 values are Red, Second 2 are Green, Last 2 are Blue • Sample: color:#4AB388; or background-color:#000d1e; • Want to get an easy “A” in this course and never do any more work???? • Ask me how!

10. RBG vs. CMYK RBG Color CMYK Cyan, Magenta, Yellow, Black Secondary Colors Subtractive Color Add all colors together and you get _ _ _ _ _? • Red, Green, Blue • Primary Colors • Additive Color • Add all color together and you get _ _ _ _ _? Rule: Mix any two primary colors and you will get a secondary color

11. Let’s Learn the Basics • Basics • Hex Value for Pure Red is #_ _ _ _ _ _ • Hex Value for Pure Blue is #_ _ _ _ _ _ • Hex Value for Pure Green is #_ _ _ _ _ _ • A Bit More than Basic • Hex Value for gray #_ _ _ _ _ _ • Hex Value for a Dark Red #_ _ _ _ _ _ • Hex Value for Yellow #_ _ _ _ _ _ • Hex Value for Cyan #_ _ _ _ _ _ • Hex Value for Magenta #_ _ _ _ _ _

12. Taking it up a Notch • How is #f30000 different from #3f0000? • The answer to this is understanding the power of each hex value • Each value (Red, Green, Blue) can be converted to a number between 0-255. 255 is very intense. • The first value for each color is exponentially more intense (as you can see from the above)

13. Take the first value and multiply by 16 • Then add in the second value Converting Hex to RGB #f30000 F = 15 15x16 = 240 240 + 3 = 243 #3f0000 3x16 = 48 F = 15 48+ 15 = 63 Convert Letters to Numbers • R = 243 G = 0 B = 0 ……….. Convert this: #FFA509

14. Objectives • Use External Styles • Use Multiple and Class Selectors • Hexadecimal Color • Hex to RGB conversion