Working with the CSS box model

The CSS Box Model

• Creating a nice layout for your webpage requires you

to understand the CSS box model, which defines the
spacing around boxes in your HTML document.
• All HTML elements can be considered as boxes. In
CSS, the term "box model" is used when talking
about design and layout.
• The CSS box model is essentially a box that wraps
around HTML elements, and it consists of: margins,
borders, padding, and the actual content.
• The box model allows us to add a border around
elements, and to define space between elements.
CSS Box Model
 Explanation of the different parts:

• Content - The content of the box, where text

and images appear
• Padding - Clears an area around the content.
The padding is transparent
• Border - A border that goes around the
padding and content
• Margin - Clears an area outside the border.
The margin is transparent
 CSS Border

CSS Border Properties

• The CSS border properties allow you to specify
the style, size, and color of an element's
border.
 Border Style

• The border-style property specifies what kind

of border to display.
border-style values:
 Border Width

• The border-width property is used to set the

width of the border.
• The width is set in pixels, or by using one of
the three pre-defined values: thin, medium, or
thick.
For example
Output
 Border Color

• The border-color property is used to set the color

of the border. The color can be set by:
• name - specify a color name, like "red"
• RGB - specify a RGB value, like "rgb(255,0,0)"
• Hex - specify a hex value, like "#ff0000"
• You can also set the border color to "transparent".
• If the border color is not set it is inherited from
the color property of the element.
For example
Output
 Border - Individual sides

• In CSS it is possible to specify different borders for different

sides:
For example
Output
The example above can also be set with a single property:
Output
• The border-style property can have from one to
four values.
• border-style: dotted solid double dashed;
– top border is dotted
– right border is solid
– bottom border is double
– left border is dashed

• border-style: dotted solid double;

– top border is dotted
– right and left borders are solid
– bottom border is double
• border-style: dotted solid;
– top and bottom borders are dotted
– right and left borders are solid

• border-style: dotted;
– all four borders are dotted
• The border-style property is used in the
example above. However, it also works with
border-width and border-color.
 Border - Shorthand property

• As you can see from the examples above, there are many
properties to consider when dealing with borders.
• To shorten the code, it is also possible to specify all the
individual border properties in one property. This is
called a shorthand property.
• The border property is a shorthand for the following
individual border properties:
• border-width
• border-style (required)
• border-color
For example
Output
 CSS Margin

• The CSS margin properties define the space

around elements.
• The margin clears an area around an element
(outside the border). The margin does not have a
background color, and is completely transparent.
• The top, right, bottom, and left margin can be
changed independently using separate
properties. A shorthand margin property can also
be used, to change all margins at once.
Possible Values
 Margin - Individual sides

• In CSS, it is possible to specify different

margins for different sides of an element:
For Example
Output
 Margin - Shorthand property

• To shorten the code, it is possible to specify all

the margin properties in one property. This is
called a shorthand property.
• The shorthand property for all the margin
properties is "margin":
For example
Output
• The margin property can have from one to four values.
• margin: 25px 50px 75px 100px;
– top margin is 25px
– right margin is 50px
– bottom margin is 75px
– left margin is 100px

• margin: 25px 50px 75px;

– top margin is 25px
– right and left margins are 50px
– bottom margin is 75px
• margin: 25px 50px;
– top and bottom margins are 25px
– right and left margins are 50px

• margin: 25px;
– all four margins are 25px
 CSS Padding

• The CSS padding properties define the space

between the element border and the element
content.
• The padding clears an area around the content
(inside the border) of an element. The padding is
affected by the background color of the element.
• The top, right, bottom, and left padding can be
changed independently using separate properties. A
shorthand padding property can also be used, to
change all padding's at once.
Possible Values
 Padding - Individual sides

• In CSS, it is possible to specify different

padding for different sides:
For example
Output
 Padding - Shorthand property

• To shorten the code, it is possible to specify all

the padding properties in one property. This is
called a shorthand property.
• The shorthand property for all the padding
properties is "padding":
For example
Output
• The padding property can have from one to four values.
• padding: 25px 50px 75px 100px;
– top padding is 25px
– right padding is 50px
– bottom padding is 75px
– left padding is 100px

• padding: 25px 50px 75px;

