web engineering - basic css properties

1

Web EngineeringLecture 06

Basic CSS PropertiesUniversity of Lahore

Nosheen Qamar

CSS background Properties• You can set background of various HTML

elements:

The background-color property is used to set the background color of an element.

The background-image property is used to set the background image of an element.

The background-repeat property is used to control the repetition of an image in the background.

The background-position property is used to control the position of an image in the background.

The background-attachment property is used to control the scrolling of an image in the background.

3

background-color• <p style=“background-color: yellow;” >

This text has a yellow background. </p>

• Output:

• Possible values:

any color in a valid format.

4

background-image• <table style=“background-image:url(images/css.gif);” >

<tr><td>

this table has background image which repeats multiple times.

</td></tr>

</table>

• Output:


any image with valid format

5

background-repeat• <table style=“background-image: url(images/cat.gif);

background-repeat: no-repeat; ” >

<tr><td>

by default background-repeat property have repeat value.

</td></tr>

</table>

• Output:


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

6

background-size• <table style=“background-image: url(images/cat.gif);

background-repeat: no-repeat;

background-size: 200px 200px; ” >

<tr><td>

background-size property is used to expand the background image.

</td></tr>

</table>

• Output:


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

7

background-position• <table style=“background-image: url(images/css.gif);

background-position: 100px 200px; ” >

<tr><td>

this table has background image positioned 100 pixels away from the left and 200 pixels from the top.

</td></tr>

</table>

• Output:


X% Y%, top left, Xpx Ypx

left

top

center

top

left

bottom

center

bottom

right

bottom

8

background-attachment• <p style=“background-image:url(images/css.gif);

background-attachment: fixed; ” >

This paragraph has fixed background image.

</p>

• Output:


fixed, scroll

CSS Borders• You can set following border properties of

an element:

The border-color property is used to set the

color of the border.

The border-style property is used to set the

style of border.

The border-width property is used to set .

The border property is used to set the width,

style and color of the border in one declaration.

border-style• <p style=“border-style: none”>

This is a border with none width.</p>

<p style=“border-style: solid”>

This is a solid border.</p>

<p style=“border-style: dashed”>

This is a dashed border.</p>

• Output:

• Possible values:none, solid, dashed, double, groove, ridge, inset, outset

border-color• <style>

p.example1 {

border-style: solid;

border-bottom-color: #009900;

border-top-color: #FF0000;

border-left-color: #330000;

border-right-color: #0000CC;

}

</style>

<p class=“example1”>

This example is showing all borders in different colors.

</p>

• Output:

• Possible values:any color with valid format

border-color• <style>

p.example1 {


border-color: #FF0000;

}

</style>


This example is showing all borders in same color.

</p>

• Output:


border-width• <p style=“border-width: 4px; border-style:

solid;”>

This is a solid border whose width is

4px.</p>

• Output:


length in px, pt or cm or it should be thin, medium or thick.

• You can individually change the width of the bottom, top, left and right borders of an element. Using the following properties:

border-bottom-width changes the width of bottom border.

border-top-width changes the width of top border.

border-left-width changes the width of left border.

border-right-width changes the width of right border.

14

border-width• <style>

p.example1 {


border-bottom-width: 6pt;

border-top-width: 6pt;

border-left-width: 4pt;

border-right-width: 4pt;

}

</style>


This example is showing all borders in different widths.

</p>

• Output:


This example is showing all borders in different widths.

border• <p style=“border: 4px solid red;”>

This example is showing shorthand

property for border.</p>

• Output:

CSS Margins• You can set following margin properties of

an element:

The margin-bottom property specify the bottom margin of an element.

The margin-top property specify the top margin of an element.

The margin-left property specify the left margin of an element.

The margin-right property specify the right margin of an element.

The margin shorthand property for setting margin properties in one declaration.

margin• <div style=“margin: 20px;”>

This is a paragraph with a specified margin

from all sides.</div>

• Output:


auto, length in px, %.

margin-top• <div style=“margin-top: 10px;”>

This is a paragraph with a specified top

margin.</div>

• Output:



margin-bottom• <div style=“margin-bottom: 10px;”>

This is a paragraph with a specified bottom

margin.</div>

• Output:



margin-left• <div style=“margin-left: 10%;”>

This is a paragraph with a specified left

margin.</div>

• Output:



margin-right• <div style=“margin-right: 10%;”>

This is a paragraph with a specified right

margin.</div>

• Output:



23

Margin property• <style>

p {margin: 15px; }

all four margins will be 15px

p {margin: 10px 5px; }

top and bottom margin will be 10px, left and right

will be 2% of the total width of doc.

p {margin: 10px 8px 20px 15px; }

top margin will be 10px, right margin will be 2%, bottom

margin will be -10px, left margin will be set by the browser

</style>

CSS Padding• Padding property allows you to specify how

much space should appear between the content of an element and its border :

The padding-bottom property specify the bottom padding of an element.

The padding-top property specify the top padding of an element.

The padding-left property specify the left padding of an element.

The padding-right property specify the right padding of an element.

The padding shorthand property serves as the preceding properties.

padding-bottom• <p style=“padding-bottom: 15px; border-

width: 1px solid black;”>

This is a paragraph with a specified bottom padding.</p>

• Output:

This is a paragraph with a specified bottom padding.

• Possible values:length in px, %.

padding-top• <p style=“padding-top: 15px; border-width:

1px solid black;”>

This is a paragraph with a specified top padding.</p>

• Output:

This is a paragraph with a specified top padding.


padding-left• <p style=“padding-left: 15px; border-width: 1px

solid black;”>

This is a paragraph with a specified left padding.</p>

• Output:



padding-right• <p style=“padding-right: 15px; border-width:

1px solid black;”>

This is a paragraph with a specified right padding.</p>

• Output:



padding• <p style=“padding: 15px; border-width: 1px

solid black;”>

This is a paragraph with a specified right padding.</p>

• Output:

This is a paragraph with a specifiedtop padding.


Padding and Margin Properties• Values for both the padding and the margin

properties can be expressed using:

• em (em values)

• px (pixels)

• mm (millimeters)

• cm (centimeters)

• in (inches)

• % (percentage of the container element)

web engineering - basic css properties

Education