21. Creating Boxes and columns using CSS

Working with padding
padding(space) in the box model specifies the distance between the border of an element and the content within it.
the padding is affected by the background color of an element.
<!DOCTYPE HTML>
<HEAD>
<STYLE type="text/CSS">
p
{
background-color:red;
}
p.padding
{
padding-top:50px;
padding-bottom:50px;
padding-right:25px;
padding-left:25px;
}
</STYLE>
</HEAD>

<BODY>

<P class="padding">padding with top and bottom are 50px, right and left are 25px </P>
</BODY>

</HTML>

the padding properties

1.padding-top,

2.padding-bottom,

3.padding-right,

4.padding-left

Using the padding-top property

the padding-top property specifies the top padding of an element.

the padding properties defines the space between the border and content.

padding-top=value;

<!DOCTYPE HTML>

<HEAD>

{

border: double #FF0000;

}

</STYLE>

function changePadding()

{

document.getElementById("p1").style.paddingTop="5cm";

}

</SCRIPT>

</HEAD>

<BODY>

<P id="p1">This is a paragraph with top padding 5</P>

<INPUT type="button" onclick="changePadding()"

value="top padding" />

</BODY>

</HTML>

Using the padding-right property

padding right property sets the padding(space) to the right of an element

padding-right=value;

<!DOCTYPE HTML>

<HEAD>

{

border: double #FF0000;

}

</STYLE>

function rightPadding()

{

document.getElementById("p1").style.paddingRight="20cm";

}

</SCRIPT>

</HEAD>

<BODY>

<P id="p1">padding padding padding padding padding</P>

</BODY>

</HTML>

Using the padding-left property

the padding-left property sets the padding(space) to the left of an element

<!DOCTYPE HTML>

<HEAD>

p.padding {padding-left: 4cm;}

p.padding2 {padding-left: 25%;}

</STYLE>

</HEAD>

<BODY>

<P class="padding">This is a paragraph with padding 2cm</P>

<P class="padding2">This is a paragraph with padding 25 %</P>

</BODY>

</HTML>

Using the padding-bottom property

the padding-bottom property sets the padding(space) to the bottom of an element

negative values also allowed in this property

padding-bottom=value;

<!DOCTYPE HTML>

<HEAD>

p.padding {padding-bottom:2cm;}

p.padding2 {padding-bottom:25%;}

</STYLE>

</HEAD>

<BODY>

<P class="padding">This is a paragraph with padding 2cm</P>

<P class="padding2">This is a paragraph with padding 25%</P>

</BODY>

</HTML>

Using the shorthand padding property

the padding property is a shorthand to set all the other properties related to padding.

such as padding-top, padding-bottom, padding-left, padding-right.

padding:2cm 3cm 4cm 5cm

<!DOCTYPE HTML>

<HEAD>

p.p1 {padding:1cm;}

p.p2 {padding:1cm 2cm;}

</STYLE>

</HEAD>

<BODY>

<P class="p1">This is a paragraph with equal padding on each side.</P>

<P class="p2">This is a paragraph with top and bottom padding of 1cm and a left and right padding of 2cm.</P>

</BODY>

</HTML>

Working with border properties

<!DOCTYPE HTML>

<HEAD>

<TITLE>Border demo</TITLE>

</HEAD>

<BODY>

This is demo text

</P>

This is demo text

</P>

This is demo text

</P>

This is demo text

</P>

</BODY>

</HTML>

bordercolor

<!DOCTYPE HTML>

<HEAD>

p.border1

{

border:groove #437845;

}

p.border2

{

border-style:ridge;

border-color: red black ;

}

p.border3

{

border-style:double;

border-width:4;

border-color:#123456 blue #894532;

}

p.border4

{

border-style:double;

border-width:4;

border-color:yellow green black rgb(250,0,255);

}

</STYLE>

</HEAD>

<BODY>

<P class="border1">This is a border with one color value</P>

<P class="border2">This is a border with two color values</P>

<P class="border3">This is a border with three color values</P>

<P class="border4">This is a border with four color values</P>

</BODY>

</HTML>

Working with margin

margin defines the area around the border.

<!DOCTYPE HTML>

<HEAD>

{

background-color: red;

}

p.margin

{

margin:200px 250px;

}

</STYLE>

</HEAD>

<BODY>

<P class="margin">This is a margin with top and bottom have 200 px and right and left have 250px</P>

</BODY>

</HTML>

the different margin properties associated wit the margin are divided into the following types

margin-top

margin-right

margin-bottom

margin-left

Using the margin-top property

the margin-top property sets the top margin of an element.

negative values are also allowed in this property

margin-top : value;

margin-top property values are

Auto:defines the top margin

Length: defines fixed top margin in px, pt, and cm.

the defult value for his property is 0px

% :defines the top margin in percentage

Inherit: defines the margin top should be inherited from the parent element

<!DOCTYPE HTML>

This is a margin with 5cm from the top

</P>

</BODY>

</HTML>

Margin-right property

the margin-right property sets the right margin of an element

negative values are also allowed in this property

margin-right:value;

Auto:defines right margin;

Length:defines fixed right margin in px, pt, and cm.

the default values of this property is 0px

