Unit3_TCP[1]

Unit-3
Cascading Style Sheets (CSS)
Dr. Pramod T.C

Assistant Professor
Dept. of CSE
SIT
pramodtc@sit.ac.in
CSS
• CSS stands for Cascading Style Sheet.
• CSS is used to design HTML tags.
• CSS is a widely used language on the web.
• Cascading Style Sheets (CSS) is a simple mechanism for adding style
(e.g., fonts, colors, spacing) to Web documents.
• The current version of CSS is CSS3,
CSS Rules
• A CSS rule consists of a selector and a declaration block.
Selector: Selector indicates the HTML element you want to style. It

could be any tag like <h1>,<p>, <title> etc.
The declaration block contains one or more declarations separated by

semicolons. Ex: color: blue; font-size: 12 px;
Each declaration includes a CSS property name and a value, separated

by a colon. Browsers determine which elements to apply the CSS rules
to with the help of selectors.
CSS Syntax and Style
<head>
<style type="text/css">
hr {width: 50%;}
h2, p {font-style: italic; color: blue;}
</style>
</head>
Different types of selectors
• CSS selectors are used to select the content you want to style.
Selectors are the part of CSS rule set.
There are several different types of selectors in CSS.

1. CSS Element Selector/type selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
CSS Element Selector/Type selector
• A type selector use an element type (e.g., hr) to match all instances
of that element type and then apply specified formatting features to
those instances.
• The element selector selects HTML elements based on the element

name.
• Example: hr {width: 50%;}
Element type
CSS Element Selector/Type selector Example
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>

<p>And me!</p>
</body>
</html>
CSS id Selector
• The id selector uses the id attribute of an HTML element to select a

specific element.
• The id of an element is unique within a page, so the id selector is

