Introduction To CSS3

Introduction to CSS3
1
Cascading Style Sheets
 CSS1 introduced styles for the following document
features:
 Fonts
 Text
 Color
 Backgrounds
 Block-level Elements
2
 CSS2 introduced styles for the following document
features:
 Positioning
 Visual Formatting
 Media Types
 Interfaces
 CSS 2.1 did not add any new features to the language
3
 CSS3 (which is still in development) will introduce styles
for the following document features:
 User Interfaces
 Accessibility
 Columnar layout
 International Features
 Mobile Devices
 Scalable Vector Graphics
4
CSS3
Some of the most important CSS3 modules are:
 Selectors
 Box Model
 Backgrounds and Borders
 Image Values and Replaced Content
 Text Effects
 2D/3D Transformations
 Animations
 Multiple Column Layout
 User Interface
5
Inserting CSS in HTML document
 There are three ways of inserting a style sheet:
 External style sheet
 Internal style sheet
 Inline style
6
External Style Sheet
 An external style sheet can be written in any text editor

 The file should not contain any html tags
 The style sheet file must be saved with a .css extension
 Linking css to web page has 2 ways:
 Linking
 Importing
7
Linking
<head>
<link rel="stylesheet" type="text/css"
href="myStyle.css">
</head>
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
8
Importing
 Helps to access the style rules from other CSS style sheets
<style type=“text/css”>
@import url(“myStyle.css”)
H1{
color:blue;}
}
</style>
9
Internal Style Sheet
 An internal style sheet should be used when a single document has a unique style
 Internal styles are defined in the head section of an HTML page, inside the <style> tag
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
10
Inline Styles
 To use inline styles, add the style attribute to the relevant

tag
 The style attribute can contain any CSS property
<h1 style="color:blue;margin-left:30px;">This is a
heading.</h1>
11
Multiple Style Sheets
 If some properties have been  internal style sheet property

set for the same selector in for the <h1> element
different style sheets, the h1 {
values will be inherited from color: orange;
the more specific style sheet }
 external style sheet
properties for the <h1>  If the page with the internal
element: style sheet also links to the
h1 { external style sheet, then
color: navy; properties for the <h1>
element will be
margin-left: 20px;
} color: orange;
margin-left: 20px;
12
CSS3 Selectors
 In CSS, selectors are patterns used to select the element(s) you want to style.
 CSS selectors allow you to select and manipulate HTML elements.
 CSS selectors are used to "find" (or select) HTML elements based on their
id, class, type, attribute, and more .
 CSS rule is divided into 2 parts:
 Selectors
 Declaration
 Different types of selectors are:
 Universal
 Type
 class
 Id
 Child
 Descendent
 Adjacent Sibiling
 Attribute
 query
Example
 p {
color: red;
text-align: center;
}
 All <p> elements will be center-aligned, with a red text
color
14
1. Universal
 The universal selector, written "*", matches the name of

any element type
* { margin: 0; padding: 0; }
 This rule set will be applied to every element in a
document
15
2. Type
 CSS type selectors match elements by node name

 Syntax : element { style properties }
Example :
span
{
background-color: Blue;
color: #ffffff;
}
 Html: <span>Here's a span with some text.</span>
<p>Here's a p with some text.</p>

 Example2: h1,h2,h3,p{ font-family:sans-serif}
16
3. class
 The class selector selects elements with a specific

class attribute.
 To select elements with a specific class, write a period
character, followed by the name of the class
 For ex: all HTML elements with class="center" will
be center-aligned in following ex.
 .center {
text-align: center;
color: red;
}
17
 You can also specify that only specific HTML elements
should be affected by a class.
 p.center {
text-align: center;
color: red;
}
 Ex.2 :<h1 class=“intro”>Header 1</h1>
.intro { font-family:sans-serif}
OR
H1.intro { font-family:sans-serif}
18
4.ID
 The id selector uses the id attribute of an HTML element
to select a specific element.
 An id should be unique within a page, so the id selector is
used if you want to select a single, unique element.
 To select an element with a specific id, write a hash
character (#), followed by the id of the element.
<p id=“para1”> hello students</p>
#para1 {
text-align: center;
color: red;
}
19
Combinator
 A combinator is something that explains the relationship
between the selectors.
 A CSS selector can contain more than one simple selector.
Between the simple selectors, we can include a combinator.
 There are four different combinators in CSS3:
 descendant selector (space)

 child selector (>)
 adjacent sibling selector (+)
 general sibling selector (~)
20
5.Child
 A child selector matches when an element is
the immediate child of some element
 A child selector is made up of two or more selectors
separated by ">".
 The following rule sets the style of all P elements that
are children of BODY
 body > P { line-height: 1.3 }
21
div > p {
background-color: yellow;
}
<body>
<div>
<p>Paragraph 1 in the div.</p>
<span>
</span> 
</div>
</body>
22
6.Desecndent
 The descendant selector matches all elements that are
descendants of a specified element.
 The combinator we use in a descendant selector is a
whitespace character: a space, horizontal tab, carriage
return, line feed, or form feed
 E F : Matches any F element that is a descendant of an
E element.
table p { font-family:sans-serif}
23
div p {
}
<body>
<div>
<span>
</span>
</div>
<p>Paragraph 4. Not in a div.</p>
</body>
24
7. Adjacent Sibiling
 Adjacent sibling combinator uses the plus symbol (+)