– top padding is 25px
– right and left paddings are 50px
– bottom padding is 75px
• padding: 25px 50px;
– top and bottom padding's are 25px
– right and left padding's are 50px

• padding: 25px;
– all four padding's are 25px
CSS Float
 What is CSS Float?

• With CSS float, an element can be pushed to the

left or right, allowing other elements to wrap
around it.
• Float is often used with images, but it is also
useful when working with layouts.
• The float property can be used to wrap text
around images.
• The float property specifies whether or not an
element should float.
 How Elements Float

• Elements are floated horizontally, this means that an

element can only be floated left or right, not up or down.
• A floated element will move as far to the left or right as it
can. Usually this means all the way to the left or right of the
containing element.
• The elements after the floating element will flow around it.
• The elements before the floating element will not be
affected.
• If an image is floated to the right, a following text flows
around it, to the left:
For example
Output
 Floating Elements Next to Each Other

• If you place several floating elements after

each other, they will float next to each other if
there is room.
• Here we have made an image gallery using the
float property:
For example
 Turning off Float - Using Clear

• The clear property is used to control the

behavior of floating elements.
• Elements after the floating element will flow
around it. To avoid this, use the clear property.
• The clear property specifies which sides of an
element other floating elements are not
allowed.
For example
Output
 Working with CSS colors
• CSS uses color values to specify a color.
Typically, these are used to set a color either
for the foreground of an element (i.e., its text)
or for the background of the element.
• They can also be used to affect the color of
borders and other decorative effects.
• The RGB value is a six character field that
represents a two-character hexadecimal value
for the amount of red, then green, and then
blue, and is prefixed with the pound (#)
symbol.
• A value of 00 (two zeros) is the minimum
value, and ff represents the maximum value
for that color.
• This represents 0–255 in decimal.
• You can specify your color values in various formats.
Following table lists all the possible formats:
 Colors in CSS can be specified by the following
methods:
• Hexadecimal colors
• RGB colors
• RGBA colors
• HSL colors
• HSLA colors
 Hexadecimal Colors

• Hexadecimal color values are supported in all

major browsers.
• A hexadecimal color is specified with: #RRGGBB,
where the RR (red), GG (green) and BB (blue)
hexadecimal integers specify the components of
the color. All values must be between 0 and FF.
• For example, the #0000ff value is rendered as
blue, because the blue component is set to its
highest value (ff) and the others are set to 0.
For example
Output
 RGB Colors

• RGB color values are supported in all major browsers.

• An RGB color value is specified with: rgb(red, green,
blue). Each parameter (red, green, and blue) defines the
intensity of the color and can be an integer between 0
and 255 or a percentage value (from 0% to 100%).
• For example, the rgb(0,0,255) value is rendered as blue,
because the blue parameter is set to its highest value
(255) and the others are set to 0.
• Also, the following values define equal color:
rgb(0,0,255) and rgb(0%,0%,100%).
For example
Output
 RGBA Colors

• RGBA color values are supported in IE9+, Firefox

3+, Chrome, Safari, and in Opera 10+.
• RGBA color values are an extension of RGB color
values with an alpha channel - which specifies
the opacity of the object.
• An RGBA color value is specified with: rgba(red,
green, blue, alpha). The alpha parameter is a
number between 0.0 (fully transparent) and 1.0
(fully opaque).
For example
Output
 HSL Colors

• HSL color values are supported in IE9+, Firefox, Chrome,

Safari, and in Opera 10+.
• HSL stands for hue, saturation, and lightness - and
represents a cylindrical-coordinate representation of colors.
• An HSL color value is specified with: hsl(hue, saturation,
lightness).
• Hue is a degree on the color wheel (from 0 to 360) - 0 (or
360) is red, 120 is green, 240 is blue.
• Saturation is a percentage value; 0% means a shade of gray
and 100% is the full color.
• Lightness is also a percentage; 0% is black, 100% is white.
For example
Output
 HSLA Colors

• HSLA color values are supported in IE9+, Firefox

3+, Chrome, Safari, and in Opera 10+.
• HSLA color values are an extension of HSL color
values with an alpha channel - which specifies
the opacity of the object.
• An HSLA color value is specified with: hsla(hue,
saturation, lightness, alpha), where the alpha
parameter defines the opacity. The alpha
parameter is a number between 0.0 (fully
transparent) and 1.0 (fully opaque).
For example
Output