Scribd
Upload
27 views

Unit-Ii CSS

Uploaded by

anshbamotra11
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
27 views

Unit-Ii CSS

Uploaded by

anshbamotra11
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 81

UNIT-II CSS

What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or in
other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at
once
• External style sheets are stored in CSS files
Why Use CSS?
• CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.
• CSS saves time: You can write CSS once and reuse the same sheet in multiple
HTML pages.
• Easy Maintenance: To make a global change simply change the style, and all
elements in all the webpages will be updated automatically.
• Search Engines: CSS is considered a clean coding technique, which means search
engines won’t have to struggle to “read” its content.
• Offline Browsing: CSS can store web applications locally with the help of an
offline cache. Using this we can view offline websites.
Introduction to CSS

CSS Versions Release Year

CSS Syntax:
• CSS comprises style rules that are interpreted by the browser and then applied
to the corresponding elements in your document.
• A style rule set consists of a selector and declaration block.
Introduction to CSS

• Selector: A selector in CSS is used to target and select specific HTML elements to
apply styles.
• Declaration: A declaration in CSS is a combination of a property and its
corresponding value.
// HTML Element
<h1>GeeksforGeeks</h1>
// CSS Style
h1 { color: blue; font-size: 12px; }
Where -
Selector - h1
Declaration - { color: blue; font-size: 12px; }
• The selector points to the HTML element that 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.
CSS declaration always ends with a semicolon, and declaration blocks are
surrounded by curly braces.
Introduction to CSS

CSS PROGRAM EXAMPLE:


<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p{
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
Introduction to CSS

CSS Solved a Big Problem:


• HTML was NEVER intended to contain tags for formatting a web page!
• HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
• When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers.
• Development of large websites, where fonts and color information were added
to every single page, became a long and expensive process.
• To solve this problem, the World Wide Web Consortium (W3C) created CSS.
• CSS removed the style formatting from the HTML page!
CSS Syntax:
• A CSS rule consists of a selector and a declaration block.
Introduction to CSS

• 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.
CSS Example 2:
• In this example all <p> elements will be center-aligned, with a red text color:
<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red;
text-align: center;
}
Introduction to CSS

</style>
</head>
<body>
<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>
</body>
</html>
Output:

• p is a selector in CSS (it points to the HTML element you want to style: <p>).
• color is a property, and red is the property value
• text-align is a property, and center is the property value
CSS Selectors

CSS Selectors:
• CSS selectors are used to "find" (or select) the HTML elements you want to style.
• We can divide CSS selectors into five categories:
1. Element Selector
2. ID selector
3. class selector
4. Universal selector
5. Attribute Selector
CSS element Selector:
• The element selector selects HTML elements based on the element name.
CSS Element Selector

Example 1: Styling Paragraphs using CSS Element Selectors


<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>
<p> II Year DataScience</p>
<p> Welcome to WDD</p>
</body>
</html>
CSS Element Selector

Example 2: Styling Headings using CSS Element Selectors


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: green;
font-size: 24px;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<h2>This is another Heading</h2>
</body>
</html>
CSS Element Selector

Example 3: Styling Lists using CSS Element Selectors


<!DOCTYPE html>
<html>
<head>
<style>
li {
color: purple;
font-size: 18px;
}
</style>
</head>
<body>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>
CSS ID Selector

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.
Example 1: Styling a Specific Element by ID using ID selector
<!DOCTYPE html>
<html>
<head>
<style>
#special-paragraph {
color: red;
font-weight: bold;
}
</style>
CSS ID Selector

</head>
<body>
<p id="special-paragraph">This is a special paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Output:
CSS ID Selector

Example 2: Styling a Specific Element by ID with Specificity using ID Selector


<!DOCTYPE html>
<html>
<head>
<style>
#container #special-paragraph {
color: blue;
font-style: italic;
}
</style>
</head>
<body>
<div id="container">
<p>This is a paragraph inside a container.</p>
<p id="special-paragraph">This is a special paragraph.</p>
</div>
</body>
</html>
CSS Class Selector

CSS class Selector:


