Scribd
Upload
23 views79 pages

Unit - Ii CSS Cascading Style Sheet: WT - Chhaya Gupta

Uploaded by

singhjagbirg171
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
23 views79 pages

Unit - Ii CSS Cascading Style Sheet: WT - Chhaya Gupta

Uploaded by

singhjagbirg171
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 79

UNIT - II

CSS
Cascading Style Sheet

WT - Chhaya Gupta
- CSS is the language we use to style an HTML document.
- CSS describes how HTML elements should be displayed.
<!DOCTYPE html> What is CSS?
<html> •CSS stands for Cascading Style Sheets
<head> •CSS describes how HTML elements are to be displayed on screen,
<style> paper, or in other media
body { •CSS saves a lot of work. It can control the layout of multiple web
background-color: lightblue; pages all at once
} •External stylesheets are stored in CSS files

h1 {
color: white; Why Use CSS?
text-align: center; CSS is used to define styles for your web pages, including the design,
} layout and variations in display for different devices and screen sizes.

p{
font-family: verdana; CSS Saves a Lot of Work!
font-size: 20px; The style definitions are normally saved in external .css files.
} With an external stylesheet file, you can change the look of an entire
</style> website by changing just one file
</head>
<body>
WT - Chhaya Gupta
A CSS rule consists of a selector and a declaration block.

CSS Syntax
- 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.

WT - Chhaya Gupta
In this example all <p> elements will be center-
aligned, with a red text color:

<!DOCTYPE html>
<html>
<head>
<style>
p{
color: red; Example Explained
text-align: center; •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
</style> •text-align is a property, and center is the property value
</head>
<body>

<p>Hello World!</p>
<p>These paragraphs are styled with CSS.</p>

</body>
</html>

WT - Chhaya Gupta
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:


•Simple selectors (select elements based on name, id, class)
•Combinator selectors (select elements based on a specific relationship between them)
•Pseudo-class selectors (select elements based on a certain state)
•Pseudo-elements selectors (select and style a part of an element)
•Attribute selectors (select elements based on an attribute or attribute value)

The 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.
- An id name cannot start with a number!

The 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.

WT - Chhaya Gupta
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <style>
#para1 { .center {
text-align: center; text-align: center;
color: red; color: red;
} }
</style> </style>
</head> </head>
<body> <body>

<p id="para1">Hello World!</p> <h1 class="center">Red and center-aligned heading</h1>


<p>This paragraph is not affected by the style.</p> <p class="center">Red and center-aligned paragraph.</p>

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

WT - Chhaya Gupta
You can also specify that only specific HTML elements
should be affected by a class. HTML elements can also refer to more than one
<!DOCTYPE html> class.
<html> <!DOCTYPE html>
<head> <html>
<style> <head>
<style>
p.center {
p.center {
text-align: center; text-align: center;
color: red; color: red;
} }
</style> p.large {
</head> font-size: 300%;
<body> }
</style>
</head>
<h1 class="center">This heading will not be affected</h1>
<body>
<p class="center">This paragraph will be red and center- <h1 class="center">This heading will not be affected</h1>
aligned.</p> <p class="center">This paragraph will be red and center-aligned.</p>
<p class="center large">This paragraph will be red, center-aligned,
</body> and in a large font-size.</p>
</html> </body>
</html>

WT - Chhaya Gupta
The CSS Universal Selector The CSS Grouping Selector
The universal selector (*) selects all HTML The grouping selector selects all the HTML
elements on the page. elements with the same style definitions.
<!DOCTYPE html> Look at the following CSS code (the h1, h2, and p
<html> elements have the same style definitions):
<head> <!DOCTYPE html>
<style> <html>
*{ <head>
text-align: center; <style>
color: blue; h1, h2, p {
} text-align: center;
</style> color: red;
</head> }
<body> </style>
</head>
<h1>Hello world!</h1> <body>

<p>Every element on the page will be affected by the <h1>Hello World!</h1>