as a combinator & is same as general sibling selector
 The difference is that the targeted element must be an
immediate sibling, not just a general sibling.
Ex.1: p + p { text-indent: 1.5em; margin-bottom: 0; }
Ex .2 : h2+p { font-family:sans-serif}
<h2>heading</h2>
<p>selector above matches this paragraph</p>
<p> selector above does not match this paragraph</p>
25
div + p {
}
div + p : Selects all <p> elements that are placed
immediately after <div> elements
<body>
<div>
</div>
</body>
26
div ~ p {
}
<body>
<div>
</div>
</body>
27
8:Query
 Returns the first element within the document (using
depth-first pre-order traversal of the document's
nodes) that matches the specified group of selectors
 Returns null if no matches are found
syntax: element = document.querySelector(selectors);
where
 element is an element object.
 selectors is a string containing one or more CSS selectors separated by
commas.
 Get the first element in the document with class="example":
 document.querySelector(".example");
28
 To return all the matches, use querySelectorAll() method instead
 <h2>A h2 element</h2>
<h3>A h3 element</h3>
document.querySelector("h2, h3").style.backgroundColor = "red";
 <h3>A h3 element</h3>
<h2>A h2 element</h2>
document.querySelector("h2, h3").style.backgroundColor = "red";
29
Query Selector Program
30
31
Query Selector Program
<!DOCTYPE html>
<html>
<head><title>hello</title>
</head>
<body>
<h1>Working with Query selector</h1>
<div id="div1" style="padding:50px;width=100px;height=100px;border:1px solid
black">
</div>
<p>Move the cursor over color name</p>
<label id="label1">Blue</label>
<label id="label2">Red</label>
<label id="label3">Yellow</label>
<input id="text">
<script type="text/javascript">
if(document.querySelector)
{ var lbl1=document.querySelector('#label1')
var lbl2=document.querySelector('#label2')
32
var lbl3=document.querySelector('#label3')
{
document.querySelector('#text').value="This is blue color";
document.querySelector('#text').style.color="blue";
document.querySelector('#div1').style.background="blue";
}
lbl2.onmouseover=function()
{
document.querySelector('#text').value="This is Red color";
document.querySelector('#text').style.color="red";
document.querySelector('#div1').style.background="red";
}
lbl3.onmouseover=function()
{
document.querySelector('#text').value="This is green color";
document.querySelector('#text').style.color="green";
document.querySelector('#div1').style.background="green";
}
}
</script>
</body>
</html>
33
<style>
p.ex1 {
margin: 2cm 4cm 3cm 4cm;
}
</style>
</head>
<body>
<p>A paragraph with no specified margins.</p>
<p class="ex1">A paragraph with specified margins.</p>
<p>A paragraph with no specified margins.</p>
</body>
34
CSS3 Pseudo-classes
 A pseudo-class is used to define a special state of an

element.
 The syntax of pseudo-classes:
 selector:pseudo-class {
property:value;
}
 It can be used to:
 Style an element when a user mouses over it
 Style visited and unvisited links differently
Dynamic/Anchor Pseudo-classes
 Links can be displayed in different ways:

1. /* unvisited link */
a:link {
color: #FF0000;
}
 /* visited link */
a:visited {
color: #00FF00;
}
 /* mouse over link */
a:hover {
color: #FF00FF;
}
 /* selected link */
a:active {
color: #0000FF;
}
37
Pseudoclass2.html
<!DOCTYPE html>
<head>
<style type="text/css">
a:focus{border-width:10; border-style: solid;border-color: black;background-color:lime;}
p:hover {background-color:yellow;color:green;}
</style>
</head>
<body>
<h1><a href="pseudoclass11.html">Dynamic Pseudo classes page11</a1></h1>
<p>
demo text demo text demo text demo text demo text
</p>
</body>
</html>
38
Pseudoclass11.html
<!DOCTYPE html>
<head>
a:link {color:blue;}
a:visited {color:green;}
a:active{color:orange;}
</style>
</head>
<body>
<h1><a href="pseudoclass2.html">Dynamic Pseudo classes page2</a1></h1>
</body>
</html>
39
CSS3 Pseudo-elements
 A CSS pseudo-element is used to style specified parts of

an element
 It can be used to:
 Style the first letter, or line, of an element
 Insert content before, or after, the content of an element
 The syntax of pseudo-elements:
selector::pseudo-element {
property:value;
}
CSS3 Pseudo-elements
 ::first-line
 ::first-letter
 ::before
 ::after
 ::selection
::first-line
 ::first-line pseudo-element is used to add a special style to

the first line of a text
 p::first-line {
color: #00ff00;
font-variant: small-caps;
}
::first-letter
 The ::first-letter pseudo-element is used to add a special
style to the first letter of a text.
 p::first-letter {
color: #0000ff;
font-size: xx-large;
}
::before
 The ::before pseudo-element can be used to insert some content before the content of an
element.
<head>
<style>
h2::before {
content: url(smiley.gif);
}
</style>
</head>
<body>
<h1>dsjkfhisjdf</h1>
<h2>This is a heading</h2>
<p>The ::before pseudo-element inserts content before the content of an element.</p>
::after
 The ::after pseudo-element can be used to insert some
content after the content of an element.
<style>
h1::after {
content: url(smiley.gif);
}
</style>
<body>
<h1>This is a heading</h1>
</body>
::selection
 The ::selection pseudo-element matches the portion of an

element that is selected by a user.
::selection {
color: red;
background: yellow;
}
CSS2 :first-child Selector
 The :first-child selector is used to select the specified

selector, only if it is the first child of its parent.
 Select and style every <p> element that is the first child of
its parent:
 p:first-child {
}
47
<body>
<p>This paragraph is the first child of its

parent (body).</p>
<h1>Welcome to My Homepage</h1>
<p>This paragraph is not the first child of its
parent.</p>
<div>
<p>This paragraph is the first child of its
parent (div).</p>
<p>This paragraph is not the first child of its
parent.</p>
</div>
</body>
48
CSS3 :last-child Selector
 The :last-child selector matches every element that is the

last child of its parent.
 Specify a background color for the <p> element that is the
last child of its parent:
 p:last-child {
background: #ff0000;
}
49
<body>
<p>The first paragraph.</p>

<p>The second paragraph.</p>
<p>The third paragraph.</p>
<p>The fourth paragraph.</p>
</body>
50
CSS3 :nth-child() Selector
 The :nth-child(n) selector matches every element that is

the nth child, regardless of type, of its parent.
 n can be a number, a keyword, or a formula.
 Specify a background color for every <p> element that is
the second child of its parent:
 p:nth-child(2) {
background: red;
}
51
<body>
</body>
52
CSS3 :nth-last-child() Selector
 The :nth-last-child(n) selector matches every element that

is the nth child, regardless of type, of its parent, counting
from the last child.
the second child of its parent, counting from the last child:
 p:nth-last-child(2) {
background: red;
}
53
<body>

</body>
54
CSS3 :nth-last-of-type() Selector
 The :nth-last-of-type(n) selector matches every element

that is the nth child, of a particular type, of its parent,
counting from the last child.
the second p element of its parent, counting from the last
child:
 p:nth-last-of-type(2) {
background: red;
}
55
<style>
p:nth-last-of-type(3n) {
background: red;
}
</style></head>
<body>
<p>The fifth paragraph.</p>
<p>The sixth paragraph.</p>
<p>The seventh paragraph.</p>
<p>The eight paragraph.</p>
<p>The ninth paragraph.</p>
</body>
56
Typography
57
Difference Between A Font And A Typeface
 A font is what you use, a typeface is what you see
 Typefaces include Times Roman, Helvetica, and Courier
 The typeface represents one aspect of a font
 The font also includes such characteristics as size, weight,
italics, and so on.
 There are two general categories of typefaces: serif and
sans serif
 Sans serif typefaces are composed of simple lines, whereas
serif typefaces use small decorative marks to embellish
characters and make them easier to read
 Helvetica is a sans serif type and Times Roman is a serif type.
58
59
font-family
 It is used to declare the fonts that should be used to display text
 The value of the font-family property contains multiple font
names
 The first declared font, starting from the left, is the primary
font choice
 If the first font is unavailable, alternative fonts are declared
after it in order of preference from left to right
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
60
Font Size
 It provides the ability to set the size of text using common length values,
including pixels, em units, percentages, points, or font-size keywords
body { font-size: 14px; }
 Set Font Size With Em

 To allow users to resize the text (in the browser menu), many developers use em
instead of pixels.
 The em size unit is recommended by the W3C.
 1em is equal to the current font size. The default text size in browsers is 16px. So,
the default size of 1em is 16px.
 The size can be calculated from pixels to em using this formula: pixels/16=em
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
61
Setting the Font Size
 Many Web page designers opt to use relative units, which
are expressed relative to the size of other objects within
the Web page
 Em unit
 Percentages
 Relative keywords
 Larger
 Smaller
62
Font Style
 It is used to specify style of the font.

 The font-style property accepts 3 keyword values: normal, italic,
oblique
 .special { font-style: italic; }
 p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
63
Example of Oblique font-style
64
Font Variant
 It is used to display a font as normal or in small caps.

 The font-variant property accepts 2 values: normal, small-
caps
 The most typically seen values are normal and small-caps,
which are used to switch typefaces between normal and
small caps variants
 .firm { font-variant: small-caps; }
65
 p.normal { font-size:20px; font-variant:normal}
 p.scaps { font-size:20px; font-variant:small-caps}
<p class="normal">Font shown in : Normal</p>

<p class="scaps">Font shown in : Small Caps</p>
66
 span {
font-variant:small-caps;
}
 <span>initial in small caps</span> AND LATER IN

LARGE CAPS.
 INITIAL IN SMALL CAPS AND LATER IN LARGE

CAPS.
67
Font Weight
 It is used to style text as bold or to change the specific
weight of a typeface
 The font-weight property accepts either keyword or
numeric values.
 Keyword values include normal, bold, bolder, lighter, and
inherit.
 .intro { font-weight: bold; }
OR
 .intro { font-weight: 600; }
68
Values Description
100 Represents thin font
200 Represents extra light font
300 Represents light font
400 Represents normal font
500 Represents medium font
600 Represents semi-bold font
700 Represents bold font
800 Represents extra bold font
900 Represents black font
69
 p.normal {font-weight:normal;}
 p.light {font-weight:lighter;}
 p.thick {font-weight:bold;}
 p.thicker {font-weight:900;}
70
Font-stretch
 Used to change the width of a font
 It enables to condense or expand the width of the font by
specifying following values:
P{
Font-stretch:condense;
}
71
CSS3 Web Fonts - The @font-face Rule
 Web fonts allow Web designers to use fonts that are not
installed on the user's computer
 In the CSS3 @font-face rule you must first define a name
for the font (e.g. myFirstFont), and then point to the font
file.
72
Different Font Formats
 TrueType Fonts (TTF)
TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the
most common font format for both the Mac OS and Microsoft Windows operating systems.
 OpenType Fonts (OTF)
OpenType is a format for scalable computer fonts. It was built on TrueType, and is a registered
trademark of Microsoft. OpenType fonts are used commonly today on the major computer
platforms.
 The Web Open Font Format (WOFF)
WOFF is a font format for use in web pages. It was developed in 2009, and is now a W3C
Recommendation. WOFF is essentially OpenType or TrueType with compression and additional
metadata. The goal is to support font distribution from a server to a client over a network with
bandwidth constraints.
 SVG Fonts/Shapes
SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1 specification
define a font module that allows the creation of fonts within an SVG document. You can also
apply CSS to SVG documents, and the @font-face rule can be applied to text in SVG documents.
 Embedded OpenType Fonts (EOT)
EOT fonts are a compact form of OpenType fonts designed by Microsoft for use as embedded
fonts on web pages.
73
 @font-face {
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div {
font-family: myFirstFont;
}
74
Using Google fonts
 1. Choose the styles you want:
 Lobster
 Normal 400
 2. Choose the character sets you want:
 3. Add this code to your website:
 <link href='http://fonts.googleapis.com/css?family=Lobster'
rel='stylesheet' type='text/css'>
 4. Integrate the fonts into your CSS:
 font-family: 'Lobster', cursive;
75
Example
<head>
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?
family=Tangerine">
<style>
body{
font-family:'Tangerine', serif;
font-size:45px;
// font-weight:900;
text-shadow: 4px 4px 4px #FF0000;
}
</style>
</head>
76
CSS3 Borders
 With CSS3, you can create rounded borders, add shadow

to boxes, and use an image as a border - without using a
design program, like Photoshop
 border-radius
 box-shadow
 border-image
77
Border-radius
 used to create rounded corners

div {
border: 2px solid red;
border-radius: 25px;
}
78
Box-shadow Property
 In CSS3, the box-shadow property is used to add shadow

to boxes
div {
box-shadow: 10px 10px 5px #888888;
}
79
border-image Property
 With the CSS3 border-image property you can use an

image to create a border
div {
-webkit-border-image: url(border.png) 30 30 round; /* Safari
3.1-5 */
-o-border-image: url(border.png) 30 30 round; /* Opera 11-
12.1 */
border-image: url(border.png) 30 30 round;
}
80
81
Text Effects
 text-shadow
 word-wrap
82
Text Shadow
 In CSS3, the text-shadow property

applies shadow to text.
 You specify the horizontal shadow,
the vertical shadow, the blur
distance, and the color of the
shadow:
 h1 {
text-shadow: 5px 5px 5px #FF0000;
 horizontal shadow, the vertical shadow,
the blur distance, and the color of the
shadow
83
Word Wrapping
 Allow long words to be  p {

able to break and wrap word-wrap: break-word;
onto the next line }
84
CSS Colors
 Colors in CSS can be specified by the following methods:

 Hexadecimal colors
 RGB colors
 RGBA colors
 HSL colors
 HSLA colors
85
Hexadecimal Colors
 Hexadecimal color values are supported in all major browsers.
 A hexadecimal color is specified with: #RRGGBB
where the RR (red), GG (green) and BB (blue) hexadecimal
integers specify the components of the color
 All values must be between 0 and FF.
 #p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
86
RGB Colors
 An RGB color value is specified with: rgb(red, green, blue)

 Each parameter (red, green, and blue) defines the intensity of
the color and can be an integer between 0 and 255 or a
percentage value (from 0% to 100%).
 #p1 {background-color: rgb(255,0,0);} /* red */
#p2 {background-color: rgb(0,255,0);} /* green */
#p3 {background-color: rgb(0,0,255);} /* blue */
87
RGBA Colors
 RGBA color values are an extension of RGB color values with

an alpha channel - which specifies the opacity of the object.
 An RGBA color value is specified with: rgba(red, green, blue,
alpha)
 The alpha parameter is a number between 0.0 (fully
transparent) and 1.0 (fully opaque)
 #p1 {background-color: rgba(255,0,0,0.3);} /* red with opacity */
#p2 {background-color: rgba(0,255,0,0.3);} /* green with opacity */
#p3 {background-color: rgba(0,0,255,0.3);} /* blue with opacity */
88
HSL Colors
 HSL stands for hue, saturation, and lightness - and represents a

cylindrical-coordinate representation of colors.
 An HSL color value is specified with: hsl(hue, saturation,
lightness).
 Hue is a degree on the color wheel (from 0 to 360) :
 0 (or 360) is red, 120 is green, 240 is blue
 Saturation is a percentage value; 0% means a shade of gray and
100% is the full color
 Lightness is also a percentage; 0% is black, 100% is white.
 #p1 {background-color: hsl(120,100%,50%);} /* green */
#p2 {background-color: hsl(120,100%,75%);} /* light green */
#p3 {background-color: hsl(120,100%,25%);} /* dark green */
#p4 {background-color: hsl(120,60%,70%);} /* pastel green */
89
HSLA Colors
 HSLA color values are an extension of HSL color values with an

alpha channel - which specifies the opacity of the object.
 An HSLA color value is specified with: hsla(hue, saturation,
lightness, alpha), where the alpha parameter defines the opacity
 The alpha parameter is a number between 0.0 (fully transparent)
and 1.0 (fully opaque).
 #p1 {background-color: hsla(120,100%,50%,0.3);} /* green with opacity */
#p2 {background-color: hsla(120,100%,75%,0.3);} /* light green with
opacity */
#p3 {background-color: hsla(120,100%,25%,0.3);} /* dark green with
opacity */
#p4 {background-color: hsla(120,60%,70%,0.3);} /* pastel green with
opacity */
90
Example
<style>
h1{background-color: hsla(0,55%,50%,0.0);}
h6{background-color: hsla(0,55%,50%,1);}
</style>
91
Floating an Element
92
Floating an Element
 To float an element, use the style
float: position
where position is none (to turn off floating), left or right
 To display an element clear of a floating element, use the
style
clear: position
where position is none, left, right, or both
93
Formatting Backgrounds
 The syntax for inserting a background image is:
background-image: url(url)
 URL is the location and filename of the graphic file you want to
use for the background of the Web page
94
Background Image Options
 By default, background images are tiled both horizontally
and vertically until the entire background of the element is
filled up
 You can specify the direction of the tiling using the style:
 background-repeat: type
95
Background Image Options
96
Background Color
The background-color property specifies the background color of an element
body {
background-color: #b0c4de;
}
With CSS, a color is most often specified by:
a HEX value - like "#ff0000"

an RGB value - like "rgb(255,0,0)"
a color name - like "red"
Examples
h1 {
background-color: #6495ed;
}
p {
background-color: #e0ffff;
}
div {
background-color: #b0c4de;
}
97
CSS3 The background-size Property
 The background-size property specifies the size of the background image.

 Resize a background image:
 div {
background: url(img_flwr.gif);
background-size: 80px 60px;
background-repeat: no-repeat;
}
 Stretch the background image to completely fill the content area:
 div {
background-size: 100% 100%;
}
98
CSS3 The background-origin Property
 The background-origin property specifies the positioning

area of the background images.
 The background image can be placed within the content-
box, padding-box, or border-box area
 Position the background image within the content-box:
 div {
background-origin: content-box;
}
99
CSS3 Multiple Background Images
 CSS3 allows you to use several background images for an

element
 Example
 Set two background images for the <body> element:
body {
background: url(img_tree.gif), url(img_flwr.gif);
}
100
 background:
url("http://www.commentsyard.com/cy/01/8734_original.gif"),linear-gradient(to
right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)), url("http://7-
themes.com/data_images/out/52/6947542-cute-white-flowers.jpg");
background-position: left top, right;
background-repeat: repeat-x,repeat-y;
background-size: 10% 90%, 300px 400px, auto;
101
body{
background-image:
url("http://www.commentsyard.com/cy/01/8734_original.gif"),
url("http://7-themes.com/data_images/out/52/6947542-cute-white-
flowers.jpg");
102
Text shadows
 The text-shadow property adds shadow to text.
 text-shadow: h-shadow v-shadow blur-radius color|none|
initial|inherit;
 .element {
 text-shadow: 1px 1px 1px #cccccc;
 }
103
CSS3 Gradients
 CSS3 gradients let you display smooth transitions

between two or more specified colors.
 By using CSS3 gradients you can reduce download time
and bandwidth usage
 Elements with gradients look better when zoomed,
because the gradient is generated by the browser
 CSS3 defines two types of gradients:
 Linear Gradients (goes down/up/left/right/diagonally)
 Radial Gradients (defined by their center)
104
CSS3 Linear Gradients
 To create a linear gradient you

must define at least two color
stops
 Color stops are the colors you
want to render smooth
transitions among. You can also
set a starting point and a
direction (or an angle) along
with the gradient effect
background: linear-
gradient(direction, color-
stop1, color-stop2, ...);
105
 The following example shows a
linear gradient that starts at the
top. It starts red, transitioning to
green
 Example
 A linear gradient from top to
bottom:
#grad {
background: linear-gradient(red,
green); /* Standard syntax */
}
106
 background:linear-gradient
(to right,red,green);
107
Linear Gradient - Diagonal
 You can make a gradient diagonally by specifying both
the horizontal and vertical starting positions.
 Following example shows linear gradient that starts at top
left (and goes to bottom right). It starts red, transitioning
to blue:
#grad {
background: linear-gradient(to bottom right, red , green); /*
Standard syntax */
}
108
body{
background:linear-gradient(to
bottom right,red,green);
}

109
Using Angles
 background: linear-
gradient(angle, color-stop1, color-
stop2);
 The angle is specified as an
angle between a horizontal line
and the gradient line, going
counter-clockwise
 0deg creates a bottom to top
gradient
 90deg generates a left to right
gradient.
 background: linear-
gradient(180deg, red, green); /*
Standard syntax */
110
Using Multiple Color Stops
 The following example

shows how to set multiple
color stops:
background: linear-
gradient(red, green, blue);
/* Standard syntax */
111
 creating a linear gradient
with the color of the rainbow
background: linear-gradient(to
right,
red,orange,yellow,green,blue,in
digo,violet);
112
 CSS3 gradients also support
transparency, which can be
used to create fading effects
 To add transparency, we use
the rgba() function to define
the color stops
background: linear-gradient(to
right, rgba(255,0,0,0),
rgba(255,0,0,1)); /*Standard*/
113
body{
background:
url("http://www.commentsyard.com/cy/01/8734_original.gif"),linear-
gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1)),
url("http://7-themes.com/data_images/out/52/6947542-cute-white-
flowers.jpg");
background-repeat: repeat-x,repeat-y;
114
Repeating a linear-gradient
 The repeating-linear-
gradient() function is used to
repeat linear gradients:
 background: repeating-linear-
gradient(red, violet 10%, blue
20%);
115
CSS3 Radial Gradients
 A radial gradient is defined

by its center.
 To create a radial gradient
you must also define at least
two color stops
 background: radial-
gradient(shape size at position,
start-color, ..., last-color);
gradient(red, green, blue); /*
Standard syntax *
116
 A radial gradient with
differently spaced color
stops
 background: radial-gradient(red
5%, green 15%, blue 60%); /*
Standard syntax */
 The shape parameter defines
the shape. It can take the
value circle or ellipse. The
default value is ellipse
gradient(circle, red, yellow,
green); /* Standard syntax */
117
CSS3 Transforms
 With CSS3 transform, we can move, scale, turn, spin, and

stretch elements.
 A transformation is an effect that lets an element change
shape, size and position.
 You can transform your elements using 2D or 3D
transformation
 div {
transform: rotate(30deg);
}
118
 translate() Method
 With the translate() method, the element moves from
its current position, depending on the parameters
given for the left (X-axis) and the top (Y-axis)
position
 div {
transform: translate(50px,100px);
}
119
 transform: scale(2,4)
120
CSS hover effects
 CSS hover effects gives us the ability to animate changes
to a CSS property value.
121
<html>
<head>
a:hover
{ text-decoration: none; }
</style>
</head>
<body> Try mouse the mouse over to
the link.
<br>
<a
href="http://corelangs.com/html/defau
lt.html">Corelangs</a>
</body>
</html>
122
<head>
.picColor
{ width:320px;
height:240px;
border:5px solid #000000;
}
.picColor:hover
{ background:#FF2400; width:320px;
height:240px;
}
</style>
</head>
<body>
<div class="picColor"> </div> </body>
123
Class Work
 change the image link while on mouse hover.
 the CSS code that display text on image while mouse
hover
 how to implement Opacity on an Image while mouse
hover
124
CSS3 Transitions
 CSS3 transitions are effects that let an element gradually

change from one style to another without using Flash or
JavaScript
 To do this, you must specify two things:
o the CSS property you want to add an effect to
o the duration of the effect
 The transition effect will start when the specified CSS
property changes value.
 A typical CSS property change would be when a user mouse-
over an element
 When the cursor mouse out of the element, it gradually
changes back to its original style.
125
The properties of a transition
 Transition : A shorthand property for setting the four transition
properties into a single property
 transition-property: name of the CSS property to be transitioned (such
as background-color, text-shadow, or all to transition every possible
property)
 transition-duration: the length of time over which the transition should
occur (defined in seconds, for example .3s, 2s, or 1.5s).
 transition-timing-function: how the transition changes speed during the
duration (for example ease, linear, ease-in, ease-out, ease-in-out, or
cubic-bezier)
 transition-delay: an optional value to determine a delay before the
transition commences. Alternatively, a negative value can be used to
commence a transition immediately but part way through its transition
‘journey’
126
 transition-timing-function: ease|linear|ease-in|ease-out|
ease-in-out|cubic-bezier();
127
 http://css3.bradshawenterprises.com/transitions/
 https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_
Transitions/Using_CSS_transitions
128
#content a
{
transition-property: all;
transition-duration: 1s;
transition-timing-function: ease;
transition-delay: 0s;
}
129
<div id="div1"
style="padding:70px;border:2p
x solid black;">
</div>
#div1
{
background: red;
float:left;
}
#div1:hover
{
background-color: green;
cursor: pointer;
transition: background-color 2s
linear;
130
The transition shorthand property
transition: all 1s ease 0s;
 Transition different properties over different periods of time

 It states that the border should transition over 2 seconds, the
color over 3 seconds, and the text-shadow over 8 seconds
#content a {
...(more styles)...
transition-property: border, color, text-shadow;
transition-duration: 2s, 3s, 8s;
}
131
<style>
div {
background-color:red;
color: white;
transition-property: color, text-shadow;
transition-duration: 1s, 5s;
}
div:hover
{
cursor: pointer;
color: black;
text-shadow:10px 5px 5px #ffffff;
}
</style>
132
*{
transition: all 1s;
}
 The above eg. uses the CSS universal selector * to select
everything and then setting a transition on all elements
over 1 second (1s).
 Timing function ‘ease’ will be used by default
133
CSS Cursors
 <html>
<head>
.xlink {cursor:crosshair}
.hlink{cursor:help}
</style>
</head>
<body>
<b>
<a href="mypage.htm" class="xlink">CROSS LINK</a>
<br>
<a href="mypage.htm" class="hlink">HELP LINK</a>
</b>
</body>
</html>
134
CSS3 2D transformations
 A transformation is an effect that lets an element change shape, size
and position.
 Transitions smooth the change from one state to another, while
transformations are defining what the element will become
 The CSS3 2D Transforms Module allows us to use the following
transformations:
 scale: used to scale an element (larger or smaller)
 translate: move an element on the screen (up, down, left, and right)
 rotate: rotate the element by a specified amount (defined in degrees)
 skew: used to skew an element with its X and Y co-ordinates
 matrix: allows you to move and shape transformations with pixel
precision
135
scale
 With the scale() method, the
element increases or decreases
the size, depending on the
parameters given for the width
(X-axis) and the height (Y-axis)
div {
transform: scale(2,4);
}
 The value scale(2,4) transforms
the width to be twice its original
size, and the height 4 times its
original size.
136
translate
 translate tells the browser to move the element by an amount, defined in either
pixels or percentages
 The syntax is applied first from the left to the right (40px
here) and then from the top to the bottom (0px here so it stays in line with the other
navigation elements).
 Positive values given within parentheses move the element right or down; negative
values move it left or up
transform: translate(50px,100px);
 The value translate(50px,100px) moves the element 50 pixels from the left, and 100
pixels from the top.
137
Rotate()
 With the rotate() method,
the element rotates
clockwise at a given
degree. Negative values
are allowed and rotates the
element counter-clockwise
transform: rotate(30deg);
138
 Matrix
 It essentially allows you to
combine a number of other
transforms (scale, rotate,
skew, and so on) into a
single declaration
 transform: matrix(0.866,
0.5,-0.5,0.866,0,0);
139
Skew
 Skew
 It allows an element to be
skewed on either or both
of its axes.
 The element turns in a
given angle, depending on
the parameters given for
the horizontal (X-axis) and
the vertical (Y-axis) lines:
 transform: skew(30deg,
20deg);
140
CSS3 Animation
 CSS3 animations can replace animations created by Flash and
JavaScript in existing web pages
 Enables to animate an element.
 Every animation consists of the animation properties, e.g. delay
and duration, and the related keyframes, which define its
appearance
 The @keyframes rule is where the animation is created
 When an animation is created in the @keyframe rule, you must bind
it to a selector, otherwise the animation will have no effect.
 Bind the animation to a selector (element) by specifying at least
these two properties:
 the name of the animation
 the duration of the animation
141
 Bind the "myfirst" animation to the <div> element. Animation duration:
5 seconds:
div {
animation: myfirst 5s;
}
/* Standard syntax */
@keyframes myfirst {
from {background: red;}
to {background: yellow;}
}
 If the duration part is not specified, the animation will have no effect, because
the default value is 0.
 You can specify when the change will happen in percent, or you can use the
keywords "from" and "to" .
 0% represents the start of the animation, 100% is when the animation is
complete.
142
 Change the background color when the animation is 25%,
and 50%, and again when the animation is 100% complete
 @keyframes myfirst {
0% {background: red;}
25% {background: yellow;}
50% {background: blue;}
100% {background: green;}
}
 CSS Syntax
animation: name duration timing-function delay iteration-
count direction fill-mode play-state;
143
144
Media query
 With a @media query, you can write different CSS code for
different media types
 This helps when you want different layout for different media
types such as a screen or a printer, but also when you want
different layout for different devices, which is very useful
when making web pages with responsive design.
 You can also have different layout when a user resizes the
browser window up or down to a certain width, or height.
 CSS syntax :
@media mediatype and|not|only (media feature) {
CSS-Code;
}
145
Media query
 Change the background-color if the document is smaller than 300 pixels wide
@media screen and (max-width: 300px) {
body {
}
}
 The web page will have a lightblue background if the orientation is in landscape mode:
 @media only screen and (orientation: landscape) {
body {
}
}
146
Example of Media query
<style>
@media screen and (min-width:1001px) and (max-width:1400px) {
body {
background-color:red;
}
}
body {
background-color:blue;
}
}
body {
}
}
147
148
Media features
 width: The viewport width.
 height: The viewport height.
 device-width: The rendering surface's width (typically the screen width
of a device).
 device-height: The rendering surface's height (typically the screen height
of a device).
 orientation: checks whether a device is portrait or landscape in
orientation.
 aspect-ratio: The ratio of width to height based upon the viewport width
and height. A 16:9 widescreen display can be written as aspect-ratio:
16/9.
 device-aspect-ratio: This capability is similar to aspect-ratio but is based
upon the width and height of the device rendering surface, rather than
viewport
149
 color: The number of bits per color component.
 For example, min-color:16 will check that the device has 16-bit color.
 color-index: The number of entries in the color lookup table of the device.
Values must be numbers and cannot be negative.
 monochrome: This capability tests how many bits per pixel are in a
monochrome frame buffer. The value would be a number (integer), for
example monochrome: 2, and cannot be negative.
 resolution: This capability can be used to test screen or print resolution;
 For example, min-resolution: 300dpi. It can also accept measurements in
dots per centimetre; for example, min-resolution: 118dpcm.
 scan: This can be either progressive or interlace features largely particular to
TVs. For example, a 720p HD TV (the p part of 720p indicates
"progressive") could be targeted with scan: progressive whilst a 1080i HD
TV (the i part of 1080i indicates "interlaced") could be targeted with scan:
interlace.
 grid: This capability indicates whether or not the device is grid or bitmap
