What is CSS

What is CSS?
Cascading Style Sheets

Used for styling web pages
• The main purpose of CSS is to improve the presentation style of
a web page
• With CSS, you can control the color, font, the size of text, the
spacing between elements, how elements are positioned and
laid out, what background images or background colors are to
be used, different displays for different devices and screen
sizes, and much more!
• CSS syntax uses simple english words.

• A CSS has two main parts
– The selector
– The declaration block
Basic syntax::
selector
{
property: value;
}
Eg: H1
{
color: blue;
font-size: 16px;
}
The selector is the HTML element that we want
to style.
The declaration block consists of a property and
its value
- property defines how different elements
look on the web page
- value is the value of the property
Each property with the value is terminated by a
semicolon.
• There are different ways to add CSS to web
pages
1. inline style sheet
2. Internal/embedded style sheet
3. External
Inline CSS style
• An inline CSS is used to apply a unique style to a single
HTML element.
• An inline CSS uses the style attribute to an HTML element.
• The following example sets the text color of
the <h1> element to blue, and the text color of
the <p> element to red:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
syntax:-
<tagname style="property: value;"> Content here
</tagname>
Eg:: <p style="color: blue; font-size: 20px;">This is a
blue.</p>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline CSS Example</title>
</head>
<body style="font-family: Arial, sans-serif; margin: 0; padding: 20px; background-color:
#f4f4f4;">
<h1 style="color: blue; text-align: center;">Welcome to My Web Page</h1>
<p style="font-size: 16px; color: green; line-height: 1.5;">

This paragraph is styled with inline CSS. It demonstrates how to change the text
color and size.
</p>
<p style="font-size: 14px; color: #555; text-decoration: underline;">

This is another paragraph with different styles. It has an underline decoration.
</p>
<div style="background-color: lightgray; padding: 10px; border: 1px solid #ccc;">

<h2 style="color: darkblue; font-weight: bold;">About Inline CSS</h2>
<p style="font-style: italic;">Inline CSS allows you to apply styles directly to
individual HTML elements.</p>
</div>
</body>
</html>
Text properties
Text Align: Aligns text (center, justify, left, right).
Text Decoration: Underlines the text.
Text Color: Changes the text color.
Text Transform: Transforms text (uppercase, lowercase,
capitalize).
Text Shadow: Adds a shadow effect to the text.
Text Indent: Creates space at the start of the paragraph.
Line Height: Adjusts the space between lines for
readability.
Word Break: Controls how words break when they reach
the end of a line.
• 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.
text-align: center; /* options: left, right, justify */
• Text Decoration
Adds decoration to the text, like underline or line-
through.we can also specify the color
text-decoration: underline; /* options: none, overline,
line-through */
text-decoration-color: red;
• 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)"
• Text Transform
Manipulates the case of the text.
• text-transform: uppercase; /* options:
lowercase, capitalize, none */
Basic Colors
White: #FFFFFF
Black: #000000
Red: #FF0000
Green: #008000
Blue: #0000FF
Yellow: #FFFF00
Cyan: #00FFFF
Magenta: #FF00FF
Extended Colors
Light Gray: #D3D3D3
Dark Gray: #A9A9A9
Orange: #FFA500
Purple: #800080
Brown: #A52A2A
Pink: #FFC0CB
Example Colors
Light Blue: #ADD8E6
Lime Green: #32CD32
Gold: #FFD700
Teal: #008080
Navy Blue: #000080
• Text Shadow
Adds shadow effects to the text.
In its simplest use, you only specify the
horizontal shadow (2px) and the vertical shadow
(2px):
add a color (red) to the shadow:
• text-shadow: 2px 2px red;
• h1 { text-shadow: 2px 2px red;}
•
• add a blur effect (5px) to the shadow:
text-shadow: 1px 1px 2px red
• 1px (horizontal-offset): This value indicates

the shadow will be offset 1 pixel to the right of
the text.1px (vertical-offset): This value
indicates the shadow will be offset 1 pixel
down from the text.2px (blur-radius): This
value determines the blurriness of the
shadow. A higher value creates a more diffuse
shadow, while a lower value makes it sharper.
Do by yourself
Change the text color of all <p> elements to
"red".
<style>
p{
---------: red;
}
</style>
<body> <h1>This is a heading</h1> <p>This is a
paragraph</p> <p>This is a paragraph</p>
</body>
<style>
p{
color: red;}
</style>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>
</body>
• Line Height
Controls the space between lines of text.
• line-height: 1.5; /* can be a number, unitless,
or px */
• Letter Spacing
Adjusts the space between characters.css
• letter-spacing: 2px;
• Word Spacing
Changes the space between words.
• word-spacing: 5px;
• Text Indent
The text-indent property is used to specify the indentation of the
first line of a text block.
• text-indent: value;
p{
text-indent: 20px; /* Indents the first line by 20 pixels */
}
• Word Break
The word-break property specifies how words should break when
reaching the end of a line. n CSS, the word-break property is used to
control how words are broken or wrapped when they reach the end
of a line. This property can help manage text layout in situations
where long words might cause overflow issues or disrupt the flow
<!DOCTYPE html>
<html lang="en">
<head>
<title>Text Properties Example</title>
</head>
<body style="font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 20px;">
<h1 style="text-align: center; color: #2c3e50; text-transform: uppercase; text-shadow: 1px 1px 2px
rgba(0, 0, 0, 0.5);">
Welcome to Text Properties
</h1>
<p style="text-align: justify; text-decoration: underline; color: #2980b9; line-height: 1.6; text-indent:
20px;">
This paragraph demonstrates several text properties. It is underlined, justified, and has a blue color.
The line height is increased for better readability, and there's an indent at the beginning.
</p>
<p style="text-align: left; color: #8e44ad; line-height: 1.8; word-break: break-all;">

