0% found this document useful (0 votes)

4 views46 pages

Lesson 3. Cascading Style Sheets

This instructional material provides an overview of Cascading Style Sheets (CSS), including its definition, history, and various applications in web development. It explains CSS syntax, selectors, and the importance of CSS in controlling the presentation of web pages. The document also covers different types of selectors and how they can be used to apply styles to HTML elements effectively.

Uploaded by

pint0antips

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

4 views46 pages

Lesson 3. Cascading Style Sheets

Uploaded by

pint0antips

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 46

Polytechnic University of the Philippines COMP 20163 WEB DEVELOPMENT

Santa Rosa Branch INSTRUCTIONAL MATERIAL

Lesson 4. Cascading Style Sheets

Lesson 4.1 Introduction to Cascading Style Sheets

What is CSS?
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
transform the presentation of a Web Pages as well as many ostensibly nonweb environments.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the
text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what
background images or colors are used, layout designs,variations in display for different devices
and screen sizes as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation of an
HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.
Strictly speaking CSS is not a programming language but it does require abstract thought. It is
also not purely a design tool, but it does require some creativity.

Where do we use CSS?

CSS is being used extensively in web and non web based applications :
• All modern websites make use of CSS to beautify their web pages.
• Embedded-device displays often use CSS to style their user interfaces.
• RSS clients also let you apply CSS to feeds and feed entries.
• Instant message clients also use CSS to format chat windows.

Aspects of CSS can be found in the syntax used by JavaScript and its frameworks, so we can
say CSS is everywhere!

History of CSS

Cascading Style Sheets level 1 (CSS1) came out of W3C as a recommendation in December
1996. This version describes the CSS language as well as a simple visual formatting model for
all the HTML tags.

CSS2 became a W3C recommendation in May 1998 and builds on top of CSS1. This version
adds support for media-specific style sheets e.g. printers and aural devices, downloadable fonts,
element positioning and tables.

CSS3 became a W3C recommendation in June 2012 and builds on older versions CSS. it has
divided into documentations called as Modules and here each module having new extension
features defined in CSS2.
Year Description

IM Developed by: Date Created: Revision No.

COMP 20163 WEB DEVELOPMENT Page No.
Mr. Owen Harvey Balocon INSTRUCTIONAL MATERIAL October 24, 2023 2023 - 000 ___ of ___
Instructor
Polytechnic University of the Philippines COMP 20163 WEB DEVELOPMENT
Santa Rosa Branch INSTRUCTIONAL MATERIAL

HÃ¥kon Wium Lie proposed the idea of CSS to allow web designers to change the
1994
layout, colors, and fonts of their websites.

The first version of CSS was released while the newly established CSS Working
1996
Group moved forward with CSS2.

The second version of CSS was released and work on CSS-3 started at the same
1998
time.

A clarified version of CSS2 called CSS2.1, was released, which fixed the errors found
2011
in CSS 2

As of June 2012, there are over fifty CSS modules published from the CSS-3 Working
2012
Group.
Style Sheets Origin
The stylesheets you add to your web page aren’t the only ones the browser applies. There are
different types, or origins, of stylesheets:
• User agent styles - This is the default style which browser applies to any web page.
• Author styles - Your stylesheets are called author styles which override user agent styles.
• User stylesheet - Some browsers let users define a user stylesheet and these are rarely
used.

Who Maintains CSS?

CSS is created and maintained through a group of people within the W3C called the CSS Working
Group. The CSS Working Group creates documents called specifications. When a specification
has been discussed and officially ratified by the W3C members, it becomes a recommendation.
These ratified specifications are called recommendations because the W3C has no control over
the actual implementation of the language. Independent companies and organizations create that
software.

The World Wide Web Consortium, or W3C is a group that makes recommendations about how
the Internet works and how it should evolve.

CSS Modules
A CSS Module is a CSS file in which all class names and animation names are scoped locally by
default. There are number of modules available CSS3, we are going to list a few of them:
• Selectors
• Box Model
• Backgrounds and Borders
• Image Values and Replaced Content
• Text Effects
• 2D/3D Transformations
• Animations
• Multiple Column Layout
• User Interface
IM Developed by: Date Created: Revision No.
COMP 20163 WEB DEVELOPMENT Page No.
Mr. Owen Harvey Balocon INSTRUCTIONAL MATERIAL October 24, 2023 2023 - 000 ___ of ___
Instructor
Polytechnic University of the Philippines COMP 20163 WEB DEVELOPMENT
Santa Rosa Branch INSTRUCTIONAL MATERIAL