based.
150
 @import url("phone.css") screen and (min-width:200px) and
(maxwidth: 360px);
 The phone.css file will only be imported for screen
devices with a minimum viewport width of 200 pixels and
a maximum viewport width of 360 pixels.
151
viewport
 Viewport relates to the content area within the browser
window, excluding the toolbars, tabs
 Screen size refers to the physical display area of a device
 A viewport controls how a webpage is displayed on a
mobile device
 Without a viewport, mobile devices will render the page at
a typical desktop screen width, scaled to fit the screen
 Setting a viewport gives control over the page's width and
scaling on different devices
152
153
Syntax and attributes
 @viewport { /* viewport-descriptor: viewport-value; */ }
Descriptors :
 min-width Used in the determination of the width of the viewport when
the document is first displayed
 max-width Used in the determination of the width of the viewport when
 Width A shorthand descriptor for setting both min-width and max-width
 min-height Used in the determination of the height of the viewport when
 max-height Used in the determination of the height of the viewport when
 Height A shorthand descriptor for setting both min-height and max-height
154
 Ex.1 :@viewport { min-width: 640px; max-width: 800px; }
 Ex.2: @viewport { zoom: 0.75; min-zoom: 0.5; max-zoom:
0.9; }
 Ex.3: @viewport { orientation: landscape; }