• The class selector in CSS allows you to target HTML elements with a specific class
attribute.
• To select elements with a specific class, write a period (.) character, followed by
the class name.
Example 1: Styling Elements with a Class using Class Selector
<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: blue;
font-weight: bold;
}
</style>
</head>
CSS Class Selector

<body>
<p class="highlight">This paragraph has a class "highlight".</p>
<p>This paragraph doesn't have any class.</p>
<p class="highlight">Another paragraph with the class "highlight".</p>
</body>
</html>
Output:
CSS Class Selector

Example 2: Styling Different Classes Differently using Class Selector


<!DOCTYPE html>
<html>
<head>
<style>
.highlight {
color: blue;
font-weight: bold;
}
.special {
background-color: yellow;
}
</style>
</head>
<body>
<p class="highlight">This paragraph has a class "highlight".</p>
<p class="special">This paragraph has a class "special".</p>
<p class="highlight special">This paragraph has both "highlight" and "special" classes.</p>
</body>
</html>
CSS Universal Selector

CSS Universal Selector:


• The universal selector (*) selects all HTML elements on the page.
• Universal selector * in CSS selects all elements in an HTML document. It's often
used to apply styles globally or to reset default styles.
Example 1: Resetting Margins and Padding using Universal Selector
<!DOCTYPE html>
<html>
<head>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
background-color: lightgray;
padding: 20px;
}
CSS Universal Selector

</style>
</head>
<body>
<div class="container">
<p>This paragraph has some default margins and padding.</p>
</div>
</body>
</html>
Output:

In this example, the universal selector * is used to reset margins and padding for all
elements to 0 and to include the border-box sizing model. This ensures consistent
spacing throughout the document.
CSS Universal Selector

Example 2: Applying Global Font Styles using Universal Selector


<!DOCTYPE html>
<html>
<head>
<style>
*{
font-family: Arial, sans-serif;
font-size: 16px;
}
h1 {
color: blue;
}
p{
color: green;
}
CSS Universal Selector

