Professional Documents
Culture Documents
Course content
Module one Introduction to CSS Functions of CSS Methods of applying CSS -inline styling -embedded styling -external styling
Text-indent
1|Page Copyright 2013 Hassan Kassem Nycom Systems. All rights reserved
Text-decoration
none | underline | overline | line-through | blink |
Direction
ltr | rtl syntax = direction: <value>
Text-transform
capitalize | uppercase | lowercase | none |
FONT Font-family
serif |times new roman| georgia|monospace | courier new | lucida console |sans-serif |verdana | arial |
Font-variant
normal | small-caps |
Font-weight
normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Font-size
font-size: 40px; font-size: 2.5em;
Font-style
normal | italic | oblique
2|Page Copyright 2013 Hassan Kassem Nycom Systems. All rights reserved
Font stretch
] wider|narrower|ultra-condensed|extra-condensed|condensed|semi-
condensed|normal|semi-expanded|expanded|extra-expanded|ultraexpanded|inherit
MARGIN Margin
margin: top right bottom left;
Margin-top
length: 10px, 23px, e.t.c
Margin-bottom
length: 10px, 23px, e.t.c
Margin-left
length: 10px, 23px, e.t.c
Margin-right
length: 10px, 23px, e.t.c
PADDING Padding
padding: top right bottom left;
Padding-top
padding-top: 10px, 20px;
Padding-right
padding-right: 1px, 3px, 10px;
Padding-bottom
3|Page Copyright 2013 Hassan Kassem Nycom Systems. All rights reserved
Padding-left
padding-left: 1px, 3px, 10px;
BACKGROUND Background-color
color
Background-repeat
repeat l none l repeat-x l repeat-y l no-repeat
Background-position
percentage l length syntax = background-position: 90% 30%
Background-attachment
scroll | fixed
BORDER Border-color
color
Border-width
medium | length | thin | thick
Border-style
none | hidden | dotted |dashed | solid | double | groove | ridge | inset | outset
4|Page Copyright 2013 Hassan Kassem Nycom Systems. All rights reserved
Border-right-color
same as border-color
Border-right-style
same as border-style
Border-right-width
same as border-width
LIST List-style
type position image
List-style-image
url ("file.jpg") | none
List-style-position
inside | outside
List-style-type
disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none
OTHERS Appearance
normal | icon | window | button | menu | field;
Caption-side
top | bottom
5|Page Copyright 2013 Hassan Kassem Nycom Systems. All rights reserved
Clear
none, left, right, both
Outline
outline should be treated just like border
Cursor
auto | default | pointer | help | wait | progress | move | crosshair | text | |n-resize | s-resize | e-resize | w-resize
Display
inline | block | hidden
Float
none | left | right
Line-height
line-height: 1em, 2em, 3em, 4em, 100%, 120%, 200%;
letter-spacing
letter-spacing: 5px, 10px, 20px, 2.5em;
Visibility
visible | hidden
Overflow
visible | hidden | scroll |auto
word-spacing
word-spacing: 5px, 10px, 20px, 2.5em;
z-index
6|Page Copyright 2013 Hassan Kassem Nycom Systems. All rights reserved