Cascading Style Sheet PDF
Cascading Style Sheet PDF
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.
Cons: 1) Need to reapply style information throughout the document and outside documents
2) Bound too closely to HTML- difficult to update.
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>
</head>
<body>
<h1>Devi Ahilya University</h1>
<p> International institute of Professional Studies.
<body>
</html>
==============================================================
3
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value 2
starting with "en"
:last-of-type p:last-of-type Selects every <p> element that is the last <p> 3
element of its parent
4
:nth-last-of-type(n) p:nth-last-of- Selects every <p> element that is the second 3
type(2) <p> element of its parent, counting from the
last child
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 in 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.
5
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:
To style this element in CSS, precede the ID name with a hash mark (#):
#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. This means the style rules will apply, only
when certain condition is true. For example a certain tag is in some other tag(Say a <p> tag is in a tag whose
ID is navigation). Take, for instance, the following example:
<p>I am a paragraph.</p>
<p>So am I.</p>
<div id="navigation">
6
<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;
}
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.
Hover Effect:
When mouse is place over some element then, this is called hover effect. So by hover effect you can
set some CSS rule that will apply on the element when mouse is placed over them.
selector:hover
{
CSS Rule;
}
a:hover
{ background-color:black; color:white; }
by the above css rule, when user hovers its mouse over to the any anchor (<a>) tag then its background
color is set it black and foreground color or text color is set to white and when the user moves out the mouse
course from anchor then background and foreground color is set to previous color.
7
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.
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.
8
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.)
margin,margin-left,margin- Numeric value (e.g. 2px) Create margin between border of parent
right,margin-top,margin- element and element
bottom
10
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:
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.
11
Visibility, display, top, left, width, height, overflow are also important. Find the difference between
visibility (visible/hidden) and display (none/inline/block)
CSS 3 Specific Elements:
rgba() function for specifying color:
CSS3 introduces a couple of new ways to specify colors, and one of those is RGBA. The A stands
for Alpha, which refers to the level of opacity of the color, or to put it another way, the amount of
transparency. This means that we can set not only the red, green and blue values, but also control how much
of what’s behind the color shows through.
E { color: rgba(red, green, blue, alpha); }
Suppose there is a h1 tag and you set its CSS rules like given below:
body
{
background-color:rgb(255,0,0);
}
h1 {
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
opacity: 0.5;
}
In HTML
<h1>Some Text<h1>
So by above CSS Rule and HTML, the whole h1 block(background color and text in it) will be transparent to
50% . But if we want only background color should be transparent not the Text in it. So for that we have to
use the new rule
body
{
background-color:rgb(255,0,0);
}
h1 {
color: rgba(0, 0, 0,1.0);
background-color: rgba(255, 255, 255,0.5);
}
In the above rule we use rgba() function to specify the color, the fourth argument is alpha value of color which
could be in the range of 1.0 for not transparent and 0.0 for full transparent.
Text-shadow: This property shows the shadow to the text around in a tag.
selector{ text-shadow: x y blur-radius color}
The ability to apply drop shadows to text using the text-shadow property has been around for a long time;
Safari first implemented it in version 1.1, which was released in 2005. So you might be wondering why I am
discussing it in a book on CSS3. As with the font properties in the previous chapter, text-shadow was dropped
from CSS2.1 due to lack of implementation, but this property has been reinstated in the CSS3 spec and
recently implemented in Firefox and Opera.
12
The position of the shadow is set using the x and y coordinates that I just introduced. The simplest form of the
syntax accepts two values: x to set the horizontal distance from the text (known as the x-offset) and y to set the
vertical distance (the y-offset):
E { text-shadow: x y; }
By default, the shadow will be the color that it inherited from its parent (usually black), so if you want to
specify a different color, you need to provide a value for that, such as:
E { text-shadow: x y color; }
Here’s an example of a gray (hex code #BBB) drop shadow located 3px to the right and 3px down from the
original image:
h1 { text-shadow: 3px 3px #BBB; }
You can see the output of this code in Figure 6-3.
13
Figure 6-5: Different blur values for text-shadow
In the first example, I set the same offset values as in Figure 6-1, but with a blur-radius value of 3px. The
result is a much softer, more “natural” shadow. In the second example, I’ve set 0 values for the offsets and a
3px blur-radius, matching the text to the background and creating the illusion that the text is raised.
Multiple Shadows
You don’t have to limit yourself to a single shadow—text-shadow’s syntax supports adding multiple shadows
to a text node. Just supply extra values to the property, using commas to separate them, like so:
E { text-shadow: value, value, value; }
The shadows will be applied in the order you supply the values. Figure 6-6 shows two examples of multiple
shadows in action.
14
A quarter ellipse can be regular, which means the length along both axes is the same, or irregular, which
means the length along each axis is different. Figure 9-2 shows examples of both.
CSS3 defines these curves using the border-radius property. This property allows you to define the radius of
the quarter ellipse simply using the following
syntax:
E { border-v-h-radius: x y; }
In this syntax, v is a keyword value of top or bottom, h is a keyword value of left or right, and the x and y
values are lengths along the axes that define the curve of the quarter ellipse. That sounds like a mouthful, but
here’s an example that should make it clearer:
div { border-top-right-radius: 20px 20px;}
This syntax will round the top-right corner of a div element with a radius of 20px horizontally and vertically,
which is a regular curve.
div {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
border-bottom-left-radius: 20px;
}
for regular curves
div {
border-top-left-radius: 10px 20px;
border-top-right-radius: 10px 20px;
border-bottom-right-radius: 10px 20px;
border-bottom-left-radius: 10px 20px;
}
To create irregular curves,
border-radius Shorthand
If having to write a different property for each corner strikes you as quite repetitive, you'll be happy to learn
that a shorthand property is available. As with border-width, margin, and padding, you can specify one, two,
three, or four values. Where those values refer to sides, however, the border-radius values refer to corners,
starting at the top left:
E { border-radius: top-left top-right bottom-right bottom-left; }
E { border-radius: top-left top-right & bottom-left bottom-right; }
E { border-radius: top-left & bottom-right top-right & bottom-left; }
15
E { border-radius: top-left & top-right & bottom-right & bottom-left; }
i.e. div{ border-radius:10px 20px 30px 40px;}
div{ border-radius:10px 20px 30px;}
div{ border-radius:10px 40px; }
div{ border-radius:10px; }
box-shadow
We looked at a way to add drop shadows to text with the text-shadow property, but CSS3 also has a method
for adding shadows to box elements using the box-shadow property. The syntax for box-shadow is similar to
that of text-shadow:
E { box-shadow: inset horizontal vertical blur spread color; }
The first value, inset, is an optional keyword that sets whether the shadow sits inside or outside of the
element. If inset is not specified, the shadow will sit outside. The next two values are lengths, which set the
horizontal and vertical distance of the shadow from the box; if you want to have a shadow, these values are
required.
The next value sets the blur radius and is again a length value. Then you have spread, which sets the distance
the shadow spreads. A positive length makes the shadow larger than its element, and a negative length makes
it smaller. Both of these values are optional.
Finally you have the color value. In WebKit, this value is required, but in Firefox and Opera, it’s optional. If
left unspecified, color will default to black. Now I’ll put them together in an example:
div { box-shadow: 4px 4px 3px #666; }
That syntax creates a dark gray shadow outside of the element, positioned at a
distance of 4px, both horizontally and vertically, with a blur radius of 3px.
transform:
A range of different transformations can be applied, but all are declared as functions in the transform property.
Here’s the basic syntax:
E { transform: function(value); }
A number of possible functions are available; I’ll explore each in turn throughout the rest of this chapter. Each
function takes either a single value or a comma-separated list of values. I’ll also explain what this means when
I discuss each function individually.
As I mentioned in the beginning of the chapter, Firefox (3.5+), Opera (10.5+), IE9 (Release Candidate), and
WebKit all developed implementations of the transform property, each with its proprietary prefix, which
means that to use this property currently, you have to specify it four times:
E{
-moz-transform: function(value); /* Firefox */
-ms-transform: function(value); /* Internet Explorer */
-o-transform: function(value); /* Opera */
-webkit-transform: function(value); /* WebKit for Google Chrome */
}
Ordinarily, I would recommend adding the nonprefixed property after each of the browser-specific ones, so
future browser version releases that implement the nonprefixed property are accounted for, like so:
E{
-moz-transform: function(value); /* Firefox */
-ms-transform: function(value); /* Internet Explorer */
-o-transform: function(value); /* Opera */
-webkit-transform: function(value); /* WebKit for Google Chrome*/
transform: function(value); /* Future-proofing */
}
16
rotate
Probably the simplest of all the functions is rotate, which does what it sounds like it should do: It rotates the
element around a set point. Here’s the syntax:
E { transform: rotate(value); }
The value here is a single angle value in degree(deg) just like you used with the CSS. I’m going to rotate an
h2 element by –25 degrees (or 335 degrees), using this rule:
h2 { transform: rotate(-25deg); }
translate
The next function we’ll look at is translate, which moves the element from its default position. Three
functions are actually involved: tranlateX, translateY, and translate:
E{
transform: translateX(value);
transform: translateY(value);
}
E { transform: translate(translateX,translateY); }
The first two functions, translateX and translateY, move the element along an axis for the length that you
specify. You can use any length units or percentage values here, so, for example, you could have:
E{
transform: translateX(20px);
transform: translateY(15%);
}
This code would move the element 20px to the right (along the x-axis), and 15 percent of its own height down
(along the y-axis). You can also use negative values, which would move the element in the opposite direction
along the axis—that is, up or to the left.The next function, translate, is shorthand for translateX and
translateY. You could use it with the previous example values like so:
E { transform: translate(20px,15%); }
scale:
You can make an element larger or smaller than the original by using the scale function. Once again, you have
functions for the horizontal and vertical values and a shorthand function:
E{
transform: scaleX(value);
transform: scaleY(value);
}
E { transform: scale(scaleX,scaleY); }
The values for scaleX and scaleY are unitless numbers, which give a size ratio. The default size is 1; 2 is
twice the default, 0.5 is half the default, and so on. You can also use negative numbers. Using a negative value
has the effect of flipping the element vertically, creating a “reflection” of the original element at the same
scale.
17
To make an element double its original size on both axes, you would use:
E{
transform: scaleX(2);
transform: scaleY(2);
}
Or this can written as: E { transform : scale(2,2); }
For creating vertical reflection : E { transform : scale(1,-1); }
Animation: Animation is a CSS3 property by which you can create some animation effects on a
HTML element. That element could be any div, span, p etc or any CSS id or say any CSS selector.
This animation will change the css proper of element. We have to give the css property at from level
and to level or at percentage of animation level. The attribute of animation property are
a) keyframes name at which animation CSS property are listed at various time. Like from , to, 10%,
20%……etc.
b) duration in which the animation complete. Say 5s for 5 seconds.
c) And the number of time the animation will continuo for example infinite, or 1, or 2….
And in keyframes part of animation will describe the various property at various level from animation.
@keyframes mymove
{
from{ background-color:red ; opacity:0.5 ; }
to { background-color:green ; opacity:1.0 ;}
}
@-webkit-keyframes mymove
{
from{ background-color:red ; opacity:0.5 ; }
to { background-color:green ; opacity:1.0 ;}
}
18
transition :we can create animation by this CSS property. By this property we can gives
duration for individual property to change. Means if this property value will be changes later
by some event than this new property will take some time which we already mentioned.
div{
transition :width 2s ease, height 1s ease-in, transform 2s;
-webkit-transition: width 2s ease, height 1s ease-in, -webkit-transform 2s;
}
div:hover
{
-webkit-transform: rotate(360deg) scale(2,2); /* Chrome */
transform: rotate(360deg) scale(2,2);
}
Means if the width or height of any div is changed, than it will take some time. Width
will take 2 seconds and height will take 1 second to changed. So this effect will create some
sort of animation. First value defines CSS Property, second duration, third is transition-timing-
function, which defines how this animation works, means slow start fast end or fast start slow
end etc.
Scroll Bar: To Change the scroll bar of browser we can use the CSS 3 scrollbar property.
Presently this property is working in google chrome only. Following are the various
component of scroll bars and we can change them also by some CSS selectors.
Width
Track
Thumb
Button
corner
Height
::-webkit-scrollbar
{
width:10px; height:10px;
}
::-webkit-scrollbar-track
{
background-color:green;
border-radius:10px
}
::-webkit-scrollnar-thumb
{
background-color:rgba(150,150,150,0.5);
border-radius:10px
}
-webkit-scrollbar-button
{
19
background-color:rgba(150,150,150,0.5);
}
-webkit-scrollbar-corner
{
background-color:rgba(150,150,150,0.5);
}
21