Css

ACT ACADEMY
Why should I use CSS?
Cascading Style allows obtaining the full control under HTML tagging. CSS allows easily redefining the all
default properties of any HTML tag. Using CSS you will open new unique opportunities missing in
common HTML.
For example, by means of CSS it's possible to set the tracking between characters and space between
text rows. Using CSS properties you can exactly specify the background image position disallowing the
repeating of the image within the document.
Using CSS you will create new HTML pages much faster. The styles that were once determined can be
used again and again in any part of the HTML document. It's very important to understand that using
CSS in external file gives a chance to change properties for all elements in any pages where this style
definition is used.

CSS Inline
It is possible to place CSS in the your HTML code and this method of CSS usage is referred to as inline
css.
Inline CSS has the highest priority out of external, internal, and inline CSS. This means that you can
override style rules that are defined in external or internal by using inline CSS.
CSS is built in to every HTML tag. If you want to add a style inside an HTML element all you have to do is
specify the desired CSS properties with the style HTML attribute
Sample
Code:
<p style="background: #660066; text-decoration: underline; color: white;">Inline CSS Sample</p>

Internal CSS

When using internal CSS, you must add a new tag, style, inside the tag. The HTML code below contains
an example of <style>'s usage
<html>
<head>
<style type="text/css">
h5 {
text-align: center;
text-decoration: underline;
text-transform: capitalize;
}
</style>
</head>
<body><h5>hello ACT </h5></body>
</html>

Linking to external CSS files
A key benefit of CSS is that you can create a style sheet for use not just within a single page, but
throughout an entire web-project. This external style sheet can be applied so many pages as you desired,
without having to duplicate the code. So if you'd like to change the design of all your pages, you just need
to change one file, instead of making changes to all your pages of the web-project.
To set up an external CSS file:
1. Create a new file by means of software allowing you to save it as a text file.
2. Type in your clear CSS codes.
3. Save the document as filename.css

Link to your external file:
To use external file CSS file on every page that you want affected by CSS, insert the following code in the
head:
<HEAD>
<LINK REL=stylesheet TYPE="text/css" HREF="filename.css">
</HEAD>

CSS Text Properties
Text Formatting
Property
color

letter-spacing

Description
Sets text colour

Sets spacing between characters

Values
name
RGB
normal
length

Sample Code
h2 {color: red}

p {letter-spacing: 0}

normal
line-height

Sets spacing between lines

number
length

h1 {line-height:36px}

percentage
left
text-align

Sets justification

right
center

p{text-align: left}

justify
none
underline
text-decoration Sets text Style

overline

a{text-decoration: none}

line-through
blink
text-indent

Sets indent text from the left margin

length
percentage

p {text-indent: 5px}

capitalize
text-transform

uppercase

Transforms text letters

lowercase

h1 {text-transform: uppercase}

none

SAMPLE
h5 {
text-align: center;
text-decoration: underline;
text-transform: capitalize;
}
</style>

CSS Font Properties
Fonts
Property

Description

Values

Sample Code

font-family
font-size
font

Sets multiple font properties

font-weight
font-style
font-variant

font-size

Sets the size of the text

family-name

p {font-family: verdana,arial}

generic-family

p {font-size: 10pt; font-family: arial}

smaller

font-family Sets font names

P {font: 12pt arial}

larger

P {font: 70% sans-serif}

xx-small

P {font: bold italic large Verdana}

x-small
small
medium
large
x-large
xx-large
bold
bolder
lighter
100
200
font-weight Sets the weight of the text normal

300
400

p{font-weight: bold}

500
600
700
800
900
normal
font-style

Sets the style of the text

italic

p{font-style: italic}

oblique
font-variant Sets the font variant

Sample

.sample
{
font: italic small-caps 900 14px tahoma
}
</style>

normal
small caps

h2 {font-variant: small-caps}

Color and Background
A background image, background color, and foreground color are subject for total CSS control. Using
CSS you can always obtain the required result.

Color & Background properties
Properties

Values

background-

Examples/Notes

scroll, fixed

CSS level
CSS1

attachment
background-color (color), transparent
background-

Color in hex code

CSS1

none, (location)

CSS1

background-

(percent), (length), top, center,

CSS1

position

bottom, left, center, right

background-

repeat, repeat-x, repeat-y, no-

repeat

repeat

background

Any of the above background

{background: URL(back.gif) repeat

values separated by spaces

fixed}

(color)

Color is in hex code. This refers to

image

color

CSS1

CSS1

CSS1

the foreground color.