used to select one unique element!
• To select an element with a specific id, write a hash (#) character,

followed by the id of the element.
CSS id Selector example
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>
</body>
</html>
CSS class Selector
• The class selector selects HTML elements with a specific class

attribute.
• To select elements with a specific class, write a period (.) character,

followed by the class name.
• Note: A class name cannot start with a number!

CSS class Selector example1
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">Red and center-aligned heading</h1>

<p>Red and center-aligned paragraph.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mark Twain Quotes</title>
<style>
.red {background-color: tomato;}
.white {background-color: white;}
.blue {background-color: skyblue;}
q {font-family: Impact;}
</style>
</head>
<body>
<h1>Mark Twain Quotes</h1>
<q class="red">It is better to keep your mouth closed and
let people think you are a fool than to open it and
remove all doubt.</q><br>
<q class="white">Get your facts first, then you can distort
them as you please.</q><br>
<q class="blue">Never put off till tomorrow what you can do
the day after tomorrow.</q>
</body>
CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p>Me too!</p>
<p>And me!</p>
</body>
</html>
CSS Group Selector
• The grouping selector selects all the HTML elements with the same
style definitions.
<!DOCTYPE html>
<html>
<head>
<style>
h1, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading!</h2>
<p>This is a paragraph.</p>
</body>
</html>
CSS Example - Universal and ID selector
<!DOCTYPE html>
<html>
<head>
<style>
*{
text-align: center;
color: blue;
}
#p{
color: red;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on the page will be affected by the style.</p>
<p id="p">Me too!</p>
<p>And me!</p>
</body>
</html>
Quiz
https://www.w3schools.com/css/exercise.asp?filename=exercise_selectors1
Span and div Elements
Span and div are both generic HTML elements that group together
related parts of a web page.
• A <span> element which is used to color a part of a text.
• The <span> tag is an inline container used to mark up a part of a
text, or a part of a document.
The div tag is known as Division
<!DOCTYPE html> tag. The div tag is used in HTML
<html lang="en"> to make divisions of content on
<head> the web page like (text, images,
<meta charset="utf-8"> header, footer, navigation bar,
<meta name="author" content="John Dean"> etc). Div tag has both
<title>Halloween on the River</title> opening(<div>) and closing
<style> (</div>) tags
div {
color: white;
background-color: #009900;
margin: 2px;
font-size: 22px;
}
</style>
</head>
<body>
<div> div tag </div>
When margin: 2px; is not specified
</body>
</html>
Span and div Elements
<!DOCTYPE html>
<html>
<head>
<title>span tag</title>
</head>
<body>
<h2>Welcome To GFG</h2>
<div><span style="background-color:lightgreen">
GeeksforGeeks</span> is A Computer Science Portal
where you can<span style="color:blue;">
Publish</span> your own <span
style="background-color:lightblue;">articles</span>
and share your knowledge with the world!!
</div>
</body>
</html>
<!DOCTYPE html> Span and div Elements
<html lang="en">
<head>
<meta name="author" content="John Dean">
<title>Halloween on the River</title>
<style>
.orange {color: darkorange;}
.white {color: white;}
.blue {color: blue;}
.black {color: black;}
.orange-background {background-color: orange;}
</style>
</head>
<body>
<div class="blue">
Parkville's Halloween on the River, every weekend in October.<br>
Corn maze: <span class="white orange-background">$10</span><br>
All you can eat pumpkins:
<span class="black orange-background">$15</span>
</div>
</body>
</html>
Lab Question
<!Doctype html> <body>
<head> <h2>Importanceof an <span
<meta charset="UTF-8"> class="income">income</span>statement</h2>
<title>Document</title> <p> An <span class="income">income</span> statement is a
<style> financial statement that summarizes the revenues, costs and
.expenses { <span class="expenses">expenses</span> incurred during a
background-color: #f0f; specific period of time, usually a fiscal quarter or year. The <span
} class="income">income</span> statement is also known as the
<span class="profit">profit</span> and loss statement (P&L) or
.income {
the statement of operations. It is one of the three key financial
background-color: #0ff; statements that report the financial performance of a company
} over a period of time. The other two key financial statements are
.profit { the balance sheet and the cash flow statement.
background-color: #f00; </p>
} <p>
.oldPrice { <span class="oldPrice">The current price is 50₹</span> <span
text-decoration: line-through; class="newPrice">and new price is 40₹</span>
</p>
color:black;
</body>
}
</html>
.newPrice {
color: red;
}
</style>
</head>
Places where CSS rules can be defined
CSS Properties
style Attribute
• <h2 style="text-decoration:underline;">Welcome!</h2>
• The style attribute is a global attribute, which means it can be
used with any element.
CSS Properties
Color Properties – color & background-
color
color specifies the color of an element’s text.
background-color specifies the background color of an element.
RGB value specifies amounts of red, green, and blue
RGBA value specifies red, green, and blue, plus amount of
opacity
HSL value specifies amounts of hue, saturation, and
lightness
HSLA value specifies hue, saturation, and lightness, plus
amount of opacity
color
<!doctype html>
<html>
<head>
<style>
.roofColor {color: red;}
</style>
</head>
<body>
<p>
Mackay Hall's roof is <span class="roofColor">dark slate
gray</span>.
</p>
</body>
</html>
RGB Values for Color
• RGB stands for red, green, and blue. An RGB value specifies
the amounts of red, green, and blue that mix together to form
the displayed color.
• To specify an amount of a color, you can use a percentage,
an integer, or a hexadecimal number
• percentage—0% to 100% for each color
• integer—0 to 255 for each color
• hexadecimal—00 to ff for each color
RGB Values with Percentages
• To specify an RGB value with percentages, use this format:
rgb(red-percent, green-percent, blue-percent)
<style>
.eggplant {background-color: rgb(52%,20%,45%);}
</style>
• Black color -use the least intensity (a value of 0%) for each of
the three colors
.black {background-color: rgb(0%,0%,0%);}
• White color -use the greatest intensity (a value of 100%) for
each of the three colors.
.white {color: rgb(100%,100%,100%);}
RGB Values with Integers
• integer—0 to 255 for each color
• To specify an RGB value with integers, use this format:
rgb(red-integer,green-integer,blue-integer)
<style>
.favorite1 {color: rgb(144,238,144);}
.favorite2 {color: rgb(127,127,127);}
</style>
RGB Values with hexadecimal
• In hexadecimal number system, there are 16 unique symbols—0, 1,
2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F.
For hexadecimal RGB values, you’ll need to use the format #rrggbb
• rr = two hexadecimal digits that specify the amount of red
• gg = two hexadecimal digits that specify the amount of green
• bb = two hexadecimal digits that specify the amount of blue
• #000000 - indicates black color
• #ffffff –indicates white color
<style>
.sapphire {background-color: #0f42ba;}
</style>
Color
RGB Calculator
https://www.w3schools.com/colors/colors_rgb.asp
RGBA Colors
• RGBA color values are an extension of RGB color values 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).
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,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>
</html>
Opacity
• The CSS opacity property sets the opacity for the whole
element (both background color and text will be
opaque/transparent).
• The opacity property value must be a number between 0.0
(fully transparent) and 1.0 (fully opaque).
<!DOCTYPE html>
<html>
<head>
<style>
#p1 {background-color:rgb(255,0,0);opacity:0.6;}
</style>
</head>
<body>
<h1>Define Colors With Opacity</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>
</html>
Note
rgba(red, green, background-color:rgba(255,0,0,0.3); Effect to
blue, alpha) background
color
rgb(red, green, background-color:rgb(0,255,0);opacity:0.6;} Effect to Both
blue);opacity:0.6;} background
color and text
HSL Colors
• HSL stands for Hue, Saturation and Lightness.
• An HSL color value is specified with: hsl(hue, saturation, lightness).
➢ Hue is a degree on the color wheel (from 0 to 360):
0 (or 360) is red
120 is green
240 is blue
HSL Colors
➢ Saturation: Saturation can be described as the
intensity of a color. It is a percentage value; 0% means
a shade of gray and 100% is the full color.
https://www.w3schools.com/css/css_colors_hsl.asp
HSL Colors
• Lightness: The lightness of a color can be described as how
much light you want to give the color, where 0% means no
light (black), 50% means 50% light (neither dark nor light) and
100% means full lightness (white).
HSL Colors
<!DOCTYPE html>
<html>
<body>
<h1>HSL Saturation</h1>
<h2 style="background-color:hsl(0, 100%, 50%);">Red=0, saturation=100%