style.</p> <h2>Smaller heading!</h2>
<p>Me too!</p> <p>This is a paragraph.</p>
<p>And me!</p> </body>
</body> </html>
</html> WT - Chhaya Gupta
WT - Chhaya Gupta
Types of Style Sheets <!DOCTYPE html>
There are three ways of inserting a style sheet: <html>
•External CSS <head>
•Internal CSS <link rel="stylesheet" href="mystyle.css">
•Inline CSS </head>
<body>
External CSS
- With an external style sheet, you can change the <h1>This is a heading</h1>
look of an entire webpage by changing just one <p>This is a paragraph.</p>
file!
- Each HTML page must include a reference to the </body>
external style sheet file inside the <link> </html>
element, inside the head section.
An external style sheet can be written in any text
editor, and must be saved with a .css extension.
The external .css file should not contain any HTML
tags.
Here is how the "mystyle.css" file looks:

WT - Chhaya Gupta
Internal CSS <!DOCTYPE html>
- An internal style sheet may be used if one <html>
single HTML page has a unique style. <head>
- The internal style is defined inside the <style>
<style> element, inside the head section. body {
- Internal styles are defined within the <style> background-color: linen;
element, inside the <head> section of an }
HTML page.
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

WT - Chhaya Gupta
Inline CSS
- An inline style may be used to apply a unique style for a single element.
- To use inline styles, add the style attribute to the relevant element. The style attribute can
contain any CSS property.
- Inline styles are defined within the "style" attribute of the relevant element.
- An inline style loses many of the advantages of a style sheet (by mixing content with
presentation). Use this method sparingly.

<!DOCTYPE html>
<html>
<body>

<h1 style="color:blue;text-align:center;">This is a heading</h1>


<p style="color:red;">This is a paragraph.</p>

</body>
</html>

WT - Chhaya Gupta
Multiple Style Sheets
If some properties have been defined for the same selector (element) in different style sheets, the
value from the last read style sheet will be used.

WT - Chhaya Gupta
If the internal style is defined after the link to the external style sheet, the <h1> elements will be
"orange":

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>

WT - Chhaya Gupta
However, if the internal style is defined before the link to the external style sheet, the <h1>
elements will be "navy":

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>The style of this document is a combination of an external stylesheet, and internal style</p>

</body>
</html>

WT - Chhaya Gupta
CSS Comments
- CSS comments are not displayed in the browser, but they can help document your source code.
- Comments are used to explain the code, and may help when you edit the source code at a later
date.
- Comments are ignored by browsers.
- A CSS comment is placed inside the <style> element, and starts with /* and ends with */.
- You can add comments wherever you want in the code. This also help in multiple line comments.

<!DOCTYPE html>
<html>
<head>
<style>
/* This is a single-line comment */
From the HTML tutorial, you learned that you can
p{
add comments to your HTML source by using
color: red;
the <!--...--> syntax.
}
</style>
</head>
<body>

<p>Hello World!</p>
</body>
</html>
WT - Chhaya Gupta
CSS Colors
Colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
You can set the background color for HTML elements.

<!DOCTYPE html> <!DOCTYPE html>


<html> <html>
<body> <body>
<h1 style="background-color:Tomato;">Tomato</h1> <h1 style="background-color:DodgerBlue;">Hello World</h1>
<h1 style="background-color:Orange;">Orange</h1> <p style="background-color:Tomato;">
<h1 style="background- Hello class!! We are learning WT. in WT we are learning CSS.
color:DodgerBlue;">DodgerBlue</h1> </p>
<h1 style="background- </body>
color:MediumSeaGreen;">MediumSeaGreen</h1> </html>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html> WT - Chhaya Gupta
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p{
background-color: yellow;
}
</style>
</head>
<body>
<h1>CSS background-color example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>
</body>
</html> WT - Chhaya Gupta
CSS Text Color CSS Border Color
You can set the color of text. You can set the color of borders.
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>

<h3 style="color:Tomato;">Hello World</h3> <h1 style="border: 1px solid Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Hello Class!!</p> <h1 style="border: 0.5px solid DodgerBlue;">Hello


World</h1>
<p style="color:MediumSeaGreen;">We are learning CSS
in WT.</p> <h1 style="border: 2px solid Violet;">Hello World</h1>

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

WT - Chhaya Gupta
CSS Backgrounds
- The CSS background properties are used to add background effects for elements.
Opacity / Transparency
The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0
- 1.0. The lower value, the more transparent.

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.
- The background image can also be set for specific elements, like the <p> element.

