LECTURE 3

CSS BOX MODEL

The CSS Box Model
The 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 OUTLINE
CSS Outline

 An outline is a line that is drawn around elements, OUTSIDE the

borders, to make the element "stand out".
CSS Outline

 CSS has the following outline properties:

 outline-style
 outline-color
 outline-width
Note: Outline differs from borders! Unlike border, the outline is drawn
outside the element's border, and may overlap other content. Also, the
outline is NOT a part of the element's dimensions; the element's total
width and height is not affected by the width of the outline.
CSS TEXT FORMATTING
CSS TEXT

Text Color
 The color property is used to set the color of the text. The color is
specified by:
 a color name - like "red"
 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"

h1 {
color: green;
}
CSS TEXT

Background Color
 The background-color property is used to set the color of the text. The
color is specified by:
 a color name - like "red"
 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)“

h1 {
background-color: black;
color: white;
}
CSS TEXT

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.\
h1 {
text-align: center;
}
h2 {
text-align: left;
} h3 {
text-align: right;
}
CSS TEXT

Text Alignment
 When the text-align property is set to "justify", each line is stretched so
that every line has equal width, and the left and right margins are
straight (like in magazines and newspapers):

div {
text-align: justify;
}
CSS TEXT

Text Decoration
 The text-decoration property is used to set or remove decorations from
text.
 The value text-decoration: none; is often used to remove underlines
from links:
a{
text-decoration: none;
}
 The other text-decoration values are used to decorate text:
 text-decoration: overline;
 text-decoration: line-through;
 text-decoration: underline;
CSS TEXT

Text Transformation
 The text-transform property is used to specify uppercase and lowercase
letters in a text.
 It can be used to turn everything into uppercase or lowercase letters,
or capitalize the first letter of each word:
 text-transform: uppercase;
 text-transform: lowercase;
 text-transform: capitalize;
CSS TEXT

Text Indentation
 The text-indent property is used to specify the indentation of the first
line of a text:
p{
text-indent: 50px;
}

Letter Spacing
 The letter-spacing property is used to specify the space between the
characters in a text.
h1 {
letter-spacing: 3px;
}
CSS TEXT

Line Height
 The line-height property is used to specify the space between lines:
p{
line-height: 0.8;
}

Word Spacing
 The word-spacing property is used to specify the space between the
words in a text.
h1 {
word-spacing: 10px;
}
CSS TEXT

Text Shadow
 The text-shadow property adds shadow to text.
 In its simplest use, you only specify the horizontal shadow (2px) and
the vertical shadow (2px):
h1 {
text-shadow: 2px 2px;
}
 Next, add a color (red) to the shadow:
h1 {
text-shadow: 2px 2px red;
}
 Then, add a blur effect (5px) to the shadow:
CSS TEXT

h1 {
text-shadow: 2px 2px 5px red;
}
CSS FONTS
CSS FONTS

 The CSS font properties define the font family, boldness, size, and the
style of a text.

Font Family
 The font family of a text is set with the font-family property.
 font-family: "Times New Roman", Times, serif;
 font-family: Arial, Helvetica, sans-serif;
 font-family: "Lucida Console", Courier, monospace;

Font Style
 The font-style property is mostly used to specify italic text.
CSS FONTS

 This property has three values

 normal - The text is shown normally
 italic - The text is shown in italics
 oblique - The text is "leaning" (oblique is very similar to italic, but less
supported)
 font-style: normal;
 font-style: italic;
 font-style: oblique;

Font Weight
 The font-weight property specifies the weight of a font:
CSS FONTS

 font-weight: normal;
 font-weight: bold;

Font Size
 The font-size property sets the size of the text.
 Being able to manage the text size is important in web design.
However, you should not use font size adjustments to make paragraphs
look like headings, or headings look like paragraphs.
 Always use the proper HTML tags, like <h1> - <h6> for headings and
<p> for paragraphs.
Note: If you do not specify a font size, the default size for normal text,
like paragraphs, is 16px (16px=1em).
CSS FONTS

Set Font Size With Em

 To allow users to resize the text (in the browser menu), many
developers use em instead of pixels.
 1em is equal to the current font size. The default text size in browsers
is 16px. So, the default size of 1em is 16px.
 The size can be calculated from pixels to em using this
formula: pixels/16=em
 font-size: 2.5em; /* 40px/16=2.5em */
 font-size: 1.875em; /* 30px/16=1.875em */
 font-size: 0.875em; /* 14px/16=0.875em */
CSS DISPLAY PROPERTY
DISPLAY PROPERTY

 The display property is the most important CSS property for controlling
layout.

The Display Property

 The display property specifies if/how an element is displayed.
 Every HTML element has a default display value depending on what
type of element it is. The default display value for most elements is
block or inline

Block-level Elements
 A block-level element always starts on a new line and takes up the
full width available (stretches out to the left and right as far as it
can).
DISPLAY PROPERTY

 Examples of block-level elements:

• <div>
• <h1> - <h6>
• <p>
• <form>
• <header>
• <footer>
• <section>
DISPLAY PROPERTY

Inline Elements
 An inline element does not start on a new line and only takes up as
much width as necessary.
 Examples of inline elements:
• <span>
• <a>
• <img>
DISPLAY PROPERTY

Display: none;
 display: none; is commonly used with JavaScript to hide and show
elements without deleting and recreating them. Take a look at our last
example on this page if you want to know how this can be achieved.

Override The Default Display Value

 As mentioned, every element has a default display value. However, you
can override this
 Changing an inline element to a block element, or vice versa, can be
useful for making the page look a specific way, and still follow the web
standards.
 A common example is making inline <li> elements for horizontal
menus:
DISPLAY PROPERTY

li {
display: inline;
}
 The following example displays <span> elements as block elements:
span {
display: block;
}
 The following example displays <span> elements as block elements:
a{
display: block;
}