li {
color: red;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</body>
</html>

In this example, the universal selector * is used to apply a common font family and
font size to all elements. Specific styles are then applied to headings (h1), paragraphs
(p), and list items (li).
CSS Attribute Selector

Style HTML Elements With Specific Attributes


• It is possible to style HTML elements that have specific attributes or attribute
values.
CSS [attribute] Selector:
• The [attribute] selector is used to select elements with a specified attribute.
• In CSS, attribute selectors allow you to target HTML elements based on the
presence of specific attributes or the values of those attributes.
Example 1: Selecting Elements with a Specific Attribute
<!DOCTYPE html>
<html>
<head>
<style>
a[href] {
color: blue;
}
</style>
CSS Attribute Selector

</head>
<body>
<a href="#">Link 1</a>
<a href="https://www.w3schools.com/">Link 2</a>
<a>Link 3</a>
</body>
</html>
Output:

In this example, the attribute selector a[href] targets <a> elements that have an
href attribute. It sets the color of these links to blue.
CSS Attribute Selector

Example 2: Selecting Elements with a Specific Attribute Value Using Attribute Selector
<!DOCTYPE html>
<html>
<head>
<style>
input[type="text"] {
border: 1px solid green;
}
input[type="password"] {
border: 1px solid red;
}
</style>
</head>
<body>
<input type="text" name="username">
<input type="password" name="password">
</body>
</html>
In this example, attribute selectors are used to target <input> elements with specific type
attribute values. It sets the border color of text inputs to green and password inputs to red.
CSS Colors

• CSS supports a variety of color representations, including named colors,


hexadecimal colors, RGB colors, RGBA colors, HSL colors, and HSLA colors. Here's
a brief overview of each:
Named Colors: CSS provides a set of predefined color names, such as red, blue,
green, etc.
example:
color: red;
Hexadecimal Colors: Hexadecimal notation represents colors using six hexadecimal
digits(RRGGBB), each pair representing the intensity of red, green, and blue (in that
order), ranging from 00 to FF.
example:
color: #ff0000; /* red */
RGB Colors: RGB (Red, Green, Blue) notation represents colors using values for red,
green, and blue components, each ranging from 0 to 255.
example:
color: rgb(255, 0, 0); /* red */
CSS Colors

RGBA Colors: RGBA (Red, Green, Blue, Alpha) notation is similar to RGB, but
includes an additional alpha value representing the opacity of the color, ranging
from 0 (fully transparent) to 1 (fully opaque).
example: color: rgba(255, 0, 0, 0.5); /* semi-transparent red */
HSL Colors: HSL (Hue, Saturation, Lightness) notation represents colors using values
for hue (0 to 360), saturation (0% to 100%), and lightness (0% to 100%).
example:
color: hsl(0, 100%, 50%); /* red */
HSLA Colors: HSLA (Hue, Saturation, Lightness, Alpha) notation is similar to HSL, but
includes an additional alpha value representing the opacity of the color, ranging
from 0 (fully transparent) to 1 (fully opaque).
example:
color: hsla(0, 100%, 50%, 0.5); /* semi-transparent red */
CSS Colors

CSS RGB Colors:


• An RGB color value represents RED, GREEN, and BLUE light sources.
RGB Value:
• In CSS, a color can be specified as an RGB value, using this formula:
rgb(red, green, blue)
• Each parameter (red, green, and blue) defines the intensity of the color between
0 and 255.
• For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest
value (255) and the others are set to 0.
• To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
• To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
Example:
CSS Colors

Example 1: CSS RGB Colors


<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using RGB values</h1>
<h2 style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</h2>
<h2 style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</h2>
<h2 style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</h2>
<h2 style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</h2>
<h2 style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</h2>
<h2 style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</h2>
</body>
</html>

Output:
CSS Colors

Shades of gray are often defined using equal values for all the 3 light sources

Example 2: Different shades of gray using RGB Color


<!DOCTYPE html>
<html>
<body>
<h1>Shades of gray</h1>
<p>By using equal values for red, green, and blue, you will get different shades of
gray:</p>
<h2 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h2>
<h2 style="background-color:rgb(90, 90, 90);">rgb(90, 90, 90)</h2>
CSS Colors

<h2 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h2>


<h2 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h2>
<h2 style="background-color:rgb(210, 210, 210);">rgb(210, 210, 210)</h2>
<h2 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h2>
</body>
</html>
Output:
CSS Colors

Example3:
<!DOCTYPE html>
<html>
<head>
<style>
.colored-box {
width: 200px;
height: 200px;
background-color: rgb(255, 0, 0);
color: white;
text-align: center;
line-height: 200px; /* Vertical center align */
}
</style>
</head>
<body>
<div class="colored-box">
This is a colored box.
</div>
</body>
</html>
CSS Colors

RGBA Value:
• 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 (not
transparent at all):
CSS Colors

Example 1: CSS RGBA Color


<!DOCTYPE html>
<html>
<body>
<h1>Make transparent colors with RGBA</h1>
<h2 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h2>
<h2 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h2>
<h2 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h2>
</body>
</html>

Output:
CSS Colors

Example 2: CSS RGBA Color


<!DOCTYPE html>
<html>
<head>
<style>
.transparent-box {
width: 200px;
height: 200px;
background-color: rgba(255, 0, 0, 0.5); /* Semi-transparent red color using RGBA notation */
color: white;
text-align: center;
line-height: 200px; /* Vertical center align */
}
</style>
</head>
<body>
<div class="transparent-box">
This is a transparent box.
</div>
</body>
</html>
CSS Colors

CSS HEX Colors:


• hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green)
and BB (blue) hexadecimal integers specify the components of the color.
HEX Value:
• In CSS, a color can be specified using a hexadecimal value in the form:
#rrggbb
• Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and
ff (same as decimal 0-255).
• For example, #ff0000 is displayed as red, because red is set to its highest value
(ff) and the others are set to the lowest value (00).
• To display black, set all values to 00, like this: #000000.
• To display white, set all values to ff, like this: #ffffff.
CSS Colors

Example: CSS Hex Colors


<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using HEX values</h1>
<h2 style="background-color:#ff0000;">#ff0000</h2>
<h2 style="background-color:#0000ff;">#0000ff</h2>
<h2 style="background-color:#3cb371;">#3cb371</h2>
<h2 style="background-color:#ee82ee;">#ee82ee</h2>
<h2 style="background-color:#ffa500;">#ffa500</h2>
<h2 style="background-color:#6a5acd;">#6a5acd</h2>
</body>
</html>

Output:
CSS Colors

CSS HSL Colors:


• HSL stands for hue, saturation, and lightness.
HSL Value:
• In CSS, a color can be specified using hue, saturation, and lightness (HSL) in the
form:
hsl(hue, saturation, lightness)
• Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, and 240
is blue.
• Saturation is a percentage value. 0% means a shade of gray, and 100% is the full
color.
• Lightness is also a percentage. 0% is black, 50% is neither light or dark, 100% is
white
CSS Colors

Saturation:
• Saturation can be described as the intensity of a color.
• 100% is pure color, no shades of gray.
• 50% is 50% gray, but you can still see the color.
• 0% is completely gray; you can no longer see the color.
CSS 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).
CSS Colors

Example:
<!DOCTYPE html>
<html>
<body>
<h1>Specify colors using HSL values</h1>
<h2 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h2>
<h2 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h2>
<h2 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h2>
<h2 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h2>
<h2 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h2>
<h2 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h2>
</body>
</html>
CSS Colors

HSLA Color 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)
• The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all):
CSS Colors

Example: HSLA Color Value


<!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%, 0.4);">hsla(9, 100%, 64%, 0.4)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h2>
<h2 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h2>
</body>
</html>

Output:
CSS Background

CSS Background:
• The CSS background properties are used to add background effects for
elements.
CSS background-color:
• The background-color property specifies the background color of an element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
CSS Background

<body>
<h1>Hello World!</h1>
<p>This page has a light blue background color!</p>
</body>
</html>
Output:
CSS Background

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.
Example: Set the background image for a page:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url('paper.jpg');
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
</body>
</html>
CSS Background

CSS background-repeat:
• By default, the background-image property repeats an image both horizontally and
vertically.
• Some images should be repeated only horizontally or vertically, or they will look
strange, like this:
body {
background-image: url(“paper.jpg");
}
• If the image above is repeated only horizontally (background-repeat: repeat-x;), the
background will look better:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url(“paper.jpg");
background-repeat: repeat-x;
}
CSS Background

</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Here, a background image is repeated only horizontally!</p>
</body>
</html>
Output:

Tip: To repeat an image vertically, set background-repeat: repeat-y;


CSS Border

CSS Border:
• The CSS border properties allow you to specify the style, width, and color of an
element's border.
CSS Border Style:
• The border-style property specifies what kind of border to display. The following
values are allowed:
dotted - Defines a dotted border
dashed - Defines a dashed border
solid - Defines a solid border
double - Defines a double border
groove - Defines a 3D grooved border. The effect depends on the border-color value
ridge - Defines a 3D ridged border. The effect depends on the border-color value
inset - Defines a 3D inset border. The effect depends on the border-color value
outset - Defines a 3D outset border. The effect depends on the border-color value
none - Defines no border
hidden - Defines a hidden border
• The border-style property can have from one to four values (for the top border, right
border, bottom border, and the left border).
CSS Border

Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
</style>
</head>
CSS Border

<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="none">No border.</p>
<p class="hidden">A hidden border.</p>
<p class="mix">A mixed border.</p>
</body>
</html>
CSS Border

CSS Border Width:


• The border-width property specifies the width of the four borders.
• The width can be set as a specific size (in px, pt, cm etc) or by using one of the
three pre-defined values: thin, medium, or thick:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-style: dotted;
border-width: 2px;
}
CSS Border-width

p.three{
border-style: double;
border-width: thick;
}
</style>
</head>
<body>
<h2>The border-width Property</h2>
<p>This property specifies the width of the four borders:</p>
<p class="one">Some text.</p>
<p class="two">Some text.</p>
<p class="three">Some text.</p>
</body>
</html>
Output:
CSS Border-color

CSS Border Color:


• The border-color property is used to set the color of the four borders.
• The color can be set by:
name - specify a color name, like "red"
HEX - specify a HEX value, like "#ff0000"
RGB - specify a RGB value, like "rgb(255,0,0)"
HSL - specify a HSL value, like "hsl(0, 100%, 50%)"
transparent
Note: If border-color is not set, it inherits the color of the element.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.one {
border-style: solid;
border-color: red;
}
CSS Border-color