Lesson 4.2 CSS Syntax

A CSS comprises of style rules that are interpreted by the browser and then applied to the
corresponding elements in your document. A style rule is made of three parts −
• Selector − A selector is an HTML tag at which a style will be applied. This could be any
tag like <h1> or <table> etc.
• Property − A property is a type of attribute of HTML tag. Put simply, all the HTML attributes
are converted into CSS properties. They could be color, border etc.
• Value − Values are assigned to properties. For example, color property can have value
either red or #F1F1F1 etc.

You can put CSS Style Rule Syntax as follows –

selector { property: value }

Example − You can define a table border as follows −

table{ border :1px solid #C00; }

Here table is a selector and border is a property and given value 1px solid #C00 is the value of
that property.

You can define selectors in various simple ways based on your comfort. Let me put these selectors
one by one.

The Type Selectors

This is the same selector we have seen above. Again, one more example to give a color to all
level 1 headings –

h1 {
color: #36CFFF;
}

The Universal Selectors

Rather than selecting elements of a specific type, the universal selector quite simply matches the
name of any element type −
*{
color: #000000;
IM Developed by: Date Created: Revision No.
COMP 20163 WEB DEVELOPMENT Page No.
Mr. Owen Harvey Balocon INSTRUCTIONAL MATERIAL October 24, 2023 2023 - 000 ___ of ___
Instructor
Polytechnic University of the Philippines COMP 20163 WEB DEVELOPMENT
Santa Rosa Branch INSTRUCTIONAL MATERIAL

This rule renders the content of every element in our document in black.

The Descendant Selectors

Suppose you want to apply a style rule to a particular element only when it lies inside a particular
element. As given in the following example, style rule will apply to <em> element only when it lies
inside <ul> tag.
ul em {
color: #000000;
}

The Class Selectors

You can define style rules based on the class attribute of the elements. All the elements having
that class will be formatted according to the defined rule.
.black {
color: #000000;
}

This rule renders the content in black for every element with class attribute set to black in our
document. You can make it a bit more particular. For example −
h1.black {
color: #000000;
}

This rule renders the content in black for only <h1> elements with class attribute set to black.
You can apply more than one class selectors to given element. Consider the following example −
<p class = "center bold">
This para will be styled by the classes center and bold.
</p>

The ID Selectors
You can define style rules based on the id attribute of the elements. All the elements having
that id will be formatted according to the defined rule.
#black {
color: #000000;
}

This rule renders the content in black for every element with id attribute set to black in our
document. You can make it a bit more particular. For example −
h1#black {
color: #000000;
}

IM Developed by: Date Created: Revision No.

This rule renders the content in black for only <h1> elements with id attribute set to black.
The true power of id selectors is when they are used as the foundation for descendant selectors,
For example −
#black h2 {
color: #000000;
}

In this example all level 2 headings will be displayed in black color when those headings will lie
with in tags having id attribute set to black.

The Child Selectors

You have seen the descendant selectors. There is one more type of selector, which is very similar
to descendants but have different functionality. Consider the following example −
body > p {
color: #000000;
}

This rule will render all the paragraphs in black if they are direct child of <body> element. Other
paragraphs put inside other elements like <div> or <td> would not have any effect of this rule.
The Attribute Selectors
You can also apply styles to HTML elements with particular attributes. The style rule below will
match all the input elements having a type attribute with a value of text −
input[type = "text"] {
color: #000000;
}

The advantage to this method is that the <input type = "submit" /> element is unaffected, and the
color applied only to the desired text fields.
There are following rules applied to attribute selector.
• p[lang] − Selects all paragraph elements with a lang attribute.
• p[lang="fr"] − Selects all paragraph elements whose lang attribute has a value of exactly
"fr".
• p[lang~="fr"] − Selects all paragraph elements whose lang attribute contains the word
"fr".
• p[lang|="en"] − Selects all paragraph elements whose lang attribute contains values that
are exactly "en", or begin with "en-".

