Cascading Style Sheets

 CSS stands for Cascading

Style Sheets
 CSS is responsible for styling
and formatting web pages,
controlling how HTML elements
are displayed on a webpage.
The selector points to the HTML
element you want to style.
The declaration block contains one or more
declarations separated by semicolons.
Each declaration includes a CSS property
name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons,
and declaration blocks are surrounded by curly braces.
 The CSS ID selector is used to select and style
a specific HTML element based on its unique
identifier (ID).
 Each HTML element can have an ID attribute,
which must be unique within the document.
 The ID selector is prefixed with a hash (#)
symbol, followed by the ID value.
Basic syntax of the CSS ID selector
For example, consider an HTML element with the ID
"myParagraph":
 The background-color property set the
background color of an HTML element
 It allows to specify a color for the
background of an element.
 The CSS background properties are
used to add background effects for
elements.
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
Basic syntax for setting the background color
Using color names
Using hexadecimal
color codes
Using RGB values
Using RGBA values
(with an alpha channel
for transparency)
 The background-image property sets a
background image for an HTML element.

 It allows you to specify the URL of the

image file you want to use as the
background.
Basic syntax for setting a background image
selector: The HTML element or class/id selector for
which you want to set the background image.

Basic syntax for setting a background image

 url('path/to/your/image.jpg'): The path to the image file.
You can use relative or absolute paths, or URLs.

Basic syntax for setting a background image

Example of setting a background image
 The background-repeat property in CSS
is used to control whether a background
image should be repeated or not.
repeat (default): The background image is repeated both
horizontally and vertically to fill the entire background area.
repeat-x: The background image is repeated only horizontally.
repeat-y: The background image is repeated only vertically.
no-repeat: The background image is not repeated, and it appears
only once.
 The background-attachment property in
CSS is used to control whether a
background image scrolls with the rest of
the page content or remains fixed in
place as the user scrolls.
scroll (default): The background image scrolls along with the
content.
fixed: The background image remains fixed in place, and it does
not scroll with the content. This creates a "parallax" effect.
local: The background image scrolls with the element's contents, meaning
it scrolls with the containing box but is fixed relative to the element.
 The background-position property in CSS
is used to set the initial position of a
background image within its containing
element. It specifies two values: the
horizontal position and the vertical position.
horizontal_position: Specifies the horizontal position of the
background image.
vertical_position: Specifies the vertical position of the
background image.

Basic syntax for setting a background-position

Keywords:
center: Centers the background image both horizontally and vertically.
top, bottom, left, right: Aligns the background image with the specified edge.
initial: Sets the background position to its default value.
Percentages: Represents a percentage of the background positioning area
(usually the size of the containing element).
Length Units: Uses length units such as pixels, em, or rem to specify the position.
You can also combine keywords, percentages, and length units to achieve
more precise positioning: