Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
48 views

Cascading Style Sheets: Prepared By: E.Swathi, Asst - Prof., CSE, CBIT 1

Cascading Style Sheets (CSS) allow users to control the style and layout of web pages independently of their content. CSS separates appearance from content in HTML documents, enabling flexible design. CSS rules define how elements should be displayed, including colors, fonts, spacing and more. Styles can be applied inline, internally in the <head> of a document, or externally in separate .css files. Selectors target elements by type, class, ID, and other attributes to which styles can then be applied. This allows consistent styling across multiple pages through external CSS files.

Uploaded by

Likith
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
48 views

Cascading Style Sheets: Prepared By: E.Swathi, Asst - Prof., CSE, CBIT 1

Cascading Style Sheets (CSS) allow users to control the style and layout of web pages independently of their content. CSS separates appearance from content in HTML documents, enabling flexible design. CSS rules define how elements should be displayed, including colors, fonts, spacing and more. Styles can be applied inline, internally in the <head> of a document, or externally in separate .css files. Selectors target elements by type, class, ID, and other attributes to which styles can then be applied. This allows consistent styling across multiple pages through external CSS files.

Uploaded by

Likith
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 30

CASCADING STYLE SHEETS

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 1


INTRODUCTION
• XHTML is concerned primarily with content rather than the details of how that content
is presented by browsers.
• To control the look and feel of HTML documents in an organized and efficient manner
with CSS.
• What is css?
 Styles define how to display HTML elements
 It makes the HTML document to display with different styles.
• To develop a large web sites, fonts and colors information were added to every single
page, became a long and expensive process. To solve this problem, the www
consortium (w3c) created CSS.
• In HTML 4.0 all formatting tags were removed from the html document, and stored in a
separate CSS file.
• CSS supported by all the browser.

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 2


CSS
SYNTAX OF CSS
• When we want to apply a nice red color as the background of a webpage,
Using HTML we could have done it like this:
<body bgcolor="#FF0000">
• With CSS the same result can be achieved like this:
body {background-color: #FF0000;}
• The above example shows the fundamental CSS model

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 3


CSS
• 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 style-sheet applications.
• There are three ways to apply style sheets
o Inline CSS: apply to the content of a single XHTML element
o Internal style sheet /document level style sheet: apply to the whole body of a document
o External style sheet: apply to the bodies of any number of documents.

• If no style sheet information is specified, the browser default property values are used.

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 4


1. Inline CSS
• It can be coded in the body of the web page as an attribute of an HTML tag.
• Inline style specifications appear within the opening tag and apply only to the content of
that tag.
• It applies to the specific element that contains it as an attribute
• This has highest priority over internal and external style sheets.
• Inline overrides styles that are defined in external or internal by using inline css.
• Syntax:
Style=“property:value_1;property:value_2;…..;”
• Example
<p style="background-color: red;color:white;">CBIT</p>

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 5


2. Internal/Document-level style sheet
• Document-level style specifications appear in the document head section and apply to
the entire body of the document.
• It is an effective way to impose a uniform style on the presentation of all of the content
of a document.
• The general form of the content of a style element is as follows:

• The type attribute of the <style> tag tells the browser the type of style specification,
which is always text/css.
• Each style rule in a rule list has two parts: a selector, which indicates the tag or tags
affected by the rule, and a list of property–value pairs.
• The form of a style rule is as follows:

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 6


2. Internal/Document-level style sheet
• Example:
<head>
<style>
p{ color:red;
text-align:center;
font-size:20px;
}
h2{color:green;
font -size:30px;
font-style:italic;
font-family:‟Times New Roman‟;
}
</style>
</head>
<body>
<p> helloworld</p>
<h2> this paragraph is styled with css</h2>
</body>

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 7


3. External style sheet
• To apply the style to many pages
• you can change the look of entire web site by changing one file.
• External CSS is a file that contains only CSS code and is saved with a “.css” file
extension
• Each html file should link to this file using <link> tag.
• rel. Specifies the relationship between the current document and the linked document.
• Format of style file:

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 8


3. External style sheet
• Advantages
- keeps web site design and content separate.
- reuse css code for entire website.
- changes will be done in a single file

1. create css file 2. Create html file and link to css


test.css <head>
body{ background-color:gray;} <link rel=“stylesheet” type=“text/css”
p{ color:blue;} href=“test.css”}
h3{color:white;} </head>
<body>
<p>CBIT in blue color</p>
<h3>CSE-2,3rdyear</h3>
</body>

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 9


Selector forms
• HTML has tags and CSS has selectors.
• Selectors are the names given to styles in internal and external style sheets.
• Types of selector forms
1. Simple selector forms
2. Class selector
3. Generic selector
4. id selector
5. Universal selector

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 10


1. Simple selector form
• It is a single element name
• Property values in the rule apply to all the occurrences of the named element.
• List of element names are separated by commas.
• Example
p{font –size:30pt;}
h1,h2{ font-size:40pt;}

• 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;}
• This 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 adescendant
selector).

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 11


