Cascading Style Sheet

Cascading Style Sheet/ Style Sheet: A style defines how to display HTML element.
A
Style specification or style sheet is simply a collection of rules. These rules include a selector –an HTML
element, a CLASS name or an ID value- which is bound to a style property such as font-family, followed by
a colon and the values for that style property. Multiple style rules may be included in a style specification by
separating the rules with semicolon.
Selector Property Values
property
H1 {
Font-family: Serif, Sans-Serif ;
Font-size : 16pt
}
Adding Style to a Document
Style information may be included in an HTML document in any one of three basic ways:
1) Use an outside style sheet, either by importing it or by linking to it.
2) Embed a document-wide style in the <HEAD> element of the document.
3) Provide an inline style exactly where the style needs to be applied.
External Style Sheets:
An external style sheet is ideal when the style is applied to many pages. With an external style sheet,
you can change the look of an entire Web site by changing one file. Each page must link to the style sheet
using the <link> tag. The <link> tag goes inside the head section:
Pros: Can set style for many documents with one style sheet
Cons : Require extra download time for the style sheet, which may delay page rendering.
Document-Wide Style/ Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal
styles in the head section of an HTML page, by using the <style> tag, like this:
Pros: 1) Can control style for a document in one place.
2) No Additional download time for style information.
Cons: Need to reapply style information for other documents.

Inline Style
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any
CSS property.
Pros: 1) Can control style to a single character instance.
2) Overrides any external or document style.
Cons: 1) Need to reapply style information throughout the document and outside documents
2) Bound too closely to HTML- difficult to update.
• Example of External CSS

First Create the .css (dot css) file with style rule specifications.
Second Link this .css file to the .html file.
For example the code for file “Test.css” is :
body {
font-size:8pt;
background-image : url("images/back40.gif")
1
}
h1,h2,h3 {
color : blue;
font-style: italic
}
p
{
color : red;
text-align : center;
}
Now here we link the above .css file with the .html file named “StyleExample.html”
<html>
<head> Linking of CSS file
<title>Style demo</title>
<link rel="stylesheet" type="text/css" href="test.css" />
</head>
<body>
<h1>Devi Ahilya University</h1>
<p> International institute of Professional Studies.
<body>
</html>
• Example of Internal / Document-Wide CSS

<html>
<head>
<style type="text/css">
body { Style rule coding
font-size : 8pt ; in html file’s
<head> Section
background-image : url("images/back40.gif")
}
</style>
</head>
<body>
<p> International institute of Professional Studies.
<body>
</html>
==============================================================
• Example of In-line CSS

