1 working with cascading style sheet (css) (contd.) what we will cover… 1. color (decimal and...
TRANSCRIPT
1
Working with Cascading Style Sheet (CSS) (contd.)
What we will cover…1. Color (decimal and hexadecimal representation)2. Floating elements3. Styling lists4. 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 nameo 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, 2553, 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 dayo 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 15o 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 stylefloat: 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 stylelist-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 itemlist-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
<div id="note1" class="notes"><p> place your notes here. </p>
</div>
<head><link rel="stylesheet" href="mystylesheet.css" type="text/css" /><style type="text/css">
.notes {font-size: 8pt; background-color: yellow; border: 3px; width: 130px}
.notes p {margin: 5px;}</style><TITLE>Introducing Styles...</TITLE></head>
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 browsersposition: 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 elementposition: 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 pageposition: 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