Lightness=50%</h2>
<h2 style="background-color:hsl(120, 50%, 70%);">Green=0, saturation=50%
Lightness=70%</h2>
<h2 style="background-color:hsl(120, 30%, 40%);">Green=0, saturation=50%
Lightness=70%</h2>
</body>
</html>
HSLA Value
• HSLA color values are an extension of HSL color values with an

alpha channel - which specifies the opacity for a color.
• An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
<!DOCTYPE html>
<html>
<body>
<h1>Make transparent colors with HSLA</h1>

<h2 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h2>
</body>
</html>
Font Properties
font-style property
• The font-style property specifies whether the text is
to be displayed normally or slanted. Here are the
valid values for the font-style property:
<head>
<style>
#a {
font-style: normal;
}
#b {
font-style: italic;
}
#c {
font-style: oblique;
}
</style>
</head>
<body>
<h1>The font-style Property</h1>
<p id="a">This is a paragraph, normal.</p>

<p id="b">This is a paragraph, italic.</p>
<p id="c">This is a paragraph, oblique.</p>
</body>
</html>
Font Properties
font-variant Property
The font-variant property specifies how lowercase letters are
displayed
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>The font-variant Property</h1>
<p class="normal">My name is Hege Refsnes.</p>

<p class="small">My name is Hege Refsnes.</p>
</body>
</html>
font-weight Property
• The font-weight property specifies the boldness of the text
characters.
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.thick {
font-weight: bold;
}
p.thicker {
font-weight: 0;
}
</style>
</head>
<body>
<h1>The font-weight Property</h1>
<p class="normal">This is a paragraph.</p>
<p class="light">This is a paragraph.</p>
<p class="thick">This is a paragraph.</p>
<p class="thicker">This is a paragraph.</p>
</body>
</html>
font-size Property
• The font-size property specifies the size of the text characters.
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
font-size: 15px;
}
div.b {
font-size: xx-large;
}
div.c {
font-size: 150%;
}
</style>
</head>
<body>
<h1>The font-size Property</h1>
<div class="a">This is some text.</div>
<div class="b">This is some text.</div>
<div class="c">This is some text.</div>
</body>
</html>
font-family Property
• The font-family property specifies the font for an element.
• family-name - The name of a font-family, like "times",
"courier", "arial", etc.
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
font-family: "Times New Roman", Times, serif;
}
p.b {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
<body>
<h1>The font-family Property</h1>
<p class="a">This is a paragraph, shown in the Times New Roman font.</p>
<p class="b">This is a paragraph, shown in the Arial font.</p>
</body>
</html>
font Shorthand Property
To shorten the code, it is also possible to specify all the individual
font properties in one property.
The font property is a shorthand property for:
• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family
The font-size and font-family values are required. If one of the
other values is missing, their default value are used.
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
font: 20px Arial, sans-serif;
}
p.b {
font: italic bold 12px/30px Georgia, serif;
}
</style>
</head>
<body>
<h1>The font Property</h1>
<p class="a">This is a paragraph. The font size is set to 20 pixels, and the font
family is Arial.</p>
<p class="b">This is a paragraph. The font is set to italic and bold, the font size is
set to 12 pixels, the line height is set to 30 pixels, and the font family is
Georgia.</p>
</body>
</html>
Absolute Units
• In CSS, we categorize measurement units as either absolute or
relative units.
• Absolute units specify a fixed length value. It doesn't matter if the
screen's width or height changes, the value will remain fixed.
• Units that fall under this category include:
✓ mm (millimeters)
✓ cm (centimeters): 10mm makes 1cm
✓ in (inches): 2.54cm makes 1in
✓ pt (points): 1/72in makes 1pt
✓ pc (picas) – 12pt makes 1pc
✓ px (pixel)– 0.75pt makes 1px
• For high-resolution media like print documents, it is recommended