Here’s another paragraph. It uses a purple color and a different line height. This paragraph also
shows how
the <strong>word-break</strong> property works with long words like
Supercalifragilisticexpialidocious, which will break
to fit within the line.
</p>
<p style="text-align: right; color: #e74c3c; text-transform: capitalize;">

This text is aligned to the right and is capitalized for emphasis.
</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>The Solar System</title>
<style>
.uppercase {
text-transform: uppercase;
}
p{
color: green;
text-indent: 50px;
}
.big {
line-height: 1.8;
}
h1 {
text-align: center;
text-decoration: line-through;
text-shadow: 3px 2px yellow;
}
h2 {
text-align: left;
text-decoration: overline;
color: #ff0000;
}
h3 {
text-align: right;
text-decoration: underline;
}
</style>
</head>
<body>
<h1 style="color: blue;">The Solar System</h1>
<h2>Planets</h2>
<p class="uppercase">There are eight planets in our solar system. These are Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, and
Neptune. Earlier, Pluto was also considered a planet, but in recent years it was excluded from the planets list and was considered a dwarf
planet.</p>
<h3>Satellites</h3>
<p class="big">You know that the Earth revolves around the Sun. It is a heavenly body commonly referred to as a planet. Similar to a planet
revolving around the Sun, there are smaller heavenly bodies that revolve around the planets. These are known as satellites. Our Earth also has
a satellite; we call it the Moon.</p>
</body>
</html>
In this the satellite is aligned to the right because in
css the default syntax of h3 is
h3 {
text-align: right;
text-decoration: underline;
}
So if you need to change to center you need to
specify it as center
<h3 style="text-align: center;">Satellites</h3>
Choosing the right font has a huge impact on
how the readers experience a website.
• font-family
Specifies the typeface(design) for the text. We
use font family to specify the font of a text.
It has a list of fonts
• Syntax :: font-family: value
• font-family: Arial, sans-serif;
Family name is the name of the font
Eg: Aria,Times New Roman etc…
• Generic Family: are the group of family names
with uniform appearances.
These include:
• serif: Fonts with small lines at the ends of
characters (e.g., Times New Roman).
• sans-serif: Fonts without the small lines (e.g.,
Arial).
• monospace: Fonts with fixed-width characters
(e.g., Courier New).
• cursive: Fonts that resemble handwritten text.
• fantasy: Decorative fonts.
• font-size
Sets the size of the font. Default font size is 16px(parent font)
• font-size: 16px; /* Can also use em, rem, percentages */
• Font Size
• Font size determines the size of text in your web pages. It can be
specified in several ways:
Pixels (px): A fixed size (e.g., 16px).
Points (pt): Primarily used in print media (1pt = 1/72 inch).
Percentages (%): Relative to the parent element's font size.
Ems (em): Relative to the font size of the element itself or its parent.
Rems (rem): Relative to the font size of the root element (typically
<html>).
h1{font-size:2.5em;}
h2{font-size:1.8em;}
1em is equal to the current font size. The default text size in
browsers is 16px. So, the default size of 1em is 16px.
• h1 { font-size: 2.5em; }:
– This sets the font size of all <h1> elements to 2.5em.
– Since 1em equals the font size of the parent element (in this case, the
<body>), the size of the <h1> will be 2.5 times the size of the body
font.
– If the body font size is 16px, then the <h1> size would be 2.5 * 16px =
40px.
• h2 { font-size: 1.8em; }:
– This sets the font size of all <h2> elements to 1.8em.
– Similarly, this means the <h2> size will be 1.8 times the body font size.
– Using the same body font size of 16px, the <h2> size would be 1.8 *
16px = 28.8px.
• 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)
• font-style: italic; /* or normal/oblique */
• The font shorthand property in CSS allows you to
set several font-related properties in a sing
font: [font-style] [font-size] [font-family];
<!DOCTYPE html>
<html lang="en">
<head>
<title>Font Style Example</title>
<style>
body {font-family: Arial, sans-serif;margin: 20px;background-
color: #f0f0f0;}
h1 {font: italic bold 32px "Georgia", serif;color: #2c3e50;}
p {font: normal normal 16px/1.5 "Verdana", sans-serif;color:
#34495e;}
</style>
</head>
<body>
<h1>Welcome to the Font Style Example</h1>
<p>This paragraph demonstrates the use of different font
properties.</p>
<p>Using the shorthand method allows for a cleaner and
more organized CSS.</p>
</body>
</html>
Border properties
border-width
Specifies the width of the border. You can use values in px, em, rem, etc.
border-width: 2px;
border-style
Defines the style of the border. Common values include:
none: No border.
solid: A solid border.
dashed: A dashed border.
dotted: A dotted border.
double: A double border.
groove: A 3D groove effect.
ridge: A 3D ridge effect.
inset: A 3D inset effect.
outset: A 3D outset effect.
border-style: solid;
dashed {
border: 2px dashed black;
}
.dotted {
border: 2px dotted black;
}
.double {
border: 4px double black;
}
.groove {
border: 4px groove black;
}
.ridge {
border: 4px ridge black;
}
.inset {
border: 4px inset black;
}
.outset {
border: 4px outset black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Div Example</title>
</head>
<body>
<div style="border: 2px solid black; padding: 20px; margin: 10px;">

<h2>This is a Div</h2>
<p>Div elements are used to group content.</p>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Different Border Types Without Div</title>
</head>
<body>
<section style="border: 2px dashed black; padding: 20px; margin: 10px;">

<h2>Dashed Border</h2>
<p>This section has a dashed border.</p>
</section>
<section style="border: 2px dotted black; padding: 20px; margin: 10px;">

<h2>Dotted Border</h2>
<p>This section has a dotted border.</p>
</section>
<section style="border: 4px double black; padding: 20px; margin: 10px;">

<h2>Double Border</h2>
<p>This section has a double border.</p>
</section>
<section style="border: 4px groove black; padding: 20px; margin: 10px;">

<h2>Groove Border</h2>
<p>This section has a groove border.</p>
</section>
<section style="border: 4px ridge black; padding: 20px; margin: 10px;">

<h2>Ridge Border</h2>
<p>This section has a ridge border.</p>
</section>
<section style="border: 4px inset black; padding: 20px; margin: 10px;">

<h2>Inset Border</h2>
<p>This section has an inset border.</p>
</section>
<section style="border: 4px outset black; padding: 20px; margin: 10px;">

<h2>Outset Border</h2>
<p>This section has an outset border.</p>
</section>
</body>
</html>
• border-color
• Specifies the color of the border. You can use
named colors, hex codes, RGB, or RGBA
values.
• border-color: #ff0000;
<!DOCTYPE html>
<html lang="en">
<head>
<title>Border Properties</title>
<style>
h1 {
text-align: center;
border-style: dashed;
border-width: 1.5px;
border-color: red;
border: 1.5px dashed red;
padding: 10px;
} p{
text-align: justify;
border: 1.5px solid coral;
background-color: lightyellow;
padding: 10px;
}
</style>
</head>
<body>
<h1 style="color: blue;">The Sun</h1>
<p style="color: green;">The Sun is at the center of the solar system. <br> All the
planets and the other heavenly bodies revolve around it.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Border Properties Example</title>
<style>
div {
border-width: 5px;
border-style: dashed;
border-color: #ff5733;
border-radius: 10px;
padding: 20px;
margin: 20px;
background-color: #f9f9f9;
text-align: center;
}
</style>
</head>
<body>
<div>
This is a box with dashed borders!
</div>
</body>
</html>

What is CSS

Uploaded by

Copyright:

Available Formats

What is CSS

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

What is CSS

Uploaded by

Copyright:

Available Formats

What is CSS?

Cascading Style Sheets

• CSS syntax uses simple english words.

<h1 style="color: blue; text-align: center;">Welcome to My Web Page</h1>

<p style="font-size: 16px; color: green; line-height: 1.5;">

<p style="font-size: 14px; color: #555; text-decoration: underline;">

<div style="background-color: lightgray; padding: 10px; border: 1px solid #ccc;">

• 1px (horizontal-offset): This value indicates

<p style="text-align: left; color: #8e44ad; line-height: 1.8; word-break: break-all;">

<p style="text-align: right; color: #e74c3c; text-transform: capitalize;">

<div style="border: 2px solid black; padding: 20px; margin: 10px;">

<section style="border: 2px dashed black; padding: 20px; margin: 10px;">

<section style="border: 2px dotted black; padding: 20px; margin: 10px;">

<section style="border: 4px double black; padding: 20px; margin: 10px;">

<section style="border: 4px groove black; padding: 20px; margin: 10px;">

<section style="border: 4px ridge black; padding: 20px; margin: 10px;">

<section style="border: 4px inset black; padding: 20px; margin: 10px;">

<section style="border: 4px outset black; padding: 20px; margin: 10px;">

You might also like