Lec 09 CSS - IV.pptx

(1)

1

CS1113 Web Programming

Lecture 09

Pseudo, Position, List, Links

(2)

Pseudo - Elements

• CSS pseudo elements

are used to add

special effects

to some selectors.

• Syntax:

select: pseudo-element {

property: value;

}

(3)

CSS Pseudo Elements

Value

Description

: first-line Use this element to add special styles to _{the first line of the text in a selector} : first-letter Use this element to add special style to the _{first letter of the text in a selector.} : before Use this element to insert some content _{before an element.}

(4)

first-line

• <style>

p:first-line {

text-decoration: underline; color: green;

}

</style>

<p>The first line of this paragraph will be underlined as defined in the CSS rule above. Rest of the lines in this paragraph will remain normal.</p>

• Output:

The first line of this paragraph will be underlined as

(5)

• The following properties apply to the

:first-line

pseudo-element:

– font properties

– color properties

– background properties

– word-spacing

– Letter-spacing

– text-decoration

– text-transform

– Line-height

– clear

(6)

first-letter

• <style>

p:first-letter { font-size: 20pt; color: blue;

}

</style>

<p>The first line of this paragraph will be underlined as defined in the CSS rule above. Rest of the lines in this paragraph will remain normal.</p>

• Output:

(7)

:before

• <style>

p:before { content: url(/images/bullet.gif) }

</style>

<p> This line will be preceded by a bullet.</p> <p> This line will be preceded by a bullet.</p> <p> This line will be preceded by a bullet.</p>

• Output:

This line will be preceded by a bullet. This line will be preceded by a bullet. This line will be preceded by a bullet.

(8)

:after

• <style>

p:after { content: url(/images/bullet.gif) }

</style>

<p> This line will be preceded by a bullet.</p> <p> This line will be preceded by a bullet.</p> <p> This line will be preceded by a bullet.</p>

• Output:

(9)

CSS Links

• You can set different properties of a

hyper link

,

you can set following properties of hyper link:



The

:link

property signifies unvisited hyperlinks.



The

:visited

property signifies visited hyperlinks.



The

:hover

property signifies an element that

currently has the user’s mouse pointer hovering

over it.



The

:active

property signifies an element on which

(10)

:link (color of links)

• <style>

a: link

{ color: #009900; }

</style>

• Output:

Red Link

• Possible values:

(11)

11

:visited (color of visited links)

• <style>

a: visited

{ color: #006600; }

</style>

<a href=“index.html”> Click this link </a>

• Output:

Click this link

(once you click this link, it will

change its color to green)

(12)

:hover (change the color of links when

mouse is over)

• <style>

a: hover { color: #FFCC00; }

</style>

<a href=“index.html”> Bring mouse here </a>

• Output:

Bring mouse here (bring mouse over the link, it changes its color to yellow)

• Possible Values:

(13)

13

:active (color of active links)

• <style>

a:active

{ color: #FF00CC; }

</style>

<a href=“index.html”> Click this link </a>

• Output:

Click this link

(this will change its color to pink,

when user clicks it)

(14)

Typical Web Page (Browser)

header

footer

main

menu

(15)

Creating Box

• You can

create boxes or layer

through HTML

elements. All you have to do is use the

position

property

to specify whether the element will be

positioned

absolute or relative

in the document

layout.

• A

relative positioned

layer will follow the natural

flow of the elements in the document.

• An

absolute positioned

layer will be placed

(16)

(17)

17

position property

• It’s a flag that the browser looks for to

distinguish it

from regular elements

.

• By setting it to a value of absolute, you are alerting the

browser that

it should be positioned at a specific

location

.

• By setting it to a

value of relative

, causes the layer/box

to follow the natural flow of the document order.

• When you specify a value of absolute, you must also

(18)

position

• <style>

div

{

position:

absolute;

}

</style>

• Output:

(19)

left

• <style>

div {

position: absolute;

left: 20px;

}

</style>

• Output:

number positive or negative, px, %, in, mm

(20)

top

• <style>

div {

position: absolute;

left: 20px;

top: 200px; }

</style>

• Output:

(21)

width

• <style>

div {

border: 2px solid red;

left: 20px;

width: 200px;

}

</style>

• Output:

number px, %, auto

(22)

height

• <style>

div {

border: 2px solid red;

left: 20px;

width: 200px;

height: 200px; }

</style>

• Output:

(23)

z-index property

• The

z-index property

uses a positive

integer to specify into what position in the

stacking order a

box is placed

.

• A layer/box with z-index set to 1 will be

underneath all subsequent layers.

• The

larger the z-index

, the higher that

layer will be.

(24)

z-index

• #box1 { position: absolute; left: 10px; top: 100px; z-index: 3; }

#box2 { position: absolute; left: 100px; top: 258px; z-index: 2; }

#box3 { position: absolute; left: 280px; top: 75px; z-index: 1;

}

(25)

(26)

CSS visibility property

• You can control if an

element is visible

or not

with the visibility property.

• Example:

p

{

visibility:

hide;

}

(27)

CSS Lists

• There are following five CSS properties which can be used to control lists:

• The list-style-type Allows you to control the shape or appearance of the marker.

• The list-style-position Specifies whether a long point that wraps to a second line should align with the first line or

start underneath the start of the marker.

• The list-style-image Specifies an image for the marker rather than a bullet point or number.

• The list-style Serves as shorthand for the preceding properties.

(28)

list-style-image

• You can use an image for the bullet of

unordered lists.

• <ul

style=

“list-style-image: url(image.gif);”

>

</ul>

• Output:

(29)

list-style-type

• <ul

style=

“list-style-type: lower-alpha;”

>

</ul>

• Output:

• Possible values:

disc, circle, square, decimal, lower-roman,

upper-roman, lower-alpha, upper-alpha,

(30)

list-style-position

• <ul

style=

“list-style-position: lower-alpha;”

>

</ul>

• Output:

(31)

list-style

• <ul

style=

“list-style: inside lower-alpha;”

>

<li>One</li>

</ul>

• Output:

(32)

marker-offset

(33)

marker-offset

• <ul

style=

“list-style-type: upper-alpha;

marker-offset: 2cm;”

>

<li>Maths</li>

<li>Computer</li>

</ul>

• Output:

A. Maths

B. Computer

(34)

cursor

• You can control the style of cursor to be

used in an element with the cursor property.

• Syntax:

cursor:

value;

• Possible Values: