ADVANCE WEB DESIGNING

Lecture 02

alishanvr@gmail.com / http://www.therightsol.com 1

WHAT WE WILL LEARN TODAY

• CSS Backgrounds

• CSS Text

• CSS Fontsalishanvr@gmail.com / http://www.therightsol.com 2

CSS BACKGROUNDS

• We can change background color of an element

• OR we can use image as background element.

• We can also use a small image (pattern) as background image.

alishanvr@gmail.com / http://www.therightsol.com 3

CSS BACKGROUNDS – CONT.

background-color:

• This property specify the background color of an element.

Value can be:

1. HEX value: like #ff0000

2. RGB value like "rgb(255,0,0)"

3. Color name like "red“alishanvr@gmail.com / http://www.therightsol.com 4

CSS BACKGROUNDS – CONT.

Websites that can help you to choosing color combinations

• https://color.adobe.com/create/color-wheel/

• http://paletton.com/

• http://www.sessions.edu/color-calculatoralishanvr@gmail.com / http://www.therightsol.com 5

CSS BACKGROUNDS – CONT.

Syntax:

To change background color:

background-color: #b0c4de;

To change background image:

background-image: url("paper.gif");

Example:

01 background-color.html

02 background-image.html

alishanvr@gmail.com / http://www.therightsol.com 6

CSS BACKGROUNDS – CONT.

Repeating Background Image:

• background-image property repeats an image both horizontally and vertically by

default.

• If you want to repeat an image just horizontally or vertically then we can do that by

using background-repeat property.

Syntax:

background-repeat: repeat-x; OR background-repeat: repeat-y;

Example:

03 background-repeat.htmlalishanvr@gmail.com / http://www.therightsol.com 7

CSS BACKGROUNDS – CONT.

Showing an image only once:

• To display a background image only once, we need to use background-repeat

property with value no-repeat.

Syntax:

background-repeat: no-repeat;

Example:

04 norepeate.html

alishanvr@gmail.com / http://www.therightsol.com 8

CSS BACKGROUNDS – CONT.

Background – Shorthand Property

Syntax:

• background: colorValue url(“imagepath.extension”) no-repeat;

Rule:

• background-color

• background-image

• background-repeatalishanvr@gmail.com / http://www.therightsol.com 9

CSS TEXT

• We can change text color with color property. As:

• color: colorName | #Hex Code | rgb(red Value , green value, blue value)

Note:

1. Define background-color whenever you defined color property.

alishanvr@gmail.com / http://www.therightsol.com 10

CSS TEXT – CONT.

Aligning the Text

We can align text with CSS property as under:

text-align: center | right | justify

Note:

• Kindly do not use justify as Justify is not supported by all browsers.

• Use in case if there is no any way to achieve the goal / requirement.

Example

05 text-align.html

alishanvr@gmail.com / http://www.therightsol.com 11

CSS TEXT – CONT.

Decorating Text:

We can decorate text by using CSS property :

text-decoration: none | overline | line-through | underline

Note:

• Do not underline text that is not a link, as this confuses users.alishanvr@gmail.com / http://www.therightsol.com 12

CSS TEXT – CONT.

Transoforming Text:

We can transform (change) text by using CSS property :

text-transform: uppercase | lowercase| capitalize

Capitalize transform first letter from each word to Capital.

Example:

06 – transform.htmlalishanvr@gmail.com / http://www.therightsol.com 13

CSS TEXT – CONT.

Text Indent:

We can specify the indentation of the first line of a text as:

text-indent: value in px i.e. 50px

Example:

07 text-indent.htmlalishanvr@gmail.com / http://www.therightsol.com 14

CSS TEXT – CONT.

Space between leters:

• letter-spacing property is used to change the space b/w letters.

Syntax:

letter-spacing: value in px

Note:

• We can also give negative value to letter-spacing property.

i.e. letter-spacing: -3px;alishanvr@gmail.com / http://www.therightsol.com 15

CSS TEXT – CONT.

Example:

08 letter-spacing.html

alishanvr@gmail.com / http://www.therightsol.com 16

CSS TEXT – CONT.

Space between lines (line height):

• Line-height property is used to change the line height b/w lines.

Syntax:

line-height: value in px | value in percentage

Example:

09 line-height.htmlalishanvr@gmail.com / http://www.therightsol.com 17

CSS TEXT – CONT.

Spce b/w words:

• word-spacing is used to change the space b/w words.

Syntax:

word-spacing: value in px

Note:

• We can also give negative value.

• Do not use percentage. Just use px.alishanvr@gmail.com / http://www.therightsol.com 18

CSS TEXT – CONT.

Example:

10 word-spacing.html

alishanvr@gmail.com / http://www.therightsol.com 19

CSS TEXT – CONT.

Text Shadow:

• text-shadow is used to add shadow to text.

Syntax:

text-shadow: h-shadow v-shadow blur-radius color ;

H-shadow x-axis value in px

V-shadow y-axis value in px

Blur-radius value in px

color name| hexcode| rgb(r,g,b)alishanvr@gmail.com / http://www.therightsol.com 20

CSS TEXT – CONT.

Example:

11 - text-shadow.html

alishanvr@gmail.com / http://www.therightsol.com 21

CSS TEXT – CONT.

Text Shadow (Animateable):

• text-shadow in CSS is animatable.

Syntax:

text-shadow: h-shadow v-shadow blur-radius color ;

H-shadow x-axis value in px

V-shadow y-axis value in px

Blur-radius value in px

color name| hexcode| rgb(r,g,b)alishanvr@gmail.com / http://www.therightsol.com 22

CSS TEXT – CONT.

Example:

12 text-shadow-animateable.html

alishanvr@gmail.com / http://www.therightsol.com 23

CSS FONT

• To change the font family of a text we use font-family property.

• We can give several font names to font-family property as “fallback system”.

• We should start with the font name that we want to use and ends with the

generic font family.

• Name should be in quotation marks, if font family is more than one word.alishanvr@gmail.com / http://www.therightsol.com 24

CSS FONT – CONT.

Syntax:

font-family: first font name, second font name

For Example:

font-family: courier, Times, “Times New Roman”alishanvr@gmail.com / http://www.therightsol.com 25

CSS FONT – CONT.

Example:

13 - font-family.html

alishanvr@gmail.com / http://www.therightsol.com 26

Good Bye

&

Allah Hafizalishanvr@gmail.com / http://www.therightsol.com 27