Multiple Style Rules

You may need to define multiple style rules for a single element. You can define these rules to
combine multiple properties and corresponding values into a single block as defined in the
following example −
h1 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;

IM Developed by: Date Created: Revision No.

margin-bottom: 1em;
text-transform: lowercase;
}

Here all the property and value pairs are separated by a semicolon (;). You can keep them in a
single line or multiple lines. For better readability, we keep them in separate lines.
For a while, don't bother about the properties mentioned in the above block. These properties will
be explained in the coming chapters and you can find complete detail about properties in CSS
References

Grouping Selectors
You can apply a style to many selectors if you like. Just separate the selectors with a comma, as
given in the following example −
h1, h2, h3 {
color: #36C;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}

This define style rule will be applicable to h1, h2 and h3 element as well. The order of the list is
irrelevant. All the elements in the selector will have the corresponding declarations applied to
them.

You can combine the various id selectors together as shown below −

#content, #footer, #supplement {
position: absolute;
left: 510px;
width: 200px;
}

Lesson 4.3 CSS Selectors

CSS selectors are patterns used to select and style HTML elements on a web page. They allow
you to target specific elements or groups of elements to apply styles like colors, fonts, margins,
and more. CSS selectors are a fundamental part of Cascading Style Sheets (CSS), which is a
language used to control the presentation and layout of web documents.

The element or elements that are selected by the selector are referred to as subject of the
selector.

IM Developed by: Date Created: Revision No.

Selector lists
If same CSS is used by more than one selector, then these selectors can be combined together
to form a selector list. Thus the CSS rule is applied to all the individual selectors.
For example, if the same CSS, color: crimson is applied to p element and .sample class, it is
written as:

p{
color: crimson;
}

.sample {
color: crimson;
}

But, we can combine these two rules into one selector list, by adding a comma to separate them
as shown below:
p, .sample {
color: crimson;
}

Following syntax will be deemed invalid, as one of the selector is invalid (..sample - is an incorrect
way of defining a class).
p{
color: crimson;
}

..sample {
color: crimson;
}
p, ..sample {
color: crimson;
}
• A white space is acceptable before or after the comma in a selector list declaration.
• If any of the selectors in the selector list is invalid, the whole rule gets ignored and deemed
invalid.
• It is advisable to define each selector in a new line, as it makes it more legible.
CSS Selector - Type Selector
A type selector targets an HTML element, such as <h1>, <p>, etc.
p{
color: green;
}

h1 {
text-decoration-line: underline;
}

IM Developed by: Date Created: Revision No.

Following example demonstrates the use of a type selector:

<html>
<head>
<style>
div {
border: 5px inset gold;
width: 300px;
text-align: center;
}

p{
color: green;
}

h1 {
text-decoration-line: underline;
}
</style>
</head>
<body>
<div>
<h1>Type selector</h1>
<p>div with border and text-aligned to center</p>
<p>paragraph with green color</p>
<p>h1 with an underline</p>
</div>
</body>
</html>

CSS Selector - Class Selector

A class selector targets an element with a specific value for its class attribute.
.style-h1 {
text-decoration-line: underline;
}

.style-p {
color: green;
font-size: 25px;
}
Following example demonstrates the use of a class selector, where .style-p, .style-h1 and .style-
div are class selectors:
<html>
<head>
<style>
.style-div {

IM Developed by: Date Created: Revision No.

border: 5px inset gold;

width: 300px;
text-align: center;
}

.style-p {
color: green;
font-size: 25px;
}

.style-h1 {
text-decoration-line: underline;
}
</style>
</head>
<body>
<div class="style-div">
<h1 class="style-h1">class selector</h1>
<p class="style-p">class .style-p applied</p>
<p>No class applied on this p element</p>
</div>
</body>
</html>
CSS Selector - ID Selector
An ID selector targets an element with a specific value for its id attribute.
#style-p {
color: green;
font-size: 25px;
}

#style-h1 {
text-decoration-line: underline;
color: red;
}
Following example demonstrates the use of an id selector, where #style-p, #style-h1 and #style-
div are the ide selectors applied on the elements:
<html>
<head>
<style>
#style-div {
border: 5px inset purple;
width: 300px;
text-align: center;
background-color: lightgoldenrodyellow;
}

