Scribd
Upload
92 views

Cascading Style Sheets: - Deepa Acharya

The document provides an introduction to Cascading Style Sheets (CSS). It discusses that CSS allows for more precise and consistent presentation specifications compared to XHTML alone. It describes the different levels of CSS including inline, document-level, and external style sheets and how they cascade based on precedence. The document outlines various CSS selectors including simple element selectors, class selectors, ID selectors, and pseudo-classes. It also lists common CSS properties across categories like fonts, lists, alignment, margins, colors, backgrounds and borders.

Uploaded by

Deepa Acharya
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
92 views

Cascading Style Sheets: - Deepa Acharya

The document provides an introduction to Cascading Style Sheets (CSS). It discusses that CSS allows for more precise and consistent presentation specifications compared to XHTML alone. It describes the different levels of CSS including inline, document-level, and external style sheets and how they cascade based on precedence. The document outlines various CSS selectors including simple element selectors, class selectors, ID selectors, and pseudo-classes. It also lists common CSS properties across categories like fonts, lists, alignment, margins, colors, backgrounds and borders.

Uploaded by

Deepa Acharya
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 64

Cascading Style Sheets

- Deepa Acharya
Introduction
 XHTML is concerned primarily with content rather than the details of how that
content is presented by browsers.

 However, these presentation specifications can be more precisely and more


consistently described with style sheets.

 A style sheet is a syntactic mechanism for specifying style information.

 The CSS1 specification was developed in 1996.


 CSS2 was released in 1998
 CSS3 is the latest version

 CSSs provide the means to control and change presentation of HTML


documents.

 CSS is not technically HTML, but can be embedded in HTML documents


 Style sheets allow you to impose a standard style on a
whole document, or even a whole collection of documents

 Style is specified for a tag by the values of its properties

 XHTML style sheets are called cascading style sheets


because they can be defined at three different levels to
specify the style of a document.

 Lower level style sheets can override higher level style


sheets, so the style of the content of a tag is determined,
in effect, through a cascade of stylesheet applications.
Levels of Style Sheets
 There are three levels of style sheets
• Inline - specified for a specific occurrence of a tag and apply only to that tag
• Document-level style sheets - apply to the whole document in which they
appear
• External style sheets - can be applied to any number of documents

 When more than one style sheet applies to a specific tag in a document,
the lowest level style sheet has precedence

 Inline style sheets have precedence over document style sheets, which
have precedence over external style sheets.

 In a sense, the browser searches for a style property, starting with inline, until
it finds one (or there isn’t one)
Levels of Style Sheets
(continued)

 Inline style sheets appear in the tag itself


 Document-level style sheets appear in the head of the
document
 External style sheets are in separate files, potentially
on any server on the Internet
 Written as text files with the MIME type text/css

If no style sheet information is specified,


the browser default property values
are used.
Linking an External Stylesheet
 A <link> tag is used to specify that the browser is to fetch and use an external style sheet file.
 Within <link>, the rel attribute is used to specify the relationship of the linked-to document to the
document in which the link appears.
 The href attribute of <link> is used to specify the URL of the style sheet document, as in the following
example:

<link rel = "stylesheet" type = "text/css"


href = "http://www.wherever.org/termpaper.css">
</link>

 The @import directive is an alternative way to use style


specifications from other files. The
 form of this directive is
 @import url(file name);
 Notice that the file name is not quoted.
- External style sheets can be validated
http://jigsaw.w3.org/css-validator/
validator-upload.html
Style Specification Formats

 Format depends on the level of the style sheet


 Inline:
 Style sheet appears as the value of the style attribute
 General form:
style = "property_1: value_1;
property_2: value_2;
…
property_n: value_n"
Format for Document-level

 Style sheet appears as a list of rules that are the


content of a <style> tag
 The <style> tag must include the type attribute,
set to "text/css"
 The list of rules must be placed in an HTML comment,
because it is not HTML
 Comments in the rule list must have a different form -
