Text shadow property is used to add shadow to the text.
With text-shadow property you can specific horizontal size,
vertical size, and shadow color for the text.
Syntax
selector {
text-shadow: horizontal size vertical size color-name;
}
Code example
h2.about-team {
text-shadow: 2px 1px blue;
}
The font property in CSS is a
shorthand used to apply font for specified element.
There are seven font sub properties including
(CSS 3 font-stretch property)
Font shorthand
example
p.about-team span {
font: expanded italic small-caps bold 13px/1.5 Georgia, sans-serif;
} font-stretch: Used to set the font width, such as
condensed or expanded.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: Use to set font style for text
- normal
- italic
- oblique
- inherit
font-variant: Specifies whether target text should be
displayed in a small-caps.
font-weight: Specifies the weight that is applied to the
element.
- Inherit
- Numeric keyword values: 100, 200, 300,
400(normal), 500, 600, 700(bold), 800, 900
- normal
- bold
- bolder
- lighter
font-size: Specifies the font that is applied to the
element.
- small
- medium
- large
- xx-small
- x-small
- xx-large
- x-large
- percentage
- inherit
- in pixel: 12px 15px etc.
font-family: To specify the font family for text
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption...etc
line-height: The line-height property defines the amount
of space above and below inline elements.
- normal
- percentage i.e 50% 150% etc.
- number (font-size multiplier I.e. 1.5)
Code example:
span.about-us{
font-stretch:expanded;
font-size:13px;
line-height:1.5;
font-style:oblique;
font-family: Arial, Helvetica, sans-serif;
font-variant:normal;
font-weight:400;
}
Following are some CSS background properties
used to set position, scrolling, background repeat
- background-repeat
- background-attachment
- background-position
Background scrolling
The background-attachment property
sets whether a background image scrolls with the rest of the page or is fixed.
/*Fixed background image*/
.about-team {
background-image: url("team.png");
background-attachment: fixed;
}
/* background image with scrolling*/
.body-img {
background-image: url("site.gif");
background-repeat: repeat-y;
}
Background repeat
The background-repeat property sets
if/how a background image will be repeated.
/* background image with no repeat*/
.about-team {
background-image: url("team.png");
background-repeat: no-repeat;
background-attachment: fixed;
}
Background position
The background-position property sets
the starting position of a background image.
/* background image with center position*/
.about-team {
background-image: url("team.png");
background-position: center;
}