Scribd
Upload
22 views77 pages

Web Technologies: Unit-2

The document provides an overview of Cascading Style Sheets (CSS), detailing its purpose in styling HTML elements for web presentation. It covers various types of stylesheets (inline, internal, and external), CSS syntax, and properties for text, fonts, margins, borders, and backgrounds. Additionally, it discusses the advantages and limitations of using CSS in web development.

Uploaded by

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

Web Technologies: Unit-2

The document provides an overview of Cascading Style Sheets (CSS), detailing its purpose in styling HTML elements for web presentation. It covers various types of stylesheets (inline, internal, and external), CSS syntax, and properties for text, fonts, margins, borders, and backgrounds. Additionally, it discusses the advantages and limitations of using CSS in web development.

Uploaded by

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

Web Technologies

Unit-2
Cascading Style Sheets(CSS)
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed
on screen, paper, or in other media.
• Cascading Style Sheets (CSS) is a style sheet language
used for describing the presentation semantics (the
look and formatting) of a document written in a
markup language.
• CSS saves a lot of work. It can control the layout of
multiple web pages all at once.
• External stylesheets are stored in CSS files.
Cascading+Style+Sheets
• Cascading: refers to the procedure that determines
which style will apply to a certain section, if you have
more than one style rule.
• Style: how you want a certain part of your page to
look.
• Sheets: the “sheets” are like templates
HTML CSS
• CSS is a style sheet language
• HTML is a markup language used
used to style the web pages by
to define a structure of a web
using different styling features.
page.

• It consists of selectors and


• It consists of tags inside which
declaration blocks.
text is enclosed.

• CSS can be internal or external


• HTML doesn’t have further
depending upon the
types.
requirement.

• We cannot use HTML inside


• We can use CSS inside an HTML
a CSS sheet.
document.
• HTML is not used for • CSS is used for presentation
presentation and and visualization.
visualization.

• HTML doesn’t allow • CSS allows animation and


animations and transitions. transitions which helps to
improve the UI.

• HTML files are saved • CSS files are saved