use C comments (/*…*/)
General Form, Document
Level
 General form:
<style type = "text/css">
<!--
rule list
-->
</style>
 Form of the rules:
selector {list of property/values}
 Each property/value pair has the form:
property: value
 Pairs are separated by semicolons, just as in the value of a
<style> tag
EXAMPLE WHICH USES INLINE
STYLE SHEET
<html>
<head>
<title>Sample CSS</title>
</head>
<body>
<h1 style ="font-family: 'Lucida Handwriting'; font-size:
50pt; color: Red;"> Web Programming
</h1>
</body>
</html>
EXAMPLE WHICH USES DOCUMENT
LEVEL STYLE SHEET
<html>
<head> <title>Sample CSS</title>
<style type = "text/css">
h1 {
font-family: 'Lucida Handwriting';
font-size: 50pt;
color: Red; }
</style> </head>
<body>
<h1>Web Programming</h1>
</body>
</html>
General Form, External style
sheets

EXAMPLE WHICH USES


EXTERNAL STYLE SHEET Style1.css
<html> <head> <title>Sample h1
CSS</title> <link rel =
{
"stylesheet" type =
"text/css" href = font-family: 'Lucida
"Style1.css" /> </head> Handwriting';
<body> font-size: 50pt;
<h1>Web Programming</h1> color: Red;
</body> }
</html>
Selector Forms: Simple
1. Simple Selector Forms
• In case of simple selector, a tag is used. If the properties of the tag are
changed, then it reflects at all the places when used in the program.
• The selector can be any tag. If the new properties for a tag are not
mentioned within the rule list, then the browser uses default behaviour
of a tag.
<html>
<head>
<title>Sample CSS</title>
<style type = "text/css">
p{
font-family: 'Lucida Handwriting';
font-size: 50pt;
color: Red;
}
</style>
</head>
<body>
<p> OOMD</p>
<p>ECS</p>
<p>Web Programming</p>
</body>
</html>
Output
 Selectors can also specify that the style should apply only to elements in
certain positions in the document.

 This is done by listing the element hierarchy in the selector, with only
white space separating the element names.

 For example, the rule form em {font-size: 14pt;}


 applies its style only to the content of emphasis elements that are nested
in a form element in the document.

 This is a contextual selector (sometimes called a descendant selector).


Class Selectors

 Used to allow different occurrences of the same tag to use


different style specifications
 A style class has a name, which is attached to a tag name
 p.narrow {property/value list}
 p.wide {property/value list}
• The class you want on a particular occurrence of a tag is
specified with the class attribute of the tag
 For example,
<p class = "narrow">
...
</p>
...
<p class = "wide">
...
</p>
 In class selector, it is possible to give different properties for different elements
<html>
<head> <title>Sample CSS</title>
<style type = "text/css">
p.one {
font-family: 'Lucida Handwriting';
font-size: 25pt;
color: Red;
}
p.two {
font-family: 'Monotype Corsiva';
font-size: 50pt;
color: green; }
</style> </head>
<body>
<p class = "one">OOMD</p>
<p class = "two">Web Programming</p>
</body>
</html>
Output
Generic Selectors

• A generic class can be defined if you want a style to


apply to more than one kind of tag
• A generic class must be named, and the name must
begin with a period
 Example,
.really-big { … }
 Use it as if it were a normal style class
<h1 class = "really-big"> … </h1>
...
<p class = "really-big"> … </p>
<html>
<head> <title>Sample CSS</title>
<style type = "text/css">
.one {
font-family: 'Monotype Corsiva';
color: green;
}
</style>
</head>
<body>
<p class = "one"> Web Programming </p>
<h1 class = "one"> Web Programming </h1>
<h6 class = "one"> Web Programming </h6>
</body>
</html>
Output
id Selectors

 An id selector allow the application of a style to one


specific element
 General form:
#specific-id {property-value list}
 Example:
#section14 {font-size: 20}
 An id selector allows the application of a style to one specific element.
