Scribd
Upload
32 views61 pages

Chap 2 CSS

Uploaded by

Shikha Sharma
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
32 views61 pages

Chap 2 CSS

Uploaded by

Shikha Sharma
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/ 61

UNIT 1

Chap 2 : CSS
Ms. Pratiksha Harwalkar
Introduction to CSS
 CSS stands for Cascading Style Sheet.
 HTML, CSS and JavaScript are used for web
designing. It helps the web designers to apply style
on HTML tags.
 Cascading Style Sheets (CSS) provide easy and
effective alternatives to specify various attributes for
the HTML tags. Using CSS, you can specify a number
of style properties for a given HTML element. Each
property has a name and a value, separated by a
colon (:). Each property declaration is separated by
a semi-colon (;).
Understanding the syntax of CSS :
 A CSS style sheet is a collection of a number of style
definitions, each style definition has two main
components:
1. Selector: To select the element to which the CSS rule
applies
2. Declaration: Specifies how the selected element
should be styled. Multiple declarations are separated
by colon(;)
 The Declaration further comprises of two
components:
1. Property: Specifies the feature of the element to be
affected. Eg: font-family, color etc.
2. Value: The value for the given property.
Syntax :
Selector { Property1:Value1; Property2:value2; …..}
Example :
h1{ font-size:32px;}
h1 : selector
Font-size:32px : Declaration
font-size: : property
32px : value
Example 1 :
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS</title>
</head>
<body>
<p style = "color:green; font-size:24px;">
Hello, World!
</p>
</body>
</html>
OUTPUT:
Hello, World!
Example 2 :
<!DOCTYPE>
<html>
<head>
<style>
h1{
color:white;
background-color:red;
padding:5px;
}
p{
color:blue;
}
</style>
</head>
<body>
<h1>CSS Example</h1>
<p>This is Paragraph.</p>
</body>
</html>
OUTPUT:
Write Your First CSS Example
This is Paragraph.
CSS Selector
 CSS selectors are used to select the content you want
to style. Selectors are the part of CSS rule set. CSS
selectors select HTML elements according to its id,
class, type, attribute etc.
 There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector
3. CSS Class Selector
4. CSS Universal Selector
5. CSS Group Selector
1) CSS Element Selector
 The element selector selects the HTML element by name.
<!DOCTYPE html>
<html>
<head>
<style>
p{
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p>This style will be applied on every paragraph.
</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

OUTPUT:
This style will be applied on every paragraph.
Me too!
And me!
2) CSS Id Selector
 The id selector selects the id attribute of an HTML
element to select a specific element. An id is always
unique within the page so it is chosen to select a
single, unique element.
 It is written with the hash character (#), followed by
the id of the element.
 Let’s take an example with the id "para1".
Example :
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<p id="para1">Hello SY CS</p>
<p>This paragraph will not be affected.</p>
</body>
</html>
OUTPUT:
Hello SY CS
This paragraph will not be affected.
3) CSS Class Selector
 The class selector selects HTML elements with a specific class
attribute. It is used with a period character . (dot symbol)
followed by the class name.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is blue and
center-aligned.</h1>
<p class="center">This paragraph is blue and
center-aligned.</p>
</body>
</html>
OUTPUT:
This heading is blue and center-aligned.
This paragraph is blue and center-aligned.
CSS Class Selector for specific element
 If you want to specify that only one specific HTML
element should be affected then you should use the
element name with class selector.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.center {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1 class="center">This heading is not affected
</h1>
<p class="center">This paragraph is blue and
center-aligned.</p>
</body>
</html>
Output:
This heading is not affected
This paragraph is blue and center-aligned.
4) CSS Universal Selector
 The universal selector is used as a wildcard character. It selects
all the elements on the pages.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
*{
color: green;
font-size: 20px;
}
</style>
</head>
<body>
<h2>This is heading</h2>
<p>This style will be applied on every paragraph.
</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>
Output:
This is heading
This style will be applied on every paragraph.
Me too!
And me!
5) CSS Group Selector
 The grouping selector is used to select all the elements
with the same style definitions.
 Grouping selector is used to minimize the code. Commas
are used to separate each selector in grouping.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
h1, h2, p {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<h2>Good Morning (In smaller font)</h2>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT:
Hello Javatpoint.com
Hello Javatpoint.com (In smaller font)
This is a paragraph.
Inserting CSS in an HTML Document
 CSS is added to HTML pages to format the document
according to information in the style sheet.
 To use inline styles, add the style attribute to the
relevant element. The style attribute can contain any
CSS property.
 There are three ways to insert CSS in HTML
documents.
1. Inline CSS
2. Internal CSS
3. External CSS
Example:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;margin-left:30px;">Hello!!
</h1>
<p>Good Morning.</p>
</body>
</html>
OUTPUT:
Hello!!
Good Morning.
2) Internal CSS
 Internal CSS is used to apply CSS on a single document