that you use cm, mm, or pt. For webpages, px is the recommended
unit.
https://www.freecodecamp.org/news/absolute-and-relative-css-units/
<style>
Absolute Units
.container {
width: 500px; <body>
border: 2px solid black; <div class='container'>
padding: 20px; <div class='card'>
} Hello
</div>
.card { </div>
width: 60px; </body>
border: 2px solid green;
padding: 10px;
}
.container {
width: 800px;
border: 2px solid black;
padding: 20px;
}
.card {
width: 60px;
padding: 10px;
}
Relative units
• Relative units are not fixed. Their values are "relative" to another
value. This means that when that other value changes, the relative
unit value will also change.
Units that fall under this category include:

• % (percentage): relative to the size of the parent element
• em (font size): relative to the size of the font
• rem (root em): relative to the font size of the root element
• vw (viewport width): relative to the width of the viewport
• vh (viewport height): relative to the height of the viewport
Relative units
.container {
width: 800px; <body>
border: 2px solid black; <div class='container'>
padding: 20px;
<div class='card'>
}
Hello
.card { </div>
width: 60%; </div>
border: 2px solid green; </body>
padding: 10px;
}
.container {
width: 800px;
border: 2px solid black;
padding: 20px;
}
.card {
width: 80%;
padding: 10px;
}
line-height Property
• The line-height property specifies the height of a line.
<head> <body>
<style>
div.a { <h1>The line-height Property</h1>
line-height: normal;
} <h2>line-height: normal (default):</h2>
<div class="a">This is a paragraph <br>
div.b { The standard line height is about 110% to 120%.</div>
line-height: 1.6;
} <h2>line-height: 1.6 (recommended):</h2>
<div class="b">This is a paragraph.<br>
div.c { The line height is here set to 1.6.<br>
line-height: 80%; the line height will be relative to the font size.</div>
}
<h2>line-height: 80%:</h2>
</style> <div class="c">This is a paragraph with a smaller line-height.<br>
</head> The line height is here set to 80%.</div>
</body>
</html>
line-height Property
https://www.w3schools.com/cssref/tryit.php?filename=trycss_line-height
Text Properties
• CSS text formatting properties is used to format text and style
text.
• Properties: text-align, text-decoration, text-transform, and
text-indent.
text-align Property
The text-align property is used to set the horizontal alignment of a