% : Defines the right margin in percentage;

Inherit: defines that margin-right should be inherits from the parent element

<!DOCTYPE HTML>

This is a margin with 10cm from the right

</P>

</BODY>

</HTML>

Using margin-bottom property

margin-bottom property sets the bottom margin of an element.

negative values are also allowed

margin-bottom:value;

Auto:defines bottom margin;

Length:defines fixed bottom margin in px, pt, and cm.

the default values of this property is 0px

% : Defines the bottom margin in percentage;

Inherit: defines that margin-bottom should be inherits from the parent element

<!DOCTYPE HTML>

This is a margin with 10cm from the bottom

</P>

</BODY>

</HTML>

Using margin-left property

the margin-left property sets the left margin of an element.

negative values are also allowed in this property

margin-left:value;

Auto:defines left margin;

Length:defines fixed left margin in px, pt, and cm.

the default values of this property is 0px

% : Defines the left margin in percentage;

Inherit: defines that margin-left should be inherits from the parent element

<!DOCTYPE HTML>

This is a margin with 5cm from the left

</P>

</BODY>

</HTML>

Using shorthand margin property

the shorthand property of margin contains all the margin properties in one declaration

<!DOCTYPE HTML>

This is a paragraph with four specified margin values

</P>

</BODY>

</HTML>

Working with Rounded corners

CSS 3 introduces a new property, border-radius, to create rounded corners of a border

border-top-left-radius

border-top-right-radius

border-bottom-left-radius

border-bottom-right-radius

<!DOCTYPE HTML>

This is demo text

</P>

This is demo text

</P>

This is demo text

</P>

This is demo text

</P>

</BODY>

</HTML>

Creating border with images and shadows

<!DOCTYPE HTML>

<BODY>

Heading 1

</H1><BR/><BR/><BR/>

Heading 1

</H1><BR/><BR/><BR/>

Heading 1

</H1>

</BODY>

</HTML>

border image

<!DOCTYPE HTML>

<BODY>

<P style="-webkit-border-image: url(2.png) 27 round stretch;border: 1em">demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text

</P>

</BODY>

</HTML>

Working with columns

the content of an element is shown in the entire context box of the element

CSS 3 introduces the multi-column layout to insert a new type of container between the context and the content

this new container is called as column box or just a column.

Using the column-width and column-count properties

the column-width property describes the width of column in multicol elements,

the column-count property describes the number of columns of the element

<!DOCTYPE HTML>

<BODY">

</P>

</BODY>

</HTML>

Using column-gap and column-rule properties

the column-gap and column-rule properties are used to insert gaps and lines between the columns of a multicol element.

note that the length of the column gaps and column rules must be equal to the length of the columns.

<!DOCTYPE HTML>

<BODY">

</P>

</BODY>

</HTML>

Using the column-span and column-fill properties

the column-span property is used to span the content of an element over multiple columns,

while the column-fill property is used to equally balance the content of an element in all the specified columns

<!DOCTYPE HTML>

<HEAD>

<TITLE>Column demo</TITLE>

h1 { -webkit-column-span: all ; background: silver }

body {

background:purple;

border: lime 10px solid;

-webkit-column-count: 3;

-webkit-column-rule: 10px solid cyan;

-webkit-column-fill: balanced;

}

</STYLE>

</HEAD>

<BODY>

demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text

demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text <H1>This heading for all columns</H1>demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text

</BODY>

</HTML>

Inserting column and page breaks

<!DOCTYPE HTML>

#wrapper{

width: 30em;

height: 20em;

border: 3px double magenta;

margin: 80px auto;

-webkit-column-count:5;

-webkit-column-rule: solid

}

.box{

width: 100px;

height: 100px;

background: lime;

margin: 3px;

-webkit-column-break-before : always;

}

</STYLE>

<BODY>

</DIV>

</BODY>

</HTML>

pagebreaks

<!DOCTYPE HTML>

body{border: 10px blue solid;}

p { -webkit-column-count: 4;-webkit-column-rule: 10px red solid;-webkit-break-after: page}

H1 {-webkit-break-before: page;-webkit-break-after: page }

</STYLE>

<BODY>

demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text<P>paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraphparagraph paragraph </P><P>paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraphparagraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph </P><H1>This is heading 1 content</H1>demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text demo text <P>paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph paragraph</P>

</BODY>

</HTML>

Creating Floated Boxes(float property)

<!DOCTYPE HTML>

<HEAD>

<TITLE>Float example</TITLE>

IMG { float: left; border: solid lime; }

P{ margin: 2em;border: solid red; }

</STYLE>

</HEAD>

<BODY>

</BODY>

</HTML>

Setting Box Dimensions

The min-width,

max-width,

min-height,

and max-height properties are used to set the dimensions of a box

<!DOCTYPE HTML>

<HEAD>

p { min-width: 10px; min-height: 10px; max-width: 20em; max-height: 20em;border: 1em #888 inset; }

</STYLE>

</HEAD>

<BODY>

<P>

</P>

</BODY>

</HTML>

Pages

21. Creating Boxes and columns using CSS

No comments:

My Favorite Books

Books

HTML Programs

HTML Basic

JavaScript