<!DOCTYPE html>
<html>
<head>
<style>
p{
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This paragraph has an image as the background!</p>
</body>
</html> WT - Chhaya Gupta
<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: green;
}
div.first {
opacity: 0.1; Opacity Example
}
div.second {
opacity: 0.3;
}
</style>
</head>
<body>
<h1>Transparent Boxes</h1>
<p>When using the opacity property to add transparency to the background the text written within also becomes hard to read.</p>
<div class="first">
<h1>opacity 0.1</h1>
</div>
<div class="second">
<h1>opacity 0.3</h1>
</div>
<div>
<h1>opacity 1 (default)</h1>
</div>
</body>
</html>
WT - Chhaya Gupta
CSS background-repeat
- By default, the background-image property repeats an image both horizontally and vertically.
<!DOCTYPE html> If the image in this example is repeated only
<html> horizontally (background-repeat: repeat-x;),
<head> the background will look better:
<style> <!DOCTYPE html>
body { <html>
background-image: url("gradient_bg.png"); <head>
} <style>
</style> body {
</head> background-image: url("gradient_bg.png");
<body> background-repeat: repeat-x;
}
<h1>Hello World!</h1> </style>
<p>Strange background image...</p> </head>
<body>
</body> <h1>Hello World!</h1>
</html> <p>Here, a background image is repeated only
horizontally!</p>
</body> To repeat an image
</html> vertically, set background-
repeat: repeat-y;
WT - Chhaya Gupta
CSS background-position CSS background-attachment
The background-position property is used to The background-attachment property specifies
specify the position of the background image. whether the background image should scroll or
be fixed (will not scroll with the rest of the page).
<!DOCTYPE html>
<!DOCTYPE html>
<html> <html>
<head> <head>
<style>
<style> body {
body { background-image: url("img_tree.png");
background-repeat: no-repeat;
background-image: url("img_tree.png"); background-position: right top;
background-repeat: no-repeat; margin-right: 200px;
background-attachment: fixed;
background-position: right top; }
margin-right: 200px; </style>
</head>
} <body>
</style> <h1>The background-attachment Property</h1>
<p>The background-attachment property specifies whether the background image
</head> should scroll or be fixed.</p>
<body> <p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<h1>Hello World!</h1> <p>The background-image is fixed. Try to scroll down the page.</p>
<p>Here, the background image is only shown once. In <p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
addition it is positioned away from the text. In this example <p>The background-image is fixed. Try to scroll down the page.</p>
we have also added a margin on the right side.</p> <p>The background-image is fixed. Try to scroll down the page.</p>
</body>
</body> </html>
</html> WT - Chhaya Gupta
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
/* Four values */
p.four {
border-style: dotted solid double dashed;
}
/* Three values */ Border Sides Example
p.three {
border-style: dotted solid double;
}
/* Two values */
p.two {
border-style: dotted solid;
}
/* One value */
p.one {
border-style: dotted;
}
</style>
</head>
<body>
<h2>Individual Border Sides</h2>
<p class="four">4 different border styles.</p>
<p class="three">3 different border styles.</p>
<p class="two">2 different border styles.</p>
<p class="one">1 border style.</p> WT - Chhaya Gupta
</body></html>
CSS MARGINS
- Margins are used to create space around elements, outside of any defined borders.

Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:
•margin-top
•margin-right
•margin-bottom
•margin-left

All the margin properties can have the following values:


•auto - the browser calculates the margin
•length - specifies a margin in px, pt, cm, etc.
•% - specifies a margin in % of the width of the containing element

WT - Chhaya Gupta
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
</style>
</head>
<body>

<h2>Using individual margin properties</h2>

<div>This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px,
and a left margin of 80px.</div>

WT - Chhaya Gupta
Margin Collapse
- Top and bottom margins of elements are sometimes collapsed into a single margin that is equal to
the largest of the two margins.
- This does not happen on left and right margins! Only top and bottom margins!
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
margin: 0 0 50px 0;
}
h2 {
margin: 20px 0 0 0;
}
</style>
</head>
<body>
<p>In this example the h1 element has a bottom margin of 50px and the h2 element has a top margin of 20px. So, the vertical margin
between h1 and h2 should have been 70px (50px + 20px). However, due to margin collapse, the actual margin ends up being
50px.</p>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
</body>
</html> WT - Chhaya Gupta
WT - Chhaya Gupta
CSS Padding
- The CSS padding properties are used to generate space around an element's content, inside of any
defined borders.
- With CSS, you have full control over the padding. There are properties for setting the padding for
each side of an element (top, right, bottom, and left).
Padding - Individual Sides

CSS has properties for specifying the padding for each side of an element:
•padding-top
•padding-right
•padding-bottom
•padding-left

