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;
}