<html> <head> <title>Sample CSS</title> <style type = "text/css">
#one {
font-family: 'lucida calligraphy';
color: purple;
}
#two {
font-family: 'comic sans ms';
color: orange;
} </style> </head>
<body>
<p id = "two">Web Programming</p>
<h1 id = "one"> Web Programming </h1>
</body>
</html>
Output
Universal Selectors:
 The universal selector, denoted by an asterisk (*), applies its style to all elements in a
document.
<html>
<head> <title>Sample CSS</title>
<style type = "text/css">
*{
font-family: 'lucida calligraphy';
color: purple;
}
</style> </head>
<body>
<h1> Web Programming </h1>
<h2> Web Programming </h2>
<h3> Web Programming </h3>
<p> Web Programming </p>
</body>
</html>
Output
Pseudo Classes

 Pseudo classes are styles that apply when something


happens, rather than because the target element simply
exists
 Names begin with colons
 hover classes apply when the mouse cursor is over the
element
 focus classes apply when an element has focus
Pseudo Class Example
<!-- pseudo.html -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title> Checkboxes </title>
<style type = "text/css">
input:focus
{
font-family: 'lucida calligraphy';
color: red;
font-size:100;
}
input:hover
{

font-family: ‘Courier New';


color: violet;
font-size:40; }
</style>
</head>
<body>
<form action = "">
<p>
Your name:
<input type = "text" />
</p>
</form>
</body>
</html>
output

Input.hover input.focus
Properties

 There are 60 different properties in 7 categories:


 Fonts
 Lists
 Alignment of text
 Margins
 Colors
 Backgrounds
 Borders
Property Values

 Keywords - left, small, …


 Not case sensitive
 Length - numbers, maybe with decimal points
 Units:
 px - pixels
 in - inches
 cm - centimeters
 mm - millimeters
 pt – points (1/72 of 1inch)
 pc - picas (12 points)
 No space is allowed between the number and the unit
specification e.g., 1.5 in is illegal!
Font Properties
 font-family

 The font-family property is used to specify a list of font names.

 The browser uses the first font in the list that it supports.

 For example, the property:

font-family: Arial, Helvetica, Futura

 tells the browser to use Arial if it supports that font. If not, it will use Helvetica if it
supports it. If the browser supports neither Arial nor Helvetica, it will use Futura if it
can. If the browser does not support any of the specified fonts, it will use an
alternative of its choosing.

 If a font name has more than one word, the whole name should be delimited by
single quotes, as in the following example: font-family: ‘Times New Roman’
 A generic font can be specified as a font-family value.
The possible generic fonts and examples of each are
shown in below Table.
 Each browser has a font defined for each of these
generic names.
Font Properties (continued)
 font-size
 Possible values: a length number or a name, such as Many relative font-size values are defined, including xx-small, x-
small, small, medium, large, x-large, and xx-large. In addition, smaller or larger can be specified.

 font-variant:
The default value of the font-variant property is normal, which specifies the usual character font. This property can be set to
small-caps to specify small capital characters.

 font-style
 italic, oblique, normal

 font-weight - degrees of boldness


 bolder, lighter, bold, normal
 Could specify as a multiple of 100 (100 – 900). Where 400 is same as normal & 700 is bold
 font
 For specifying a list of font properties
font: bolder 14pt Arial Helvetica
 Order must be: style, weight, size, name(s)

 The letter-spacing property controls the amount of space between characters in text. The possible values of
letter-spacing are any length property values—for example, 3px.
<html>
<head> <title>Font Properties</title>
<style type = "text/css">
p.one
{
font-family: 'lucida calligraphy';
font-weight:bold; font-size:75pt;
color: purple;
letter-spacing:3px;
}
h1.two
{
font-family: 'cambria';
color: violet;
font-style:italics;
}
p.three
{
font: small-caps italic bold 50pt 'times new roman'
}
</style>
</head>
<body>
<p class = "one">Xtensible MArkup Language</p>
<h1 class = "two">CascaDING Style Sheets</h1>
<p class = "three">Java Script</p>
List properties
 Two presentation details of lists can be specified in XHTML documents: the shape of the