<html>
<head> In-Line CSS Rule applied
2 directly to the tag
</head>
<body>
<p style = “font-size:8pt; background-image : url(‘images/back40.gif’)”> International
institute of Professional Studies.
<body>
</html>
========================================================
Types of CSS selectors
In the previous example, the most basic style of selector was used: an element selector. This defines the
visual appearance of the relevant HTML tag. In the sections that follow, we’ll examine some other regularly
used (and well-supported) CSS selectors: class, ID, grouped, and contextual.
Class selectors
In some cases, you may wish to modify an element or a group of elements. For instance, you may wish for
your general website text to be blue, as in the examples so far, but some portions of it to be red. The simplest
way of doing this is by using a class selector. In CSS, a class selector’s name is prefixed by a period (.), like
this:
.warningText
{
color: red;
}
This style is applied to HTML elements in any web page the style sheet is attached to using the class attribute,
as follows:
<h2 class="warningText">This heading is red.</h2>
<p class="warningText">This text is red.</p>
<p>This is a paragraph, <span class="warningText">and this text is
❁ red</span>.</p>
If you want a make a class specific to a certain element, place the relevant HTML tag before the period in the
CSS rule:
p.warningText
{
color: red;
}
If you used this CSS rule with the HTML elements shown previously, the paragraph’s text would remain red,
but not the heading or span, due to the warningText class now being exclusively tied to the paragraph selector
only.
Usefully, it’s possible to style an element by using multiple class values. This is done by listing multiple
values in the class attribute, separated by spaces:
<p class="warningText hugeText">
The previous example’s content would be styled as per the rules .warningText and .hugeText.
ID selectors
ID selectors can be used only once on each web page. In HTML, you apply a unique identifier to an HTML
element with the id attribute:
3
<p id="footer">© 200X The Company. All rights reserved.</p>
To style this element in CSS, precede the ID name with a hash mark (#):
p #footer
{
padding: 20px;
}
In this case, the footer paragraph would have 20 pixels of padding on all sides. Essentially, then, classes can
be used multiple times on a web page, but IDs cannot. Typically, IDs are used to define one-off page
elements, such as structural divisions, whereas classes are used to define the style for multiple items.
Grouped selectors
Should you wish to set a property value for a number of different selectors, you can use grouped selectors,
which take the form of a comma-separated list:
h1, h2, h3, h4, h5, h6 {
color: green;
}
In the preceding example, all the website’s headings have been set to be green. Note that you’re not restricted
to a single rule for each element—you can use grouped selectors for common definitions and separate ones for
specific property values, as follows:
1
h1, h2, h3, h4, h5, h6 {
color: green;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size: 1.2em;
}
Contextual selectors
This selector type is handy when working with advanced CSS. As the name suggests, contextual selectors
define property values for HTML elements depending on context. Take, for instance, the following example:
<p>I am a paragraph.</p>
<p>So am I.</p>
<div id="navigation">
<p>I am a paragraph within the navigation div.</p>
<p>Another paragraph within the navigation div.</p>
</div>
You can style the page’s paragraphs as a whole and then define some specific values for those within the
navigation div by using a standard element selector for the former and a contextual selector for the latter:
p{
color: black;
}
#navigation p {
color: blue;
font-weight: bold;
4
}
As shown, syntax for contextual selectors (#navigation p) is simple—you just separate the individual selectors
with some whitespace. The two rules shown previously have the following result:
The p rule colors the web page’s paragraphs black. The #navigation p rule overrides the p rule for paragraphs
within the navigation div, coloring them blue and making them bold. By working with contextual selectors,
it’s possible to get very specific with regard to styling things on your website; we’ll be using these selectors
regularly.
5
The CSS box model
In CSS, every element is considered to be within its own box, and you can define the dimensions of the
content and then add padding, a border, and a margin to each edge as required, as shown in the following
image.
Padding, borders, and margins are added to the set dimensions of the content, so the sum of these elements is
the overall space that they take up. For example, a 100-pixel-wide element with 20 pixels of padding will take
up an overall width of 140 pixels, not 100 pixels with 20 pixels of padding within.
Note that the top and bottom margins on adjacent elements collapse. For example, if you set the bottom
margin to 50px on an element, and set a top margin of 100px on the element below, the margin between the
two elements will be 100 pixels, not 150 pixels.
6
Now there are lots of properties available in CSS, which governs the look of html Tag. Some of them we’ll
discuss here. Generally property value are given in some measure, they are:
%: A percentage.
cm: Centimeters.
ex: One ex is, in theory, equal to the font size of the x character of the current element. Most browsers
render ex as half an em.
in: Inches.
mm: Millimeters.
pc: Picas. 1pc = 12pt.
pt: Points. 1pt = 1/72in.
px: Pixels.
Some time property values are given in space separated list. They are interpreted as :
1) A single value (margin:10px;). This is applied to all margins.
2) Two values (margin:10px 20px;). The first setting (10px ) is applied to the top and bottom edges
and the second setting (20px) is applied to both the left and right edges (20px each, not in total.)
3) Three values (margin: 10px 20px 30px) The first setting (10px) is applied to the top edge. The
second setting (20px) is applied to both the left and right edges. The third setting(30px) is
applied to the bottom edge.
4) Four Setting (margin:10px 20px 30px 40px). Setting applied clockwise from the
top(top,right,bottom,left.)
Property Name Values Description

background For defining background property values in a
single declaration. Values can be any of those
from background-attachment, background-
color, background-image, background-
position, and background-repeat, in any order.
Example:
background: #ffffff url(background.gif)
fixed left repeat-y;
background-position left top This will position’s the background image

