Art of css

THE ART OF CSS
RAPHAEL WANJIKU
SOFTWARE DEVELOPER
raphael@incsyncweb.com

The Art of CSS
CSS allows separation of the HTML content from its styling.
It is responsible for the presentation(text formatting,colors,fonts,borders etc).
Applying CSS
Can be applied either:
i) internally- inline or within the same page holding the HTML content
<head>
<style type=”text/css”>
.....styles
</style>
</head>
ii) Externally- defined in a different file and then called withing the page holding
the HTML content.(called in the head of the page)
<head>
<link rel=”stylesheet” type=”text/css” href=”path to the css
file” />
OR use @import method
<style type=”text/css”>@import url(path to the css file”)</style>
</head>
Reasons for using external CSS:
a) easier maintenance
b) reduced file size
c) reduced bandwidth
d) improved flexibility

CSS Syntax
A style takes 3 sections or parts:

1. Single selector
selector {property:value}
selector- element you are styling
property-property title
value-style applying to the property.
NB: properties applying to one element are separated using semi-colons(;)
selector {property1:value1;property2:value2...;propertyn:valuen}
2. Multiple selectors
NB: several elements having same styling are separated using a comma(,).
Selector1,selector2...,selectorn{property:value}

3.Comment Tags
Unlike HTML which uses , CSS uses the following tags for
comments:
/* comments */
Nb:Can have single line or multiple line comments
4. CSS Classes
Elements that require styling can be grouped together depending on the user's
design needs.They are grouped into classes.Represented with the use of a dot(.)
Example
<p class=”kenya”>Is my country </p>
<p class=”kenya”>Is a great nation</p>
can be styled as:
.kenya{property:value}

5. CSS IDs
similar to classes EXCEPT once used can be re-declared.
Example
<p id=”kenya”>Is my country</p>
<p id=”uganda”>Has bananas</p>
can be styled as:
#kenya{property:value}
#uganda{property:value}
6.CSS Margins
Margin declares the space around an element. It can take four (4) sets:
top,left,bottom and right.
The value of the property can be :
- length(px)
- percentage
- or auto
It can be declared as a single property as follows:
margin: 5px 5px 5px 5px;
meaning: 5px top, 5px right, 5px bottom and 5px left.
NB: If one set once, then it applies to all sides;
margin: 5px;
NB: 2 values means application to opposing sides
1. margin: 5px 5px;
1st 5px to top and right sides
2nd 5px to bottom and left
2. margin: 5px 5px 5px;

1st 5px to top
2nd 5px to right and bottom
3rd 5px to left side
3. If you do not declare the margin of an element. Its value is set to zero
automatically
4.Negative values can also be used.
a) negative left and top move the elements left or top respectively.
b) negative right and bottom make their siblings move to the left and top
respectively.
CSS Padding
Padding- distance between the border of an element and the content within the
element.
NB:most properties are similar to those of margin,but it does not have auto
property and it uses 2values(length-px and percentage).
Padding: top right bottom right;
padding : 5px 5px 5px 5px;
CSS Text Properties
a) Text Color
color: value;
value can be :
i) color name eg. Color: green;
ii) hexadecimal eg. Color: #000;
iii) RGB eg. Rgb(0,0,0)

b) Text Align
text-align: value;
Value can be: right, left,center or justify
c) Text-Decoration
text-decoration: value;
Value can be: none, underline, overline, line through or blink.
d) Text-Transform
text-transform: value;
Value can be: none, capitalize or lowercase
e) Word Spacing
word-spacing: value;
Value can be: normal or length(px)
CSS Font Properties
a) Font family
font-family:value;
value can be: family name(e.g. Verdana) or generic name
b) Font-Size
font-size: value;
Value can be: percentage,length(px),small,large,medium,smaller,larger etc.
c) Font-Style
font-style: value;
Value can be: normal, italic or oblique

d) Font-Weight
font-weight: value;
Value can be: normal,bold,100-900
CSS Links Pseudo classes
Pseudo classes are applied to the links(anchors).
Can be: link,visited,hover,focus or active.
a:
a:
a:
a:
a:

link{property:value}
visited{property:value}
hover{property:value}
focus{property:value}
active{property:value}

CSS Backgrounds
The background of an element can be style using CSS.
a) Background-color
background-color: value;
value can be : color name, hexadecimal, rgb or just transparent.
b) Background-Image
background-image: value;
value can be: url(to the image) or none.
c) Background-position
background-position: value;
value can be: top left, top center, top right etc.

d) Background-repeat
You can set the image to repeat either horizontally(x) or vertically(y).
background-repeat: value;
value can be: repeat, repeat-x or repeat-y.

CSS Borders
a) Border-Color
border-color: value;
value can be : color name,hexadecimal or RGB format.
b) Border-Style
border-style: value;
value can be: solid, none,dotted,double,hidden etc.
c) Border-Width
border-width: value;
value can be : length(px), thin, medium or thick.
d) Border-Bottom
border-bottom: value;
value can be:
i) border-bottom-color: value;
ii)border-bottom-style:value;

iii)border-bottom-width:value;
NB: These values can be applied to border-top,border-left and border-right.
CSS Lists
Can be applied to both ordered and unordered lists
a) List style image
images can be used to represent bullets and other orderings.
List-style-image: url(path to image)
b) List style position
The type of bullets used can also be changed.
List-style-position: value;
value can be: disc,circle,square,decimal,none etc.
CSS Width and Height
a) Height
height: value;
value can be: auto,length(px) or percentage.
b) Width
width: value;
CSS Classifications
a) Clear
It is used to control the floated elements within a webpage.
clear: value;
value can be: none,both, left and none.

None- means floating elements can appear to any side of the element.
Both-means floated elements cannot appear to the left or the right.
Left-means floated elements cannot appear on the left.
Right- means floated elements cannot appear on the right.
b) Display
It controls how an element is displayed on the webpage.
Display: value;
Value can be: block,inline,list-item and none.
Block- creates a <br/> before and after the element.
inline- no <br/>
list-item- creates a <br/> before and after the element and adds a list item
none- element is not displayed on the page.
c) Float
This controls the display position of the element on the block of a webpage.
Float: value;
value can be: left,right or none.
Left: displays element to the left.
Right: displays element to the right.
None: no change in the display.(element position not affected)
d) Overflow
This controls the content if it exceeds it allocated boundary.

Overflow: value;
Value can be: auto, hidden,visible or scroll.
CSS positioning
It changes how elements are positioned on the webpage.
Position: value;
value can be: static, relative, absolute or fixed.
Static- default.
Relative- it offsets content to the righ,top,bottom or left which may overlap
other content on the page and maintains the normal flow of the webpage.
Absolute-this removes the element from the normal flow of the webpage and
places the element to the top left of the webpage or its parent element.If it does
not have a parent, then it is placed at the top left of the browser.
Fixed- just like static, but wont scroll even when other content on the page
scrolls.

Art of css

More Related Content

Similar to Art of css

More from Raphael Wanjiku

Recently uploaded

Art of css