bullets that precede the items in an unordered list and the sequencing values that precede the
items in an ordered list. The list-style-type property is used to specify both of these.

 list-style-type property
 Unordered lists
 Bullet can be a disc (default), a square, or a circle
 Set it on either the <ul> or <li> tag
 On <ul>, it applies to list items
<h3> Some Common Single-Engine Aircraft </h3>
<ul style = "list-style-type: square">
<li> Cessna Skyhawk </li>
<li> Beechcraft Bonanza </li>
<li> Piper Cherokee </li>
</ul>
List properties (continued)

 On <li>, list-style-type applies to just that item


<h3> Some Common Single-Engine Aircraft </h3>
<ul>
<li style = "list-style-type: disc">
Cessna Skyhawk </li>
<li style = "list-style-type: square">
Beechcraft Bonanza </li>
<li style = "list-style-type: circle">
Piper Cherokee </li>
</ul>
List properties (continued)

 Could use an image for the bullets in an unordered list

<html>

<head> <title>CSS Bullets-Image</title> <

style type = "text/css">

li.image {

list-style-image: url(bullet.png);

font-size:25pt;

</style> </head>

<body>

<h1>Different types of lists</h1>

<ul>

<li class = "image"> Unordered List</li>

<li class = "image"> Ordered list</li>

<li class = "image"> Definition List</li>

</ul>

</body> </html>
 On ordered lists - list-style-type can be used to
change the sequence values

Property value Sequence type First four


Decimal Arabic numerals 1, 2, 3, 4
upper-alpha Uc letters A, B, C, D
lower-alpha Lc letters a, b, c, d
upper-roman Uc Roman I, II, III, IV
lower-roman Lc Roman i, ii, iii, iv

Colors

 Color is a problem for the Web for two reasons:


1. Monitors vary widely
2. Browsers vary widely
- There are three color collections
1. There is a set of 16 colors that are guaranteed to be displayable
by all graphical browsers on all color monitors
Colors (continued)
2. Most Web browsers now recognize 140 named colors, although these names are not part of a
W3C standard and prevent CSS validation.

3. There is a much larger set, the Web Palette

 216 colors
 These colors, which are often called Web-safe colors, are displayable by Windows- and
Macintosh-based browsers, but may not be correctly displayed with some old terminals
__________________________________________
 The color property specifies the foreground color of elements
<style type = “text/css”>
th.red {color: red}
th.orange {color: orange}
</style>
…
<table border = "5">
<tr>
<th class = "red"> Apple </th>
<th class = "orange"> Orange </th>
<th class = "orange"> Screwdriver </th>
</tr>
</table>
 The background-color property specifies the background color of elements
ALIGNMENT OF TEXT

 The text-indent property can be used to indent the first


line of a paragraph. This property takes either a length or a
percentage value.

 The text-align property, for which the possible keyword


values are left, center, right, and justify, is used to
arrange text horizontally.

 The float property is used to specify that text should flow


around some element, often an image or a table. The
possible values for float are left, right, and none, which is
the default.
<html>
<head> <title>Text Alignment</title>
<style type = "text/css">
h1.one
{text-align: center ;}
p.two
{text-indent: 0.5in; text-align: justify;} img{float:right}
</style> </head>
<body>
<h1 class = "one">Web Programming</h1>
<p> <img src = "kk.jpg" alt="error"/> </p>
<p class=“two”> The float property is used to specify that text should flow around some
element, often an image or a table. The possible values for float are left, right, and
none, which is the default. For example, suppose we want an image to be on the right
side of the display and have text flow around the left side of the image. To specify this
condition, the float property of the image is set to right. Because the default value for
text-align is left, text-align need not be set for the text.</p>
</body>
</html>
Output
BACKGROUND IMAGES
 The background-image property is used to place an image in the background of
an element.

<html>
<head> <title>Background Image</title> <style type = "text/css">
body {
background-image:url(bg3.jpg);
}
p{
text-align: justify; color:white;font-size:25pt;
} </style> </head>
<body>
<p> Programming the Web </p>
</body>
</html>
Output
Text Decoration
 The text-decoration property is used to specify some special features of
text. The available values are line-through, overline, underline, and none,
which is the default.
<html>
<head> <title>Text Decoration</title>
<style type = "text/css">
h1.one {
text-decoration: line-through;
}
h1.two {
text-decoration: overline;
}
h1.three {text-decoration: underline;}
</style>
</head>
<body>
<h1 class = "one">Web Programming</h1> <p>[This is line-through]</p><br/>
<h1 class = "two"> Web Programming </h1> <p>[This is overline]</p><br/>
<h1 class = "three"> Web Programming </h1>
<p>[This is underline]</p><br/>
</body> </html>
Output
THE <span> AND <div> TAGS
 In many situations, we want to apply special font properties to less than a
whole paragraph of text. The <span> tag is designed for just this purpose.
<html>
<head> <title>span</title>
<style type = "text/css">
.spanviolet {
font-size:25pt;font-family:'lucida calligraphy';color:violet;
}
</style> </head>
<body>
<p > If we want to apply special font properties to less than a whole paragraph of
text,we can use <span class = "spanviolet"> SPAN TAG </span> which does this
job</p>
</body>
</html>
Output
 It is more convenient, however, to be able to apply a style to a section of
a document rather than to each paragraph.
 This can be done with the <div> tag. Its primary use is to specify
presentation details for a section or division of a document.
<html>
<head> <title>div</title>
<style type = "text/css">
.one {
font-size:20pt;font-family:'lucida calligraphy';
color:violet;
}
.two {font-size:25pt;font-family:'comic sans ms'; color:green;
}
</style> </head>
<body>
<div class = "one">
<p>Paragragh 1 under division 1</p>
<p>Paragragh 2 under division 1</p> <p>Paragragh 3 under
division 1</p>
</div> <div class = "two">
<p>Paragragh 1 under division 2</p> <p>Paragragh 2 under
division 2</p> <p>Paragragh 3 under division 2</p>
</div>
</body>
</html>
Output
The Box Model
 On a given web page or a document, all the elements can have
borders.
 The borders have various styles, color and width.
 The amount of space between the content of the element and its
border is known as padding.
 The space between border and adjacent element is known as
margin.
Borders:
Border-style
 It can be dotted, dashed, double
 Border-top-style
 Border-bottom-style
 Border-left-style
 Border-right-style

Border-width
 It can be thin, medium, thick or any length value
 Border-top-width
 Border-bottom-width
 Border-left-width
 Border-right-width

Border-color
 Border-top-color
The Box Model (continued)

 Margins and Padding: The margin properties are named margin,


which applies to all four sides of an element:
 margin-left
 margin-right
 margin-top
 margin-bottom.

 The padding properties are named padding, which applies to all


four sides:
 padding-left
 padding-right
 padding-top
 padding-bottom.
Conflict Resolution

 When two or more rules apply to the same tag there are rules for
deciding which rule applies
 Document level
 In-line style sheets have precedence over document style sheets
 Document style sheets have precedence over external style sheets
 Within the same level there can be conflicts
 A tag may be used twice as a selector
 A tag may inherit a property and also be used as a selector
 Style sheets can have different sources
 The author of a document may specify styles
 The user, through browser settings, may specify styles
 Individual properties can be specified as important
 p.special {font-style: italic !important; font-size: 14}
Precedence Rules

 From highest to lowest


1. Important declarations with user origin
2. Important declarations with author origin
3. Normal declarations with author origin
4. Normal declarations with user origin
5. Any declarations with browser (or other user agent)
origin
Tie-Breakers

 Specificity
1. id selectors
2. Class and pseudo-class selectors
3. Contextual selectors
4. General selectors
 Position
 Essentially, later has precedence over earlier

You might also like