left center positions in the element. If you only specify one
left bottom keyword, the second value will be "center"
right top
right center background-position:left top
right bottom
center top
center center
center bottom
background-attachment scroll/fixed Determines whether a background image is
fixed or scrolls with the page.
background-color color value e.g. Defines the elements background color.

rgb(n,n,n) / #rrggbb
background-image url(imagepath) Set the background image of element.
background-repeat repeat / repeat-x / repeat- Define how the background image repeat
y /no-repeat itself in the element background.
repeat – repeat in both direction (x and y)
repeat-x – repeat in only x direction (from left
to right)
7
repeat-y – repeat in only y direction (from top
to bottom)
no-repeat – image will not repeat itself.
border For defining border property values in a single
declaration for all four border. Values can be
any of those from border-width, border-style,
and border-color. Borders are drawn on top of
a box’s background. Example:
border: 1px solid #000000;
border-bottom (e.g.) Defines the bottom border only with border-

border-bottom: 1px solid width, border-style, and border-color
#000000;
border-bottom-color Color Define the bottom border color.
border-bottom-style dashed / dotted / double / Creates bottom border with different style.
groove / inset / none /
outset / ridge / solid
border-top (e.g.) Defines the top border only with border-

border-top: 1px solid width, border-style, and border-color
#000000;
border-top-color Color Define the top border color.
border-top-style dashed / dotted / double / Creates top border with different style.
border-left (e.g.) Defines the left border only with border-

#000000;
border-left-color Color Define the left border color.
border-left-style dashed / dotted / double / Creates left border with different style.
border-right (e.g.) Defines the right border only with border-

#000000;
border-right-color Color Define the right border color.
border-right-style dashed / dotted / double / Creates right border with different style.
margin,margin-left,margin- Numeric value (e.g. 2px) Create margin between border of parent
right,margin-top,margin- element and element
bottom
Padding,padding-left,padding- Numeric value (e.g. 2px) Insert the space padding between content of
right,padding-top,padding- element and border of element
bottom
position absolute / fixed /relative / Determines the positioning method used
static to render the element’s box:
8
absolute: Element is placed in a specific
location outside of normal document flow,
using the top, right, bottom, and left
properties.
fixed: As per absolute, but the element
remains stationary when the screen scrolls.
Poorly supported by some browsers.(Not
supported by IE)
relative: Offset from the static position by the
values set using top, right, bottom, and left
properties. These values are relative to the
parent element.
static: The default. The top, right, bottom,
and left properties do not affect the element if
this value is set. The element is not removed
from the document’s normal flow.
text-align left / center / justify /right Align the content text in the element.
text-transform capitalize / lowercase / Convert the content text of the element to
uppercase / none lower case / upper case or
capitalize( capitalize the first character of each
word). None for normal
z-index Number(e.g. 1 2 3 4 5 6 Changes an element’s position in the stack.
etc.) Higher numbers are “closer” and lower
numbers are “further away.”
Opacity filter: alpha(opacity=50); The opacity means “how much transparent is
for Internet Explorer element with parent element”.
opacity:0.5; for all other The opacity property takes a value of the
browser amount of transparency from 0.0 to 1.0. 0.0 is
100% transparent - anything below that
element will show completely through. 1.0 is
100% opaque - nothing below the element
will show through.
For internet explorer we use filter property for
opacity. It will take 0-100 as argument value.
0 for full transparent.
For all other browser we use opacity property
directly with the value range from 0.0 to 1.0.
Visibility, display, top, left, width, height, overflow are also important. Find the difference between
visibility and display

Cascading Style Sheet

Uploaded by

Document Information

Original Description:

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

Cascading Style Sheet

Uploaded by

Copyright:

Available Formats

Cascading Style Sheet/ Style Sheet: A style defines how to display HTML element.

Document-Wide Style/ Internal Style Sheet

Cons: Need to reapply style information for other documents.

• Example of External CSS

• Example of Internal / Document-Wide CSS

• Example of In-line CSS

Property Name Values Description

background-position left top This will position’s the background image

background-color color value e.g. Defines the elements background color.

border-bottom (e.g.) Defines the bottom border only with border-

border-top (e.g.) Defines the top border only with border-

border-left (e.g.) Defines the left border only with border-

border-right (e.g.) Defines the right border only with border-

You might also like