IM Developed by: Date Created: Revision No.

#style-p {
color: green;
font-size: 25px;
}

#style-h1 {
text-decoration-line: underline;
color: red;
}
</style>
</head>
<body>
<div id="style-div">
<h1 id="style-h1">ID selector</h1>
<p id="style-p">id #style-p applied</p>
<p>No id applied on this p element</p>
</div>
</body>
</html>

CSS Selector - Attribute Selector

An attribute selector targets an element based on a specific attribute or attribute values on an
element.
a[target] {
background-color: peachpuff;
}
You can also specify the element with an attribute having a specific value.
a[href="https://www.tutorialspoint.com"] {
background-color: peachpuff;
}
Following example demonstrates the use of an attribute selector:
<html>
<head>
<style>
a[target] {
background-color: peachpuff;
color: blueviolet;
font-size: 2em;
}
</style>
</head>
<body>
<h2>Attribute selector</h2>
<p>Styling applied to anchor element with target attribute:</p>

IM Developed by: Date Created: Revision No.

<a href="#">Tutorialspoint</a>
<a href="#" target="_blank">google</a>
<a href="#" target="_self">wikipedia</a>
</body>
</html>

CSS Selector - Pseudo-class Selector

A pseudo-class selector is used to style a specific state of an element, such as :hover is used to
style an element when hovered.
For a detailed list of pseudo-class selectors, refer this link.
a :hover {
background-color: peachpuff;
color: green;
font-size: 2em;
}
Following example demonstrates the use of a pseudo-class selector:
<html>
<head>
<style>
a:hover {
background-color: peachpuff;
color: green;
font-size: 2em;
}
</style>
</head>
<body>
<h2>Pseudo-class selector</h2>
<p>Styling applied to anchor element with a pseudo-class:</p>
<a href="#">Tutorialspoint</a>
</body>
</html>

CSS Selector - Pseudo-element Selector

A pseudo-element selector is used to style a specific part of an element rather than the element
itself.
For a detailed list of pseudo-element selectors, refer this link.
a::before {
content: url();
}
Following example demonstrates the use of a pseudo-element selector (::before):
<html>
<head>
<style>
a::before {

IM Developed by: Date Created: Revision No.

content: url('images/smiley.png');
}

a::after {
content: " Pseudo-element ::after applied";
color: red;
background-color: chartreuse;
}
</style>
</head>
<body>
<h2>Pseudo-element selector</h2>
<p>Styling applied to anchor element with a pseudo-element:</p>
<a href="#">Tutorialspoint</a>
</body>
</html>

Combinators
Combinator shows the relationship between the selectors. Two or more simple selectors can be
combined using a combinator, to form a selector. You can read more about combinator here.
Following example demonstrates the use of a descendant selector (space) and child combinator:
<html>
<head>
<style>
/* style applied to only div */
div {
border: 2px solid black;
width: 300px;
}
/* style applied to all li elements directly under ul */
ul li {
background-color: lightpink;
color: purple;
font-size: 1.5em;
padding: 5px;
margin-right: 15px;
}

/* style applied to all li elements that are child element to ol element */

ol > li {
background-color: bisque;
color: black;
font-size: 0.75em;
padding: 5px;
}

IM Developed by: Date Created: Revision No.

</style>
</head>
<body>
<div>
<ul>
<li>Item One</li>
<li>Item Two
<ol>
<li>Nested 1</li>
<li>Nested 2</li>
</ol></li>
<li>Item Three</li>
<li>Item Four</li>
<li>Item Five
<ol>
<li>Nested 3</li>
<li>Nested 4</li>
</ol>
</li>
</ul>
</div>
</body>
</html>

CSS Selector - Universal Selector

Universal selector, denoted by an asterisk mark (*), is a special selector that matches any and all
elements in an HTML document.
/* Selects and styles all elements on the page */
*{
margin: 0;
padding: 0;
}
As per the above syntax, the universal selector is used to apply a margin and padding of 0 to all
HTML elements.
Following example demonstrates the use of a universal selector (*):
<html>
<head>
<style>
*{
background-color: peachpuff;
color: darkgreen;
font-size: 25px;
}
</style>
</head>

IM Developed by: Date Created: Revision No.

