8/7/2019 Lesson_07 CSS-2

1/18

By

Adnan Amin

Lecturer/ Software

Programmer

WEB ENGINEERING-IIUSING ASP.NET AND VB.NET

8/7/2019 Lesson_07 CSS-2

2/18

Font attributes

Color attributes

Margins and alignment

Positioning

Partitioning elements

DIV

SPAN

STYLES CAN APPLY ON:

8/7/2019 Lesson_07 CSS-2

3/18

There are many font and text attributes.

Most common attributes which well cover

here:

Font-family

Font-style

Font-variant

Font-weight

Font-size

Text-decoration

FONT ATTRIBUTES

8/7/2019 Lesson_07 CSS-2

4/18

Use font name as the value, we can also download

more font (if needed) from internet.

For example:

Change the heading tag font style.

H1 { font-family: Comic Sans MS} The comic sans ms font is only working in microsoft

operating system.

If client computer doesnt have font? It will be better

to include at least more than one font family:

For example:

H1 { font-family: Tahoma, Arial, Courier, Serif }

FONT-FAMILY

8/7/2019 Lesson_07 CSS-2

5/18

Provides four options:

Normal

Italic

Syntax:

#p1 { font-style: italic }

#p2{ font-style: normal }

FONT-STYLE

8/7/2019 Lesson_07 CSS-2

6/18

It allows you for normal and small-caps

For example

H1 { font-variant: small-caps }

FONT-VARIANT STYLE

8/7/2019 Lesson_07 CSS-2

7/18

Defines boldness of the text

Normal

Bold

You also can use the numbers 100, 200,

.900

Where 400 = normal and 700=bold

FONT-WEIGHT STYLES

8/7/2019 Lesson_07 CSS-2

8/18

There are four different notat ions which you can use to getspecific sizes.

FONT-SIZE STYLES

Notation ExampleRelative keyword xx-small , x-small , small

Medium, large, x-large, xx-large

Relative to parent Smaller, larger

Percentage of parent 50%, 30%, 120%

Absolute measure 20pt points

1.5 in inches3 cm centimete

25 px pixels

8/7/2019 Lesson_07 CSS-2

9/18

There are four possible values for text-

decoration for text.

none,

Underline

Italic

Line-through

Mostly we will use it to remove the underline

from the hyperlink (if needed)

TEXT-DECORATION STYLES

8/7/2019 Lesson_07 CSS-2

10/18

There are several different color attributes such as Color Background-color Border-color Border-botton-color Border-left-color Border-right-color Border-top-color Outline-color

You can use color keywords (aqua, gray, navy, etc) You can use system colors (ActiveBorder, ActiveCaption, e tc) You can also use specify an RGB value (using rgb funtion)R=Red , G=Green and B=Bold

COLOR ATTRIBUTES

8/7/2019 Lesson_07 CSS-2

11/18

You can set margins for an element or page.

Margin top

Margin right

Margin bottom

Margin left

The text-indent

For all margin and indent values

You can specify points, inches, centimeters or pixels

Text-align You can specify the text alignment by using the

following values

Left , center and right.

MARGINS AND ALIGNMENT

8/7/2019 Lesson_07 CSS-2

12/18

CSS provides attributes to set positioning of

the contents.

You can use relative or absolute positioning.

Relative

Specify relative positioning to change the

locations from their default position.

Attributes are

Position: relative

Top: distance from the top border

Left: distance from left border.

POSITIONING

8/7/2019 Lesson_07 CSS-2

13/18

Absolute Positioning

Absolute positioning allows for placement at

specific locations

Define position by x and y coordinates and thebrowser can measure from the left and top of

the windows

POSITIONING (CONTI)

8/7/2019 Lesson_07 CSS-2

14/18

body { font-family: Verdana; font-size: large }

table { border style: groove; border-width: thick;

border-color: Red Green Blue Yellow;border-top-color: Fuchsia}

H1 { color: #CCCCCC; background-color: rgb

(128,128,20) }

EXAMPLE

8/7/2019 Lesson_07 CSS-2

15/18

The latest technique used to format only part

of the larger contents.

How do you format only the word powerfll?

This is a powerful technology!

You can do this easily by using the and

.

AND

8/7/2019 Lesson_07 CSS-2

16/18

Can use dive and span elements to

provide a way to format portions of

bigger content.

Both provide containers for other contentDiv includes line break before and after

Span includes no line breaks

FORMATTING SUBSETS

8/7/2019 Lesson_07 CSS-2

17/18

this is a

powerful

internet

technology

!

EXAMPLE ABOUT DIV AND SPAN

8/7/2019 Lesson_07 CSS-2

18/18

References

Professional ASP.net

AppDev trainers

THANK YOU