p.two {
border-style: solid;
border-color: green;
}
p.three {
border-style: dotted;
border-color: blue;
}
</style>
</head>
<body>
<h2>The border-color Property</h2>
<p>This property specifies the color of the four borders:</p>
<p class="one">A solid red border</p>
<p class="two">A solid green border</p>
<p class="three">A dotted blue border</p>
</body>
</html>
CSS Text

CSS has a lot of properties for formatting text.


Text Color:
The color property is used to set the color of the text. The color is specified by:
• a color name - like "red"
• a HEX value - like "#ff0000"
• an RGB value - like "rgb(255,0,0)"
The default text color for a page is defined in the body selector.
<!DOCTYPE html>
<html>
<head>
<style>
body {
color: blue;
}
h1 {
color: green;
}
</style>
CSS Text

</head>
<body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. </p>
<p>Another paragraph.</p>
</body>
</html>

Output:
CSS Text

Text Alignment:
• The text-align property is used to set the horizontal alignment of a text.
• A text can be left or right aligned, centered, or justified.
• The following example shows center aligned, and left and right aligned text (left
alignment is default if text direction is left-to-right, and right alignment is default
if text direction is right-to-left):
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-align: center;
}
h2 {
text-align: left;
}
CSS Text

h3 {
text-align: right;
}
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
</body>
</html>
CSS Text

CSS Text Decoration:


Add a Decoration Line to Text:
• The text-decoration-line property is used to add a decoration line to text.
Note: You can combine more than one value, like overline and underline to display lines
both over and under a text.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-decoration: overline;
}
h2 {
text-decoration: line-through;
}
h3 {
text-decoration: underline;
}
CSS Text

p.ex {
text-decoration: overline underline;
}
</style>
</head>
<body>
<h1>Overline text decoration</h1>
<h2>Line-through text decoration</h2>
<h3>Underline text decoration</h3>
<p class="ex">Overline and underline text decoration.</p>
</body>
</html>
Output:
CSS Fonts

CSS Fonts:
• Font Selection is Important
• Choosing the right font has a huge impact on how the readers experience a
website.
• The right font can create a strong identity for your brand.
• Using a font that is easy to read is important. The font adds value to your text. It is
also important to choose the correct color and text size for the font.
Generic Font Families:
In CSS there are five generic font families:
• Serif fonts have a small stroke at the edges of each letter. They create a sense of
formality and elegance.
• Sans-serif fonts have clean lines (no small strokes attached). They create a modern
and minimalistic look.
• Monospace fonts - here all the letters have the same fixed width. They create a
mechanical look.
• Cursive fonts imitate human handwriting.
• Fantasy fonts are decorative/playful fonts.
CSS Fonts

CSS font-family Property:


• In CSS, we use the font-family property to specify the font of a text.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
</style>
</head>
CSS Fonts

<body>
<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
</html>
Output:
CSS Fonts

CSS Font Style:


The font-style property is mostly used to specify italic text.
This property has three values:
• normal - The text is shown normally
• italic - The text is shown in italics
• oblique - The text is "leaning" (oblique is very similar to italic, but less supported)
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
CSS Fonts

</style>
</head>
<body>
<h1>The font-style property</h1>
<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
</body>
</html>
Output:
CSS Gradients & Shadows

CSS Gradients:
CSS gradients let you display smooth transitions between two or more specified
colors.
CSS defines three types of gradients:
• Linear Gradients (goes down/up/left/right)
• Radial Gradients (defined by their center)
• Conic Gradients (rotated around a center point)
CSS Linear Gradients:
• To create a linear gradient you must define at least two color stops.
• Color stops are the colors you want to render smooth transitions among. You
can also set a starting point and a direction (or an angle) along with the gradient
effect.
Syntax:
Background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
Direction - Top to Bottom (this is default)
CSS Gradients & Shadows