All the padding properties can have the following values:


•length - specifies a padding in px, pt, cm, etc.
•% - specifies a padding in % of the width of the containing element

WT - Chhaya Gupta
<!DOCTYPE html>
<html>
<head>
<style>
div {
border: 1px solid black;
background-color: lightblue;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
</style>
</head>
<body>

<h2>Using individual padding properties</h2>

<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left
padding of 80px.</div>

WT - Chhaya Gupta
WT - Chhaya Gupta
CSS Setting height and width
- The height and width properties are used to set the height and width of an element.
- The height and width properties do not include padding, borders, or margins. It sets the
height/width of the area inside the padding, border, and margin of the element.
The CSS max-width property is used to set the maximum width of an element.
CSS height and width Values

The height and width properties may have the following values:

•auto - This is default. The browser calculates the height and width
•length - Defines the height/width in px, cm etc.
•% - Defines the height/width in percent of the containing block
•initial - Sets the height/width to its default value

Remember that the height and width properties do not include padding, borders, or margins!
They set the height/width of the area inside the padding, border, and margin of the element!

WT - Chhaya Gupta
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>

<h2>Set the height and width of an element</h2>

<div>This div element has a height of 200px and a width of 50%.</div>

</body>
</html>

WT - Chhaya Gupta
Setting max-width

- The max-width property is used to set the maximum width of an element.


- The max-width can be specified in length values, like px, cm, etc., or in percent (%) of the
containing block, or set to none (this is default. Means that there is no maximum width).
- The problem with the <div> above occurs when the browser window is smaller than the width
of the element (500px). The browser then adds a horizontal scrollbar to the page.
- Using max-width instead, in this situation, will improve the browser's handling of small
windows.
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>
<div>This div element has a height of 100px and a max-width of 500px.</div>
<p>Resize the browser window to see the effect.</p>
</body>
WT - Chhaya Gupta
</html>
CSS Outline
An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".

CSS has the following outline properties:


•outline-style
•outline-color
Outline differs from borders! Unlike border, the outline is
•outline-width
drawn outside the element's border, and may overlap other
•outline-offset
content. Also, the outline is NOT a part of the element's
•outline
dimensions; the element's total width and height is not
affected by the width of the outline.

WT - Chhaya Gupta
<!DOCTYPE html>
<html> CSS Outline Style
<head> The outline-style property specifies the style
<style> of the outline, and can have one of the
p {outline-color:red;}
following values:
p.dotted {outline-style: dotted;}
p.dashed {outline-style: dashed;}
p.solid {outline-style: solid;} •dotted - Defines a dotted outline
p.double {outline-style: double;} •dashed - Defines a dashed outline
p.groove {outline-style: groove;} •solid - Defines a solid outline
p.ridge {outline-style: ridge;} •double - Defines a double outline
p.inset {outline-style: inset;} •groove - Defines a 3D grooved outline
p.outset {outline-style: outset;} •ridge - Defines a 3D ridged outline
</style> •inset - Defines a 3D inset outline
</head>
•outset - Defines a 3D outset outline
<body>
<h2>The outline-style Property</h2> •none - Defines no outline
<p class="dotted">A dotted outline</p> •hidden - Defines a hidden outline
<p class="dashed">A dashed outline</p>
<p class="solid">A solid outline</p>
<p class="double">A double outline</p>
<p class="groove">A groove outline. The effect depends on the outline-color value.</p>
<p class="ridge">A ridge outline. The effect depends on the outline-color value.</p>
<p class="inset">An inset outline. The effect depends on the outline-color value.</p>
<p class="outset">An outset outline. The effect depends on the outline-color value.</p>
</body>
</html> WT - Chhaya Gupta
CSS Outline Width
The outline-width property specifies the width of the outline, and can have
one of the following values:
•thin (typically 1px)
•medium (typically 3px)
•thick (typically 5px)
•A specific size (in px, pt, cm, em, etc)

WT - Chhaya Gupta
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thin;
}
p.ex2 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: medium;
}
p.ex3 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: thick;
}
p.ex4 {
border: 1px solid black;
outline-style: solid;
outline-color: red;
outline-width: 4px;
}
</style></head><body>
<h2>The outline-width Property</h2>
<p class="ex1">A thin outline.</p>
<p class="ex2">A medium outline.</p>
<p class="ex3">A thick outline.</p>
<p class="ex4">A 4px thick outline.</p>
</body></html> WT - Chhaya Gupta
CSS Outline Color
The outline-color property is used to set the color of the outline.
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%)"
•invert - performs a color inversion (which ensures that the outline is visible, regardless of
color background)

