Unit 3

Unit-3
Style Sheet and Graphics
By: Prof. Abhishek Mehta

PICA
1
 Css Stands for Cascading style sheet.
 A cascading style sheet (CSS) is code that specifies formatting based on styles.
 Css is a style language that defines layout of HTML documents. it is used to format the
layout of web pages.
 Css covers fonts, colors,margins,lines,height,width,images and many other things.
 You can store the CSS code in the <head> section of the Web page to which you want it
to apply, or you can store it in a separate file with a .css extension.
 An embedded style sheet consists of a two-sided <style> tag placed in the <head>
section of a document. Between the <head> and </head> tags, you define the rules for
the various styles.
 A style rule begins with the name of the tag or other element to which the style applies.
 For example, if you are creating a rule that will apply to all instances of the <h1> tag.
start the rule with h1 (no brackets):

 <style>
 h1
 </style>
Why Do We need CSS?

 When you are working on a large website project than number of HTML pages more. If
you suddenly decide to change all the headings on a website to a different font, instead of
changing each file, you can just change one css style and have it apply across all pages.
2
Advantages of CSS
 CSS saves time : Control layout of many documents from one single style
sheet. So it saves time.
 Page load faster : less code means faster download time.
 Easy maintenance : To change the style of an element, you only have to
make an edit in one place.
Superior style to HTML : CSS has a much wider attributes than HTML.
Disadvantages of CSS
 Browser compatibility : Some browsers supported style sheet features and
some are not.
CSS Syntax :
H1
{
Color : blue;
Font-size : 12px;
}
3
 The selector is normally the HTML element you want to style.
 Each declaration consists of a property and a value.
 The property is the style you want to change. Each property has a value.
 Grouping Selectors : you can apply a style to many tag if you like. Just
separate the selectors with comma.
Example :
h1, h2, h3, h4, h5, h6
{
color: red;
}
 Multiple Attributes : To apply more than one property separates each
declaration with a semi-colon.
Example :
H1
{
Color : blue;
Font-family : arial;
Font-size : 14px;
4 }
Types of Style sheet
 There are three types of style sheet.
1) Internal Style Sheet

i) Embedded CSS
ii) Inline CSS
2) External Style Sheet
1) Embedded CSS : (Inside head Section)

 Internal Style sheet are placed inside the head section of particular web page
via the style tag.
<style type=“text/css”>
</style>
 These style can be used only for the web page in which they are embedded/
declared,
 Therefore, you need to create these style over and over again for each web
page you wish to style.
 Internal style sheet also called embedded style.
5
Example :
<html>
<head>
<title>Internal Style sheet</title>
<style type="text/css">
p
{color : blue;
font-size : 20 px;
font-family : Comic Sans MS;
}
</style>
</head>
<body>
<p>Parul Institute</p>
<p>Parul Institute Of Computer Applications</p>
</body>
</html>
6
 Inline Style Sheet : ( Inside HTML Element/Tag)
 Inline style can not be reused at all.
 Inline Style are placed directly inside an HTML element in the code.
 Inline style do not have a selector. Because an inline style is embedded
directly inside the html element.
 Therefore, the use of inline style should be minimum.
Example :
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="font-size : 30pt; color : purple;">Fundamental of Web</h1><br/>
<p style="font-family : Vladimir Script; color : green;
font-size=50pt;">FOW</p>
</body>
7 </html>
 External Style Sheet : (Inside .css file)
 The External style sheet is basically a text file that is saved as .css file.
 In that you can declare all the styles that you want to use throughout your
websites.
 You have to link an external style sheet to your web pages in order to apply
style sheet in web pages.
 You link the external style sheet by <link> Tag.
 This means that you only need to set the styles for each element once.
 If you want to update the style of your website, you only need to do it in one
place.
 You have to link the style sheet in the <head> section.
 <head>
<link rel="stylesheet" type="text/css" href="theme.css">
</head>
 rel: Specifies the relationship between the current document and the linked
document
8
Code For CSS File :
h1
{
font-size : 50pt;
color : Red;
}
p
{
direction : rtl;
font-size : 20pt;
}
h3
{
font-family : Viner Hand ITC;
color : Blue;
}
h6
{
font-style : Italic;
font-size : 10pt;
}
9
 Code for HTML File :