2. Class selectors
• Class selectors are used to allow different occurrences of the same tag to use different
style specifications.
• A style class is defined in a style element by giving the style class a name, which is
attached to the tag‟s name with a period.
<body>
Example:
<h1>Welcome to My Homepage</h1>
<head>
<style>
<div class="intro">
.intro {
<p class="min">My name is jamesBond.</p>
background-color: yellow;
<p class="max">I live in hyderabad.</p>
}
</div>
p.min{font-size:30pt;
<p>My best friend is Mickey.</p>
font-style:italic;}
p.max{font-size:30pt;
</body>
font-style:italic;
font-color:green;}
</style>
</head>
Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 12
3. Generic selectors
• A class of style specifications that applies to the content of more than one kind of tag.
• Defined without using tag name
• Use generic class name which must begin with a period.
• Eg:
.color{font-color:red;}
< h3 class=“color”>CBIT</h3>
<h2 class=“color”>CSE-2</h2>

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 13


4. Id selector
• An id selector allows the application of a style to one specific element.
• Style the element with id as an attribute.
• Syntax
#idname{property:value-list}
• example <head>
<style>
#firstname {
background-color: yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div>
<p id="firstname">My name is Donald.</p>
</div>

<p>My best friend is Mickey.</p>


Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 14
</body>
5. Universal selectors
• Denoted by an asterisk(*)
• Applies style to all the elements in a document
• Example <head>
<style>
*{color:red;} *{
background-color: yellow;
}
</style>
</head>
<body>

<h1>Welcome to My Homepage</h1>

<div>
<p>My name is Donald.</p>
<p>I live in Duckburg.</p>
</div>

<p>My best friend is Mickey.</p>

</body>

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 15


6. Pseudo classes
• A pseudo-class is used to define a special state of an element.
• For example, it can be used to:
 Style an element when a user mouses over it
 Style visited and unvisited links differently
 Style an element when it gets focus

Example:
<head>
<style type="text/css">
input:hover{color:red;}
input:focus{color:green;}
</style>
</head>
<body>
<form>
your name:<input type="text" name="text"/>
</form
</body>
Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 16
The box model
• All the html elements can have borders .
• We can style these borders with different colors and width.

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside thePrepared
border. The margin
by: E.Swathi, Asst.Prof.,is transparent
CSE, CBIT 17
Borders
Border-style Dotted/dashed/double/null
(Border-top-style,
Border-bottom-style
Border-left-style
Border-right-style)
Border-width Thin/medium(default)/ thick/value in px
(Border-left-width
Border-right-width
Border-top-width
Border-bottom-width)
Border-color Color name
(border-top-color,
border-bottom-color,
border-left-color,
border-right-color)

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 18


Margins and padding
• Padding is the space between the content of an element and its border.
• The margin is the space between the border of an element and the element‟s neighbor.
• The margin properties are named margin, which applies to all four sides of an element:
margin-left, margin-right, margin-top, and margin-bottom.
• The padding properties are named padding, which applies to all four sides: padding-left,
padding-right, padding-top, and padding-bottom.

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 19


Box model example
Example:
<style>
div {
background-color: lightgrey;
width: 400px;
border: 10px solid green;
padding: 50px;
margin: 50px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>The CSS box model</p>
<div>This text is the actual content of the box.
We have added a 25px padding,
25px margin and a 25px green border.
</div>

</body>
Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 20
<div> tag
- <div> tag is used to group the html elements together.
- used to make sections in html document
- Like container which encapsulate other html elements.

Example:
<div style="background-color:red;
border:10px solid green;
padding:20px;
font-size:20px">
<p>Welcome to div tag</p>
<p>CBIT,CSE-2</p>
</div>

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 21


<span> tag
• Span tag is similar to div tag
• Span tag is used to group and apply styles to inline elements

Example:
<html>
<head>
<title>HTML span Tag</title>
</head>
<body>
<p>This is text with different color
<span style = "color:#FF0000;"> This
is a paragraph</span>
This is a paragraph</p>
<p>
<span style = "color:#8866ff;">This is
another paragraph</span></p>
</body>
</html>
Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 22
Font Properties
• 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
• The font-size property does what its name implies. For example, the following property
specification sets the font size for text to 10 points:
font-size: 10pt
• 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-variant:small-caps
• The font-style property is most commonly used to specify italic, as in
font-style: italic
• The font-weight property is used to specify the degree of boldness, as in
font-weight: bold
Besides bold, the values normal (the default), bolder, and lighter can be specified.

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 23


Font Properties
• Font Shorthands
 font: bold 14pt „Times New Roman‟ Palatino
specifies that the font weight should be bold, the font size should be 14 points, and
either Times New Roman or Palatino font should be used, with precedence given to
Times New Roman.

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 24


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.
• EX:
p.max{text-decoration:line-through}

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 25


List Properties
• The list-style-type property is used to specify the shape of the bullets and sequence of
values.
• The list-style-type property of an unordered list can be set to disc, circle, square, or
none. The default property value for bullets is disc.
• List-style-image property creates an image as a bullet. Its value is specified with the url
form.

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 26


List Properties

• The list-style-type property can be used to specify the types of sequence values.

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 27


Color
• The color property is used to specify the foreground color of XHTML elements.

• Only 17 colors are guaranteed to be correctly displayed by all browsers on all color
monitors. This collection is called as named colors.

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 28


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.
Eg: p.indent{text-indent : 0.5in}

• The text-align property, for which the possible keyword values are left, center, right,
and justify, is used to arrange text horizontally.
Eg: p{text-align : right}

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 29


Refernces:
1. Robert W Sebesta, “Programming the World Wide Web”, Pearson Education
2. www.w3schools.com
3. https://www.tutorialspoint.com/web_development_tutorials.htm

Prepared by: E.Swathi, Asst.Prof., CSE, CBIT 30

You might also like