Scribd
Upload
15 views

CSSBG

The document discusses CSS background properties and how to define background effects of elements using CSS. It explains properties like background-color, background-image, background-repeat, background-position and how they can be used to control the appearance and positioning of background images and colors.

Uploaded by

Ashokkumar A
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
15 views

CSSBG

The document discusses CSS background properties and how to define background effects of elements using CSS. It explains properties like background-color, background-image, background-repeat, background-position and how they can be used to control the appearance and positioning of background images and colors.

Uploaded by

Ashokkumar A
Copyright
© © All Rights Reserved
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 19

 CSS stands for Cascading Style Sheets

 Styles define how to display HTML elements


 Styles were added to HTML 4.0 to solve a
problem
 External Style Sheets can save a lot of work
 External Style Sheets are stored in CSS files
 A CSS rule has two main parts: a selector, and one or
more declarations:

 The selector is normally the HTML element you


want to style. Each declaration consists of a property
and a value. The property is the style attribute you
want to change. Each property has a value.
Comments are used to explain your code, and may
help you when you edit the source code at a later
date. Comments are ignored by browsers. A CSS
comment begins with "/*", and ends with "*/".
In addition to setting a style for a HTML element, CSS allows you to
specify your own selectors called "id" and "class".

 The id Selector
The id selector is used to specify a style for a single, unique element. The
id selector uses the id attribute of the HTML element, and is defined
with a "#". The style rule below will be applied to the element with
id="para1":
Example
#para1
{
text-align:center;
color:red;
}
The class selector is used to specify a style for a group of elements. Unlike the id
selector, the class selector is most often used on several elements. This allows
you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-
aligned:
Example
.center {text-align:center;}

You can also specify that only specific HTML elements should be affected by a
class. In the example below, all p elements with class="center" will be center-
aligned:
Example
p.center {text-align:center;}
There are three ways of inserting a style sheet:
 External style sheet
 Internal style sheet
 Inline style
An external style sheet is ideal when the style is applied to many
pages. With an external style sheet, you can change the look of an
entire Web site by changing one file. Each page must link to the
style sheet using the <link> tag. The <link> tag goes inside the
head section:

<head>
<link rel="stylesheet" type="text/css" ref="mystyle.css">
</head>

An external style sheet can be written in any text editor. The file
should not contain any html tags. Your style sheet should be saved
with a .css extension.
An internal style sheet should be used when a single
document has a unique style. You define internal styles
in the head section of an HTML page, by using the
<style> tag, like this:

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>
An inline style loses many of the advantages of style
sheets by mixing content with presentation. To use
inline styles you use the style attribute in the relevant
tag. The style attribute can contain any CSS
property.
The example shows how to change the color and the
left margin of a paragraph:

<p style="color:sienna;margin-left:20px">This is a
paragraph.</p>
If some properties have been set for the same selector in different style sheets, the values
will be inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3 selector:
h3
{
color:red;
text-align:left;
font-size:8pt;
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align:right;
font-size:20pt;
}
If the page with the internal style sheet also links to the external style sheet the properties
for h3 will be:

color:red;
text-align:right;
font-size:20pt;

The color is inherited from the external style sheet and the text-alignment and the font-
size is replaced by the internal style sheet.
Multiple Styles Will Cascade into One
Styles can be specified:
 inside an HTML element
 inside the head section of an HTML page
 in an external CSS file
CSS background properties are used to define the
background effects of an element. CSS properties
used for background effects:
 background-color
 background-image
 background-repeat
 background-attachment
 background-position
 background-size
Background Color
The background-color property specifies the background color of an element.
body {background-color:#b0c4de;}

With CSS, a color is most often specified by:


 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"
 a color name - like "red"
Background Image
The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
The background-image property sets one or more background images for an element. The
background of an element is the total size of the element, including padding and border
(but not the margin).
By default, a background-image is placed at the top-left corner of an element, and repeated
both vertically and horizontally.

Value Description

url('URL') The URL to the image. To specify more than one image, separate
the URLs with a comma

none No background image will be displayed. This is default

body {background-image:url('paper.gif');}
Background Image - Repeat Horizontally or Vertically
By default, the background-image property repeats an image both
horizontally and vertically. If the image is repeated only horizontally
(repeat-x), the background will look better:
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
Value Description

repeat The background image will be repeated both vertically and horizontally.
This is default

repeat-x The background image will be repeated only horizontally

repeat-y The background image will be repeated only vertically

no-repeat The background-image will not be repeated


Background Image - Set position and no-repeat
Showing the image only once is specified by the background-repeat
property.
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
We want to change the position of the image, so that it does not disturb
the text too much. 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;
}
Value (position) Description

left top If you only specify one keyword, the other value will be "center"
left center
left bottom
right top
right center
right bottom
center top
center center
center

bottom
x% y% The first value is the horizontal position and the second value is the vertical.
The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you
only specify one value, the other value will be 50%. . Default value is: 0% 0%

xpos ypos The first value is the horizontal position and the second value is the vertical.
The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units.
If you only specify one value, the other value will be 50%. You can mix % and
positions
background-size Property
The background-size property specifies the size of the background images.
Syntax
background-size: length|percentage|cover|contain;

Value Description

length Sets the height and width of the background image. The first value sets the width, the
second value sets the height. If only one value is given, the second is set to "auto"

percentage Sets the height and width of the background image in percent of the parent element.
The first value sets the width, the second value sets the height. If only one value is
given, the second is set to "auto"

cover Scale the background image to be as large as possible so that the background area is
completely covered by the background image. Some parts of the background image
may not be in view within the background positioning area

contain Scale the image to the largest size such that both its width and its height can fit inside
the content area
Background - Shorthand property
As you can see from the examples above, there
are many properties to consider when dealing
with backgrounds. To shorten the code, it is also
possible to specify all the properties in one single
property. This is called a shorthand property.
Syntax
background: color position size repeat origin clip
attachment image;

You might also like