WT - Chhaya Gupta
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
border: 2px solid black;
outline-style: solid;
outline-color: red;
}
p.ex2 {
border: 2px solid black;
outline-style: dotted;
outline-color: blue;
}
p.ex3 {
border: 2px solid black;
outline-style: outset;
outline-color: grey;
}
</style></head><body>
<h2>The outline-color Property</h2>
<p>The outline-color property is used to set the color of the outline.</p>
<p class="ex1">A solid red outline.</p>
<p class="ex2">A dotted blue outline.</p>
<p class="ex3">An outset grey outline.</p>
WT - Chhaya Gupta
</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></head><body>
<h1>This is heading 1</h1>
<p>This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body
selector.</p>
<p>Another paragraph.</p>
WT - Chhaya Gupta
</body></html>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightgrey;
color: blue;
}

h1 {
background-color: black;
color: white; Example for Text Color and Background Color
}
div {
background-color: blue;
color: white;
}
</style>
</head>
<body>
<h1>This is a Heading</h1>
<p>This page has a grey background color and a blue text.</p>
<div>This is a div.</div>
</body>
</html>
WT - Chhaya Gupta
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):
<!DOCTYPE html>
<html>
<head>
<style>
h1 { When the text-align property is set to "justify", each
text-align: center;
line is stretched so that every line has equal width,
}
and the left and right margins are straight (like in
h2 { magazines and newspapers):
text-align: left;
}
h3 {
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>
WT - Chhaya Gupta
</html>
Text Align Last Text Direction
The text-align-last property The direction and unicode-bidi properties can be
specifies how to align the last used to change the text direction of an element:
line of a text.
<!DOCTYPE html>
<!DOCTYPE html> <html>
<html><head><style> <head>
p.a {
text-align-last: right; <style>
} p.ex1 {
p.b { direction: rtl;
text-align-last: center;
}
unicode-bidi: bidi-override;
p.c { }
text-align-last: justify; </style>
}
</head>
</style></head><body>
<h1>The text-align-last Property</h1> <body>
<h2>text-align-last: right:</h2>
<p class="a">This is WT class. We are Learning CSS that is cascading Style <p>This is the default text direction.</p>
Sheet and learning how to aling last line of the text in any paragraph.</p>
<h2>text-align-last: center:</h2>
<p class="b">This is WT class. We are Learning CSS that is cascading Style <p class="ex1">This is right-to-left text direction.</p>
Sheet and learning how to aling last line of the text in any paragraph.</p>
<h2>text-align-last: justify:</h2>
</body>
<p class="c">This is WT class. We are Learning CSS that is cascading Style
Sheet and learning how to aling last line of the text in any paragraph.</p> </html>
</body></html>
WT - Chhaya Gupta
<!DOCTYPE html>
Vertical Alignment <html><head><style>
The vertical-align property sets img.a {
the vertical alignment of an vertical-align: baseline;
}
element. img.b {
vertical-align: text-top;
}
img.c {
vertical-align: text-bottom;
}
img.d {
vertical-align: sub;
}
img.e {
vertical-align: super;
}
</style></head><body>
<h1>The vertical-align Property</h1>
<h2>vertical-align: baseline (default):</h2>
<p>An <img class="a" src="sqpurple.gif" width="9" height="9"> image with a default alignment.</p>
<h2>vertical-align: text-top:</h2>
<p>An <img class="b" src="sqpurple.gif" width="9" height="9"> image with a text-top alignment.</p>
<h2>vertical-align: text-bottom:</h2>
<p>An <img class="c" src="sqpurple.gif" width="9" height="9"> image with a text-bottom alignment.</p>
<h2>vertical-align: sub:</h2>
<p>An <img class="d" src="sqpurple.gif" width="9" height="9"> image with a sub alignment.</p>
<h2>vertical-align: sup:</h2>
<p>An <img class="e" src="sqpurple.gif" width="9" height="9"> image with a super alignment.</p>
</body>
</html> WT - Chhaya Gupta
Text Decoration
The text-decoration property is used to set or remove decorations from text.
The value text-decoration: none; is often used to remove underlines from links:
<!DOCTYPE html>
<html>
<head><style>
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
h4 {
text-decoration: underline;
}
</style></head><body>
<h1>Some different text decorations</h1>
<h2>Overline text decoration</h2>
<h3>Line-through text decoration</h3>
<h4>Underline text decoration</h4>
<p><strong>Note:</strong> It is not recommended to underline text that is not a link, as this often confuses
the reader.</p>
</body></html> WT - Chhaya Gupta
Text Transformation
The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter
of each word:
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
text-transform: uppercase;
}