<body>
<h1>Universal selector (*)</h1>

<div>Parent element
<p>Child paragraph 1</p>
<p>Child paragraph 2</p>
</div>

<p>Paragraph 3</p>
</body>
</html>

CSS Selector - & nesting selector

CSS nesting allows to nest one style rule inside another rule, with the selector of the child rule
relative to the selector of the parent rule.
The nesting selector shows the relationship between the parent and child rules.
• When the nested selectors are parsed by the browser, it automatically adds a whitespace
between the selectors, thus creating a new CSS selector rule.
• In situations where the nested rule needs to be attached to the parent rule (without any
whitespace), like while using the pseudo-class or compound selectors, the & nesting
selector must be prepended immediately to achieve the desired result.
• In order to reverse the context of rules, the & nesting selector can be appended.
• There can be multiple instances of & nesting selector.
Following example demonstrates the use of a & nesting selector (&):
<html>
<head>
<style>
#sample {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-size: 1.5rem;
&a{
color: crimson;
&:hover,
&:focus {
color: green;
background-color: yellow;
}
}
}
</style>
</head>
<body>
<h1>& nesting selector</h1>
<p id="sample">
Hover <a href="#">over the link</a>.

IM Developed by: Date Created: Revision No.

</p>
</body>
</html>

Lesson 4.4 CSS Colors

CSS uses color values to specify a color. Typically, these are used to set a color either for the
foreground of an element (i.e. its text) or else for the background of the element. They can also
be used to affect the color of borders and other decorative effects.

Syntax
CSS allows to set colors of an element in a variety of ways. Let's check all the possible available
syntax to set the height of an element.

Named Colors
A CSS named color is the name of a color, such as red, blue, black, or lightseagreen.

color: blue;
border: 1px solid red;
background: aliceblue;

RGB Hexadecimal Colors

color: #f09;
border: 1px solid #ff0099;
background: #eee;

RGB (Red, Green, Blue) Colors

color: rgb(255 0 153);
border: 1px solid rgb(255 0 153);
background: rgb(255 0 153 / 80%);

HSL (Hue, Saturation, Lightness) Colors

color: hsl(150 30% 60%);
border: 1px solid hsl(150 30% 60%);
background: hsl(150 30% 60% / 0.8);

HWB (Hue, Whiteness, Blackness) Colors

color: hwb(12 50% 0%);
border: 1px solid hwb(12 50% 0%);
background: hwb(194 0% 0% / 0.5);

LAB (Lightness, A-axis, B-axis) Colors

color: lab(50% 40 59.5);
border: 1px solid lab(50% 40 59.5);
background: lab(50% 40 59.5 / 0.5);

IM Developed by: Date Created: Revision No.

LCH (Lightness, Chroma, Hue) Colors

color: lch(52.2% 72.2 50);
border: 1px solid lch(52.2% 72.2 50);
background: lch(52.2% 72.2 50 / 0.5);

Oklab (Lightness, A-axis, B-axis) Colors

color: oklab(59% 0.1 0.1);
border: 1px solid oklab(59% 0.1 0.1);
background: oklab(59% 0.1 0.1 / 0.5);

Oklch (Lightness, Chroma, Hue) Colors

color: oklch(60% 0.15 50);
border: 1px solid oklch(60% 0.15 50);
background: oklch(60% 0.15 50 / 0.5);

These formats are explained in more detail in the following sections −

CSS Colors - Keyword
CSS supports the color names to be directly passed to the property background-color and color.
140 standard color names are supported by CSS.
Few of the examples are listed in the table below:
Color Color Name

Black

Red

Blue

Green

Aquamarine

Example
Here is an example:
<html>
<head>
<style>
div {
background-color: aqua;
padding: 10px;
}
</style>
</head>
<body>
<h3>Color Keyword - example</h3>
IM Developed by: Date Created: Revision No.
COMP 20163 WEB DEVELOPMENT Page No.
Mr. Owen Harvey Balocon INSTRUCTIONAL MATERIAL October 24, 2023 2023 - 000 ___ of ___
Instructor
Polytechnic University of the Philippines COMP 20163 WEB DEVELOPMENT
Santa Rosa Branch INSTRUCTIONAL MATERIAL