Example: Top to Bottom (this is default)


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red;
background-image: linear-gradient(red, yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Top to Bottom</h1>
<div id="grad1"></div>
</body>
</html>
CSS Gradients & Shadows

Direction - Left to Right


• The following example shows a linear gradient that starts from the left. It starts red,
transitioning to yellow:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
background-color: red;
background-image: linear-gradient(to right, red , yellow);
}
</style>
</head>
<body>
<h1>Linear Gradient - Left to Right</h1>
<div id="grad1"></div>
</body>
</html>
CSS Gradients & Shadows

Example: Rainbow Background


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 55px;
background-color: red;
background-image: linear-gradient(to right, red, orange, yellow, green, blue, indigo,
violet);
}
</style>
</head>
<body>
<div id="grad1">Rainbow Background
</div>
</body>
</html>
CSS Gradients & Shadows

CSS Radial Gradients:


• A radial gradient is defined by its center.
• To create a radial gradient you must also define at least two color stops.
Syntax:
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
• By default, shape is ellipse, size is farthest-corner, and position is center.
Radial Gradient - Evenly Spaced Color Stops (this is default)
The following example shows a radial gradient with evenly spaced color stops:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red; /* For browsers that do not support gradients */
background-image: radial-gradient(red, yellow, green);
CSS Gradients & Shadows

}
</style>
</head>
<body>
<h1>Radial Gradient - Evenly Spaced Color Stops</h1>
<div id="grad1"></div>
</body>
</html>
Output:
CSS Gradients & Shadows

Radial Gradient - Differently Spaced Color Stops


• The following example shows a radial gradient with differently spaced color stops:
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 150px;
width: 200px;
background-color: red;
background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}
</style>
</head>
<body>
<h1>Radial Gradient - Differently Spaced Color Stops</h1>
<div id="grad1"></div>
</body>
</html>
CSS Gradients & Shadows

CSS Conic Gradients:


• A conic gradient is a gradient with color transitions rotated around a center
point.
• To create a conic gradient you must define at least two colors.
Syntax:
background-image: conic-gradient([from angle] [at position,] color [degree],
color [degree], ...);
• By default, angle is 0deg and position is center.
• If no degree is specified, the colors will be spread equally around the center
point.
Conic Gradient: Three Colors
• The following example shows a conic gradient with three colors:
CSS Gradients & Shadows

<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red;
background-image: conic-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h1>Conic Gradient - Three Colors</h1>
<div id="grad1"></div>
</body>
</html>
CSS Gradients & Shadows

Example: Conic Gradient: Five Colors


<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-color: red;
background-image: conic-gradient(red, yellow, green, blue, black);
}
</style>
</head>
<body>
<h1>Conic Gradient - Five Colors</h1>
<div id="grad1"></div>
</body>
</html>
CSS Shadows

CSS Shadow Effects:


• With CSS you can add shadow to text and to elements.
CSS Text Shadow:
• The CSS text-shadow property applies shadow to text.
• In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow
(2px):
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
CSS Shadows

Multiple Shadows:
• To add more than one shadow to the text, you can add a comma-separated list of
shadows.
• The following example shows a red and blue neon glow shadow:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
</style>
</head>
<body>
<h1>Text-shadow with red and blue neon glow!</h1>
</body>
</html>
CSS Shadows

CSS Box Shadow:


CSS box-shadow Property:
• The CSS box-shadow property is used to apply one or more shadows to an element.
Specify a Horizontal and a Vertical Shadow:
• In its simplest use, you only specify a horizontal and a vertical shadow. The default
color of the shadow is the current text-color.
Example:
Specify a horizontal and a vertical shadow:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: coral;
box-shadow: 10px 10px;
}
CSS Shadows

</style>
</head>
<body>
<h1>The box-shadow Property</h1>
<div>This is a div element with a box-shadow</div>
</body>
</html>
Output:
CSS Shadows

Multiple Shadows:
• An element can also have multiple shadows:
<!DOCTYPE html>
<html>
<head>
<style>
#example1 {
border: 1px solid;
padding: 10px;
box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green;
margin: 20px;
}
</style>
</head>
<body>
CSS Shadows

<h1>Multiple Shadows</h1>
<div id="example1">
<h2>Multiple shadows</h2>
<p>box-shadow: 5px 5px blue, 10px 10px red, 15px 15px green:</p>
</div>
</body>
</html>
Output:

You might also like