1

CSS - Part 2
Box Model 2

Every document element displayed on the web browser is written inside a

box. Every box has a size, position, color, background color, border size,
content height, content width, padding size, margin size and many more.
These information of the box is determined by the CSS.
 Box Model 3
Each box is featured into four parts;
- Margin Edge: The space outside the border is that acts as a separator
between the neighboring element contents. They have margin-width,
margin-height, and margin-size as the properties.

- Border Edge: This is space surrounding the padding edge which acts as a
border for the element content. They have properties such as border-width,
border-height and border-thickness.

- Padding Edge: The free space around the content data and it has
properties such as padding-width, padding-height and padding-thickness.

- Content Edge: where the text, videos and images are displayed. They
have properties such as height, width, background color or image.
Eg: Box Model
div 4
{
margin: 10px 10px 20px 20px; // margin top, right, bottom, left
height: 30px;
weight: 20 px;
border: 25 px;
padding: 30px 40px 50px 60 px;
background-color: yellow;
}
The four pixel values of margin and padding shows the top, right, bottom and left
spacing.
When only three values are given (margin: 10px 20px 30px;) then it refers to top, left
as well as right, and bottom spacing.
When only two values are given (margin: 10px 20px;) then the first value refers to
top as well bottom spacing and the second refers to left as well right.
When only one value is given (margin: 20px;) then all the four takes the same
The border-radius is basically used to bring out a shape for the border i.e., a
5
rounded corner or a circular corner, where the radius is half the value of the
width value. There are four combinations of the border-radius;
{
border-top-left-radius: 10px;
border-top-right-radius: 15px;
border-bottom-left-radius: 10px;
border-bottom-right-radius; 15px;
}
We also can assign a style for the border by selecting it to be dotted, solid,
double, dashed, groove, ridge, inset , outset, none and hidden.

Note: We need to understand that the height and width set for the element
represents only the height and width of the content and not of the box
elements. The complete height or width of the element will be the summation of
the heights of all the four box model component.
height = content height + border height + padding height + margin height
dotted - gives a dotted border 6

dashed - gives a dashed border

solid - gives a solid border
double - gives a double border
groove - gives a 3D grooved effect which depends on the border-color
ridge - gives a 3D ridged border which depends on the border-color
inset - gives a 3D inset border which depends on the border-color
outset - gives a 3D outset border which depends on the border-color
none - shows no border
hidden - shows a hidden border

The border-style property can be one or different four values (each referring
the border for the top border, right border, bottom border, and the left
border).
 Backgrounds 7

CSS background is used to represent the elements background effects like

color, image, gradient, size, repetition and position. There are various
properties of background namely;
- background-color
- background-gradient // new type added in CSS3
- background-image (single/multiple)
- background-attachment
- background-size
- background-repeat (repeat-x, repeat-y, no-repeat)
- background-attachment (fixed, scroll)
- background-position(left top, left center, left bottom, right top, right center,
right bottom, center top, center center, center bottom)
Background color: Here the color can be given as a text, hexadecimal, rgb value, or
8
HSL
div
{ background-color: yellow;
background-color: #000f;
background-color: rgb(20,20,20);
background-color: hsl(170, 40%,60%);
}
HSL stands for Hue (ranging between 0-360), Saturation and Lightness (ranging
between 0-100%)

Background gradient: There are two categories of gradients, linear gradient and
radial gradient. They have the direction, and colors to be used for gradient as
parameter.
The directions can have the values as to top, to bottom, to right, to left, to diagonal,
angle etc.,
Eg:
9
{
background: linear-gradient(to right, yellow, blue, red);
background: radiant-gradient(yellow 3%, blue 10%, red 12%);
background: radiant-gradient(ellipse, yellow, blue, red);
background: radiant-gradient(closest-side at 40% 60%, yellow, blue, red);

The gradient size can be any of the four categories;

- father-side
- closest-side
- closest-corner
- farthest-corner
 10

div
{
background: url(image.jpg);
background-size: 150px 100px;
background-repeat: no-repeat;
background-image: url(image1.jpg), url(image2.jpg), url(image3.jpg);
background-position: right top/ left top/ left bottom…;
background-repeat: repeat / norepeat / repeat-y / repeat-x;
background-attachment: fixed / scroll / local / initial / inherit;
}

repeat can be done vertically or horizontally which is denoted by repeat-x

and repeat-y.
 11

Text effects
Text Color

 The color property is used to set the color of the text.

 With CSS, a color is most often specified by:
 a color name - like "red"
 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"
 12
Text Alignment

 The text-align property is used to set the horizontal

alignment of a text.
 A text can be left or right aligned, centered, or
justified.
 Refer csstwelve.htm
 13
Text Decoration

 The text-decoration property is used to set or

remove decorations from text.
 14
Text Transformation

 The text-transform property is used to specify

uppercase and lowercase letters in a text.
 15
Text Indentation

 The text-indent property is used to specify the indentation of the first

line of a text:
p{
text-indent: 30px;
}
 16
Letter Spacing

 The letter-spacing property is used to specify the space between the

characters in a text.

h1 {
letter-spacing: 2px;
}

h2 {
letter-spacing: -2px;
}
 17
Line Height

 The line-height property is used to specify the space between lines

 18
Text Direction

 The direction property is used to change the text direction of an

element
 19
Word Spacing

 The word-spacing property is used to specify the space between the

words in a text.

h1 {
word-spacing: 20px;
}

h2 {
word-spacing: -2px;
}