Cascading Style Sheet PDF

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>
2
In-Line CSS Rule applied
</head> directly to the tag
<body>
<p style = “font-size:8pt; background-image : url(‘images/back40.gif’)”> International
institute of Professional Studies.
<body>
</html>
========================================================
Types of CSS selectors
CSS Selectors
In CSS, selectors are patterns used to select the element(s) you want to style.
The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3).
Selector Example Example description CSS
.class .intro Selects all elements with class="intro" 1
#id #firstname Selects the element with id="firstname" 1
* * Selects all elements 2
element p Selects all <p> elements 1
element,element div,p Selects all <div> elements and all <p> 1

elements
CSS Contextual Selector

element element div p Selects all <p> elements inside <div> 1
elements
element>element div>p Selects all <p> elements where the parent is a 2

<div> element
element+element div+p Selects all <p> elements that are placed 2

immediately after <div> elements( only first
<p> and there should be no other tag between
<div> and <p>)
element1~element2 p~ul Selects every <ul> element that are preceded 3

by a <p> element. First <p > is open and
closed and the just after <ul> starts. Both
elements must have the same parent,
but element2 does not have to be immediately
preceded by element1.
CSS Attributes Selector

[attribute] [target] Selects all elements with a target attribute 2
[attribute=value] [target=_blank] Selects all elements with target="_blank" 2
[attribute~=value] [title~=flower] Selects all elements with a title attribute 2

containing the word "flower"
3
[attribute|=value] [lang|=en] Selects all elements with a lang attribute value 2
starting with "en"
[attribute^=value] a[src^="https"] Selects every <a> element whose src attribute 3

value begins with "https"
[attribute$=value] a[src$=".pdf"] Selects every <a> element whose src attribute 3

value ends with ".pdf"
[attribute*=value] a[src*="w3schools"] Selects every <a> element whose src attribute 3

value contains the substring "w3schools"
CSS Pseudo classes

:link a:link Selects all unvisited links 1
:visited a:visited Selects all visited links 1
:active a:active Selects the active link 1
:hover a:hover Selects links on mouse over 1
:focus input:focus Selects the input element which has focus 2
:first-letter p:first-letter Selects the first letter of every <p> element 1
:first-line p:first-line Selects the first line of every <p> element 1
:first-child p:first-child Selects every <p> element that is the first 2

child of its parent
:before p:before Insert content before the content of every 2

<p> element
:after p:after Insert content after every <p> element 2
:lang(language) p:lang(it) Selects every <p> element with a lang 2

attribute value starting with "it"
:first-of-type p:first-of-type Selects every <p> element that is the first 3

<p> element of its parent
:last-of-type p:last-of-type Selects every <p> element that is the last <p> 3
element of its parent
:only-of-type p:only-of-type Selects every <p> element that is the only 3

:only-child p:only-child Selects every <p> element that is the only 3

child of its parent
:nth-child(n) p:nth-child(2) Selects every <p> element that is the second 3

child of its parent
:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second 3

child of its parent, counting from the last child
:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second 3

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
:last-child p:last-child Selects every <p> element that is the last 3

child of its parent
:root :root Selects the document’s root element 3
:empty p:empty Selects every <p> element that has no 3

children (including text nodes)
:enabled input:enabled Selects every enabled <input> element 3
:disabled input:disabled Selects every disabled <input> element 3
:checked input:checked Selects every checked <input> element 3
:not(selector) :not(p) Selects every element that is not a <p> 3

element
::selection ::selection Selects the portion of an element that is 3

selected by a user
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:
<p id="footer">© 2012. All rights reserved.</p>
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.)
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
list-style-type lower-alpha This property will only works with <ul> or <ol>
lower-roman tag.
decimal None value will remove the symbol.
decimal-leading-zero decimal-leading-zero will prefix the zero with the
upper-alpha number.
upper-roman
none
circle
square
cursor Crosshair Show the cursor of various style.
Default
Progress
Text
Move
n-resize
ne-resize
w-resize
nw-resize
pointer
wait
progress
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
9
background-image url(imagepath) Set the background image of element.
background-repeat repeat / repeat-x / repeat-y Define how the background image repeat
/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)
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
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.
Figure 6-3: Simple text-shadow

