This document discusses various CSS properties for styling text, links, backgrounds, and borders. It covers font properties like font-family, font-size, font-style, and font-weight. It also covers link pseudo-classes, background properties, border properties, and new properties like border-radius and box-shadow. Examples are provided for each property to demonstrate its syntax and possible values.
2. Font Properties:
• Font - Family :
You can set what font will be displayed in an element.
• Example:
font-family:Verdana , sans-serif ;
3. • Font Size :
You can set the size of the text used in an element by using the font-
size property.
• Example:
font-size: value ;
• There are a lot of choices for values:
• xx-large
• x-large
• Larger
• Large
• Medium
• Small
• Smaller
• x-small
• xx-small
• Length
• % (percent)
4. • Font Style:
You can set the style of text in a element with the font-styleproperty
• Example:
font-style: value;
• Possible values are:
1. Normal
2. Itailc
3. Oblique
5. • Font Weight:
You can control the weight of text in an element with the font-weight
property:
• Example:
font-weight: value;
• Possible values are:
1. Lighter
2. Normal
3. 100 - 900
4. Bold
5. bolder
6. CSS Anchors, Links & pseudo Classes
• Below are the various ways you can use CSS to style links:
o a:link { color: #009900; }
o a:visited { color: #999999; }
o a:hover { color: #333333; }
o a:focus { color: #333333; }
o a:active { color: #009900; }
7. • Visited Link:
The first on the list sets the color of a link when no event is
occurring.
Example: a:visited {color: #999999;}
• Hover:
The second sets the color a link changes to, when the user has
already visited that url.
Example: a:hover {color: #333333;}
• Focus:
The third sets the color a link changes to as the user places their
mouse pointer over the link. ForTabbing.
Example: a:focus {color: #333333;}
8. • Active Link:
The color a link changes to as it is pressed.
Example: a:active {color: #009900;}
• Note: You must declare the a:link & a:visited before you declare a:hover.
Furthermore, you must declare a:hover before you can declare a:active.
9. CSS Backgrounds
• Background Attachment:
If you are using an image as a background.You can
set whether the background scrolls with the page or is fixed when the user
scrolls down the page with the background- attachment property.
• Example:
background-attachment: value;
• Values:
• Fixed
• Scroll
10. Background Image
• You can set an image for the background of an element using the
background- image property.
• Example:
background-image: url ( path_to_image );
background: url (img_tree.gif) , url(img_flwr.gif) ;
• Values:
o url
o none
11. Background Position
• Background Position:
You can position an image used for the background of an
element using the background- position property.
• Example:
background-position: value;
• Values:
• Top left / right / center
• Center left / center / right
• Bottom left / right / center
• x-% y-%
• x-pos y-pos
12. Background Repeat
• Background Repeat:
You can set if an image set as a background of an
element is to repeat (across=x and/or down=y) the screen.
• Example:
background-repeat: value;
• Values:
• no-repeat
• Repeat
• repeat-x
• repeat-y
15. CSS Borders
• Border Color:
You can set the color of a border independently with the
border-color property.
• Example:
border-color: value;
• Values:
• color name
• Hexadecimal number
• RGB color code
• Transparent
16. • Border Style:
You can set the style of a border independently with the
border-style property.
• Example:
border-style: value;
• Values:
• Dashed hidden
• Inset Groove
• None Double
• Outset Dotted
• Ridge Solid
17. • BorderWidth:
You can set the width of a border independently with the
border-width property.
• Example:
border-width: value;
• Values:
• Length
• Thin
• Medium
• Thick
18. • Border Bottom:
You can set the color, style and width of the bottom border
around an element in one declaration with the border-bottomproperty.
• Example:
border-bottom: 1px solid #333333;
• Values:
• color
• Style
• width
19. • Border Bottom:
ColorYou can set the color of the bottom border around an
element with the border-bottom- color property.
• Example: border-bottom-color: value;
• Border Bottom Style:
You can set the style of the bottom border around an
element with the border-bottom- style property.
• Example: border-bottom-style: value;
• Border Bottom:
WidthYou can set the width of the bottom border around an
element with the border-bottom- width property.
• Example: border-bottom-width: value;
20. • Border Left :
You can set the color, style and width of the left border around
an element with the border- left property.
• Example:
border-left: 1px solid #333333;
• Values:
• Color
• Style
• Width
21. • Border Left:
ColorYou can set the color of the left border around an element
with the border-left- color property.
• Example: border-left-color: value;
• Border Left Style:
You can set the style of the left border around an element
with the border-left-style property.
• Example: border-left-style: value;
• Border LeftWidth:
You can set the width of the left border around an
element with the border-left- width property.
• Example: border-left-width: value;
22. • Border Right :
You can set the color, style and width of the right border
around an element in one declaration with the border-right property.
• Example:
border-right: 1px solid #333333;
• Values:
• Color
• Style
• width
23. • Border Right:
ColorYou can set the color of the right border around an
element with the border-right- color property.
• Example: border-right-color: value;
• Border Right:
StyleYou can set the style of the right border around an
element with the border-right- style property.
• Example: border-right-style: value;
• Border Right:
WidthYou can set the width of the right border around an
element with the border-right- width property.
• Example: border-right-width: value
24. • BorderTop:
You can set the color, style and width of the top border around
an element in one declaration with the border-top property.
• Example:
border-top: 1px solid #333333;
• Values:
• Color
• style
• width
25. • BorderTop:
ColorYou can set the color of the top border around an element
with the border-top- color property.
• Example: border-top-color: value;
• BorderTop:
StyleYou can set the style of the top border around an element
with the border-top- style property.
• Example: border-top-style: value;
• BorderTop:
WidthYou can set the width of the top border around an
element with the border-top- width property.
• Example: border-top-width: value;