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 Description Values Sample Code

color Sets text colour name

RGB h2 {color: red}

letter-spacing Sets spacing between characters normal

length p {letter-spacing: 0}

line-height Sets spacing between lines

normal

number

length

percentage

h1 {line-height:36px}

text-align Sets justification

left

right

center

justify

p{text-align: left}

text-decoration Sets text Style

none

underline

overline

line-through

blink

a{text-decoration: none}

text-indent Sets indent text from the left margin length

percentage p {text-indent: 5px}

text-transform Transforms text letters

capitalize

uppercase

lowercase

none

h1 {text-transform: uppercase}

SAMPLE


h5 {

text-align: center;

text-decoration: underline;

text-transform: capitalize;

}

</style>

CSS Font Properties

Fonts


font Sets multiple font properties

font-family

font-size

font-weight

font-style

font-variant

font-family Sets font names family-name

generic-family

p {font-family: verdana,arial}

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

font-size Sets the size of the text

smaller

larger

xx-small

P {font: 12pt arial}

P {font: 70% sans-serif}

P {font: bold italic large Verdana}

x-small

small

medium

large

x-large

xx-large

font-weight Sets the weight of the text normal

bold

bolder

lighter

100

200

300

400

500

600

700

800

900

p{font-weight: bold}

font-style Sets the style of the text

normal

italic

oblique

p{font-style: italic}

font-variant Sets the font variant normal

small caps h2 {font-variant: small-caps}

Sample


.sample

{

font: italic small-caps 900 14px tahoma

}

</style>

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 Examples/Notes CSS level

background-

attachment

scroll, fixed CSS1

background-color (color), transparent Color in hex code CSS1

background-

image

none, (location) CSS1

background-

position

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

bottom, left, center, right

CSS1

background-

repeat

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

repeat

CSS1

background Any of the above background

values separated by spaces

{background: URL(back.gif) repeat

fixed}

CSS1

color (color) Color is in hex code. This refers to

the foreground color.

CSS1

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 background-

repeat 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


margin Sets all of the margin properties of an element

from one to four values

length

percentage

auto

h1 {margin: 4px}

h2{margin:2 1 3

3px}

margin-

bottom Sets bottom margin

length

percentage

auto

h1 {margin-bottom:

2em}

margin-left Sets left margin

length

percentage

auto

h1 {margin-left: 2px}

margin-right Sets right margin

length

percentage

auto

h1 {margin-right:

10.5%}

margin-top Sets top margin

length

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


padding Sets all of the padding properties of an

element from one to four values

length

percentage p {padding: 2em 2em}

padding-

bottom

Sets the bottom padding properties of an

element

length

percentage p {padding-bottom: 5px}

padding-

left Sets the left padding properties of an element

length

percentage p {padding-left: 12px}

padding-

right

Sets the right padding properties of an

element

length

percentage P {padding-right: 10%}

padding-

top Sets the top padding properties of an element

length

percentage P {padding-top: 2px}

Samples


{padding: 5px 10px 5px 10px; }

</style>

CSS List Properties

List Properties


display Sets how or if an element is

displayed

block

inline

list-item

none

p {display: block}

list-style Sets all of the list properties

list-style-type

list-style-

image

list-style-

position

ul {list-style: circle inside}

list-style-image Sets an image as the list item

marker

url

none

ul {list-style-image:

myimage.gif}

list-style-

position Sets the position of the list marker

inside

outside ul {list-style: outside}

list-style-type Sets the appearance of the list item

marker

disc

circle

square

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-

radius

-moz-border-radius-

topright

-webkit-border-top-right-

radius

border-bottom-right-

radius

-moz-border-radius-

bottomright

-webkit-border-bottom-

right-radius

border-bottom-left-

radius

-moz-border-radius-

bottomleft

-webkit-border-bottom-left-

radius

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

topleft

-webkit-border-top-left-

radius

border-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

Education

Transcript of Css