155
 A @viewport rule can be used inside media queries as follows:
@media screen and (max-width:400px)
{
@-ms-viewport { width:320px;}
}
This enables media query to lay out any viewport narrower than 400px
to a scaled width of 320px.
156
Layouts
 When designing a website layout for a large audience, the
designer must consider the following potential differences
among visitors:
 Screen resolution,
 Browser choice,
 Whether or not the browser is maximized,
 Extra toolbars open in the browser (History, Bookmarks, etc.),
 Even the operating system and hardware.
 Layouts
 Fixed Layout
 Fluid Layout
157
FIXED WEBSITE LAYOUTS
 A fixed website layout has a

wrapper that is a fixed width,
and the components inside it
have either percentage widths
or fixed widths.
 The important thing is that the
container (wrapper) element
is set to not move.
 No matter what screen
resolution the visitor has, he
or she will see the same width
as other visitors.
158
FLUID WEBSITE LAYOUTS
 In a fluid website layout,

also referred to as a liquid
layout, the majority of the
components inside have
percentage widths, and
thus adjust to the user’s
screen resolution.
159

Introduction To CSS3

Uploaded by

Copyright:

Available Formats

Introduction To CSS3

Uploaded by

Document Information

Original Title

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

Introduction To CSS3

Uploaded by