with .htm or .html extension. with .css extension.
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.
Example
In this example all <p> elements will be center-aligned,
with a red text color:
p{
color: red;
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
• text-align is a property, and center is the property
value
Type of Style Sheets
• Inline style (inside an HTML element)
• Internal style sheet (in the head section) or Embedded
Style Sheet
• External style sheet
Internal CSS
• The Internal CSS has <style> tag in the <head> section
of the HTML document. This CSS style is an effective
way to style single pages. Using the CSS style for
multiple web pages is time-consuming because we
require placing the style on each web page.
We can use the internal CSS by using the following
steps:
1. Firstly, open the HTML page and locate the <head>
2. Put the following code after the <head>
<style type="text/css">
3. Add the rules of CSS in the new line.
<html>
<head>
<style>
body {
background-color: black;
}
h1 {
color: red;
}
</style>
</head>
<body>
<h1>CSS types</h1>
<p>Cascading Style sheet types: inline, external and internal</p>
</body>
</html>
<html>
<head><title>CSS</title>
<style type="text/css">
hr{color:red}
p{color:blue}
</style>
</head>
<body>
<p> This is First Paragraph</p>
<hr>
<p> This is second Paragraph</p>
</body>
</html>
Inline Style Sheet
• Inline Style Sheets are used to style a
specific HTML element. Add a style attribute to each
HTML tag without using the selectors. Managing a
website may difficult if we use only inline CSS.
<html>
<head><title>CSS</title>
<body>
<p style="background: pink; color: green">A new
background and
font color with inline CSS</p>
<h1 style="color:red; text-align:right; "> Heading
style 1 </h1>

</body>
</html>
External Style Sheets
• In external CSS , we link the web pages to the
external .css file.
• By editing the .css file, we can change the whole site
at once.
• External CSS is defined in some other document.
• A single file can be used to format an infinite number
of pages.
mystyles.css
hr{color:red}
p{color:blue}
h1{color:green}

main.html
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyles.css">
</head>
<body>
<h1> External CSS </h1>
<p> This paragraph has a blue font.
The background color of this page is gray because
we changed it with CSS! </p>
<hr>
</body>
</html>
CSS ID and Class
• The ID selector is used to specify a style for a single,
unique element. The ID selector use the id attribute of the
HTML element, and is defined with a “#”.
• The style rule below will be applied to the element with
id="para1":
Example 1:
#para1
{
text-align:center;
color:red;
}

• <p id=”para1”>This is cascading style sheet</p>


The CLASS attribute allows you to have different styles
for the same element. The class selector uses the HTML
class attribute and is defined with a “.”.
Example 1:
.intro {
Color:red;
Font-weight:bold;
}
<p class=”intro”>This is cascading style sheet</p>
ID Vs Class

• IDs and classes function the same way – they can both provide
the same styling functionality to an HTML element, however…
ID CLASS

IDs are unique. Classes are not unique.


A element can have only one ID A element can have multiple classes
One ID can be used only once on the One class can be used multiple times on
page the page

Used with “#” Used with “.”

Note: If both ID and Class are used on one element then ID will
override CLASS.
<p id=”id1” class=”class1”>Any paragraph…………</p>
CSS Properties
Text Properties
Color
Text Color
The color property is used to set the color of the text.
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red“
Property:
color
Example:
<p style=“color: red”>
Align
Text Alignment
The text-align property is used to set the horizontal
alignment of a text.
values: center/left/right/justified;
Property:
text-align
Example:
<p style=“text-align: left”>
Letter spacing
This property is used to provide space in between
the letters.

Property:
letter-spacing
Example:
<p style=“letter-spacing: 3px”>
Text direction
• Direction of text (left to right)
direction:ltr;
• Direction of text (right to left )
direction:rtl;
Property:
direction
Example:
<p style=“direction: ltr”>
Line height
Specify gap between different lines

Property:
line-height
Example:
<p style=“line-height:15px”>
Text Decoration
Text Decoration
The text-decoration property is used to set or
remove decorations from text:
Overline/underline/line-through

Property:
text-decoration
Example:
<p style=“text-decoration: underline”>
Text-Transform
Text-transform :-Transform your text as follows:
capitalize
uppercase
lowercase
Property:
text-transform
Example:
<p style=“text-transform: capitalize”>
Text Indentation
The text-indent property is used to specify the
indentation of the first line of a text.
Property:
text-indent
Example:
<p style=“text-indent:20px”>
Font
• font-family property is used to change the face of a
font.
• font-style property is used to make a font italic or
oblique.
• font-variant property is used to create a small-caps
effect.
• font-weight property is used to increase or decrease
how bold or light a font appears.
• font-size property is used to increase or decrease the
size of a font.
• font property is used as shorthand to specify a number
of other font properties.
Font Family
This property is used to change font style of the text.
Property:
font-family
Example:
<p style="font-family:Lucida Handwriting">
Font style
This property is used to set font style as:
normal
italic
oblique
Property:
font-style
Example:
<p style=“font-style:italic">
Font Variant
This property declares font variant:
Normal/ small-caps
Property:
font-variant
Example:
<p style="font-variant:small-caps">
Font Weight
The font weight property provides the functionality
to specify how bold a font is. Possible values could
be normal, bold, bolder, lighter, 100, 200, 300, 400,
500, 600, 700, 800, 900.
Property:
font-weight
Example:
<p style="font-weight:900;“>
Font Size
Set Font Size With Pixels
Setting the text size with pixels gives you full control
over the text size:
Property:
font-size
Example:
<p style="font-size:10px“>
Margins
Margins
Margin - Individual sides
In CSS, it is possible to specify different margins for
different sides of an element:
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;

Example:
<p
style="margin-top:100px;margin-bottom:100px;ma
rgin-right:300px;margin-left:550px">
Border Properties
Border
Border Style
The border-style property specifies what kind of border
to display.
border-style values:
hidden, dotted, dashed, solid, double, groove
ridge, inset, outset
Property:
Border-style
Example:
<div style="border-style:dotted”>
Border Color
This property is used to set color to border.

Property:
Border-color
Example:
<div style="border-style:double;border-color:red">
Border - Individual sides
In CSS it is possible to specify different borders for
different sides:
Example
p{
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dotted;
border-left-style: solid;
}
CSS Background
CSS background properties are used to define the
background effects of an element.
CSS properties used for background effects:
• background-color
• background-image
• background-repeat
• background-attachment
• background-position
Background Color
This property is used to set background color of any
element.
<p style="background-color:yellow;">
Background Image
This property is used to set background image.
Property:
background-image
Example:
<body
style="background-image:url('file:///C:/Users/madhu/
Desktop/Chrysanthemum.jpg')">
Background Repeat
body{
background-image:url("C:\Users\Public\Pictures\Sample
Pictures\Tulips.jpg");
background-repeat: repeat; /* default */
background-repeat: repeat-x; /* repeat horizontally */
background-repeat: repeat-y; /* repeat vertically */
background-repeat: no-repeat; /* don't tile the image */
}
no-repeat
Repeat-x
Repeat-y
Background Position
To position the background image on the screen (if
background image is not repeated).
Positions: top left, top center, top right, center left, center
center, center right, bottom left, bottom center
bottom right

Property:
background-position
Example:
<body
style="background-image:url('file:///C:/Users/madhu/Des
ktop/Chrysanthemum.jpg');background-repeat:no-repeat;
background-position:bottom right;">
Contd…
To set the background image position 100
pixels away from the left side and 200 pixels down
from the top.

<body
style="background-image:url('file:///C:/Users/mad
hu/Desktop/Chrysanthemum.jpg');background-rep
eat:no-repeat;background-position:100px 200px;">
Background Attachment
body{background-attachment: fixed;}
body{background-attachment: scroll;}
Advantages of CSS
• CSS has a much wider array of attributes than HTML.
• Separation of content from presentation.
• CSS facilitates multiple presentation formats.
• Maintenance is more easy, inexpensive and less time
consuming.
• As all of the style and layout is removed from the
html, so the html page size is very much smaller.
Limitations of CSS
• CSS is still at heart a styling language (for fonts,
colors, borders and other decoration).
• CSS doesn't work at all in very early versions of
Internet Explorer and Netscape. These browsers will
display your page as plain html.

You might also like