SWC - Working with CSS Lesson

 

Working with CSS Lesson

There are other features of the CSS language. This section will present you with those options.

 

Color

CSS is a text-based language and requires you to define your colors in textual terms. In the previous assignment, you did so by specifying the color name. It is also possible to indicate a color by designating its color value. A color value is a numerical expression that describes a color. Each color is represented by a triplet of numbers referred to as RGB triplet. The numbers are based on the strength of its red, green, and blue components. RGB triplets can specify 256 (16.7 million) possible colors.  

HTML originally required color values be entered using the hexadecimal system which is a number expressed in the base 16 numbering system instead of 10.   The value would be indicated in a format such as #000080 (represents navy).  Most colors can be indicated with styles that use RGB triplets rather than hexadecimal form. 

 

Fonts and Text Styles

Web browsers typically display textual content using the Times New Roman font.  The font used on a website can be generic (the name for a group of fonts that share a similar appearance) or specific (a font that is installed on a user's computer).  Web browsers recognize five generic font groups: serif, sans-serif, monospace, cursive, and fantasy.  If the browser is unable to locate the font designated, the generic font will be used.  Best practice is to specify a font and also indicate the generic in case the specific font isn't available, example: body {font-family: Arial, Helvetica, sans-serif;}.  In the example the browser would look for Arial first, if that wasn't available then it would look for Helvetica and if that also wasn't available then it would use the generic sans-serif font.

 

Spacing and Identification

CSS supports styles that will permit you to manipulate the spacing of text.  Kerning, tracking, and leading are showcased as key terms on the Introduction page.  Make sure you have an understanding of each term.

 

Images and Backgrounds

Web browsers support .gif, .jpeg, and .png graphic formats.  A combination of all formats could be used on web pages.  When using images on a website, make sure you do not violate copyright law.  If the image was not created by you, take some time to investigate the terms for using the image on the website. 

 

Floating an Element

Images can enhance the visual appeal of a web page.  You may notice that adding an image causes content to move out of the normal flow of the page.  When this predicament occurs, you can float (reposition) the element by moving it to the left or right margins.  The other elements on the web page are then moved up to occupy the position previously occupied by the floating element. To float you will enter it like this: img {float: right;}.  This will cause the words to come up to the left of the picture and the picture will be on the right.

 

IMAGES CREATED BY GAVS