CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

Box model

  • Borders & Outline
  • Margin & Padding
  • Height and width


CSS Borders:

Property

Description

border

Sets all the border properties in one declaration

border-width

Sets the width of the four borders

border-color

Sets the color of the four borders

border-style

Sets the style of the four borders. (Values are listed below)

border-left

Sets all the left border properties in one declaration

border-top

Sets all the top border properties in one declaration

border-right

Sets all the right border properties in one declaration

border-bottom

Sets all the bottom border properties in one declaration

border-bottom-color

Sets the color of the bottom border

border-bottom-style

Sets the style of the bottom border

border-bottom-width

Sets the width of the bottom border

border-left-color

Sets the color of the left border

The border-style Property:

groove: Border looks as though it is carved into the page.
ridge: Border looks the opposite of groove.
inset: Border makes the box look like it is embedded in the page.
outset: Border makes the box look like it is coming out of the canvas

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

Border Outline:
An outline is a line that is drawn around elements (outside the borders) to make the

  • element “stand out”.
  • outline-color
  • outline-style: Same values as border-style
  • outline-width
  • outline: <color> <style> <width>

CSS Margins:
The margin property defines the space around an HTML element. It is possible to use negative values to overlap content.

Property

Description

margin

A shorthand property for setting the margin properties in one

margin-bottom

Sets the bottom margin of an element

margin-left

Sets the left margin of an element

margin-right

Sets the right margin of an element

margin-right

Sets the right margin of an element

margin-top

Sets the top margin of an element

Examples:

<p style=”margin: 15px; border:1px solid black;”>All four margins will be 15px </p>
<p style=”margin:10px 2%; border:1px solid black;”>Top and bottom margin will be 10px, left and right margin will be 2% of the total width of the document. </p>
<p style=”margin: 10px 2% -10px; border:1px solid black;”> Top margin will be 10px, left and right margin will be 2% of the total width of the document, bottom margin will be -10px </p>
<p style=”margin: 10px 2% -10px auto; border:1px solid black;”>Top margin will be 10px, right margin will be 2% of the total width of the document, bottom margin will be -10px, left margin will be set by the browser </p>

CSS Padding:

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.

Property

Description

padding-bottom

Sets the bottom padding of an element

padding-left

Sets the left padding of an element

padding-right

Sets the right padding of an element

padding-top

Sets the top padding of an element

Examples: <p style=”padding: 15px; border:1px solid black;”>All four padding will be 15px </p>
<p style=”padding:10px 2%; border:1px solid black;”> Top and bottom padding will be 10px, left and right padding will be 2% of the total width of the document. </p>
<p style=”padding: 10px 2% 10px; border:1px solid black;”> Top padding will be 10px, left and right padding will be 2% of the total width of the document, bottom padding will be 10px </p>
<p style=”padding: 10px 2% 10px 10px; border:1px solid black;”>Top padding will be 10px, right padding will be 2% of the total width of the document, bottom padding and top padding will be 10px </p>

CSS Dimensions:

The CSS dimension properties allow you to control the height and width of an element.
 The height property is used to set the height of a box.
 The width property is used to set the width of a box.
 The line-height property is used to set the height of a line of text.
 The max-height property is used to set a maximum height that a box can be.
 The min-height property is used to set the minimum height that a box can be.
 The max-width property is used to set the maximum width that a box can be.
 The min-width property is used to set the minimum width that a box can be.

Learn CSS Lists

 Lists are very helpful in conveying a set of either numbered or bulleted points

Property

Description

list-style-type

Specifies the type of list-item marker

(decimal | decimal-leading-zero | lower-alpha | upper-alpha | lower-roman| upper-roman)

list-style-position

Specifies if the list-item markers should appear inside or outside the content flow .

Inside: If the text goes onto a second line, the text will wrap underneath the marker. It will also appear indented to where the text would have started if the list had a value of outside.

Outside: If the text goes onto a second line, the text will be aligned with the start of the first line (to the right of the bullet).

list-style-image

Specifies an image as the list-item marker>

list-style-image: url(/images/demo.gif)

list-style

List-Style

Sets all the properties for a list in one declaration.

style=”list-style: inside square;”

 Example:

<ul style=”list-style-type:circle; list-style-position:outside;”> <li>Maths</li>
<li>Social Science</li>
<li>Physics</li> </ul>
<ul style=”list-style-type:square;list-style-position:inside;”>
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li> </ul>
<ol style=”list-style-type:decimal;list-style-position:outside;”> <li>Maths</li> <li>Social Science</li> <li>Physics</li> </ol>
<ol style=”list-style-type:lower-alpha;list-style-position:inside;”> <li>Maths</li>
<li>Social Science</li> <li>Physics</li> </ol>

Learn CSS Font and Text Style

The font-style property specifies the font style for a text.
The Video contains instructions on how to change a font and its color on a web page.

Text and Font Properties Property

Description

color

Sets the color of text

background-color

Sets the background color of text

text-decoration

Specifies the decoration added to text

(none / overline / underline / line-through)

text-align

Specifies the horizontal alignment of text (left / right / center / justify)

vertical-align

Sets the vertical alignment of an element (baseline|length|sub|super|top|text-top|middle|bottom|text-bottom)

text-indent

Specifies the indentation of the first line in a text-block

text-transform

Controls the capitalization of text (none | uppercase | lowercase | capitalize)

direction

Specifies the text direction/writing direction (ltr/rtl)

white-space

Specifies how white-space inside an element is handled

(normal|nowrap|pre|pre-line|pre-wrap)

letter-spacing

Increases or decreases the space between characters in a text

word-spacing

Increases or decreases the space between words in a text

line-height

Sets the line height (gap between two lines). Set value in percentage

font-family

Specifies the font family for text

font-size

Specifies the font size of text

font-style

Specifies the font style for text

(normal|italic|oblique)

font-variant

Specifies whether or not a text should be displayed in a small-caps font (normal/small-caps)

font-weight

Specifies the weight of a font. To display it as bold

(normal | bold | bolder | lighter | 100…900 (400 is normal and 700 is bold)

font

Sets all the font properties in one declaration

font: font-style font-variant font-weight font-size