or page. It can affect all the elements of the page. It is
written inside the style tag within head section of html.
Example :
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: green;
}
h1{
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
OUTPUT:

This is a heading
This is a paragraph.
3. External Style Sheet
 With an external style sheet, you can change the
look of an entire website by changing just one file!
 Each page must include a reference to the external
style sheet file inside the <link> element. The <link>
element goes inside the <head> section.
NOTE:
Create Two files.
1. HTML file
2. CSS file for styling
 Link CSS file to HTML file. So that Style will be
applied to the HTML file.
Example : Creating HTML file and adding a link to CSS
file
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
 An external style sheet can be written in any text
editor. The file should not contain any html tags. The
style sheet file must be saved with a .css extension.
Example : mystyle.css
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
OUTPUT:
This is a heading
This is a paragraph.
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.
Example,
 Assume that an external style sheet has the following style
for the <h1> element:
h1 {
color: navy;
}
 then, assume that an internal style sheet also has the
following style for the <h1> element:
h1 {
color: orange;
}
 If the internal style is defined after the link to the
external style sheet, the <h1> elements will be
"orange":
Example:
<!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>An external stylesheet and internal
style</p>
</body>
</html>
OUTPUT:

This is a heading
An external stylesheet, and internal style

 However, if the internal style is defined before


the link to the external style sheet, the <h1>
elements will be "navy":
Example:
<!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>An external stylesheet, and internal
style</p>
</body>
</html>
OUTPUT:

This is a heading
An external stylesheet, and internal style
CSS Properties Working with background
 The CSS background properties are used to define
the background effects for elements.
 CSS background properties:
1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
1. Background Color :
 The background-color property specifies the
background color of an element.
 The background color of a page is set like this:
Example:
<head>
<style>
body {
background-color: lightblue;
}
</style>
</head>
 With CSS, a color is most often specified by:
 a valid color name - like "red"
 a HEX value - like "#ff0000"
 an RGB value - like "rgb(255,0,0)"
Example:
<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>
OUTPUT:
2. 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 for a page can be set like this:
Example:
<head>
<style>
body {
background-image: url("bgdesert.jpg");
}
</style>
</head>
 Background Image - Repeat Horizontally or Vertically
 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:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("gradient_bg.png");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Strange background image...</p>
</body>
</html>
OUTPUT:
 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("gradient_bg.png");
background-repeat: repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Here, a background image is repeated only
horizontally!</p>
</body>
</html>
OUTPUT:
Background Image - Set position and no-repeat
 Showing the background image only once is also
specified by the background-repeat property:
Example:
<head>
<style>
body {
background-image:
url("img_tree.png");
background-repeat: no-repeat;
}
</style>
</head>
 In the example above, the background image is shown in the
same place as the text. We want to change the position of the
image, so that it does not disturb the text too much.
 The position of the image is specified by the background-
position property:
Example:
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style> </head>
 Background Image - Fixed position
 To specify that the background image should be fixed (will not
scroll with the rest of the page), use the background-
attachment property:
Example:
<head>
<style>
body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
background-attachment: fixed;
}
</style>
</head>
Background - Shorthand property
 To shorten the code, it is also possible to specify all
the background properties in one single property.
This is called a shorthand property.
 The shorthand property for background
is background:
Example:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background: #ffffff url("img_tree.png") no-
repeat right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Now the background image is only shown
once, and it is also positioned away from the text.</p>
<p>In this example we have also added a margin on
the right side, so that the background image will not
disturb the text.</p>
</body>
OUTPUT:

• When using the shorthand property the order of the property values is:
• background-color

 When using the shorthand property the order of the property


values is:
1. Background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position
 It does not matter if one of the property values is missing, as long
as the other ones are in this order.
SUMMARY
Property Values Description
background Sets all the background properties
in one declaration
background-att fixed , local , Scroll - Sets whether a background image is
achment default fixed or scrolls with the rest of the
page
background- color(hex, RGBa, HSL) Sets the background color of an
color element
background-im url(image) Sets the background image for an
age element
background-po top, left , right , Sets the starting position of a
sition bottom, center background image
background-re repeat -x , repeat-y, Sets how a background image will
peat repeat, space be repeated
round(default), no-
repeat
Working with font styles
 CSS Font property is used to control the look of texts. By the use of CSS
font property you can change the text size, color, style and more
Example:
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
font-weight: bold;
font-variant: normal
}
p.italic {
font-style: italic;
font-size: 40px;
font-variant: small-caps;
p.oblique {
font-style: oblique;
font-size: 200%;
font-variant: small-caps;
}
</style>
</head>
<body>
<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:
Working with text styles
Property Values Description

color Color name Sets the color of text

direction ltr(left to Specifies the text direction/writing direction


right),
rtl(right to
left)
line-height Numeric Sets the line height
values
text-align Left, right, Specifies the horizontal alignment of text
center,
justify,
auto
text-transfor Capitalise, Controls the capitalization of text
m uppercase,
lowercase
vertical-alig Top, middle, Sets the vertical alignment of an element
n bottom,
sub, super
word-spacin Pixel values Increases or decreases the space between
g words in a text
text-decora underline, Specifies the decoration added to
tion overline, line text
through

You might also like