Css

WEB PROGRAMMING
Cascade Style Sheets (CSS)

INTRODUCTION
 CSS stands for Cascading Style Sheets
 Used to Separate Presentation and Contents

while Building Web Sites
 Appearance of Raw HTML Pages is not very
Effective and Attractive
 In Order to Improve the Appearance of Web
Page we use CSS
 CSS is used to define Style Rules that help to
unify entire Sites Appearance
 Using CSS we define Style once and it can be
applied many times on the Web Page
Example: Using CSS we define Rules that define

how All the Headings and
Paragraphs Look alike such as their
Color, Style, Formatting etc
NEED OF CSS
 CSS Improves Efficiency by allowing you to
Separate Contents and Styles
 Contents mean Headings, Paragraphs, Buttons
etc
 Styles define the Appearance of Contents
 CSS was developed to Solve a Problem
 In using single HTML you must have to define
the Style of each and every Content in its Opening
Tag using Attributes like style, color,
bgcolor etc
 This is a very Lengthy and Tedious Job
 Job becomes more hard if you want all contents
of same type to be alike, this requires
you to remember attributes and attribute
values and it is difficult
 Styles are normally defined in a Separate CSS
File thus enabling designer to Change
CSS SYNTAX (CONT.)
 CSS Rule has Two Parts:
1. Selector
2. One or More Declarations
 Selector is normally HTML Element Tag
Symbol
 Declaration consists of Property and Property
Value
 Property is a Style Attribute
CSS SYNTAX
 Specify the name of Element like h1, p, td etc
 Start a Opening Curly Brace {
Declarations:
 Write Property Name like color, font-family etc
 Write a Colon :
 Write Property Value after Colon
 Then Put Semi-Colon ; after each Declaration
 Put a Closing Curly Brace }
Example:
h1
{
color:red;
font:calibari;
text-align:center;
}
This CSS Example Defines Appearance of Element with <h1>
Tag
CSS COMMENTS
 Comments are used to Specify the Purpose of
Line of Code
 Comments are Notes about Lines
 Helpful when the code is to be edited
 CSS Comments are Start with /* and End with
*/ Symbols
 Anything between /* and /* is a Comment
Example:
h1
{
color:red; /*Defines Font Color*/
font:calibari; /*Defines Font Style*/
text-align:center; /*Defines Text Alignment*/
}
This CSS Example Defines Appearance of Element with <h1>
Tag with Proper Comments
WHERE TO WRITE CSS CODE
 Three Ways to Use CSS in HTML
1. Inline Style
2. Internal Style Sheet
3. External Style Sheet

INLINE STYLE
 In Inline Style looses the Advantages of
Cascading Style Sheet
 In Inline Style we use style Attribute in the

Opening Tag of an Element
 This Style is only Applicable to the Element`s

Tag in which it is defined
 For Example if we define Inline Style using

style attribute of a <h1> tag then it will be
applicable to only this Tag and it will not be
applicable to any other <h1> Tag
 Mostly used if you want that Each Element has

its own Appearance and Style
 Hard to Use and Apply
INLINE STYLE----EXAMPLE
<html>
<head>
<title>Inline Style</title>
</head>
<body>
<p>This is Paragraph with No Inline Style</p>
<p style=“color:red;font-size:20px” />
This is Paragraph with Inline Style
</p>
</body>
</html>
INTERNAL STYLE SHEET
 Defined inside a Single Document
 Can Only be applied to the Document in which
it is Defined
 No other Document can use the Internal Style
Sheet of a Document
 If Selectors are given then Internal Style Sheet
is Automatically Applied to Whole Document`s of
the Selector Type
 Defined inside the <head> tag
 Defined using <style> tag
 We use the type Attribute of <style> for
Internal Style Sheet as follows:
<style type=“text/css” />
……………………………….
</style>
INTERNAL STYLE SHEET----EXAMPLE
<html>
<head>
<title>Internal Style Sheet</title>
<style type=“text/css” />
p
{
color:blue;
font-size:24px;
}
</style>
</head>
<body>
<p>Paragraph No 1</p>
</body>
</html>
EXTERNAL STYLE SHEET
 Used when Styles is to be applied on many
pages
 External Style Sheets are Stored in Separate
Files
 External Style Sheet Files have .css Extension
 With External Style Sheet Entire Look of Web
Site is changed by just changing One
File
 External Style Sheets are attached to the Web
Pages using <link> Tag and Using rel,
type and href Attributes of <link> Tag
Example:
<link rel=“stylesheet” type=“text/css”