<p>As the keyword passed is aqua, the background will appear as aqua colored..</p>
<div>
This div element has a colored background based on the color keyword passed, i.e aqua.
</div>
</body>
</html>

CSS Colors - Hexadecimal Codes

A hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent a red value,
the next two are a green value(GG), and the last are the blue value(BB).
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc
Paintshop Pro, or even using Advanced Paint Brush.
Each hexadecimal code will be preceded by a pound or hash sign '#'. Following are the examples
of hexadecimal notation.
To specify the hexadecimal codes, you can use upper case or lower case letters.
Color Color Hexadecimal Code

#000000

#FF0000

#00FF00

#0000FF

#FFFF00

#00FFFF

#FF00FF

#C0C0C0

#FFFFFF
Example
Here is an example:
<html>
<head>
<style>
div{
background-color: #00ff00;
padding: 10px;
}
</style>
</head>
<body>
IM Developed by: Date Created: Revision No.
COMP 20163 WEB DEVELOPMENT Page No.
Mr. Owen Harvey Balocon INSTRUCTIONAL MATERIAL October 24, 2023 2023 - 000 ___ of ___
Instructor
Polytechnic University of the Philippines COMP 20163 WEB DEVELOPMENT
Santa Rosa Branch INSTRUCTIONAL MATERIAL

<h3>Hexadecimal code - example</h3>

<p>As the hexadecimal code is #00ff00 the background will appear green.</p>
<div>
This div element has a green background.
</div>
</body>
</html>

CSS Colors - Short Hexadecimal Codes

This is a shorter form of the six-digit notation. In this format, each digit is replicated to arrive at an
equivalent six-digit value. For example: #6A7 becomes #66AA77.
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, Jasc
Paintshop Pro, or even using Advanced Paint Brush.
Each short hexadecimal code will be preceded by a pound or hash sign '#'. Following are the
examples of short hexadecimal notation.
Color Short Hexadecimal Code

#000

#F00

#0F0

#0FF

#FF0

#0FF

#F0F

#FFF
Example
Here is an example:
<html>
<head>
<style>
div{
background-color: #00f;
padding: 10px;
color:#fff;
}
</style>
</head>
<body>

IM Developed by: Date Created: Revision No.

<h3>Short Hexadecimal code - example</h3>

<p>As the short hexadecimal code is #00f the background will appear blue.</p>
<div>
This div element has a blue background.
</div>
</body>
</html>

CSS Colors - RGB Values

• This color value is specified using the rgb( ) property.
• It takes three values, one each for red, green, and blue.
• The value can be an integer between 0 and 255 or a percentage.
All the browsers does not support rgb() property of color so it is recommended not to use it.
Following is the example to show few colors using RGB values.
Color Color RGB

rgb(0,0,0)

rgb(255,0,0)

rgb(0,255,0)

rgb(0,0,255)

rgb(255,255,0)

rgb(0,255,255)

rgb(255,0,255)

rgb(192,192,192)

rgb(255,255,255)
Example
Here is an example:
<html>
<head>
<style>
div{
background-color: rgb(255,0,255);
padding: 10px;
}
</style>
</head>
<body>
<h3>RGB - example</h3>
IM Developed by: Date Created: Revision No.
COMP 20163 WEB DEVELOPMENT Page No.
Mr. Owen Harvey Balocon INSTRUCTIONAL MATERIAL October 24, 2023 2023 - 000 ___ of ___
Instructor
Polytechnic University of the Philippines COMP 20163 WEB DEVELOPMENT
Santa Rosa Branch INSTRUCTIONAL MATERIAL

<p>As the rgb(255,0,255) is set the background will appear accordingly.</p>

<div>
This div element has a colored background based on the rgb values.
</div>
</body>
</html>

CSS Colors – RGBA Values

• This color value is specified using the rgba( ) property.
• It takes four values, one each for red, green, and blue and the last value as the alpha
(transparency) value.
• The alpha value can be any value between 0 and 1.
All the browsers does not support rgba() property of color so it is recommended not to use it.
Following is the example to show few colors using RGBA values.