You don’t have to provide positive integers as offset values; you can use both 0 (zero) and negative numbers
to get different effects. Here are a few
examples:
.one { text-shadow: -3px -3px #BBB; }
.two { text-shadow: -5px 3px #BBB; }
.three { text-shadow: -5px 0 #BBB; }
You can see the output of these examples in Figure 6-4. The first (top) example uses negative values for both
axes, so the shadow is rendered above and to the left of the text. The next (middle) example uses a negative
value for the x-axis and a positive value for the y, so the shadow renders below and to the left. The final
(bottom) example has a negative value for the x and a value of 0 for y, so the shadow renders to the left and on
the same baseline.
Figure 6-4: Different axis offset values for text-shadow

The text-shadow property also has a fourth option: blur-radius. This option sets the extent of a blur effect on
the shadow and must be used after the offset values:
E { text-shadow: x y blur-radius color; }
The blur-radius value is, like the two offset values, also an integer with a length unit; the higher the value, the
wider (and lighter) the blur. If no value is supplied (as in the examples shown in Figure 6-4), the blur-radius is
assumed to be zero. Here are a couple of examples:
.one { text-shadow: 3px 3px 3px #BBB; }
.two { text-shadow: 0 0 3px #000; }
You can see the output of these examples in Figure 6-5.
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.
Figure 6-6: Using multiple values with text-shadow

The CSS for these examples is shown here. The first example has a class of one, and the second has a class of
two. Note that I’ve indented them for clarity.
.one {
text-shadow:
0 -2px 3px #FFF,
0 -4px 3px #AAA,
0 -6px 6px #666,
0 -8px 9px #000;
}
.two {
color: #FFF;
text-shadow:
0 2px rgba(0,0,0,0.4),
0 4px rgba(0,0,0,0.4),
0 6px rgba(0,0,0,0.4),
0 8px 0 rgba(0,0,0,0.4);
}
 border-radius :
The Backgrounds and Borders Module introduces a way to round the corners of your elements using CSS
alone. Each corner is treated as a quarter ellipse, which is defined by a curve that is drawn between a point on
the x-axis and a point on the y-axis (you may remember those from Chapter 6). Figure 9-1 illustrates this more
clearly.
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); }
Vertical Reflection Scaling 0.5 in both x and y 1
 skew: this will skewed the element x and y degree.

E{transform:skew(10deg,20deg);}
 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.
For example we change the div background-color and opacity

property
div{
animation: mymove 5s infinite;
-webkit-animation: mymove 5s infinite;/*for chrome*/
}
@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
}
-webkit-scrollbar-corner
{
}
CSS Properties To JavaScript Reference Conversion

CSS Property JavaScript Reference
Background Background
background-attachment backgroundAttachment
background-color backgroundColor
background-image backgroundImage
background-position backgroundPosition
background-repeat backgroundRepeat
border border
border-bottom borderBottom
border-bottom-color borderBottomColor
border-bottom-style borderBottomStyle
border-bottom-width borderBottomWidth
border-color borderColor
border-left borderLeft
border-left-color borderLeftColor
border-left-style borderLeftStyle
border-left-width borderLeftWidth
border-right borderRight
border-right-color borderRightColor
border-right-style borderRightStyle
border-right-width borderRightWidth
border-style borderStyle
border-top borderTop
border-top-color borderTopColor
border-top-style borderTopStyle
border-top-width borderTopWidth
border-width borderWidth
clear clear
clip clip
color color
cursor cursor
display display
filter filter
font font
font-family fontFamily
font-size fontSize
font-variant fontVariant
font-weight fontWeight
20
height height
left left
letter-spacing letterSpacing
line-height lineHeight
list-style listStyle
list-style-image listStyleImage
list-style-position listStylePosition
list-style-type listStyleType
margin margin
margin-bottom marginBottom
margin-left marginLeft
margin-right marginRight
margin-top marginTop
overflow overflow
padding padding
padding-bottom paddingBottom
padding-left paddingLeft
padding-right paddingRight
padding-top paddingTop
page-break-after pageBreakAfter
page-break-before pageBreakBefore
position position
float styleFloat
text-align textAlign
text-decoration textDecoration
text-decoration: blink textDecorationBlink
text-decoration: line- textDecorationLineThrough
through
text-decoration: none textDecorationNone
text-decoration: overline textDecorationOverline
text-decoration: underline textDecorationUnderline
text-indent textIndent
text-transform textTransform
top top
vertical-align verticalAlign
visibility visibility
width width
z-index zIndex
21

Cascading Style Sheet PDF

Diunggah oleh

Informasi Dokumen

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Cascading Style Sheet PDF

Diunggah oleh

Hak Cipta:

Format Tersedia

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

.class .intro Selects all elements with class="intro" 1

#id #firstname Selects the element with id="firstname" 1

* * Selects all elements 2

element p Selects all <p> elements 1

element,element div,p Selects all <div> elements and all <p> 1

CSS Contextual Selector

element>element div>p Selects all <p> elements where the parent is a 2

element+element div+p Selects all <p> elements that are placed 2

element1~element2 p~ul Selects every <ul> element that are preceded 3

CSS Attributes Selector

[attribute=value] [target=_blank] Selects all elements with target="_blank" 2

[attribute~=value] [title~=flower] Selects all elements with a title attribute 2

[attribute^=value] a[src^="https"] Selects every <a> element whose src attribute 3

[attribute$=value] a[src$=".pdf"] Selects every <a> element whose src attribute 3

[attribute*=value] a[src*="w3schools"] Selects every <a> element whose src attribute 3

CSS Pseudo classes

:visited a:visited Selects all visited links 1

:active a:active Selects the active link 1

:hover a:hover Selects links on mouse over 1

:focus input:focus Selects the input element which has focus 2

:first-letter p:first-letter Selects the first letter of every <p> element 1

:first-line p:first-line Selects the first line of every <p> element 1

:first-child p:first-child Selects every <p> element that is the first 2

:before p:before Insert content before the content of every 2

:after p:after Insert content after every <p> element 2

:lang(language) p:lang(it) Selects every <p> element with a lang 2

:first-of-type p:first-of-type Selects every <p> element that is the first 3

:only-of-type p:only-of-type Selects every <p> element that is the only 3

:only-child p:only-child Selects every <p> element that is the only 3

:nth-child(n) p:nth-child(2) Selects every <p> element that is the second 3

:nth-last-child(n) p:nth-last-child(2) Selects every <p> element that is the second 3

:nth-of-type(n) p:nth-of-type(2) Selects every <p> element that is the second 3

:last-child p:last-child Selects every <p> element that is the last 3

:root :root Selects the document’s root element 3

:empty p:empty Selects every <p> element that has no 3

:enabled input:enabled Selects every enabled <input> element 3

:disabled input:disabled Selects every disabled <input> element 3

:checked input:checked Selects every checked <input> element 3

:not(selector) :not(p) Selects every element that is not a <p> 3

::selection ::selection Selects the portion of an element that is 3

<p id="footer">&copy; 2012. All rights reserved.</p>

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-

Figure 6-3: Simple text-shadow

Figure 6-4: Different axis offset values for text-shadow

Figure 6-6: Using multiple values with text-shadow

Vertical Reflection Scaling 0.5 in both x and y 1

 skew: this will skewed the element x and y degree.

For example we change the div background-color and opacity

CSS Properties To JavaScript Reference Conversion

Anda mungkin juga menyukai

[attribute=value] a[src="w3schools"] Selects every <a> element whose src attribute 3

<p id="footer">© 2012. All rights reserved.</p>