CSS PROPERTIES

Css background, font, text properties

 CSS BACKGROUND PROPERTY

• CSS background properties are used to define the background effects of an

element.
1. CSS background colour
o The background-colour property specifies the background colour of an element.
o The background-colour of a page is defined in the body selector:
o Below is an example of CSS backgrounds

body{background-colour : red;}
Or
body{background-colour : #b0c4de;}
2. CSS background image
o The background-image property is use to apply image in the background of any
HTML element.
body {background-image: url("picture.jpg");}
3. background image repeat
o You can have a background image repeat vertically (y-axis) , horizontally (x-
axis), in both directions, or in neither directions.
o Specifies how to repeat the background images.
o background-repeat: repeat | no-repeat | repeat-x | repeat-y
o Example
body {background-image: url("picture.jpg"); background-repeat: repeat; }
4.Css background attachment
o Sets whether a background image is fixed or scrolls with the rest of the page.
Example
body {background-attachment: scroll;}
Property Values

Value Description
scroll The background image will scroll with the page. This is default
fixed The background image will not scroll with the page
5. background-position
o Sets the starting position of a background image.
o background-position: 30% 20%;
o background-position: 50px 100px;
o background-position: left top| left center| left bottom| right top| right center|
right bottom| center top| center center| center bottom
o Example
h1 { background-position: 10% 10%; }
body { background-position: 20px 20px; }
body { background-position: center top; }
6. Background - Shorthand property
o To shorten the code, it is also possible to specify all the background properties in
one single property. This is called a shorthand property.
Example
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
 CSS FONT PROPERTY
• Css font properties defines the font family, boldness, size and the style of a
text.
1. CSS font-size
o The font-size property sets the size of a font.
o Example
h4{font-size : 10px;}
 PROPERTY VALUES
Value Description
medium Sets the font-size to a medium size. This is default
xx-small Sets the font-size to an xx-small size
x-small Sets the font-size to an extra small size
small Sets the font-size to a small size
large Sets the font-size to a large size
x-large Sets the font-size to an extra large size
xx-large Sets the font-size to an xx-large size
smaller Sets the font-size to a smaller size than the parent element
larger Sets the font-size to a larger size than the parent element
length Sets the font-size to a fixed size in px, cm, etc
% Sets the font-size to a percent of the parent element's
font size
2. CSS font-style
o The font-style property specifies the font style for a text.
o The font-style property is mosty used to specify italic text.
o This property has three values:
 Normal- this text is shown normally
 Italic- this text is shown in italic
 Oblique- the text is “leaning” (oblique is very similar to italic, but less supported)
Example
P{font-style : italic ;} h4{font-style : oblique ;}
3. CSS font-variant
o Specifies the font variant. Default value is "normal“
o The font variant property specifies whether or not a text should be displayed
in a small caps font.
Example
p{ font-variant: small-caps;}
4. CSS font-weight
o The font-weight property sets how thick or thin characters in text should be
displayed.
o This property has five values:
 Normal- this text is shown normally. This is default
 Bold- Defines thick characters
 Bolder- Defines thicker characters
 Lighter- Defines lighter characters
 Number- Defines from thin to thick characters. 400 is the same as normal, and
700 is the same as bold
Example
p{font-weight: bold;}
5. CSS font-family
o The font-family property specifies the font for an element.
o There are two types of font family names:
• family-name - The name of a font-family, like "times", "courier", "arial", etc.
• generic-family - The name of a generic-family, like "serif", "sans-serif", "cursive",
"fantasy", "monospace".
Example
p{
font-family: "Times New Roman", Times, serif;
}
6. font property
o The font property is a shorthand property for:
font-style, font-variant, font-weight, font-size, font-family
o The font-size and font-family values are required. If one of the other values is
missing, their default value are used.
o Example
p{
font: italic bold 12px/30px Georgia, serif;
}
 CSS TEXT PROPERTY

o While css font covers most of the traditional ways to format your text, css text allows you
to control the spacing, decoration and alignment of your text.
1. Text Color
o 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)"
o The default text color for a page is defined in the body selector.
Example
h1 {
color: green;
}
2. Text Alignment
o The text-align property is used to set the horizontal alignment of a text.
o A text can be left or right aligned, centered, or justified.
Example
h3 {text-align: right;}
3. Text Decoration
o The text-decoration property is used to set or remove decorations from text.
o The value text-decoration: none; is often used to remove underlines from links.
Example
a {text-decoration: none;}
o The text-decoration property specifies the decoration added to text, and is
a shorthand property for: text-decoration-line (required), text-decoration-
color, text-decoration-style
o CSS Syntax
text-decoration: text-decoration-line text-decoration-color text-decoration-
style;
o Property Values
Value Description
text-decoration- Sets the kind of text decoration to use (like underline,
line overline, line-through)
text-decoration- Sets the color of the text decoration
color
text-decoration- Sets the style of the text decoration (like solid, wavy,
style dotted, dashed, double)
4. text-decoration-line
The text-decoration-line property sets the kind of text decoration to use (like
underline, overline, line-through).
Example: p{text-decoration-line: overline;}
Property Values

Value Description
none Default value. Specifies no line for the text-
decoration
underline Specifies that a line will be displayed under the text
overline Specifies that a line will be displayed over the text
line-through Specifies that a line will be displayed through the
text
5. text-decoration-color
o The text-decoration-color property specifies the color of the text-decoration
(underlines, overlines, linethroughs).
Example:
P {text-decoration-color: red;}
6. text-decoration-style
o The text-decoration-style property sets the style of the text decoration (like
solid, wavy, dotted, dashed, double).
Example:
p{text-decoration-style : wavy;}
7. CSS direction
o The direction property specifies the text direction/writing direction within a
block-level element.
Example: p{direction : rtl;}
Property Values Value Description
ltr Text direction goes from left-to-
right. This is default
rtl Text direction goes from right-
to-left
8. letter-spacing
o The letter-spacing property increases or decreases the space between
characters in a text.
Example: h1{letter-spacing: 2px;}, p{letter-spacing:-1px;}
Property values
Value Description
normal No extra space between
characters. This is default
length Defines an extra space
between characters (negative
values are allowed).
9. line-height
o The line-height property specifies the height of a line.
Example: p{line-height:0.5px;}
o Property values Value Description
normal A normal line height. This is
default
number A number that will be multiplied
with the current font-size to set
the line height
length A fixed line height in px
% A line height in percent of the
current font size
10. text-indent
o The text-indent property specifies the indentation of the first line in a text-
block.
Example: p{text-indent: 50px;}
Property Values
Value Description
length Defines a fixed indentation in
px, pt, cm, em, etc. Default
value is 0.
% Defines the indentation in % of
the width of the parent element
11. text-transform
o The text-transform property controls the capitalization of text.
o It is used to specify uppercase and lowercase in a text.
Example: p {text-transform: uppercase;}
Property Values
Value Description
none No capitalization. The text
renders as it is. This is default
capitaliz Transforms the first character of
e each word to uppercase
upperca Transforms all characters to
se uppercase
lowerca Transforms all characters to
se lowercase
12. CSS text-overflow
o The text-overflow property specifies how overflowed content that is not
displayed should be signaled to the user. It can be clipped, display an ellipsis
(...), or display a custom string.
Example: h1{text-overflow: ellipsis; }
property Values
Value Description
clip Default value. The text is clipped and not
accessible
ellipsis Render an ellipsis ("...") to represent the clipped text
string Render the given string to represent the clipped
text

Note: The text-overflow: "string" only works in Firefox.

13. CSS vertical-align
o The vertical-align property sets the vertical alignment of an element.
Example: img{vertical-align: baseline;}
Property Values:
Value Description
baseline The element is aligned with the baseline of the
parent. This is default

length Raises or lower an element by the specified

length. Negative values are allowed. E.g. cm,
px, em

% Raises or lower an element in a percent of the

"line-height" property. Negative values are
allowed

sub The element is aligned with the subscript

baseline of the parent

super The element is aligned with the superscript

baseline of the parent
top The element is aligned with the
top of the tallest element on the
line

text-top The element is aligned with the

top of the parent element's font

middle The element is placed in the

middle of the parent element

bottom The element is aligned with the

lowest element on the line

text-bottom The element is aligned with the

bottom of the parent element's
font
initial Sets this property to its default
value.
14. CSS white-space
o The white-space property specifies how white-space inside an element is
handled.
Example: p{white-space: nowrap;}
p{white-space: pre;}
p{white-space: pre-wrap;}
Value Description

normal Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default

nowrap Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on
the same line until a <br> tag is encountered

pre Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML

pre-line Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks

pre-wrap Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks

initial Sets this property to its default value.

15. CSS word-spacing
o The word-spacing property increases or decreases the white space between
words.
Value Description
o Note: Negative values are allowed.
normal Defines normal space between
o Example: p { word-spacing: 30px;} words (0.25em) . This is default
Property Values: length Defines an additional space
between words (in px, pt, cm,
em, etc). Negative values are
allowed.
initial Sets this property to its default
value.