CSS BACKGROUND (Applying Background using CSS)

 CSS background properties are used to define the background effects of an element.
 CSS properties used for background effects:
a. background-color
b. background-image
c. background-repeat
d. background-attachment
e. background-position

A. Background Color

o The background-color property specifies the background color of an element.

o The background color of a page is defined in the body selector:
Example
body {background-color:#b0c4de;}

B. Background Image

o The background-image property specifies an image to use as the background of an

element.
o By default, the image is repeated so it covers the entire element.
o The background image for a page can be set like this:
Example
body {background-image:url('paper.gif');}

C. Background Image – Repeat Horizontally or Vertically

o By default, the background-image property repeats an image both horizontally and

vertically.
o Some images should be repeated only horizontally or vertically, or they will look strange,
like this:
Example
body
{
background-image:url('gradient2.png');
}
o If the image is repeated only horizontally (repeat-x), the background will look better:
Example
body
{
backgroundimage:url('gradient2.png');
background-repeat:repeat-x;
}
D. Background Image – Set position and no-repeat

o When using a background image, use an image that does not disturb the text.
o Showing the image only once is specified by the background-repeat property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
o Change the position of the image, so that it does not disturb the text too much.
o The position of the image is specified by the background-position property:
Example
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

E. Background Attachment

body {
background-image:url('paris.jpg');
background-repeat: no repeat;
background-attachment: fixed;
}

Background – Shorthand property

o As you can see from the examples above, there are many properties to consider when
dealing with backgrounds.
o To shorten the code, it is also possible to specify all the properties in one single property.
This is called a shorthand property.
o The shorthand property for background is simply "background":
Example
body {background: #ffffff
url('img_tree.png') no-repeat right
top;}
o When using the shorthand property the order of the property values is:
a. background-color
b. background-image
c. background-repeat
 d. background-attachment
e. background-position
o It does not matter if one of the property values is missing, as long as the ones that are
present are in this order.

CSS Text

CSS Text allows you to format the text with your preference on how you want the text
would appear or look like in a browser.

PROPERTIES:

Color - Specifies the color of text

Ex. {color: blue;}, {color: #0000ff;}, {color: rgb(0,0,255);}
Direction – Specifies the text direction/writing direction.
Ex. {direction: rtl;}, {direction: ltr;}
Letter-spacing - increases or decreases the space between characters in a text.
Ex. {letter-spacing: 2px;}
Line-height - specifies the line height.
Ex. {line-height: 70%;}
Text-align - specifies the horizontal alignment of text in an element
Ex. {text-align: left;} (LEFT, RIGHT, CENTER)
Text-decoration - specifies the decoration added to text
Ex. {text-decoration: overline;} (OVERLINE, LINE-THROUGH, UNDERLINE)
Text-indent - specifies the indentation of the first line in a text-block.
Ex. {text-indent: 50px;}
Text-shadow – applies shadow to text
Ex. {text-shadow: 0 0 5px #0000FF;}
Text-transform – controls the capitalization of text.
Ex. {text-transform: uppercase;} (UPPERCASE, LOWERCASE, CAPITALIZE)
Text-align – sets the vertical alignment of an element
White-space – specifies how white-space inside an element is handled
Ex. {white-space: pre-wrap;} (NORMAL, PRE-LINE, NOWRAP, PRE-WRAP, PRE, etc.)
Word-spacing – increases or decreases the white space between words.
Ex. {word-spacing: 20px;}
 CSS Font

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

 FONT FAMILY
o The font family of a text is set with the font-family property.
o 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.
o 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:
• Separate each value with a comma.
• If a font name contains white-space, it must be quoted. Single quotes must be
used when using the "style" attribute in HTML.
• If the name of a font family is more than one word, it must be in quotation
marks, like font-family: "Times New Roman".

More than one font family is specified in a comma-separated list:

p {font-family:"Times New Roman", Times, serif;}

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")

Generic Family Font family Description

Serif Times New Roman Serif fonts have small lines at the
Georgia ends on some characters
Sans-serif Arial "Sans" means without these fonts
Verdana do not have the lines at the ends
of characters
Monospace Courier New All monospace characters have
Consolas the same width
Inherit Specifies that the font family
should be inherited from the
parent element

 FONT STYLE

The font-style property is mostly used to specific 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.

• 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.

• The font-size value can be an absolute, or relative size.

 Absolute size:

• Sets the text to a specified size

• Does not allow a user to change the text size in all browsers (bad for accessibility reasons)

• Absolute size is useful when the physical size of the output is known

 Relative size:

• Sets the size relative to surrounding elements

• Allows a user to change the text size in browsers

If you do not specify a font size, the default size for normal text, like paragraphs, is
16px (16px=1em).

 FONT WEIGHT

The font-weight property sets how thick or thin characters in text should be displayed.

VALUE DESCRIPTION
normal default
bold thick characters
bolder thicker characters
lighter lighter characters
100, 200, 300, 400, 500, 600, 700, 800, 900 Defines from thin to thick characters. 400 is the
same as normal, and 700 is the same as bold
inherit specifies that the font variant should be inherited
from the parent element
  FONT VARIANT

The font-variant property specifies whether or not a text should be displayed in a small-
caps font.

VALUE DESCRIPTION
normal default
small-caps small caps font
inherit specifies that the font variant should be
inherited from the parent element