Example
Here is an example:
<html>
<head>
<style>
div {
background-color: rgba(255,0,255,0.2);
padding: 10px;
}
</style>
</head>
<body>
<h3>RGBA - example</h3>
<p>As the rgba(255,0,255,0.2) is set the background will appear with transparency value of
0.2.</p>
<div>
IM Developed by: Date Created: Revision No.
COMP 20163 WEB DEVELOPMENT Page No.
Mr. Owen Harvey Balocon INSTRUCTIONAL MATERIAL October 24, 2023 2023 - 000 ___ of ___
Instructor
Polytechnic University of the Philippines COMP 20163 WEB DEVELOPMENT
Santa Rosa Branch INSTRUCTIONAL MATERIAL

This div element has a colored background based on the rgba values.
</div>
</body>
</html>

CSS Colors - HSL Values

• This color value is specified using the hsl() function.
• HSL stands for hue, saturation and lightness.
• Hue is represented in degrees (0-360), saturation and lightness are represented as
percentages (0% - 100%).
Following is the example to show few colors using HSL property.
Color Color HSL

hsl(0,0%,50%)

hsl(255,80%,70%)

hsl(290,100%,60%)

hsl(360,70%,20%)

hsl(89,80%,67%)

Example
Here is an example:
<html>
<head>
<style>
div{
background-color: hsl(355,70%,50%);
padding: 10px;
}
</style>
</head>
<body>
<h3>HSL - example</h3>
<p>As the hsl(355,70%,50%) is set the background will appear based on the hsl values
passed.</p>
<div>
This div element has a colored background based on the hsl values hsl(355,70%,50%).
</div>
</body>
</html>

IM Developed by: Date Created: Revision No.

CSS Colors – HSLA Values

• This color value is specified using the hsl() function.
• HSLA stands for hue, saturation, lightness and alpha.
• It takes four values, first for hue, second for saturation, third for lightness and fourth is the
alpha (transparency) value.
• Hue is represented in degrees (0-360), saturation and lightness are represented as
percentages (0% - 100%), and alpha value can be in between 0 and 1.
Following is the example to show few colors using HSLA property.

Example
Here is an example:
<html>
<head>
<style>
div{
background-color: hsla(355,70%,50%,0.4);
padding: 10px;
}
</style>
</head>
<body>
<h3>HSLA - example</h3>
<p>As the hsla(355,70%,50%,0.4) is set the background will appear based on the hsla values
passed, with high transparency.</p>
<div>
This div element has a colored background based on the hsl values hsla(355,70%,50%,0.4).
</div>
</body>
</html>

IM Developed by: Date Created: Revision No.

CSS colors - currentcolor keyword

The currentcolor keyword takes the value of the color property of an element. It can be passed
to any other styling property using the keyword currentcolor.
Example
Here is an example:
<html>
<head>
<style>
div{
color: red;
border: 5px solid currentcolor;
}
</style>
</head>
<body>
<h2>The currentcolor Keyword</h2>
<p>As the currentcolor keyword is used for border after color property is set as red, the border
will also appear red.</p>
<div>
This div element has a red text color and a red border.
</div>
</body>
</html>

Lesson 4.5 CSS Backgrounds

This chapter teaches you how to set backgrounds of various HTML elements. You can set the
following background properties of an element −

• The background-color property is used to set the background color of an element.

• The background-image property is used to set the background image of an element.
• The background-repeat property is used to control the repetition of an image in the
background.
• The background-position property is used to control the position of an image in the
background.
• The background-attachment property is used to control the scrolling of an image in the
background.
• The background property is used as a shorthand to specify a number of other
background properties.

IM Developed by: Date Created: Revision No.

Set the Background Color

Following is the example which demonstrates how to set the background color for an element.
<html>
<head>
</head>

<body>
<p style = "background-color:yellow;">
This text has a yellow background color.
</p>
</body>
</html>

Set the Background Image

We can set the background image by calling local stored images as shown below −

<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-color: #cccccc;
}
</style>
</head>

<body>
<h1>Hello World!</h1>
</body>
<html>

Repeat the Background Image

The following example demonstrates how to repeat the background image if an image is small.
You can use no-repeat value for background-repeat property if you don't want to repeat an image,
in this case image will display only once.
By default background-repeat property will have repeat value.

<html>
<head>
<style>
body {
background-image: url("/css/images/css.jpg");
background-repeat: repeat;
}
</style>