CSS
Cascading Style Sheets
CSS Inheritance
• In CSS inheritance, the child element will naturally inherit
properties from its parent element.
• For CSS inheritance, properties are categorized in two types:
inherited properties
non-inherited properties
Syntax:
<style>
#parentclass {
color: red;
}
</style>
<div id="parentclass">
Parent Div
<div id="div1Child">Child Div 1</div>
<div id="div2Child">Child Div 2</div>
</div>
Inherited Properties
• Inherited properties are, by default, set to the computed
value of the parent element.
• Properties related to text, such as color, font-family,
font-size, line-height, and text-align, are typically
inherited. This ensures consistent text styling
throughout a document.
• In the following example, the text inside the <strong>
element will appear in 20px and in blue, since the
<strong> element inherits the color and the font-size
value from the parent (<p>) element.
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: blue;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Inherited Properties</h1>
<p>This is a paragraph with some <strong>important</strong> text.</p>
</body>
</html>
Non-inherited Properties
• If there is not set a value for a non-inherited property,
the value is set to the initial (default) value of that
property.
• Properties related to the box model or layout, like
border, background, margin, padding, width, and height
, are typically not inherited.
• In the following example, the <strong> element, inside
the <p> element, will not have an additional border
(since the initial value of border-style is none).
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<style>
p{
border: 1px solid red;
}
</style>
</head>
<body>
<h1>Non-inherited Properties</h1>
<p>This is a paragraph with some <strong>important</strong> text.</p>
</body>
</html>
CSS Backgrounds
• The CSS background properties are used to add
background effects for elements.
background-color Sets the background color of an
element
• In these chapters, you will learn about the following CSS
background properties:
• background-color
• background-image
• background-repeat
• background-attachment
CSS background-color
• The background-color property specifies the background color of an element.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
</body>
</html>
CSS 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.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("[Link]");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>
</body>
</html>
CSS Background Image Repeat
• The background-repeat property sets if/how a
background image will be repeated.
• By default, a background-image is repeated both
vertically and horizontally.
• Some images should be repeated only horizontally or
vertically, or they will look strange, like this:
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Strange background image...</p>
</body>
</html>
CSS Background Attachment
• The background-attachment property specifies whether
the background image should scroll or be fixed (will not
scroll with the rest of the page)
background-attachment Sets whether a background
• image is fixed or scrolls with the
rest of the page
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
</style>
</head>
<body>
<h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image should scroll or be fixed (will not scroll with the rest of the page).</p>
<p><strong>Tip:</strong> If you do not see any scrollbars, try to resize the browser window.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</html>
CSS Border Images
• CSS Border Image is a property that allows you to
use an image instead of a solid color border around an
element. It slices an image into sections and places
them around the border of the element.
Property Description
border-image A shorthand property for setting all the
border-image-* properties
border-image-s Specifies the path to the image to be
ource used as a border
border-image-s Specifies how to slice the border
lice image
border-image- Specifies the widths of the border
width image
border-image-o Specifies the amount by which the
utset border image area extends beyond the
border box
border-image-r Specifies whether the border image
epeat should be repeated, rounded or
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 250px;
padding: 20px;
border: 15px solid transparent;
border-image: url([Link]) 30 round;
}
</style>
</head>
<body>
<div class="box">
This box uses a border image.
</div>
</body>
CSS Colors
• RGBA color values are an extension of RGB colors with
an alpha channel - which specifies the opacity for a
color.
• An RGBA color value is specified with:
• rgba(red, green, blue, alpha)
• The alpha parameter is a number between 0.0 (fully
transparent) and 1.0 (fully opaque).
EXAMPLE
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#p2 {background-color:rgba(0,255,0,0.3);}
#p3 {background-color:rgba(0,0,255,0.3);}
#p4 {background-color:rgba(192,192,192,0.3);}
#p5 {background-color:rgba(255,255,0,0.3);}
#p6 {background-color:rgba(255,0,255,0.3);}
</style>
</head>
<body>
<h1>Define Colors With RGBA Values</h1>
<p id="p1">Red</p>
<p id="p2">Green</p>
<p id="p3">Blue</p>
<p id="p4">Grey</p>
<p id="p5">Yellow</p>
<p id="p6">Cerise</p>
</body>
CSS Text Shadow
• The CSS text-shadow property applies a shadow to text.
• In its simplest use, you only specify the horizontal and the vertical shadow.
• In addition, you can add a shadow color and blur effect.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