p.lowercase {
text-transform: lowercase;
}

p.capitalize {
text-transform: capitalize;
}
</style></head><body>
<h1>Using the text-transform property</h1>
<p class="uppercase">This text is transformed to uppercase.</p>
<p class="lowercase">This text is transformed to lowercase.</p>
<p class="capitalize">This text is capitalized.</p>
</body>
</html> WT - Chhaya Gupta
Text Indentation
Letter Spacing
The text-indent property is used to
The letter-spacing property is used to specify the
specify the indentation of the first line of a
space between the characters in a text.
text:
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <style>
p{ h2 {
text-indent: 50px; letter-spacing: 5px;
} }
</style>
</head> h3 {
<body> letter-spacing: -2px;
}
<h1>Using text-indent</h1> </style>
<p>This is WT class. We are learning Text formatting </head>
properties and this is Text indentation.</p> <body>

</body> <h1>Using letter-spacing</h1>


</html> <h2>This is heading 1</h2>
<h3>This is heading 2</h3>
</body>
</html>
WT - Chhaya Gupta
Line Height Word Spacing
The line-height property is used to The word-spacing property is used to specify
specify the space between lines: the space between the words in a text.
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<style>
<head>
p.small { <style>
line-height: 0.7; p.one {
} word-spacing: 10px;
p.big { }
line-height: 1.8;
} p.two {
</style></head><body>
<h1>Using line-height</h1>
word-spacing: -2px;
<p> }
This is a paragraph with a standard line-height.<br> </style>
The default line height in most browsers is about 110% to </head>
120%.<br> <body>
</p> <h1>Using word-spacing</h1>
<p class="small"> <p>This is a paragraph with normal word spacing.</p>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
<p class="one">This is a paragraph with larger word spacing.</p>
</p> <p class="two">This is a paragraph with smaller word spacing.</p>
<p class="big"> </body>
This is a paragraph with a bigger line-height.<br> </html>
This is a paragraph with a bigger line-height.<br>
</p>
</body></html> WT - Chhaya Gupta
Text Shadow
The text-shadow property adds shadow to text.
In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow (2px).

<!DOCTYPE html> <!DOCTYPE html>


<html> <html>
<head> <head>
<style> <style>
h1 { h1 {
text-shadow: 2px 2px; text-shadow: 2px 2px 5px red;
} }
</style> </style>
</head> </head>
<body> <body>

<h1>Text-shadow effect!</h1> <h1>Text-shadow effect!</h1>

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

WT - Chhaya Gupta
CSS FONT

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:


1.Serif fonts have a small stroke at the edges of each letter. They create a sense of
formality and elegance.
2.Sans-serif fonts have clean lines (no small strokes attached). They create a modern
and minimalistic look.
3.Monospace fonts - here all the letters have the same fixed width. They create a
mechanical look.
4.Cursive fonts imitate human handwriting.
5.Fantasy fonts are decorative/playful fonts.

All the different font names belong to one of the generic font families.

WT - Chhaya Gupta
WT - Chhaya Gupta
The CSS font-family Property:

- In CSS, we use the font-family property to specify the font of a text.


- If the font name is more than one word, it must be in quotation marks, like: "Times New Roman“.
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style></head><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>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
</body>
</html>
WT - Chhaya Gupta
What are Web Safe Fonts?
Web safe fonts are fonts that are universally installed across all browsers and devices.
Fallback Fonts

However, there are no 100% completely web safe fonts. There is always a chance that a font is not
found or is not installed properly.

Therefore, it is very important to always use fallback fonts.