text.
Text Properties
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
text-decoration: overline;
text-transform: uppercase;
}
h2 {
text-decoration: line-through;
text-indent:+2em;
color:blue;
}
</style>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
</body>
text-align Property
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
} https://www.w3schools.com/css/tryit.asp?filename=trycs
h3 { s_text-align
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left and right.</p>
</body>
</html>
text-decoration Property
• The text-decoration-line property is used to add a decoration line to text.
text-decoration Property
<!DOCTYPE html>
<html> <body>
<head> <h1>Overline text decoration</h1>
<style> <h2>Line-through text decoration</h2>
h1 { <h3>Underline text decoration</h3>
text-decoration: overline; <p class="ex">Overline and underline text
} decoration.</p>
h2 { <p><strong>Note:</strong> It is not recommended
text-decoration: line-through; to underline text that is not a link, as this often
} confuses
h3 { the reader.</p>
text-decoration: underline; </body>
} </html>
p.ex {
text-decoration: overline underline;
}
</style>
</head>
text-transform Property
• The text-transform property controls the text’s capitalization.

text-transform Property
<!DOCTYPE html> <body>
<html> <h1>The text-transform Property</h1>
<head>
<style> <div class="a">Lorem ipsum dolor sit amet, consectetur
div.a { adipiscing elit.</div>
text-transform: uppercase; </br>
}
div.b { <div class="b">Lorem ipsum dolor sit amet, consectetur
text-transform: lowercase; adipiscing elit.</div>
} </br>
div.c { <div class="c">Lorem ipsum dolor sit amet, consectetur
text-transform: capitalize; adipiscing elit.</div>
}
</style> </body>
</head> </html>
text-indent Property
• The text-indent property specifies the indentation of the first
line in a text-block.
text-indent: 50px:
text-indent:-2em;
text-indent: 20%;
<body>
<h1>The text-indent Property</h1>
<!DOCTYPE html>
<h2>text-indent: 50px:</h2>
<html>
<div class="a">
<head>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </p>
<style>
</div>
div.a {
text-indent: 50px;
<h2>text-indent: -2em:</h2>
}
<div class="b">
div.b {
text-indent:+2em;
</div>
}
div.c {
<h2>text-indent: 20%:</h2>
text-indent: 20%;
<div class="c">
}
</style>
</div>
</head>
</body>
</html>
https://www.w3schools.com/cssref/tryit
.php?filename=trycss_text-indent
Border Properties
• The border properties allow you to specify the appearance of
borders that surround elements.
• border-style, border-width, and border-color properties,

border shorthand property
border-style Property
• The border-style property specifies the type of border that
surrounds the matched element
border-width Property
• The border-width property specifies the width of the border that
surrounds the matched element.
border-color Property
• The border-color property specifies the color of the border that
surrounds the matched element.
• Color values can be in the form of a color name, an RGB value, an

RGBA value, an HSL value, or an HSLA value.
border-color Property
<!DOCTYPE html>
<html>
<head>
<style>
h2 {
border-style: dashed ;
border-width:thick;
border-color:blue;
}
h3 {
border-style: dotted ;
border-width:thin;
border-color:red;
}
</style>
</head>
<body>
<h2>A heading with a dotted blue border</h2>
<h3>A heading with a dotted blue border</h3>
</body>
</html>
border Shorthand Property
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
border: 5px red dashed;
}
</style>
</head>
<body>
<h1>A heading with a solid red border</h1>
</body>
</html>
Element Box, padding Property, margin
Property (CSS Box Model)
CSS box model is used to develop the design and structure of a web page. It can be
used as a set of tools to personalize the layout of different components.
CSS Box Model
• In CSS, the term "box model" is used when talking about design
and layout.
• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is
transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is
transparent

Unit3_TCP[1]

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit3_TCP[1]

Uploaded by

Copyright:

Available Formats

Unit-3

Cascading Style Sheets (CSS)

Dr. Pramod T.C

Selector: Selector indicates the HTML element you want to style. It

The declaration block contains one or more declarations separated by

Each declaration includes a CSS property name and a value, separated

There are several different types of selectors in CSS.

• The element selector selects HTML elements based on the element

• Example: hr {width: 50%;}

<p>Every paragraph will be affected by the style.</p>

• The id selector uses the id attribute of an HTML element to select a

• The id of an element is unique within a page, so the id selector is

• To select an element with a specific id, write a hash (#) character,

<p id="para1">Hello World!</p>

• The class selector selects HTML elements with a specific class

• To select elements with a specific class, write a period (.) character,

• Note: A class name cannot start with a number!

<h1 class="center">Red and center-aligned heading</h1>

<h1 class="center">This heading will not be affected</h1>

<h2 style="background-color:hsl(0, 100%, 50%);">Red=0, saturation=100%

• HSLA color values are an extension of HSL color values with an

<h1>Make transparent colors with HSLA</h1>

<p id="a">This is a paragraph, normal.</p>

<p class="normal">My name is Hege Refsnes.</p>

<p class="a">This is a paragraph, shown in the Times New Roman font.</p>

<p class="b">This is a paragraph, shown in the Arial font.</p>

• For high-resolution media like print documents, it is recommended

Units that fall under this category include:

The text-align property is used to set the horizontal alignment of a

• The text-transform property controls the text’s capitalization.

• border-style, border-width, and border-color properties,

• Color values can be in the form of a color name, an RGB value, an

<h1>A heading with a solid red border</h1>

You might also like