You are probably familiar with the <body> tag. A typical <body> tag looks something like this:
<body background="graphic.jpg" text="#FFFFFF" bgcolor="#000000">
To convert that into CSS, it looks like this:
body {
background-image: url(graphic.jpg);
color: #FFFFFF; background-color: #000000; }
Big deal right? But CSS adds some special features. One of the most important is the backgroundrepeat property. It has these values: repeat, repeat-x, repeat-y, or no-repeat. A regular web page has a

default of background-repeat: repeat, which means the image is repeated both horizontally and vertically.
With CSS, you can set the background to repeat horizontally ( repeat-x), repeat vertically (repeat-y), or
not repeat at all (no-repeat).
Sample
Code:

body
{
background: #00ff00 url("/images/bg.gif") no-repeat fixed center center;
}
</style>

Link styles (Pseudo-Class Selectors)
Link styles are pseudoclass selectors in CSS-Talk
CSS specifications refer to link styles as Pseudoclasses... which are special classes that describe styles
for elements that only apply under certain circumstances. It sounds intimidating but is quite simple:
a:link
Describes any hyperlink that has not been visited by the user's browser. In other words, the page linked
to is not present in the browser's local memory.
a:visited
Describes any hyperlink that has been visited and is present in the browser's local memory.
a:hover

Describes a hyperlink while the user's mouse happens to be hovering over it. This class is recognized by
all version 4 and higher browsers, except Netscape 4. <style type="text/css">
a:link {
color: #999999;
}
a:visited {
color: #FFFFFF;
}
a:hover {
color: #CCCCCC;
background-color: #333333;
text-decoration: none;
}
a:active {
color: #333333;
}
</style>
a:active
Describes a hyperlink that has been clicked but not yet released. This class is recognized by all version 4
and higher browsers, except Netscape.
Link style syntax

a:link {
color: #999999;
}
a:visited {
color: #FFFFFF;
}
a:hover {

color: #CCCCCC;
background-color: #333333;
text-decoration: none;
}
a:active {
color: #333333;
}
</style>

CSS Margins
Margin properties allow you to set the width of the margin around the element box. Since margins are
outside the element box, the background color or image for the page or parent element is what will show
through the margin.

Margins
Property

margin

marginbottom

Description

Sets all of the margin properties of an element
from one to four values

Values
length
percentage
auto
length

Sets bottom margin

percentage
auto

Sample Code
h1 {margin: 4px}
h2{margin:2 1 3
3px}
h1 {margin-bottom:
2em}

length
margin-left

Sets left margin

percentage h1 {margin-left: 2px}
auto
length

margin-right Sets right margin

percentage
auto

h1 {margin-right:
10.5%}

length
margin-top

Sets top margin

percentage
auto

h1 {margin-top:
2em}

Samples

p.sample {margin: 1em 2em 3em 4em}
/* top margin 1em, right margin 2em, bottom margin 3em, left margin 4em */
</style>

CSS - Padding properties
Paddings are part of the box formatting model. Each element formatted in this model is in one or more
rectangular boxes representing the padding, border and margin areas.
The padding Properties determine how much space is to be inserted between the border and the actual
content of the element.

Padding
Property Description
padding
paddingbottom
paddingleft
paddingright
paddingtop

Values

Sets all of the padding properties of an

length

element from one to four values

percentage

Sets the bottom padding properties of an

length

element

percentage

Sets the left padding properties of an element

length
percentage

Sets the right padding properties of an

length

element

percentage

Sets the top padding properties of an element

length
percentage

Sample Code
p {padding: 2em 2em}

p {padding-bottom: 5px}

p {padding-left: 12px}

P {padding-right: 10%}

P {padding-top: 2px}

Samples

{padding: 5px 10px 5px 10px; }
</style>

CSS List Properties
List Properties
Property

Description

Values

Sample Code

block
display

Sets how or if an element is

inline

displayed

list-item

p {display: block}

none
list-style-type
list-stylelist-style

Sets all of the list properties

image

ul {list-style: circle inside}

list-styleposition
list-style-image
list-styleposition

Sets an image as the list item

url

ul {list-style-image:

marker

none

myimage.gif}

Sets the position of the list marker

inside
outside

ul {list-style: outside}

disc
circle
square

list-style-type

Sets the appearance of the list item
marker

decimal
lower-roman
upper-roman
lower-alpha
upper-alpha
none

ol {list-style-type: circle}

Internet Explorer and Gecko based browser do not render indents for list the same way. You cam make
them the same wih CSS.
First you need to remove/clear the left padding and margins.
ul{
margin-left:0;
padding-left:0;
}
Now, to indent the list XXpx just add the the number of pixels to either the left padding or left margin.
ul{
margin-left:XXpx;
padding-left:0;
}
or
ul{
margin-left:0;
padding-left:XXpx;
}
Samples

ul
{
list-style: square inside url("images/cl.gif")
}
</style>

CSS - common display properties
Display Block and Inline
CSS Code:
a { display: block; }

p { display: inline; }
Samples

a { display: block; }
p { display: inline; }
</style>

CSS: border-radius and -moz-border-radius
CSS3

Mozilla equivalent

WebKit equivalent

border-top-right-

-moz-border-radius-

-webkit-border-top-right-

radius

topright

radius

border-bottom-right-

-moz-border-radius-

-webkit-border-bottom-

radius

bottomright

right-radius

border-bottom-left-

-moz-border-radius-

-webkit-border-bottom-left-

radius

bottomleft

radius

border-top-left-radius -moz-border-radius-

-webkit-border-top-left-

topleft

border-radius

radius

-moz-border-radius

-webkit-border-radius

-webkit-box-shadow
-webkit-border-radius: 36px 12px;
-moz-border-radius: 36px / 12px;
-webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.6);

box-shadow: h-shadow v-shadow blur spread color inset;

-webkit-transform: rotate()
-webkit-transform: rotate(-5deg)
-webkit-transform: skew()
-webkit-transform: skew(5deg,5deg);

text-shadow
h1
{
text-shadow: 2px 2px #ff0000;
}
text-shadow: h-shadow v-shadow blur color;

Opacity property

.opaque1 { // for all other browsers
opacity: .5;
}
.opaque2 { // for IE5-7
filter: alpha(opacity=50);
}
.opaque3 { // for IE8
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}

Css

Recommended

Recommended

More Related Content

What's hot

What's hot (18)

Viewers also liked

Viewers also liked (7)

Similar to Css

Similar to Css (20)

More from actacademy

More from actacademy (11)

Recently uploaded

Recently uploaded (20)

Css