This means that you should add a list of similar "backup fonts" in the font-family property. If the first
font does not work, the browser will try the next one, and the next one, and so on. Always end the list
with a generic font family name.
Best Web Safe Fonts for HTML and CSS
The following list are the best web safe fonts for HTML and CSS:
Arial (sans-serif)
Verdana (sans-serif)
Helvetica (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
WT - Chhaya Gupta
Brush Script MT (cursive)
<!DOCTYPE html>
<html> Example for Fallback Fonts
<head>
<style>
p{
font-family: Tahoma, Verdana, sans-serif;
}
</style>
</head>
<body>

<h1>CSS Fallback Fonts</h1>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

</body>
</html>

WT - Chhaya Gupta
Commonly Used Font Fallbacks
Below are some commonly used font fallbacks, organized by
the 5 generic font families:
Serif
Sans-serif
Monospace
Cursive
Fantasy

WT - Chhaya Gupta
WT - Chhaya Gupta
WT - Chhaya Gupta
Example for Fallbacks
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Copperplate, Papyrus, fantasy;
}
</style>
</head>
<body>

<h1>Lorem ipsum dolor sit amet</h1>

<p>Lorem ipsum dolor sit amet.</p>


<p>0 1 2 3 4 5 6 7 8 9</p>

</body>
</html>

WT - Chhaya Gupta
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 Weight
The font-weight property specifies the weight of a font:

Font Variant
The font-variant property specifies whether or not a text should be displayed in a small-caps
font.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the
converted uppercase letters appears in a smaller font size than the original uppercase letters in
the text.

Font Size
The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use
font size adjustments to make paragraphs look like headings, or headings look like paragraphs.

WT - Chhaya Gupta
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
font-weight: normal;
font-variant: normal;
font-size:50px; Example for different font properties.
}
p.italic {
font-style: italic;
font-weight: lighter;
font-variant: small-caps;
font-size:40px;
}
p.oblique {
font-style: oblique;
font-weight: bold;
}
</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> WT - Chhaya Gupta
Google Fonts
If you do not want to use any of the standard fonts in HTML, you can use Google Fonts.
Google Fonts are free to use, and have more than 1000 fonts to choose from.
How To Use Google Fonts
Just add a special style sheet link in the <head> section and then refer to the font in the CSS.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style></head><body>
<h1>Sofia Font</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>123456790</p>
</body>
</html>

For a list of all available Google Fonts, visit How To - Google Fonts Tutorial.
WT - Chhaya Gupta
Font Pairing Rules
Here are some basic rules to create great font pairings:
1. Complement
It is always safe to find font pairings that complement one another.
A great font combination should harmonize, without being too similar or too different.
2. Use Font Superfamilies
A font superfamily is a set of fonts designed to work well together. So, using different fonts within the same
superfamily is safe.
For example, the Lucida superfamily contains the following fonts: Lucida Sans, Lucida Serif, Lucida Typewriter Sans,
Lucida Typewriter Serif and Lucida Math.
3. Contrast is King
Two fonts that are too similar will often conflict. However, contrasts, done the right way, brings out the best in each
font.
Example: Combining serif with sans serif is a well known combination.
A strong superfamily includes both serif and sans serif variations of the same font (e.g. Lucida and Lucida Sans).
4. Choose Only One Boss
One font should be the boss. This establishes a hierarchy for the fonts on your page. This can be achieved by varying
the size, weight and color.

WT - Chhaya Gupta
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: black;
font-family: Verdana, sans-serif;
font-size: 16px; An example for Font Pairing by following Rules.
color: gray;
}
h1 {
font-family: Georgia, serif;
font-size: 60px;
color: white;
}
</style></head><body>
<h1>WEB TECHNOLOGY</h1>
<p>This is web technology class. We are studying about different Font styling techniques.</p>
<p>Try to understand the concepts and try to learn them by heart!!</p>
</body>
</html>

WT - Chhaya Gupta
The CSS Font 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

Note: The font-size and font-family values are required. If one of the other values is missing,
their default value are used.

WT - Chhaya Gupta
<!DOCTYPE html>
<html>
<head>
<style>
p.a {
font: 20px Arial, sans-serif; Example for Font Shorthand property.
}

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> WT - Chhaya Gupta
CSS LINKS

In addition, links can be styled differently depending on what state they are in.
The four links states are:
•a:link - a normal, unvisited link
•a:visited - a link the user has visited
•a:hover - a link when the user mouses over it
•a:active - a link the moment it is clicked