href=“c:\sheet.css” />
This Tag with Attributes Attaches Style Sheet named

EXTERNAL STYLE SHEETS----EXAMPLE-
CSS FILE CONTENTS
CSS File:
h1
{
font:verdana;
font-size:24px;
color:red;
}
p
{
font:times new roman;
font-size:12px;
color:blue;
}
Name of CSS File: style.css

EXTERNAL STYLE SHEETS----EXAMPLE-
HTML FILE CONTENTS
<html>
<head>
<title>External Style Sheet</title>
<link rel=“stylesheet” type=“text/css” href=“style.css />
</head>
<body>
<h1>Heading No 1</h1>
</body>
</html>
THE SELECTORS
 CSS allows to specify the following two
Selectors:
1. id Selector
2. class Selector
THE ID SELECTOR
 Used to Specify Style for Single Element
 Uses the id Attribute of HTML Element
 id Selector is defined using #

Example:
#paragraph
{
align:center;
font-size:18px;
}
#heading
{
align:right;
font-size:24px;
}
THE ID SELECTOR----EXAMPLE
<html>
<head>
<style type="text/css">
#para1
{
text-align:right;
color:red;
}
</style>
</head>
<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
THE CLASS SELECTOR
 Used to Specify Style for Group of Element
 Class Selector is mostly used on Various

Elements
 Uses the class Attribute of HTML Element
 id Selector is defined using .

Example:
.paragraph
{
align:center;
font-size:18px;
}
THE CLASS SELECTOR----EXAMPLE
<html>
<head>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class="center">Center-aligned
heading</h1>
<p class="center">Center-aligned
paragraph.</p>
</body>
</html>
CSS BACKGROUND COLOR
 Uses background-color Property
