CSS tutorial chapter 2

Text Shadow
• The text-shadow property adds shadow to
text.
• The following example specifies the position
of the horizontal shadow (3px), the position of
the vertical shadow (2px) and the color of the
shadow (red):

List-style
• Background-fix-position:::
• Check example::

CSS Font
CSS Font Families
In CSS, there are two types of font family names:
generic family - a group of font families with a
similar look (like "Serif" or "Monospace")
font family - a specific font family (like "Times
New Roman" or "Arial")
Note: On computer screens, sans-serif fonts are
considered easier to read than serif fonts.

Font Family
• The font family of a text is set with the font-family property.
• The font-family property should hold several font names as
a "fallback" system. If the browser does not support the
first font, it tries the next font, and so on.
• Start with the font you want, and end with a generic family,
to let the browser pick a similar font in the generic family, if
no other fonts are available.
• Note: If the name of a font family is more than one word, it
must be in quotation marks, like: "Times New Roman".
• More than one font family is specified in a comma-
separated list:

Font Style
• The font-style property is mostly used to
specify italic text.
• 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 size
• The font-size property sets the size of the text.
Set Font Size With Pixels
• Setting the text size with pixels gives you full
control over the text size:

Set Font Size With Em
• To allow users to resize the text (in the
browser menu), many developers use em
instead of pixels.
• The em size unit is recommended by the W3C.
• 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

Example
• Check the example, the text size in em is the
same as the previous example in pixels.
However, with the em size, it is possible to
adjust the text size in all browsers.
• Unfortunately, there is still a problem with
older versions of IE. The text becomes larger
than it should when made larger, and smaller
than it should when made smaller.

Font Weight
• The font-weight property specifies the weight
of a font:

Font Variant
• The font-variant property specifies whether or
not a text should be displayed in a small-caps
font.
• In a small-caps font, all lowercase letters are
converted to uppercase letters. However, the
converted uppercase letters appears in a
smaller font size than the original uppercase
letters in the text.

CSS Links
• links can be styled differently depending on
what state they are in.
• The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

Links
• When setting the style for several link states,
there are some order rules:
• a:hover MUST come after a:link and a:visited
• a:active MUST come after a:hover

Text Decoration
The text-decoration property is mostly used to
remove underlines from links:

Link Background Color
The background-color property can be used to
specify a background color for links:
Check the example ---

CSS Borders
Border Style
• The border-style property specifies what kind of border to display.
The following values are allowed:
• dotted - Defines a dotted border
• dashed - Defines a dashed border
• solid - Defines a solid border
• double - Defines a double border
• groove - Defines a 3D grooved border. The effect depends on the border-
color value
• ridge - Defines a 3D ridged border. The effect depends on the border-color
value
• inset - Defines a 3D inset border. The effect depends on the border-color
value
• outset - Defines a 3D outset border. The effect depends on the border-
color value
• none - Defines no border
• hidden - Defines a hidden border
• The border-style property can have from one to four values (for the top
border, right border, bottom border, and the left border)

Border Width
• The border-width property specifies the width
of the four borders.
• The width can be set as a specific size (in px,
pt, cm, em, etc) or by using one of the three
pre-defined values: thin, medium, or thick.
• The border-width property can have from one
to four values (for the top border, right border,
bottom border, and the left border).

Border Color
• The border-color property can have from one
to four values (for the top border, right border,
bottom border, and the left border).
• EXAMPLE …..

Border - Individual Sides
• In CSS, there is also properties for specifying
each of the borders (top, right, bottom, and
left):

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.
• The border property is a shorthand property for the
following individual border properties:
• border-width
• border-style (required)
• border-color

Border *
• Left Border
• Right Border
• Top border
• Bottom border
• Rounded Borders
The border-radius property is used to add
rounded borders to an element:
Note: The border-radius property is not supported
in IE8 and earlier versions.

CSS Margins
• The CSS margin properties are used to
generate space around elements.
• The margin properties set the size of the white
space outside the border.
• With CSS, you have full control over the
margins. There are CSS properties for setting
the margin for each side of an element (top,
right, bottom, and left).

Margin - Individual Sides
• CSS has properties for specifying the margin for each side of an element:
margin-top
margin-right
margin-bottom
margin-left
All the margin properties can have the following values:
• auto - the browser calculates the margin
• length - specifies a margin in px, pt, cm, etc.
• % - specifies a margin in % of the width of the containing element
• inherit - specifies that the margin should be inherited from the parent
element
Tip: Negative values are allowed.
• The following example sets different margins for all four sides of a <p>
element:

Margin - Shorthand Property
• To shorten the code, it is possible to specify all
the margin properties in one property.
• The margin property is a shorthand property
for the following individual margin properties:
• margin-top
• margin-right
• margin-bottom
• margin-left

The margin property has four values:
• margin: 25px 50px 75px;
– top margin is 25px
– right and left margins are 50px
– bottom margin is 75px
• margin: 25px 50px 75px 100px;
• margin: 25px 50px;
• margin: 25px;

The auto Value
• You can set the margin property to auto to
horizontally center the element within its
container.
• The element will then take up the specified
width, and the remaining space will be split
equally between the left and right margins:
• Check example:

The inherit Value
• This example lets the left margin be inherited
from the parent element:

Margin Collapse
• Top and bottom margins of elements are
sometimes collapsed into a single margin that
is equal to the largest of the two margins.
• This does not happen on left and right
margins! Only top and bottom margins!
• Look at the following example:--------

CSS Padding
• The CSS padding properties are used to
generate space around content.
• The padding clears an area around the
content (inside the border) of an element.
• With CSS, you have full control over the
padding. There are CSS properties for setting
the padding for each side of an element (top,
right, bottom, and left).

Padding - Individual Sides
• CSS has properties for specifying the padding for each side
of an element:
• padding-top
• padding-right
• padding-bottom
• padding-left
• All the padding properties can have the following values:
• length - specifies a padding in px, pt, cm, etc.
• % - specifies a padding in % of the width of the containing
element
• inherit - specifies that the padding should be inherited from
the parent element

Padding - Shorthand Property
• To shorten the code, it is possible to specify all
the padding properties in one property.
• The padding property is a shorthand property for
the following individual padding properties:
• padding-top
• padding-right
• padding-bottom
• padding-left

CSS Height and Width
• Setting height and width
• The height and width properties are used to
set the height and width of an element.
• The height and width can be set to auto (this
is default. Means that the browser calculates
the height and width), or be specified in
length values, like px, cm, etc., or in percent
(%) of the containing block.

Height-width
• Note: The height and width properties do not
include padding, borders, or margins; they set
the height/width of the area inside the
padding, border, and margin of the element!

Setting max-width
• The max-width property is used to set the maximum
width of an element.
• The problem with the <div> above occurs when the
browser window is smaller than the width of the
element (500px). The browser then adds a horizontal
scrollbar to the page.
• Using max-width instead, in this situation, will improve
the browser's handling of small windows.
• Tip: Drag the browser window to smaller than 500px
wide, to see the difference between the two divs!
• Note: The value of the max-width property overrides
width.

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.

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
• The box model allows us to add a border around
elements, and to define space between elements.

Width and Height of an Element
• Width and Height of an Element
• In order to set the width and height of an
element correctly in all browsers, you need to
know how the box model works.
• Important: When you set the width and height
properties of an element with CSS, you just set
the width and height of the content area. To
calculate the full size of an element, you must
also add padding, borders and margins.
Assume we want to style a <div> element to have a
total width of 350px: Example-  

• Here is the math:
320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px
• The total width of an element should be calculated like this:
• Total element width = width + left padding + right padding
+ left border + right border + left margin + right margin
• The total height of an element should be calculated like
this:
• Total element height = height + top padding + bottom
padding + top border + bottom border + top margin +
bottom margin
• Note for old IE: Internet Explorer 8 and earlier versions,
include padding and border in the width property. To fix
this problem, add a <!DOCTYPE html> to the HTML page.

CSS Layout - The position Property
The position Property
• The position property specifies the type of
positioning method used for an element.
There are four different position values:
• static
• relative
• fixed
• absolute

position: static;
• HTML elements are positioned static by
default.
• Static positioned elements are not affected by
the top, bottom, left, and right properties.
• An element with position: static; is not
positioned in any special way; it is always
positioned according to the normal flow of the
page:

position: relative;
• An element with position: relative; is
positioned relative to its normal position.
• Setting the top, right, bottom, and left
properties of a relatively-positioned element
will cause it to be adjusted away from its
normal position. Other content will not be
adjusted to fit into any gap left by the
element.

position: fixed;
• An element with position: fixed; is positioned
relative to the viewport, which means it
always stays in the same place even if the
page is scrolled. The top, right, bottom, and
left properties are used to position the
element.
• A fixed element does not leave a gap in the
page where it would normally have been
located.

position: absolute;
• An element with position: absolute; is positioned
relative to the nearest positioned ancestor
(instead of positioned relative to the viewport,
like fixed).
• However; if an absolute positioned element has
no positioned ancestors, it uses the document
body, and moves along with page scrolling.
• Note: A "positioned" element is one whose
position is anything except static.

Overlapping Elements
• An element with greater stack order is always
in front of an element with a lower stack
order.
• Note: If two positioned elements overlap
without a z-index specified, the element
positioned last in the HTML code will be
shown on top.

Examples
• Analysis position with images
» 

CSS tutorial chapter 2

More Related Content

What's hot

Similar to CSS tutorial chapter 2

Recently uploaded

CSS tutorial chapter 2