12.09.2015 Views

Boot Camp

Web Authoring Boot Camp - StudioBast

Web Authoring Boot Camp - StudioBast

SHOW MORE
SHOW LESS

Create successful ePaper yourself

Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.

Styling Code, Part 1<br />

However, all those happen to the same selector, , which has no real separated attributes.<br />

Therefore, pseudo classes act as those attribute separations. Here are examples of<br />

how they can be styled, with commenting to explain:<br />

• a:link {color: #990000; text-decoration:none;} /* can use #383, unvisited link is a<br />

maroon color, no underline. Note: link must come before hover, visited, and focus<br />

*/<br />

• a:hover {font-size:120%; color: #000000;} /* can use #000, mouseover link<br />

makes text bigger. Note: hover must come after link and before visited and focus<br />

*/<br />

• a:visited, a:focus {color: #666666;} /* can use #666, visited link is a medium<br />

gray. Note: visited and focus must come after link and hover. */<br />

CS Classes and ID<br />

If you want a property to work throughout a site, you can set it as a class or id, like .red<br />

{color:red;} turns any text red you use it as a class for.<br />

If you want to affect only a specific selector, such as all text in a specific table cell, you<br />

would list the selector then class or id: td.red {color:red;} This will be covered in more<br />

detail in a later chapter about external style sheets.<br />

Colors for Styling<br />

We haven’t discussed the use of color in styling, which bears a closer look. One thing<br />

every web author should get is a link to the web-safe HEX colors – just plug that into a<br />

search engine and you’ll get plenty of examples.<br />

Web-safe colors are colors used in designing web pages, and the methods for describing<br />

and specifying those colors. These colors were chosen specifically because they matched<br />

the palettes selected by the then leading browser applications. However, as devices have<br />

16-bit to 24-bit color, web-safe colors are no longer required. Better results are obtained<br />

by providing an image with a larger range of colors and allowing the browser to quantize<br />

the color space if needed.<br />

Authors of web pages have a variety of options available for specifying colors for elements<br />

of web documents. Colors may be specified as an RGB triplet in hexadecimal format<br />

(a hex triplet); they may also be specified according to their common English names<br />

in some cases. Often a color tool or other graphics software is used to generate color values.<br />

Professionally, HEX color expression seems to be common and using names like red,<br />

green, and blue is not.<br />

153

Hooray! Your file is uploaded and ready to be published.

Saved successfully!

Ooh no, something went wrong!