CSS Styling
Styling Backgrounds
background-color Background color corresponds to a HEX value like ʻ#ff0000ʼ,
an RGB value like ʻrgb(255,0,0)ʼ or a color name like “red”.
Example: div {background-color:#b0c4de;}
background- To set background image, do
image body {background-image:url(ʻT.gifʼ);} where T is name of pic
background- To repeat vertically, do background-repeat:repeat-y;
repeat To repeat horizontally, do background-repeat:repeat-x;
For no repeat, do background-repeat:no-repeat;
background- For an image that scrolls with rest of page, do
attachment background-attachment:scroll;
For a fixed image, do
background-attachment:fixed;
background- To position background do, “background-position: X Y;”
position where X can be left, right or center and Y can be top, bottom
or center. Example: background-position: right top;
The shorthand property for background is background. Example:
{background:#ffffff url('img_tree.png') no-repeat right top;}
Styling Text
Color To change the font color, add command “color: some color;”
where “some color” is a HEX value, RGB value or name.
Example: div {color:#b0c4de;}
text-align To align text to left, do text-align:left
To align text to right, do text-align:right
To center text, do text-align:center
To stretch the lines so that each line has equal width, do
text-align:justify
text-decoration To add line below text, do text-decoration:underline
To add line above text, do text-decoration:overline
To add strikethrough, do text-decoration:line-through
Example: text-decoration:overline;
Styling Fonts
Here are some fonts available in CSS:
Generic Family Font Family Description
Serif Times New Roman Serif fonts have lines at the end of
Georgia some characters
Sans-Serif Arial “Sans” means without – these fonts
Verdana do not have lines at the ends of
characters
Monospace Courier New All monospace characters have the
Lucida Console same width
When specifying the font, you should have several font names as a “fallback”
system. If the browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick
a similar font in the generic family, if no other fonts are available.
Example: p{font-family:"Times New Roman", Times, serif;}
font-family To specify font, do “font-family: F;” where F is a(re) font
name(s).
font-style To display text in italics, do font-style:italic;
To display text normally, do font-style:normal;
font-size To specify font size, do “font-size: SIZE;” where size can be
xx-small, x-small, small, medium, large, x-large, xx-large
font-weight To specify font weight, do “font-weight:W” where W can be
bold, bolder, lighter
The shorthand property for fonts is font. The properties can be set in this order:
font-style font-weight font-size font-family
Example: font:italic bold 12px/30px Georgia, serif;
Styling Lists
list-style-type To specify the type of item marker, do “list-style-type:T;”
where T can be circle, square, upper-roman, and upper-latin
list-style-image To make item marker an image, do list-style-
image:url(“T.gif”); where T is the pictureʼs name
The shorthand property for list-style is list-style. The properties can be set in this
order: list-style-type, list-style-image.
Example: ul{list-style: square url("sqpurple.gif");}
Styling Tables
To style tables, you will use properties introduced earlier.
Table Borders
To specify table borders in CSS, use the border property.
Example: Sample Result:
table, th, td
{
border: 1px solid black;
}
Notice that the table in the example above has double borders. This is because
both the table, th, and td elements have separate borders. To display a single
border for the table, use the border-collapse property.
Collapse Borders
To collapse borders, do border-collapse:collapse;
Here is the code above, with the new command:
Example: Sample Result:
table
{border-collapse:collapse;}
table,th, td
{border: 1px solid black;}
Table Width and Height
Width and height of a table is defined by the width and height properties.
Example: Sample Result:
table
{width:100%;}
th
{height:50px;}
Table Text Alignment
The text in a table is aligned with the text-align and vertical-align properties.
The vertical-align property sets the vertical alignment, like top, bottom, or middle.
Example Sample Result:
td
{height:50px;
vertical-align:bottom;}
Table Padding
To control the space between the border and content in a table, use the padding
property on td and th elements:
Example: Sample Result:
td{padding:15px;}
Table Color
You can specify the color of the borders, the text and background color of th
elements using border, background-color, and color properties.
Example: Sample Result:
table, td, th
{border:1px solid green;}
th
{background-color:green;
color:white;}