<html>
<head>
<title>External Style Sheet </title>
<link rel="stylesheet" type="text/css" href="externalstysheet.css">
</head>
<body>
<h1>Omkar</h1>
<p>Miraj</p>
<h3>Nandan</h3>
<h6>Manali</h6>
</body>
</html>
10
Different Selector
1. HTML Tag
2. Class Selector
3. ID Selector
HTML Tag : The HTML tag selector is the most common use of styles to
redefine the formatting of a tag for every occurrence on a web page.
Example :
H1
{
font-size : 165;
margin-top : 10pix;
}
In the above example, the <h1> tag has a font size 165%,and a top margin of 10
pixels,
 Class Selector : Class selector are used when you want to apply a style to
multiple parts of a web page or to only parts of an element.
 Classes always starts with a period (“.”) followed by the class name.
 After the class name you simply enter the properties/values that you want to
assign to your class.
Syntax : .Class name
{
property/attribute : value;
}
External Style Sheet Class Selector Example :
.CSS File Code

.headingclass
{
font-size : 25pt;
}
.paragraphclass
{
color : Aqua;
}
.html File Code :
<html>
<head>
<title>Class selector</title>
<link rel="stylesheet" href="classselect.css" type="text/css">
</head>
<body>
<h1 class="headingclass">Parul Institute</h1>
<p class="paragraphclass">Waghodiya,Baroda</p>
</body>
</html>
Internal Style Sheet Class Selector Example
.html File Code :
<html>
<head>
<title>Class selector</title>
<style type=“text/css”>
.headingclass
{
font-size : 25pt;
}
.paragraphclass
{
color : Aqua;
}
</style>
</head>
<body>
<h1 class="headingclass">Parul Institute</h1>
<p class="paragraphclass">Waghodiya,Baroda</p>
</body>
</html>
3) ID Selector : Id allow you to assign a unique identifier to an HTML element.
This allows you to define a style that can be used by the element you assign the
ID.
 ID always start with a hash(“#”) followed by ID name.
 Syntax: #ID-name {property: value;}
Example :
<html>
<head>
<title>ID Selector</title>
p#idselector
{
Color : Purple;
font-size : 40pt;
font-weight: Italic;
}
</style>
</head>
<body>
<p id=“ideselector">Parul Institute of computer Applications</p>
</body>
</html>
 ID Selector V/s Class Selector
ID Selector Class Selector

Id always starts with # symbol Class always starts with (.) Symbol
Id selector can be apply with id Class selector can be apply with
attribute class attribute
When to Use:
Id Selector :
• You should use id if only one element on the page should have
the style applied. You probably wouldn’t want any other element on
the page to use this particular style.
Example : <div>
Class Selector :
• You should use classes when your style need to be applied
multiple times on the same page.
Example : <h1>
CSS Comments
 Comments are used to explain code, and may help you when you edit the
source code at a later date. Comments are ignored by browsers.
 Comments can be used to explain why you added certain selectors within
your .css file.
Example :
/* This is a comment */
Formatting Text
and
Paragraph Using CSS
18
CSS Font Families
In CSS, there are two types of font family names:
generic family - a group of font families with a similar
look (like "Serif" or "Monospace")
font family - a specific font family (like "Times New
Roman" or "Arial")
Difference Between Serif and Sans-serif Fonts
19
CSS Font Property
CSS font-family attribute :
 The CSS font-family attribute allows you to specify a font family names.
Syntax:
font-family : family-name;
P
{
font-family : fantasy;
}
Example :
<p style=“font-family : arial black,cursive,serif”>Welcome</p>
CSS Font-Size Attribute
 The css font size-attribute is used for specifying the size of your font.
Syntax:
font-size : value
Possible Values :
 Xx-small
 X-small
 Small
 Medium
 Large
 X-large
 Xx-large
Relative Sizes :
 Larger
 Smaller
 Length
 An attribute font size
 Percentage : An absolute font size relative.
Default Value : medium

P
{
font size : x-large;
}
Example :
<p style=“font-size : x – large”>Welcome</p>

Set Font Size With Pixels
Setting the text size with pixels gives you full control over
the text size:
Example
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p{
font-size: 14px;
23
}
Set Font Size With Em
To allow users to resize the text (in the browser menu),
many developers use em instead of pixels.
The em size unit is recommended by the W3C.
1em is equal to the current font size. The default text size
in browsers is 16px. So, the default size of 1em is 16px.
The size can be calculated from pixels to em using this
formula: pixels/16=em
24
CSS font-stretch attribute
 Font-stretch property is used for condensing and expanding your font.
 Possible Values :
Normal
wider
narrower
ultra-condensed
extra-condensed
Condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded
Default value : Normal

25
CSS font-style attribute
 Css font-style property is used to set the style of the font to italic or oblique.
 Syntax : font-style : value
 Possible Value
Normal
Italic
oblique
CSS font-variant attribute

 Css font-variant property is used to displaying the font in small caps.
 Syntax : font-variant : value
 Possible Value
Normal
small-caps
26
 <html>
 <head>
 <style>
 p.normal {
Output
 font-variant: normal;
My name is Hege Refsnes.
 }
MY NAME IS HEGE REFSNES.
 p.small {
 font-variant: small-caps;
 }
 </style>
 </head>
 <body>
 <p class="normal">My name is Hege Refsnes.</p>

 <p class="small">My name is Hege Refsnes.</p>
 </body>
 </html>
27
CSS font-weight attribute
 The css font-weight attribute is used for specifying the weight of the font.
Use the font-weight property to make your font bold.
 Syntax: font-weight: value
normal
bold
bolder
lighter
100
200
300
400
500
600
28
Initial Value : normal
CSS Font Attribute
 The css font property is a shorthand property for setting font-family, font-
size, font-variant,font-style and font-weight.
 This saves time and space. if you do not need to specify each one separately.
 Syntax = font : <value1><value2>……..
font-style
font-variant
font-weight
font-size
font-family
29
CSS Text Properties
 Css color attributes : the css color property is used for setting the color of
element.
 The color property is used to set the color of a text.
Syntax = color : value
Example :
<html>
<head>
</head>
<body>
<p style="color:red;">
This text will be written in red.
</p>
</body>
</html>
30
Css Direction Property
 The css direction proper is used to specify which direction the text should run.
 Possible Values : ltr or rtl
 Default value : left
Example :
<html>
<head>
<title> Text Direction CSS</title>
</head>
<body>
<p style="direction : rtl;">Parul Group of nstitute</p>
</body>
</html>
31
Set the Space between Characters
The letter-spacing property is used set the space between
characters.
<body>
<p style="letter-spacing:5px;"> This text is having
space between letters. </p>
 </body>
Output:
T h i s t e x t i s h a v i n g s p a c e b e t w e e n
l e t t e r s.
32
Set the Space between Words
The word-spacing property is used to set the space
between words.
<body>
 <p style="word-spacing:5px;">
This text is having space between words. </p>
</body>
OUTPUT
This text is having space between words.
33
Set the Text Alignment
The text-align property is used to align the text of a
document.
<body>
 <p style="text-align:right;"> This will be right aligned.
</p>
<p style="text-align:center;"> This will be center
aligned. </p>
<p style="text-align:left;"> This will be left aligned.
</p>
</body>
34
CSS colors and background related
properties
CSS color attribute
CSS background- image attribute
CSS background- color attribute
CSS background attachment attribute
35
CSS color attribute
 <html>
 <head>
 <style>
 h1 {
 background-color: green;
 }
 p{
 background-color: yellow;
 }
 </style>
 </head>
 <body>
 <h1>CSS background-color example!</h1>
 <p>This paragraph has its own background color.</p>
 </body>
 </html>
36
Css background-image
 CSS background-image property is used to specify background image
of an element.
 Syntax = background-image : value
 Possible values = url
 Example = image-url(“path”)
 <html>
 <head>
 <style>
 body {
 background-image: url("/css/images/css.jpg");
}
 </style>
 </head>
 <body>
 <h1>Hello World!</h1> <
37
 /body>
CSS Background-color Property
 The Css background property is for setting the background color of element.
 Syntax : background-color :color name;
 Possible value : color name, rgb- functional notation
Example :
CSS File Code
.bodyclass
{
background-color : red;
font-size : 50px;
}
HTML File Code
<html>
<head>
<title>CSS background Property</title>
<link rel="stylesheet" href="backgroundcss.css" type="text/css">
</head>
<body class="bodyclass">Hello World </body>
</html>
38
CSS background attachment attribute
 This specify whether a background image should be fixed or scroll.
 Syntax = background-attachment : value
 Possible value = scroll, fixed
 Default Value = scroll
39
 <html>
 <head>
 <style>
 body {
 background-image: url("img_tree.gif");
 background-attachment: fixed;
}
 </style>
 </head>
 <body>
 <h1>The background-attachment Property</h1>
 <p>The background-image is fixed. Try to scroll down the page.</p>

 </body>
 </html>
40
CSS Margin Properties
 CSS margin-top attribute :
The css margin-top property is used for specifying the width of the top
margin.
Syntax = margin-top : value;
Possible value = number , percentage
Example = <h1 style=“margin-top : 100”> Hello World </h1>
41
CSS Margin properties
CSS margin-top Attribute
CSS margin-right Attribute
CSS margin-left Attribute
CSS margin-bottom Attribute
42
CSS margin-right attribute
 The css margin-right property is used for specifying the width of the right
hand margin.
 Syntax = margin-right : value;
 Possible value = number, percentage
 Example :
<h1 style=“margin-right : 100;text-align : right”> Hello World </h1>
43
CSS margin-left attribute
 The css margin-left property is used for specifying the
width of the left hand margin.
 Syntax = margin-left : value;
 Possible Value = number, percentage
 Example :
<h1 style=“margin-left : 100”> Hello World</h1>
44
CSS margin-bottom attribute
 The css margin-bottom property is used for specifying the
width of bottom margin.
 Syntax = margin-bottom : value;
 Possible value = number, percentage
45
 <html>
 <head>
 <style>
 p.ex1 {
 margin-top: 100px;
 }
 </style>
 </head>
 <body>
 <h1>The margin-top Property</h1>
 <p>A paragraph with no margins specified.</p>

 <p class="ex1">A paragraph with a 100 pixels top margin.</p>
 <p>A paragraph with no margins specified.</p>
 </body>
 </html>
46
CSS Border properties
CSS Border-top-color Attributes
CSS Border-bottom-color Attributes
CSS Border-left-color Attributes
CSS Border-right-color Attributes
47
CSS Border Attributes
 CSS border-style attribute : This property allows you to set border
style on all sides of an elements.
 Syntax = border-style : value;
 Possible Value = none, dotted, dashed, solid, double, groove, ridge,
inset,outset
 Default Value = None
 Example: < p style=“border –style: dotted dashed solid double”> test
example</p>
CSS Border-top-color Attributes

 CSS border-top-color attribute : This property allows you to set
color of a top border.
 Syntax = border-top-color : value;
 < p style=“border –style: dotted; border -top-color:red”> test
example</p>
48
CSS Border-right-color Attributes
 CSS border-right-color attribute : This property allows you to set
color of a right border..
 Syntax = border-right-color : value;
 Possible Value = color name, color code, rgb()
CSS Border-bottom-color Attributes

 CSS border-bottom-color attribute : This property allows you to set
color of a bottom border.
 Syntax = border-bottom-color : value;
49
CSS Border-left-color Attributes
 CSS border-left-color attribute : This property allows you to set
color of a left border..
 Syntax = border-left-color : value;
CSS Border-color Attributes

 CSS border color attribute : This property allows you to set color of
border.
 Syntax = border-color : value;
50
 <html>
 <head> <body>
<style type=“text/css”> <p class=“one”> one colored border<p>
p.one <p class=“two”> one colored border<p>
{
border-style : solid; </body>
Border-color : blue; </html>
}
p.two
{
border-style : solid;
Border-color : red;
}
</style>
</head>
51
CSS Padding Properties: The CSS padding
properties define the space between the element border and the element
content. The padding clears an area around the content (inside the
border) of an element.
 Css padding-top attribute : this is used to apply padding to the top
side of an element.
 Syntax = padding-top : value;
 Possible value = number
CSS Padding-right Properties

 Css padding-right attribute : this is used to apply padding to the
right side of an element.
 Syntax = padding-right : value;
52
CSS Padding-bottom Properties
 Css padding-bottom attribute : this is used to apply padding to the
bottom side of an element.
 Syntax = padding-bottom : value;
CSS Padding-left Properties
 Css padding-left attribute : this is used to apply padding to the

right side of an element.
 Syntax = padding-left : value;
53
CSS Padding Properties
 This is used for specifying padding on all side of an element.
 Syntax = padding : value1 value2 value3 value4
top right bottom left
Difference Between Padding and Margin

 Padding is the space inside the border between the border
and the actual image or cell contents.
 Margins are the spaces outside the border, between the
border and the other elements next to this object.
54
 <html>
 <head>
 <style>
 p.ex1 {
 border: 1px solid red;
 padding: 35px;
 }
 p.ex2 {
 border: 1px solid red;
 margin: 35px;
 }
 </style>
 </head>
 <body>
 <h1>The padding Property</h1>
 <p class="ex1">This paragraph has a padding of 35 pixels on all four sides.</p>
 <p class="ex2">This paragraph has no specified padding, but a margin of 35 pixels on all four
sides.</p>
 </body>
55
 </html>
Padding creates extra space within an element, while
margin creates extra space around an element!
56
Css list-style attribute
 The css list-style attribute is shorthand for specifying the styles for
list items.
 Syntax = list-style : value1 value2
 Possible value = list-style-type
list-style-position
list-style-image
57
CSS List Properties
 CSS List-style-type attribute : this property is used for specify the list style type.
 For example, you can display bullets as a disc,square,or roman numerals.
 Syntax = list-style-type : value;
 Possible Value : disc, circle, square,decimal,decimal-leading-zero,lower-roman,upper-roman
 Default Value: disc
Example :
<html>
<head>
<title>List CSS</title>
ul
{
list-style : lower-roman;
}
</style>
</head>
<body>
<ul>
<li>a</li>
<li>b</li>
58 <li>c</li>
</ul>
List-style-image attribute
 This property is used to specify an image for list item bullets. Using
this property you can create your own bullets to use within your lists.
 Syntax = list-style-image : value;
 Possible Value = url
 Example :
ul
{
list-style-image : url ()
}
59
CSS List-style-position attribute
 The css list-style-position is used to specifying the position of list
items.
 Syntax = list-style-position : value;
 Possible value = inside, outside
Inside = the bullet appear inside the principle block box of the list.
Outside = the bullet appear outside the principle block box of the list.
Default value = outside.
60
Displaying Graphics
61
Inserting Graphics
 Inserting a graphics on a web page is simple by using <img> tag.
 Example : <img src=“ ”>
 When a file resides in the same folder as the HTML document that
references it, you can refer to that file using the file name only, without any
additional path information. Like <img src=“logo.jpg”>
 If you want to store your graphics in a subfolder of the folder containing the
text files, you must refer to graphics using the subfolder name like this :
<img src=“images/logo.jpg”>
 To refer to afile that is up to one level in the folder structure, use tow
periods and a forward slah (../) such as following :
 <img src=“../logo.jpg”>
62
 To render an image on the left or right side of the screen and wrap
surrounding text around the image, apply a float style rule.
 Like this <img src=“logo.gif” style=“float : left”>
 Some time text not proper wrapped around the graphics. To move
text down vertically until the space occupied by the graphics become
“clear”, use the clear style rule.
 Example : <h2 style=“clear : left”> Recent Article</h2>
Controlling image Size and Padding

 Control the size of an image by using height and width attribute.
63
Using Thumbnail Graphics
 To create a thumbnail, you will need small versions of each of the
graphics.
 You can create them by opening in a program like photoshop.
 Then save the file under different name.
 You place the thumbnail images on the page and create hyperlinks to
the larger files.
Include Alternative Text for Graphics

 Use alt attribute to display alternative text for graphics.
64
 <html>
 <head>
 <style>
 img {
 border: 1px solid #ddd;
 border-radius: 4px;
 padding: 5px;
 width: 150px;
 }
 </style>
 </head>
 <body>
 <h2>Thumbnail Images</h2>
 <p>Use the border property to create thumbnail images:</p>
 <img src="paris.jpg" alt="Paris" style="width:150px">
 </body>
 </html>
65
Adding Figure Caption
<figure> is a container into which you place an <img>
tag,
The main advantages of <figure> is that you can then
use <figurecaption> tag to associate a caption with the
image.
The caption will then stick with the image no matter
where it floats in your layout.
66
 <html>
 <body>
 <h2>Places to Visit</h2>
 <p>Puglia's most famous sight is the unique conical houses (Trulli) found in the
area around Alberobello, a declared UNESCO World Heritage Site.</p>
 <figure>
 <img src="../html/pic_trulli.jpg" alt="Trulli" style="width:100%">
 <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
 </figure>
 </body>
 </html>
67
68
Thank You.
69

Unit 3

Uploaded by

Copyright:

Available Formats

Unit 3

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

Unit 3

Uploaded by

Copyright:

Available Formats

Unit-3

Style Sheet and Graphics

By: Prof. Abhishek Mehta

start the rule with h1 (no brackets):

Why Do We need CSS?

1) Internal Style Sheet

1) Embedded CSS : (Inside head Section)

.CSS File Code

.html File Code :

ID Selector Class Selector

Default Value : medium

<p style=“font-size : x – large”>Welcome</p>

Default value : Normal

CSS font-variant attribute

 <p class="normal">My name is Hege Refsnes.</p>

 <h1>The background-attachment Property</h1>

 <p>The background-image is fixed. Try to scroll down the page.</p>

CSS margin-bottom Attribute

 <p>A paragraph with no margins specified.</p>

CSS Border-top-color Attributes

CSS Border-bottom-color Attributes

CSS Border-color Attributes

CSS Padding-right Properties

CSS Padding-left Properties

 Css padding-left attribute : this is used to apply padding to the

Difference Between Padding and Margin

Controlling image Size and Padding

Include Alternative Text for Graphics

 <img src="paris.jpg" alt="Paris" style="width:150px">

You might also like