<html>
<head>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
<h1>Background Color</h1>
<p>Paragraph</p>
</body>
</html>
CSS BACKGROUND IMAGE
<html>
<head>
body {background-
image:url('paper.gif');}
</style>
</head>
<body>
<h1>Background Image</h1>
</body>
</html>
CSS FONT FAMILY
<html>
<head>
</head>
<body>
<p style="font-family:georgia,garamond,serif;">This text
is rendered in either georgia, garamond, or the default serif
font (depending on which font the user's system has).</p>
</body>
</html>
CSS FONT SIZE
<html>
<head>
</head>
<body>
<p style="font-size:20px;">This text is using a font size of 20
pixels.</p>
</body>
</html>
CSS FONT ADJUST SIZE
<html>
<head>
</head>
<body>
<p style="font-size-adjust:0.58;">This text is using a font-
size-adjust value.</p>
</body>
</html>
CSS FONT STRETCH
<html>
<head>
</head>
<body>
<p style="font-stretch:ultra-expanded;">If your computer
has an expanded version of the font being used, this text will
be stretched.</p>
</body>
</html>
CSS FONT STYLE
<html>
<head>
</head>
<body>
<p style="font-style:italic;">This text is in italics.</p>
</body>
</html>
CSS FONT VARIANT
<html>
<head>
</head>
<body>
<p style="font-variant:small-caps;">This Text Is Using
Small Caps.</p>
</body>
</html>
FONT WEIGHT
<html>
<head>
</head>
<body>
<p style="font-weight:bold;">This text is bold.</p>
</body>
</html>
CSS FONT PROPERTY
<html>
<head>
</head>
<body>
<p style="font:italic small-caps bold 20px
georgia,garamond,serif;">The styles for this text has been
specified with the 'font' shorthand property.</p>
</body>
</html>
CSS TEXT COLOR
<html>
<head>
</head>
<body>
<p style="color:olive;">This CSS text color is olive</p>
</body>
</html>
CSS TEXT ALIGN
<html>
<head>
</head>
<body>
<p style="text-align:right;">This CSS text is aligned
right</p>
</body>
</html>
CSS LETTER SPACING
<html>
<head>
</head>
<body>
<p style="letter-spacing:5px;">This text has letter spacing
applied</p>
</body>
</html>
CSS WORD SPACING
<html>
<head>
</head>
<body>
<p style="word-spacing:50px;">This text has word spacing
applied</p>
</body>
</html>
TEXT DECORATION
<html>
<head>
</head>
<body>
<p style="text-decoration:overline;">This text has a line over
the top</p>
<p style="text-decoration:line-through;">This text has a line
through the middle</p>
<p style="text-decoration:underline;">This text has a line
underneath</p>
</body>
</html>
TEXT TRANSFORM
<html>
<head>
</head>
<body>
<p style="text-transform:uppercase;">This text has been
transformed to uppercase</p>
<p style="text-transform:lowercase;">THIS TEXT HAS BEEN
TRANSFORMED TO LOWERCASE</p>
<p style="text-transform:capitalize;">this text has been
capitalized.</p>
</body>
</html>
CSS TEXT DIRECTION
<html>
<head>
</head>
<body>
<p style="direction:rtl;">This text is running from right to
left.</p>
</body>
</html>
CSS TEXT SHADOW
<html>
<head>
</head>
<body>
<p style="text-shadow:4px 4px 8px blue;">If your browser
supports the CSS text-shadow property, this text will have a
shadow.</p>
</body>
</html>
CSS TEXT BACKGROUND COLOR
<html>
<head>
</head>
<body>
<p style="background-color:yellow;">This text has a
background color applied.</p>
</body>
</html>
CSS TEXT BACKGROUND IMAGE
<html>
<head>
</head>
<body>
<p style="height:100px;background-
image:url(1.png);">This text has a background image
applied. </p>
</body>
</html>
CSS BACKGROUND IMAGE REPEAT
<html>
<head>
</head>
<body>
<p style="height:100px;background-
image:url(1.png);background-repeat:repeat-x;">This
background image repeat w.r.t x direction </p>
</body>
</html>
CSS BORDER STYLES
<html>
<head>
</head>
<body>
<p style="border:4px solid blue;“>Solid Border</p>
<p style="border:4px dotted blue;">Dotted Border</p>
<p style="border:4px dashed blue;">Dashed Border</p>
<p style="border:4px double blue;">Double Border</p>
</body>
</html>
CSS BORDER WIDTH
<html>
<head>
</head>
<body>
<p style="border-width:6px;border-style:solid;” >This text
has border styles border width=6px</p>
</body>
</html>
CSS BORDER COLOR
<html>
<head>
</head>
<body>
<p style="border-width:1px;border-style:solid;border-
color:blue;">This text has border styles applied using the
border-width, border-style, and border-color properties.</p>
</body>
</html>
CSS MARGINS ALL SIDES
<html>
<head>
</head>
<body>
<div style="border:1px solid blue;"><p style="border:1px solid
orange;margin:20px;">This text has a margin of 20 pixels on
all four sides.It is nested within a div with a border to make it
easier to see the effect of the margin.</p>
</div>
</body>
</html>
CSS MARGINS EACH SIDE
<html>
<head>
</head>
<body>
<div style="border:1px solid blue;width:200px;"><p
style="border:1px solid orange;margin:40px 10px 1px
40px;">This text has a different sized margin for each side. It
is nested within a div with a border to make it easier to see the
effect of the margin.</p></div>
</body>
</html>
CSS PADDING ALL SIDES
<html>
<head>
</head>
<body>
<p style="border:1px solid orange;padding:20px;">This text
has padding of 20 pixels on all four sides.</p>
</body>
</html>
CSS PADDING EACH SIDE
<html>
<head>
</head>
<body>
<p>With padding:</p>
<div style="border:1px solid orange;width:100px;padding:20px
10px 0px 100px;">Padded div</div>
<p>Without padding:</p>
<div style="border:1px solid orange;width:100px;">Non-padded
div</div>
</body>
</html>
CSS LIST TYPES
<html>
<head>
</head>
<body>
<ul style="list-style-type:circle;">
<li>List item one</li>
<li>List item two</li>
</ul>
</body>
</html>
CSS LIST STYLE IMAGE
<html>
<head>
<title>Image Bullets</title>
</head>
<body>
<h4>Custom Bullets</h4>
<ul style=“list-style-image: url(bullet_img.gif)"
>
<li>America</li>
<li>England</li>
<li>Pakistan</li>
<li>Austrailia</li>
</ul>
</body>
</html>
CSS LIST STYLE POSITION
<html>
<head>
</head>
<body>
<ul style="list-style-position:inside;">
<li>List item one</li><li>List item two</li>
</ul>
<ul style="list-style-position:outside;">
<li>List item one</li><li>List item two</li>
</ul>
</body>
</html>
CSS MARKER OFFSET
<html>
<head>
</head>
<body>
<ul>
<li style="display:marker;marker-offset:10px;">
List item one
</li>
<li>List item two</li>
</ul>
</body>
</html>
CSS HEIGHT AND WIDTH
<html>
<head>
</head>
<body>
<div style="background-
color:orange;height:125px;width:75px;">This div has height
and width applied.</div>
</body>
</html>
CSS MAXIMUM HEIGHT AND MAXIMUM
WIDTH
<html>
<head>
</head>
<body>
<div style="background-color:orange;max-height:125px;max-
width:75px;">This div has max-height and max-width
applied.</div>
</body>
</html>
CSS MINIMUM HEIGHT AND MINIMUM
WIDTH
<html>
<head>
</head>
<body>
<div style="background-color:orange;min-height:125px;min-
width:75px;">This div has min-height and min-width
applied.</div>
</body>
</html>
CSS RELATIVE POSITIONING
<html>
<head>
</head>
<body>
<div style="position:relative;left:80px;background-
color:yellow;width:100px;">This div has relative
positioning.</div>
</body>
</html>
CSS ABSOLUTE POSITIONING
<html>
<head>
</head>
<body>
<div
style="position:absolute;top:100px;left:60px;background-
color:yellow;">
This div is absolutely positioned 100 pixels from the top and 60
pixels from the left of its containing block.
</div>
</body>
</html>
CSS FIXED POSITIONING
<html>
<head>
</head>
<body>
<div
style="position:fixed;top:100px;left:60px;width:180px;backg
round-color:red;">
This div is using a fixed position of 100 pixels from the top and
60 pixels from the left of its containing block. When this page
scrolls, this box will remain in a fixed position - it won't scroll
with the rest of the page. Go on - SCROLL!
</div>
</body>
</html>
CSS FLOAT
 The CSS float property enables you to determine where
to position an element relative to the other elements on the
page. When you use the float property, other elements will
simply wrap around the element you applied the float to.
<html>
<head>
</head>
<body>
<div style="width:300px;">
<h1 style="float:left;margin-right:10px;">CSS float</h1>
<p>If your browser supports the CSS float Property, this text
will be flowing around the heading.If this does not seem to
work, it could be a browser compatibility thing...</p>
</div>
</body>
</html>
CSS CELL PADDING
<html>
<head>
</head>
<body>
<table border="1" cellpadding="10px">
<tr>
<td>Padded Cell 1</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
CSS PADDING EXAMPLE
<html>
<head>
table.padded-table td
{
padding:10px;
}
</style>
</head>
<body>
<table border="1" class="padded-table">
<tr><td>Padded Cell 1</td><td>Padded Cell 2</td></tr>
</table>
</body>
</html>
PADDING EACH SIDE INDEPENDENTLY
<html>
<head>
table.padded-table-2 td
{
padding-top:20px;
padding-right:10px;
padding-bottom:0px;
padding-left:100px;
}
</style>
</head>
<body>
<table border="1" class="padded-table-2">
</table></body></html>
CSS HYPERLINKS
 You can use CSS to change the appearance and
behavior of hyperlinks.
 To do this, you can use the following
selectors/pseudo-classes:
1. a
2. a:link
3. a:visited
4. a:hover
5. a:active
CSS HYPERLINKS EXAMPLE
<html>
<head>
a {font-family:Georgia, "Times New Roman", Times, serif;font-size:large;cursor:
auto}
a:link {color:blue;}
a:visited {color: #660066;}
a:hover {text-decoration: none; color: #ff9900; font-weight:bold;}
a:active {color: #ff0000;text-decoration: none}
</style>
</head>
<body>
<p><a href="/css/css_hyperlinks.cfm" target="_blank">CSS Hyperlinks</a></p>
</body>
<head>
a {font-family:Georgia, "Times New Roman", Times, serif;font-size:large;cursor:
auto}
a:link {color:blue;}
a:visited {color: #660066;}
a:hover {text-decoration: none; color: #ff9900; font-weight:bold;}
a:active {color: #ff0000;text-decoration: none}
</style>
</head>
<body>

Css

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Css

Încărcat de

Drepturi de autor:

Formate disponibile

WEB PROGRAMMING

Cascade Style Sheets (CSS)

 Used to Separate Presentation and Contents

Example: Using CSS we define Rules that define

2. Internal Style Sheet

3. External Style Sheet

 In Inline Style we use style Attribute in the

 This Style is only Applicable to the Element`s

 For Example if we define Inline Style using

 Mostly used if you want that Each Element has

<link rel=“stylesheet” type=“text/css”

This Tag with Attributes Attaches Style Sheet named

Name of CSS File: style.css

 Uses the id Attribute of HTML Element

 id Selector is defined using #

 Class Selector is mostly used on Various

 Uses the class Attribute of HTML Element

 id Selector is defined using .

S-ar putea să vă placă și