WT - Chhaya Gupta
<!DOCTYPE html>
<html>
<head>
<style>
/* unvisited link */
When setting the style for several link
a:link {
color: red; states, there are some order rules:
} •a:hover MUST come after a:link and a:visited
/* visited link */ •a:active MUST come after a:hover
a:visited { •Lvha – short form
color: green;
}
/* mouse over link */
a:hover {
color: hotpink;
}
/* selected link */
a:active {
color: blue;
}
</style></head><body>
<h2>Styling a link depending on state</h2>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
</body>
</html>
WT - Chhaya Gupta
<!DOCTYPE html>
<html>
<head>
<style> Link Buttons
a:link, a:visited { This example demonstrates a more advanced
background-color: red; example where we combine several CSS properties
color: white; to display links as boxes/buttons:
padding: 14px 25px;
text-align: center;
text-decoration:none;
display: inline-block;
}
a:hover {
background-color:hotpink;
}
a:active {
background-color: blue;
}
</style></head><body>
<h2>Link Button</h2>
<p>A link styled as a button:</p>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html> WT - Chhaya Gupta
<!DOCTYPE html> Another example for links as
<html>
<head> box/button
<style>
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: green;
color: white;
}
</style></head><body>
<h2>Link Button</h2>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>
WT - Chhaya Gupta
CSS LISTS

WT - Chhaya Gupta
<!DOCTYPE html>
<html><head><style>
ul.a {
Different List Item Markers list-style-type: circle;
}
The list-style-type property ul.b {
specifies the type of list item marker. list-style-type: square;
}
The following example shows some of ol.c {
list-style-type: upper-roman;
the available list item markers: }
ol.d {
list-style-type: lower-alpha;
}
</style></head><body>
<h2>The list-style-type Property</h2>
An Image as The List Item <p>Example of unordered lists:</p>
<ul class="a">
Marker <li>Coffee</li>
The list-style-image property <li>Tea</li>
<li>Coca Cola</li>
specifies an image as the list item </ul>
<ul class="b">
marker. <li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
DIY </ul>
<p>Example of ordered lists:</p>
<ol class="c">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol class="d">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol></body></html>
WT - Chhaya Gupta
DIY

WT - Chhaya Gupta
Remove Default Settings
The list-style-type:none property can also be used to remove the markers/bullets. Note that the
list also has default margin and padding. To remove this, add margin:0 and padding:0 to <ul> or
<ol>.
<!DOCTYPE html>
<html>
<head>
<style>
ul.demo {
list-style-type: none;
margin: 0;
padding: 0;
}
</style></head><body>
<p>Default list:</p>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<p>Remove bullets, margin and padding from list:</p>
<ul class="demo">
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
</body></html> WT - Chhaya Gupta
<!DOCTYPE html>
Styling List With Colors <html>
- We can also style lists with colors, to <head>
<style>
make them look a little more ol {
interesting. background: #ff9999;
padding: 20px;
- Anything added to the <ol> or <ul> }
tag, affects the entire list, while ul {
background: #3399ff;
properties added to the <li> tag will padding: 20px;
affect the individual list items. }
ol li {
background: pink;
padding: 5px;
margin-left: 35px;
}
ul li {
background: lightblue;
margin: 5px;
}
</style></head><body>
<h1>Styling Lists With Colors</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul></body></html>

WT - Chhaya Gupta
List - Shorthand property
The list-style property is a shorthand property. It is used to set all the list properties in one
declaration.

DIY

WT - Chhaya Gupta
WT - Chhaya Gupta
<!DOCTYPE html>
CSS Pseudo-Class <html>
<head>
<style>
a.highlight:hover {
color: #ff0000;
font-size: 22px;
}
</style></head><body>
<h2>Pseudo-classes and HTML Classes</h2>
<p>When you hover over the first link below, it will change color and font
size:</p>
<p><a class="highlight" href="css_syntax.asp">CSS Syntax</a></p>
<p><a href="default.asp">CSS Tutorial</a></p>
</body>
</html>

WT - Chhaya Gupta
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<style> <style>
div { p{
background-color: green; display: none;
color: white; background-color: yellow;
padding: 25px; padding: 20px;
text-align: center; }
} div:hover p {
div:hover { display: block;
background-color: blue; }
} </style></head><body>
</style></head><body> <div>Hover over this div element to show the p element
<p>Mouse over the div element below to change its background color:</p> <p>Tada! Here I am!</p>
<div>Mouse Over Me</div> </div>
</body> </body>
</html> </html>

WT - Chhaya Gupta

You might also like