1 Working with Cascading Style Sheet (CSS) (contd.)  What we will cover… 1. Color (decimal and hexadecimal representation) 2. Floating elements 3. Styling lists 4. Positioning objects with CSS

1. Working with Color  HTML/CSS text-based language, requiring you to define your colors in textual terms  identifies a color in one of two ways: o By the color name o By the color value  To have more control and more choices, specify colors using color values  A color value is a numerical expression that precisely describes a color 2

Working with Color  Any color can be thought of as a combination of three primary colors: red, green, and blue 3

Working with Color 4  By varying the intensity of each primary color, you can create almost any color and any shade of color  This principle allows a computer monitor to combine pixels of red, green, and blue to create the array of colors you see on your screen

Working with Color (decimal representation)  Software programs, such as your Web browser, define color mathematically  The intensity of each of three colors (RGB) is assigned a number from 0 (absence of color) to 255 (highest intensity)  In this way, 255 3, or more than 16.7 million, distinct colors can be defined  Each color is represented by a triplet of numbers, called an RGB triplet, based on the strength of its Red, Green, and Blue components 5

Working with Color (hexadecimal representation)  color values can be entered as hexadecimals  A hexadecimal is a number based on a base- 16 numbering system rather than a base-10 numbering system that we use every day o Base 10 counting uses a combination of 10 characters (0 through 9) to represent numerical values o Hexadecimals include six extra characters: A (for 10), B (for 11), C (for 12), D (for 13), E (for 14), and F (for 15) 6

Working with Color (hexadecimal representation)  To represent a number in hexadecimal terms, you convert the value to multiples of 16 plus a remainder. For example: o 21 is equal to (16 x 1) + 5, so its hexadecimal representation is 15 o The number 255 is equal to (16 x 15) + 15, or FF in hexadecimal format (remember that F = 15 in hexadecimal) o In the case of the number 255, the first F represents the number of times 16 goes into 255 (which is 15), and the second F represents the remainder of 15  Once you know the RGB triplet of a color, the color needs to be converted to the hexadecimal format 7

Working with Color  Basic colors: 17 colors 8

Working with Color 9 Partial list of extended color names

2. Floating an Element 10

Floating an Element  To float an element, use the style float: position where position is none (to turn off floating), left or right  Suppose, jjay is the id of the image  Add this in the stylesheet: o #jjay {float: right} 11

3. Applying Styles to Lists  To specify the list marker displayed by the browser, you can apply the style list-style-type: type 12

Applying Styles to Lists 13

Applying Styles to Lists  Most browsers place the list marker to the left of the block, lining up the markers with each list item list-style-position: position 14

4. Positioning Objects with CSS 15

Positioning Objects with CSS  Create div containers for each note  Each note should have a unique id  Add a class attribute to apply a common set of styles 16 place your notes here..notes {font-size: 8pt; background-color: yellow; border: 3px; width: 130px}.notes p {margin: 5px;} Introducing Styles...

Positioning Objects with CSS  CSS-P (CSS-Positioning) became part of the specification for CSS2, and positioning styles were some of the first CSS2 styles to be adopted by browsers position: type; top: value; right: value; bottom: value; left: value;  Absolute positioning enables you to place an element at specific coordinates either on a page or within a containing element position: absolute; left: 100px; top: 50px 17

Positioning Objects with CSS  Relative positioning is used to move an element relative to its default position on the page position: relative; left: 100px; top: 50px  Additional feature: You can fix an element at a specific spot in the document window while the rest of the page scrolls by setting the value of the position style to fixed.notes {position: fixed; left: 100px; top: 50px} 18

Positioning Objects with CSS 19