You are on page 1of 6

NYCOM SYSTEMS

Standard Web Programming Tutorial


Course: Introduction to CSS (Part 2) Instructor: Hassan Kassem Niyi About the instructor: He is a computer specialist who read much about information
technology and has been helping people with their computer problems and their challenges for more than four years. Although his degree focused on social science, but his theories, techniques, and practices have been communicated via the computer sciences. He has worked with different operating systems and applications, and worked as an instructor at different computer institute and schools. Over the years, he has learnt a lot on how to be a good teacher and learnt not just how computer works but also learnt how to explain it in a simple plain english easy way. As part of his personal business, he designs applications and websites, and trains individuals and businesses on computer and Internet skills. He is the founder of Nycom systems and information technology.

Course content
Module one Introduction to CSS Functions of CSS Methods of applying CSS -inline styling -embedded styling -external styling

Module two CSS Properties: TEXT Text-align


left | right | center | justify | syntax = text-align: <value>

Text-indent
1|Page Copyright 2013 Hassan Kassem Nycom Systems. All rights reserved

text-indent: 3em text-indent: 40px text-indent: 15%

values in em values in pixel values in percentage

syntax = text-indent: <value>

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-bottom: 1px, 3px, 10px;

Padding-left
padding-left: 1px, 3px, 10px;

BACKGROUND Background-color
color

Background-image <url> l none


syntax = background-image:url("picture location .gif")

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

You might also like