Scribd
Upload
7 views

Into To CSS

computer systems notes

Uploaded by

githinjigracenjeri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

Into To CSS

computer systems notes

Uploaded by

githinjigracenjeri
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 15

Cascading Style Sheet:-

CSS stands for Cascading Style Sheets. It not only extends its features in controlling
colors and sizes of fonts, but also controls spaces between various elements, the color and
width of a given line etc.
Syntax: p {font-size:30pt;}
p =selection
Font-size =property
30pt =value
Types of Style Sheets:-
1. Inline Style sheet
2. Embedded Style Sheet
3. External Style Sheet
An inline sheet applies style to a particular element in a webpage
Embedding a style sheet is for defining styles to a single webpage. Linking and nd importing
im
mporting are
are
two ways to attach external style sheet to html documents.
An external style sheet is a file created separately, saved with the .css extension
xtensioo n and
andd attached
att
ttaached
to an HTML document by means of the link element. Linking an external ernal styl
style
le ssheet
heet can
apply styles to multiple web pages.

Inline Style Sheet:-


Inclusion of style in a tag is called inline styles.
yles. Operator
Operrato
Ope torr colon(:
coloon( ) Is followed by
style property. To separate multiple properties we havehavve to
to us
usee ooperator
perato
pe a semicolon(;)

Example:-
<html>
<head>
<title>Inline style</title>
</tit
i le>
</head>

-
Inline Style Sheet
</h1>
<hr>
<p>Normal Para graph</p>
graaph</p>
gr
-
<p - technologies</p>
- technologies</p>
</body>
/bodyy>
/b
</html>
</htt mll>
/h
Embedded Style Sheet:-

If Style is used as tag, in He Hea


Header
ade
derr SSection
ection tthen
hen that
th style sheet is known as
internal style sheet. If you include all the the formatting
formaatting parameters
param in between <style> and
</style>, then this is called as internal
ernal style
st yle sheets
she
heeets or eembedded style sheets. Advantage of
Internal Style Sheet comparing ng w
with
ith inline
inli
nline
ne styles,
st yles, aat a time several tags can be formatted with
internal style sheets, where as in iinline
nline
nline sstyles
t yles only
onl one tag at a time formatted.
<style>
P {color:red;font-family:arial}
{co
{c olor:reed;f
d;foont -fa
f mi
.s5 {font-size:5;}
{fonntt -size:5
:5;}
.s10 {font-size:10;}
{font
n -siize:10
.s15
15 {font-size:20;}
{font -siz
H1 {color:white;background-color:blue}
{colo
{c
</style>
yle>

Example:-
amp
m l
<html>
<head>
<title>Embedded Style sheet</title>
<style>
P {color:red;font-family:arial}
.s5 {font-size:5;}
.s10 {font-size:10;}
.s15 {font-size:20;}
H1 {color:white;background-color:blue}
</style>
</head>
<body bgcolor=tan>
et</h1>
<hr>
<p>Normal Paragraph</p>

</body>
</html>

External Style
Sty
yle Sheets:-
Sheets:-
Third kind of style is external style sheet. In this total
stylee elements
elem
ments aare
re defi
defined
f ne in a separate document, and this document is added to required
webb pa
we page
page.
ge. By
By using
us this
t we can use this style sheets in different web pages. As style sheet is
sseparated
epa
paratedd from
from the
th document it gained the name External Style sheet.
Example:
E xample:
Write
W
Wr iitte one html
h program that calls a style sheet file.
Ourstyles.css
Ourstyl

P {color:red;font-family:arial}
.s5 {font-size:5;}
.s10 {font-size:10;}
.s15 {font-size:20;}
H1 {color:white;background-color:blue}
External style sheet.html
<html>
<head>
<title>External Style Sheet</title>

</head>
<body bgcolor=tan>
<h1 align=
<hr>
<p>Normal Paragraph</p>

</body>
</html>
CSS Links
DEFINING STYLES FOR LINKS
As mentioned in the above table, there are four different selectors with respect to links.
You can specify whatever style you'd like to each of these selectors, just like you'd do with
normal text.
The four selectors are:

A:link
Defines the style for normal unvisited links.

A:visited
Defines the style for visited links.

A:active
Defines the style for active links.
A link becomes active once you click on it.

A:hover
Defines the style for hovered links.
A link is hovered when the mouse moves over it.
i
it
Note: Not supported by Netscape browsers prior to vers
version
on 6.

PRACTICAL EXAMPLES
Here you can see a few examples on how w CSS
CSS ccan an bbee used
us to replace the traditional image
based mouseover effects for links.
The hover style is not supported by Netscape
Netsccape browsers
broowsers prior to version 6, but since it does no
harm, you can still use it for the benefit
beneefit ooff the
thhe +90%
+90
90% of visitors that arrive using MSIE).
One of the most common uses es off CSS
CSS w with
ith links
liinks is
i to remove the underline. Typically it's
done so that the underline appears
aappe
ppears only
onl
nlyy when
when a hover occurs. In the example below, we did
just that. In addition we aadded
dded
dde d a red
red ccolor
olor ffor hovered links.

Example: Hover
<stylee type="text/css">
type
y ="te
A:link
link {text-decoration:
{tex -de none}
A:visited
A:visit
i ed {t
{text-decoration: none}
A:active
A:ac i {text-decoration: none}
A:hover
A ho {text-decoration: underline; color: red;}
</style>
</s

Anotther example
Another e would be to create links that are both underlined and overlined.
Example:
amp
m l Underline/Overline

<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {text-decoration: underline overline; color: red;}
</style>
A third example would be to create links that change in size
when hovered.
Example: Size changing links

<style type="text/css">
A:link {text-decoration: none}
A:visited {text-decoration: none}
A:active {text-decoration: none}
A:hover {font-size:24; font-weight:bold; color: red;}
</style>

A final example would be to create links that have a permanent background color,, obviously
obvi
vioously
ly
standing out from the rest.

Example: Background colored links

<style type="text/css">
A:link {background: #FFCC00; text-decoration: none}
A:visited {background: #FFCC00; text-decoration: none}
on }
A:active {background: #FFCC00; text-decoration:
a io none}
at
A:hover {background: #FFCC00; font-weight:bold;
:bold color:
olor: red;}
</style>

MULTIPLE LINKSTYLES ON SAME P


PAGE
AGE

The final topic deals with how to add m


multiple
ult iple link
liink styles
styl that can be used on the same page.

In the above examples we addressed


ddresssed the
ddr the HTML
HT sselector - A:link etc - and thus redefined the
overall link style.

How do we define a link sstyle


t yle tthat
hat is
is only
onl active in a certain area of the page?

The answer is:: context


contn ex
xt dependent
depe
depende
dent
n selectors.
Rather thann addr
addressing
ddreessing the
the A:link selector we will address it while being dependant on a
certain out
outer
u er class
classs that
that surroun
surrounds the area where we'd like our link style to be effective.
For example:
xamp
mple:

<h
<html>
<head>
<style type="text/css">
.class1 A:link {text-decoration: none}
.class1 A:visited {text-decoration: none}
.class1 A:active {text-decoration: none}
.class1 A:hover {text-decoration: underline; color: red;}

.class2 A:link {text-decoration: underline overline}


.class2 A:visited {text-decoration: underline overline}
.class2 A:active {text-decoration: underline overline}
.class2 A:hover {text-decoration: underline; color: green;}
</style>
</head>

<body>
ONE TYPE OF LINKS
<br>
<span class="class1">
<a href="http://www.yahoo.com">YAHOO</a>
<br>
<a href="http://www.google.com">GOOGLE</a>
</span>
<br>
<br>
ANOTHER TYPE OF LINKS
<br>
<span class="class2">
<a href="http://www.yahoo.com">YAHOO</a>
<br>
<a href="http://www.google.com">GOOGLE</a>
</span>
</body>
</html>

Note how we use the <span> to define the context.


ntext.
t.
This is smart for two reasons:

1) The obvious, that it allows us to use different


diffferent
di nt llink
ink styles
styl on
the same page, rather than being
ng limit
limited
ited to using
using a single
sin
overall link style.

2) We can define entiree aareas


reass where
where a certain
certai link style works for all links within that area.
Thus, we don't have
ve to add
add a sty
style
yle definition
defi
f ni to each and every link in that area.

CSS
CSS Layers
Layer
Wit
With
i h CSS,
CSS it is possible to work with layers: pieces of HTML that are placed on top of the
regular
gular page with pixel precision.

The advantages of this are obvious - but once again Netscape has very limited support of CSS
layers - and to top it off: the limited support it offers is quite often executed with failures.

So the real challenge when working with layers is to make them work on Netscape browsers
as well.
LAYER BASICS

look at the code:

LAYER 1 ON TOP:
<div style="position:relative; font-size:50px; z-index:2;">LAYER
1</div>
<div style="position:relative; top:-50; left:5; color:red; font-size:80px;
z-index:1">LAYER 2</div>

LAYER 2 ON TOP:
<div style="position:relative; font-size:50px; z-index:3;">LAYER
1</div>
<div style="position:relative; top:-50; left:5; color:red; font-size:80px;
z-index:4">LAYER 2</div>

To create a layer all you need to do is assign the position attribute


ute to yyour
our style.
styyle. The position
can be either absolute or relative.

The position itself is defined with the top and left properties.
pert
r iees.

Finally, which layer is on top is defined with the z-index


z-inde
ndexx attribute.
attr
triibut
utee.

RELATIVE VERSUS
US A
ABSOLUTE
BSOL
OLUT
UTEE POSI
POSITIONING

You can eitherr position


positit ion yyour
our llayer
ayer calculated from the upper left corner(absolute) or
calculated fr
ffrom
om tthe
he position
posiition where
po wh the layer itself is inserted (relative).

posit
position:absolute
i o
If you define the position to be absolute it will be calculated from the
upper left corner of the page - unless the layer is defined inside
uppe
another layer, in which case it will be calculated from the upper left
corner of the parent layer.

position:relative
If you define the position to be relative it will be relative to the
position of the tag that carries the style.
That is, if you add a relatively positioned layer in the middle of the
page, then the position will be calculated from that exact spot in the
middle of your page where it was added.
DEFINING THE POSITION

While the position property indicates the out spring of our coordinate system, the left and top
properties defines the exact position of our layer.

You can enter both positive and negative values for these properties - thus it is possible to
place content higher up and further to the left on the page than the logical position in the
HTML code where the layer itself is defined.

In other words: at the bottom of your HTML code you can enter the code for a layer that is
positioned at the top of the resulting page.

Both left and top properties can be dynamically changed


with JavaScript.

This means that it is possible to move things around on the screen even after
er the page
page has
has
finished loading.

In fact this technique can be (and has been) used to create entire games
games.s. Other
Ot r uses us might
mi be
menus that pop out when a mouse-over is detected on a link. The he possibilities
posssibil
po biliit ies aare
re endless
en -
but in order to keep things simple, we will not dig into details
ls about
ut th
these
hese ddynamic
y ami HTML
yn
effects here.

POSITION IN THE STACK - THE Z-INDEX


NDEX

Picture a game of 52 cards. If the ace ooff sspades


padess wa
pa was at the bottom we'd say it had z-index:1;.
If the queen of hearts was at the topp we'dd ssay
ay she
she had
ha zz-index:52;.

Try looking at the code example


m le aatt tthe
mp he top
top of
of this page again, and see how we used the z-
index to put LAYER 1 on top in
in the
the first
first example,
exam while we had LAYER 2 on top in the
second example.

Very interesting possibilities


possib
bil
iliit ies aarise
rise from
f o the fact that the z-index can be dynamically changed
fr
with JavaScript.
pt.

You could uld ccreate


reatee sseveral
everal "page
"pages" on top of each other - all on the same page. When the user
clicks a link nk it
it will
will ssimply
imply move the layer with the desired info on top rather than load a new
im
page.
ge. Th
The
he techniques
techni
hnique
ques to create effects like that goes beyond the scope of pure CSS however,
sso
o for
for now
now we willwi ju just refer to DHTML (Dynamic HTML - a mix between JavaScript and
CSS)
C SS) fo
fforr further
further explorations
e into that area.

VISIBILE
IB VERSUS HIDDEN LAYERS

A final property is the visibility property that will allow you to create invisible layers.

Why would anyone want to create an invisible layer? Well, imagine the possibilities it gives
for adding pop-up menus and other cool effects on your pages.

With dynamic HTML it is possible to change the visibility of a layer according to certain
events. The most common use of this is to create menus that pop out (like the sub menus in
the START menu on Windows). The trick behind these menus is to create all submenus as
invisible layers. Then, when a mouse-over is detected on a link the according layer becomes
visible. (Sounds pretty easy - actually is pretty easy - except when tried on Netscape browsers
that seem to have only a vague idea of the logic behind CSS layers).

Valid values for the visibility property are: visible and hidden.

This example shows how to create an invisible layer:


<div style="position:relative; visibility:hidden;">HELLO!!!</div>

PRACTICAL USE OF LAYERS

It's obvious that layers offer certain possibilities for precise positioning
ning of static
statiic eelements
lement on
your pages.

In reality layers are often used in more dynamic ways:

Flying elements/banners on the page


ge

Games where you move


ove an object ar
around

Menus thatt pop out


u whe
when triggered

Menus
n that bbecome visible when triggered

While
hile all
ll ooff these
these eeffects
ffect might seem pretty cool and useful - the fact is that the web is filled
ff
with
w ith dynamic
dynamic effects
eff
ffects that are much more cool than the average visitor really likes.

The
T he m
more
ore you create a unique interface for your site the more you force the visitor to forget
about
ut what
wh she is used to. Do not underestimate the power of sticking to the elements that the
average
erage visitor is accustomed to.

What's cool about creating an effect that makes 90% of all web designers clap their hands
while leaving 90% of non-web designers confused or disappointed?

In any case, judge for yourself if a certain effect is really needed - and if so: do not hesitate to
use it.
CSS CURSORS
Microsoft Internet Explorer 4+ and Netscape 6+ supports customized cursors defined with CSS.

Although the cursors will not have the customized look in other browsers it usually doesn't ruin
anything. These browsers will simply show the normal arrow-cursor which would be same case as if
you refrained from customizing cursors at all.

So unless the page really doesn't work without the customized cursor there shouldn't be technical
chnicaal
reasons for choosing not to.

However there might be other reasons for thinking twice before adding custom cursorr to to yyour
our
pages. Many users are easily confused or irritated when a site breaks the standard
ndard user
user interface.
int
n errface.

default=cursor:default

crosshair=cursor:crosshair

hand=cursor:hand

pointer=cursor:pointer

Cross browser=cursor:pointer;cursor:hand
r:ha nd

move=cursor:move

text=cursor:text

wait=cursor:wait
it

help=cursor:help
ursor:he
hellp

n-resize=cursor:n-resize
n-resiz
ze=c
=cur
urso
sorr:n-resiz

ne-resize=cursor:ne-resize
ne-r
resize=curso

ee-resize=cursor:e-resize
-resize=

se-resize=cursor:se-resize

s-resize=cursor:s-resize
sw-resize=cursor:sw-resize

w-resize=cursor:w-resize

nw-resize=cursor:nw-resize

progress=cursor:progress

not-allowed=cursor:not-allowed

no-drop=cursor:no-drop

vertical-text=cursor:vertical-text

all-scroll=cursor:all-scroll

col-resize=cursor:col-resize

row-resize=cursor:row-resize

cursor:url(uri)=cursor:url(uri

ADDING A CUSTOMIZED CURSOR

The syntax for a customized cursor is this:


(Position the mouse over each link to seee tthe
he eeffect)
ffectt)

Selector {cursor:value}

For example:

<html>
<head>
<style type="text/css">
y =" xt/cs
ype
.xlink {cursor:crosshair}
{cursor
.hlink{cursor:help}
nk{curs r:h
</style>
</s yle>
</head>
</head

<b
<body>
<b>
<a href="mypage.htm" class="xlink">CROSS LINK</a>
<br>
<a href="mypage.htm" class="hlink">HELP LINK</a>
</b>
</body>
</html>
REDEFINING THE CURSOR FOR ENTIRE PAGES
If you want to redefine the cursor so that it's not only showing up when moved over a link,
you simply specify the desired cursor using the body-selector.
For example:

<html>
<head>
<style type="text/css">
body {cursor:crosshair}
</style>
</head>

<body>
<b>
SOME TEXT
<br>
<a href="mypage.htm">ONE LINK</a>
<br>
<a href="mypage.htm">ANOTHER LINK</a>
</b>
</body>
</html>

REDEFINING THE CURSOR FOR AREAS


EAS ON A PAGE
PAGE

If you want one look of the cursor inn onee area


area off the
the page and another look of the cursor in
another area you can do it with context
ont
n exxt dependant
depe
de pennda
dannt sel
selectors.
This way, you create differentt styles
styles for
for links,
links, that are dependant on the context. Now if the
context is set with a dummy
my tag, sucsuch
uchh as
as <<span>
span> you don't have to specify the desired style
each and every time there
re is a link
link in tthe
he sect
section.
For example:

<html>
<head>
ad>
<style
style type="text/css">
y "
ype
.xlink A{cursor:crosshair}
A{c
.hlink
hlink A{cursor:help}
</style>
</s
</head>
</h

<body>
<b>
<span class="xlink">
<a href="mypage.htm">CROSS LINK 1</a><br>
<a href="mypage.htm">CROSS LINK 2</a><br>
<a href="mypage.htm">CROSS LINK 3</a><br>
</span>
<br>
<span class="hlink">
<a href="mypage.htm">HELP LINK 1</a><br>
<a href="mypage.htm">HELP LINK 2</a><br>
<a href="mypage.htm">HELP LINK 3</a><br>
</span>
</b>
</body>
</html>

You might also like