Copyright:

Available Formats

Introduction to CSS3

 An external style sheet can be written in any text editor

 To use inline styles, add the style attribute to the relevant

 If some properties have been  internal style sheet property

 The universal selector, written "*", matches the name of

 CSS type selectors match elements by node name

<p>Here's a p with some text.</p>

 The class selector selects elements with a specific

 descendant selector (space)

 A pseudo-class is used to define a special state of an

 Links can be displayed in different ways:

 A CSS pseudo-element is used to style specified parts of

 ::first-line pseudo-element is used to add a special style to

 The ::selection pseudo-element matches the portion of an

 The :first-child selector is used to select the specified

<p>This paragraph is the first child of its

 The :last-child selector matches every element that is the

<p>The first paragraph.</p>

 The :nth-child(n) selector matches every element that is

 The :nth-last-child(n) selector matches every element that

<p>The first paragraph.</p>

 The :nth-last-of-type(n) selector matches every element

 Set Font Size With Em

 It is used to specify style of the font.

 It is used to display a font as normal or in small caps.

<p class="normal">Font shown in : Normal</p>

 <span>initial in small caps</span> AND LATER IN

 INITIAL IN SMALL CAPS AND LATER IN LARGE

 With CSS3, you can create rounded borders, add shadow

 used to create rounded corners

 In CSS3, the box-shadow property is used to add shadow

 With the CSS3 border-image property you can use an

 In CSS3, the text-shadow property

 Allow long words to be  p {

 Colors in CSS can be specified by the following methods:

 An RGB color value is specified with: rgb(red, green, blue)

 RGBA color values are an extension of RGB color values with

 HSL stands for hue, saturation, and lightness - and represents a

 HSLA color values are an extension of HSL color values with an

a HEX value - like "#ff0000"

 The background-size property specifies the size of the background image.

 The background-origin property specifies the positioning

 CSS3 allows you to use several background images for an

 CSS3 gradients let you display smooth transitions

 To create a linear gradient you

 The following example

 A radial gradient is defined

 With CSS3 transform, we can move, scale, turn, spin, and

 CSS3 transitions are effects that let an element gradually

 Transition different properties over different periods of time

 A fixed website layout has a

 In a fluid website layout,

You might also like