Scribd
Upload
374 views

Unit - 3 Cascading Style Sheets (CSS) : Web Technology

The document discusses Cascading Style Sheets (CSS), which defines how HTML elements are displayed. CSS allows formatting of fonts, colors, margins, and other design aspects. There are three ways to apply CSS - inline within HTML elements, internally via <style> tags, or externally in .css files linked via <link> tags. The document covers basic CSS syntax and selectors like classes and IDs to target elements for styling.

Uploaded by

Monark Raikwar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
374 views

Unit - 3 Cascading Style Sheets (CSS) : Web Technology

The document discusses Cascading Style Sheets (CSS), which defines how HTML elements are displayed. CSS allows formatting of fonts, colors, margins, and other design aspects. There are three ways to apply CSS - inline within HTML elements, internally via <style> tags, or externally in .css files linked via <link> tags. The document covers basic CSS syntax and selectors like classes and IDs to target elements for styling.

Uploaded by

Monark Raikwar
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 43

Web Technology

Unit – 3
Cascading Style
Sheets (CSS)
Outline
1. Introduction to CSS
• What is CSS?
• Importance of CSS
2. Basics of CSS
• Basic Syntax & Structure
• Class & ID
• Types of CSS
• Multiple selector, Multilevel selector
3.Background
4.Fonts & Text
Unit
Unit –– 3:
3: CSS
CSS 22
Outline (Cont.)
5. Box Model
• Margin, Border, Padding
6. List
• List Type, List with Image, List Position
7.Links
8.CSS Positioning
9. CSS Layers
10. CSS Floating Property
11. Introduction to CSS3

Unit
Unit –– 3:
3: CSS
CSS 33
What is CSS?
 Cascading Style Sheets, fondly referred to as CSS, is a simple
design language intended to simplify the process of making web
pages presentable.
 CSS defines layout of HTML documents. For example, CSS covers
Fonts, colors, margins, lines, height, width, background images,
advanced positions and many other things.

Unit
Unit –– 3:
3: CSS
CSS 44
Importance of CSS
 CSS defines HOW HTML elements are to be displayed.
 Styles are normally saved in external .css files.
 External style sheets enable you to change the appearance and
layout of all the pages in a Web site, just by editing one single file.
 Advantages :
• Improves Website Presentation
• External CSS makes Updates Easier and Smoother
• External CSS helps Web Pages Load Faster
 Disadvantages :
• Browser Dependent
• Difficult to retrofit in old websites

Unit
Unit –– 3:
3: CSS
CSS 55
Basic Syntax of CSS
 A CSS rule has two main parts: a selector, and one or more
declarations
Selector Declaration 1 Declaration 2

h1 {color:blue; font-size: 12px;}

property value property value


 The selector can be HTML element, id or class.
 Each declaration consists of a property and a value.
 The property is the style attribute you want to change. Each
property has a value.

Unit
Unit –– 3:
3: CSS
CSS 66
The “id” selector
 The id selector is used to specify a style for a single, unique
element.
 The id selector uses the id attribute of the HTML element, and is
defined with a "#“ in css.
 The style rule below will be applied to the element with
id="para1":

HTML
HTML CSS
CSS
<h1
<h1 id=“para1”>
id=“para1”> #para1{
#para1{
Hello
Hello Friends
Friends color:
color: blue;
blue;
</h1>
</h1> }}

<h1>
<h1> Output
Output
How
How are
are you
you Hello
Hello Friends
Friends
</h1>
</h1> How
How are
are you
you

Unit
Unit –– 3:
3: CSS
CSS 77
The “class” selector
 The class selector is used to specify a style for a group of
elements.
 The class selector uses the HTML class attribute, and is defined
with a ".“ in css.

HTML
HTML CSS
CSS
<h1
<h1 class=“myClass”>
class=“myClass”> .myClass{
.myClass{
Hello
Hello Friends
Friends color:
color: blue;
blue;
</h1>
</h1> }}
<h1>
<h1>
How
How are
are you
you
</h1>
</h1> Output
Output
<h1
<h1 class=“myClass”>
class=“myClass”> Hello
Hello Friends
Friends
How
How are
are you
you How
How are
are you
you
</h1>
</h1> How
How are
are you
you

Unit
Unit –– 3:
3: CSS
CSS 88
Different ways to write CSS
 There are three ways of writing a style sheet:
1. Inline Style
2. Internal/Embedded Style sheet
3. External Style Sheet

Unit
Unit –– 3:
3: CSS
CSS 99
1) Inline Style
 It is possible to place CSS right in your HTML code, and this
method of CSS usage is referred to as inline css.
 Inline CSS has the highest priority out of external, internal, and
inline CSS.
 This means that you can override styles that are defined in
external or internal by using inline CSS.
 If you want to add a style inside an HTML element all you have to
do is specify the desired CSS properties with the style HTML
attribute.
 Example:
HTML
HTML
<p
<p style="background:
style="background: blue;
blue; color:
color: white;">
white;"> My
My Inline
Inline CSS
CSS </p>
</p>

Unit
Unit –– 3:
3: CSS
CSS 10
10
2) Internal Style Sheet
 This type of CSS is only for Single Web Page.
 When using internal CSS, we must add a new tag, <style>, inside
the <head> tag.
 The HTML code below contains an example of <style>'s usage.
HTML
HTML
<html><head>
<style type="text/css">
p{ color: red;}
</style>
</head><body>
<p>Your page's content!</p></body>
</html>

Unit
Unit –– 3:
3: CSS
CSS 11
11
3) External Style Sheet
 When using CSS it is preferable to keep the CSS separate from
your HTML.
 Placing CSS in a separate file allows the web designer to
completely differentiate between content (HTML) and design
(CSS).
 External CSS is a file that contains only CSS code and is saved with
a ".css" file extension.
 This CSS file is then referenced in your HTML using the <link>
instead of <style>.

Unit
Unit –– 3:
3: CSS
CSS 12
12
3) External Style Sheet (Cont.)
 Example :
Demo.html
Demo.html test.css
test.css
<html>
<html> #para1{
#para1{
<head>
<head> text-align:
text-align: center;
center;
<link
<link rel=“stylesheet”
rel=“stylesheet” type=“text/css”
type=“text/css” }}
href=“test.css”>
href=“test.css”> pp
</head>
</head> {{
<body>
<body> color
color :: blue;
blue;
}}
<p>
<p> Hello
Hello Friends
Friends </p>
</p>
<p
<p id=“para1”>
id=“para1”> How
How are
are you?
you? </p>
</p> Output
Output
Hello
Hello Friends
Friends
</body>
</body> How
How are
are you?
you?
</html>
</html>

Unit
Unit –– 3:
3: CSS
CSS 13
13
3) External Style Sheet (Cont.)
 Advantages:
• It keeps your website design and content separate.
• It's much easier to reuse your CSS code if you have it in a separate file.
Instead of typing the same CSS code on every web page you have, simply
have many pages refer to a single CSS file with the "link" tag.
• You can make drastic changes to your web pages with just a few changes in
a single CSS file.

Unit
Unit –– 3:
3: CSS
CSS 14
14
Assign Multiple Classes
 We can apply different class to same html element by giving space
separated class names in the class attribute:

Demo.html
Demo.html test.css
test.css
<html>
<html> .. class1
class1
<head>
<head> {{
<link
<link rel=“stylesheet”
rel=“stylesheet” type=“text/css”
type=“text/css” color
color :: blue;
blue;
href=“test.css”>
href=“test.css”> }}
</head>
</head> .. class2
class2
<body>
<body> {{
text-align
text-align :: center;
center;
<h1
<h1 class=“class1
class=“class1 class2”>
class2”> }}
How
How are
are you?
you?
</h1>
</h1> Output
Output

</body>
</body>
How are you?
</html>
</html>

Unit
Unit –– 3:
3: CSS
CSS 15
15
Multiple Selection
 We can apply same css to multiple selectors using comma
separated selector list, for example :

Demo.html
Demo.html test.css
test.css
<html>
<html> p, h1
<head>
<head> {{
<link
<link rel=“stylesheet”
rel=“stylesheet” type=“text/css”
type=“text/css” color
color :: blue;
blue;
href=“test.css”>
href=“test.css”> }}
</head>
</head>
<body>
<body>

<p>
<p> Hello
Hello Friends
Friends </p>
</p>
<h1>
<h1> How
How are
are you?
you? </h1>
</h1> Output
Output
Hello
Hello Friends
Friends
</body>
</body>
</html>
</html>
How are you?

Unit
Unit –– 3:
3: CSS
CSS 16
16
Multi-level Selection
 We can use hierarchical path to target html element by space
separated element/class/id names, for example :

Demo.html
Demo.html test.css
test.css
<html>
<html> div h1
<head>
<head> {{
<link
<link rel=“stylesheet”
rel=“stylesheet” type=“text/css”
type=“text/css” color
color :: blue;
blue;
href=“test.css”>
href=“test.css”> }}
</head>
</head>
<body>
<body>
<h1>Hello
<h1>Hello Friends…</h1>
Friends…</h1>
<div>
<div>
<h1>How
<h1>How areare you?</h1>
you?</h1> Output
Output
</div>
</div> Hello Friends…
</body>
How are you?
</body>
</html>
</html>

Unit
Unit –– 3:
3: CSS
CSS 17
17
Background Property
Property Name

 Background Color (background-color)


 Background Image (background-image)
 Background Image Repeat (background-repeat)
 Fixed Background Image (background-attachment)
 Background Image Positioning (background-position)

Unit
Unit –– 3:
3: CSS
CSS 18
18
Background Color
 The background-color property specifies the background color of
an element.
 The background color of a page is defined in the body selector:
 Below is example of CSS backgrounds

test.css
body
{
background-color : red;
background-color : #FF0000;
background-color : rgb(255,0,0);
}

Unit
Unit –– 3:
3: CSS
CSS 19
19
Background Image
 The background-image property specifies an image to use as the
background of an element.
 For Example,

test.css
test.css
body
body
{{
background-image
background-image :: url(‘pathToImage.jpg’);
url(‘pathToImage.jpg’);
}}

Unit
Unit –– 3:
3: CSS
CSS 20
20
Background Image Repeat
 You can have a background image repeat vertically (y-axis),
horizontally (x-axis), in both directions, or in neither direction.
test.css
test.css
body
body
{{
background-image
background-image :: url(‘pathToImage.jpg’);
url(‘pathToImage.jpg’);
background-repeat
background-repeat :: repeat;
background-repeat no-repeat
repeat-y
repeat;

repeat-x
background-repeat :: repeat-x;
background-repeat
repeat-x;
background-repeat :: repeat-y;
repeat-y;
background-repeat
background-repeat :: no-repeat;
no-repeat;
}}

Unit
Unit –– 3:
3: CSS
CSS 21
21
Fixed Background Image
 The background-attachment property sets whether a background
image is fixed or scrolls with the rest of the page.
 For Example,
test.css
test.css
body
body
{{
background-image
background-image :: url(‘pathToImage.jpg’);
url(‘pathToImage.jpg’);
background-repeat
background-repeat :: no-repeat;
no-repeat;
background-attachment
background-attachment :: fixed;
fixed;
}}

Unit
Unit –– 3:
3: CSS
CSS 22
22
Background Image Positioning
 The background-position property sets the starting position of a
background image.
test.css
test.css
body
body
{{
background-image
background-image :: url(‘pathToImage.jpg’);
url(‘pathToImage.jpg’);
background-repeat
background-repeat :: no-repeat;
no-repeat;
background-position:
background-position: 20px
20px 10px;
10px;
background-position:
background-position: 30%30%;
30%30%;
background-position:
background-position: top
top center;
}} 30% 30%
center;

Unit
Unit –– 3:
3: CSS
CSS 23
23
CSS Font
 CSS font properties define the font family, boldness, size, and the
style of a text.
Property Name

1. Font Color (color)


2. Font Family (font-family)
3. Font Size (font-size)
4. Font Style (font-style)
5. Font Weight (font-weight)
6. Font Variant (font-variant)

Unit
Unit –– 3:
3: CSS
CSS 24
24
CSS Font (Cont.)
h4{
h4{
 Font Color color
color :: red;
red;
• Set the text-color for different elements }}
h4{
h4{
 Font Family font-family
font-family :: sans-serif;
sans-serif;
• The font family of a text is set with the }}
font-family property. h4{
h4{
font-size:
font-size: 120%;
120%;
 Font Size font-size
font-size :: 10px;
10px;
• The font-size property sets the size of font-size
font-size :: small;
small;
font-size
font-size :: smaller;
smaller;
the text.
font-size
font-size :: x-small;
x-small;
• font-size : 120% font-size
font-size :: xx-small;
xx-small;
• font-size : 10px; font-size
font-size :: large;
large;
• font-size : x-large; font-size
font-size :: larger;
larger;
font-size
font-size :: x-large;
x-large;
font-size
font-size :: xx-large;
xx-large;
font-size
font-size :: medium;
medium;
}}
Unit
Unit –– 3:
3: CSS
CSS 25
25
CSS Font (Cont.)
 Font Style h4{
h4{
font-style:
font-style: italic
italic ;;
• The font-style property is mostly used to }}
specify italic text.
h4{
h4{
 Font Weight font-weight
font-weight :: 300;
300;
• The font-weight property sets how thick font-weight
font-weight :: bolder;
bolder;
or thin characters in text should be font-weight
font-weight :: lighter;
lighter;
}}
displayed.
 Font Variant h4{
h4{
font-variant:
font-variant: small-caps;
small-caps;
• The font-variant property specifies
whether or not a text should be }}
displayed in a small-caps font.
• font-variant : small-caps;

Unit
Unit –– 3:
3: CSS
CSS 26
26
CSS Text Property
 While CSS Font covers most of the traditional ways to format your
text, CSS Text allows you to control the spacing, decoration, and
alignment of your text.
Property Name

1. Text Decoration (text-decoration)


2. Text Indent (text-indent)
3. Text Align (text-align)
4. Text Transform (text-transform)
5. White Space (white-space)
6. Word Spacing (word-spacing)
7. Letter Spacing (letter-spacing)
8. Line Height (line-height)

Unit
Unit –– 3:
3: CSS
CSS 27
27
CSS Text Property (Cont.)
 Text Decoration
h4{
h4{
• The text-decoration property is used to text-decoration
text-decoration :: line-through;
line-through;
set or remove decorations from text. text-decoration
text-decoration :: overline;
overline;
text-decoration
text-decoration :: underline;
underline;
• The text-decoration property is mostly
text-decoration
text-decoration :: none;
none;
used to remove underlines from links for }}
design purposes.
 Text Indent h4{
h4{
• The text-indentation property is used to text-indent
text-indent :: 20px;
20px;
text-indent
text-indent :: 30%;
30%;
specify the indentation of the first line of }}
a text. h4{
h4{
 Text Align text-align
text-align :: right;
right;
text-align
text-align :: justify;
justify;
• The text-align property is used to set the text-align
text-align :: left;
left;
horizontal alignment of a text. text-align
text-align :: center;
center;
}}

Unit
Unit –– 3:
3: CSS
CSS 28
28
CSS Text Property (Cont.)
 Text Transform h4{
h4{
• The text-transform property is used to text-transform
text-transform :: capitalize;
capitalize;
text-transform
text-transform :: uppercase;
uppercase;
specify uppercase and lowercase letters text-transform
text-transform :: lowercase;
lowercase;
in a text. }}
 White Space
h4{
h4{
• The white-space attribute allows you to white-space
white-space :: nowrap;
nowrap;
hello to all
prevent text from wrapping until you }}
place a break <br /> into your text.
 Word Spacing h4{
h4{
• With the CSS attribute word-spacing you word-spacing
word-spacing :: 10px;
10px;
are able to specify the exact value of the }}
spacing between your words. Word-
spacing should be defined with exact
values.

Unit
Unit –– 3:
3: CSS
CSS 29
29
CSS Text Property (Cont.)
 Letter Spacing h4{
h4{
letter-spacing
letter-spacing :: 3px;
3px;
• With the CSS attribute letter-spacing you
}}
are able to specify the exact value of the
spacing between your letters. Letter-
spacing should be defined with exact
values.
 Line Height h4{
h4{
• The line-height attribute will set the line-height
line-height :: 10px;
10px;
height of the line in the page. }}

Unit
Unit –– 3:
3: CSS
CSS 30
30
The Box Model
 All HTML elements can be considered as boxes. In CSS, the term
"box model" is used when talking about design and layout.
 The CSS box model is essentially a box that wraps around HTML
elements, and it consists of: margins, borders, padding, and the
actual content.
 The box model allows us to place a border around elements and
space elements in relation to other elements.

Unit
Unit –– 3:
3: CSS
CSS 31
31
The Box Model (Cont)
 The image below illustrates the box model:
Margin
Border
Padding
Content

Unit
Unit –– 3:
3: CSS
CSS 32
32
The Box Model (Cont)

margin-top
border-top
padding-top

padding-right

margin-right
border-right
padding-left
margin-left
border-left

Content

padding-bottom
border-bottom
margin-bottom

Unit
Unit –– 3:
3: CSS
CSS 33
33
CSS Padding
 The CSS padding properties define h4{
h4{
padding
padding :: 10px;
10px;
the space between the element }}
border and the element content.
 The top, right, bottom, and left h4{
h4{
padding-top
padding-top :: 10px;
10px;
padding can be changed padding-right
padding-right :: 20px;
20px;
independently using separate padding-bottom
padding-bottom :: 3030 px;
px;
padding-left
padding-left :: 40
40 px;
px;
properties. }}
 A shorthand padding property can h4{
h4{
also be used, to change all padding padding
padding :: 10px
10px 20px
20px 30px
30px 40px;
40px;
}}
at once.

Unit
Unit –– 3:
3: CSS
CSS 34
34
CSS Border
 The CSS border properties allow you to specify the h4{
h4{
style and color of an element's border. border
border :: 1px
1px solid
solid red;
red;
 Border Style Types }}
• The border-style property specifies what kind of border h4{
h4{
to display. border-style
border-style :: solid;
solid;
 Border Width border-style
border-style :: dotted;
dotted;
• The border-width property is used to set the width of border-style
border-style :: double;
double;
the border. }}
 Border Color h4{
h4{
• The border-color property is used to set the color of the border-width
border-width :: 7px;
7px;
border. }}
• Border colors can be any color defined by RGB,
hexadecimal, or key terms. Below is an example of each h4{
h4{
of these types. border-color
border-color :: red;
red;
}}
 The top, right, bottom, and left border can be
changed independently using separate properties. h4{
h4{
border-top
border-top :: 1px
1px solid
solid red;
red;
}}
Unit
Unit –– 3:
3: CSS
CSS 35
35
CSS Margin
 The CSS margin properties define the h4{
h4{
margin:
margin: 10px;
10px;
space around elements }}

 The top, right, bottom, and left h4{


h4{
margin
margin -top
-top :: 10px;
10px;
margin can be changed margin
margin -right
-right :: 20px;
20px;
margin
margin -bottom
-bottom :: 3030 px;
px;
independently using separate margin
margin -left
-left :: 40
40 px;
px;
properties. }}

 A shorthand margin property can h4{


h4{
margin
margin :: 10px
10px 20px
20px 30px
30px 40px;
40px;
also be used, to change all margins }}
at once.

Unit
Unit –– 3:
3: CSS
CSS 36
36
CSS List ul{
ul{
list-style-type:
list-style-type: circle;
circle;
 The CSS list properties allow you to: list-style-type:
list-style-type: disc;
disc;
• Set different list item markers for list-style-type:
list-style-type: square;
square;
list-style-type:
list-style-type: armenian;
armenian;
ordered & unordered lists list-style-type:
list-style-type: cjk-ideographic;
cjk-ideographic;
• Set an image as the list item marker list-style-type:
list-style-type: decimal-leading-zero;
decimal-leading-zero;
list-style-type:
list-style-type: georgian;
georgian;
• Set the position of the marker
list-style-type:
list-style-type: hebrew;
hebrew;
 CSS List Style Type list-style-type:
list-style-type: katakana;
katakana;
list-style-type:
list-style-type: lower-greek;
lower-greek;
 CSS List with Image }}
 CSS List Position ol{
ol{
list-style-image
list-style-image :: url(‘imgPath’);
url(‘imgPath’);
}}

ol{
ol{
list-style-position
list-style-position :: outside;
outside;
list-style-position
list-style-position :: inside;
inside;
}}
Unit
Unit –– 3:
3: CSS
CSS 37
37
Styling Links
 Anchor/Link States a:link{
a:link{
color:#FF0000;
color:#FF0000;
• The four links states are:
/*unvisited
/*unvisited link*/
link*/
1. a:link - a normal, unvisited link }}
2. a:visited - a link the user has visited a:visited{
a:visited{
3. a:hover - a link when the user text-decoration
text-decoration :: none;
none;
/*visited
/*visited link*/
link*/
mouse over it
}}
4. a:active - a link the moment it is
a:hover{
a:hover{
clicked color:#00FF00; /*mouse
color:#00FF00; /*mouse
over
over link*/
link*/
}}

a:active{
a:active{
color:#0000FF;
color:#0000FF; /*selected
/*selected
link*/
link*/
}}

Unit
Unit –– 3:
3: CSS
CSS 38
38
CSS Positioning
 Absolute Positioning
h1{
h1{
• With absolute positioning, you define the position
position :: absolute;
absolute;
exact pixel value where the specified HTML left
left :: 50px;
50px;
element will appear. top
top :: 100px;
100px;
}}
• The point of origin is the top-left of the
browser's viewable area, so be sure you are
measuring from that point.
 Relative Positioning h1{
h1{
position
position :: relative;
relative;
• Relative positioning changes the position of left
left :: 50px;
50px;
the HTML element relative to where it top
top :: 100px;
100px;
normally appears. }}
 Fixed Positioning h1{
h1{
• The element is positioned relative to the position
position :: fixed;
fixed;
browser window, in fixed position, element top
top :: 50px;
50px;
will be in the same place even we scroll the left
left :: 100px;
100px;
}}
screen.
Unit
Unit –– 3:
3: CSS
CSS 39
39
CSS Layers
 CSS allows you to control which item will CSS
CSS
appear on top with the use of layers. #division1{
#division1{
position
position :: absolute;
absolute;
 In CSS, each element is given a priority. height
height :: 100px;
100px;
 If there are two overlapping CSS positioned width
width :: 100px;
100px;
elements, the element with the higher left
left :: 100px;
100px;
top
top :: 150px;
150px;
priority will appear on top of the other. background-color
background-color :: red;
red;
 To manually define a priority, set the z-index z-index
z-index :: 5;
5;
value. The larger the value, the higher the }}
#division2{
#division2{
priority the element will have. position : absolute;
position : absolute;
height
height :: 200px;
200px;
HTML
HTML
width
width :: 200px;
200px;
left
left :: 50px;
50px;
<div
<div id="division1">
id="division1">
top
top :: 100px;
100px;
</div>
</div>
background-color
background-color :: blue;
blue;
<div
<div id="division2">
id="division2">
z-index
z-index :: 2;
2;
</div>
</div>
}}

Unit
Unit –– 3:
3: CSS
CSS 40
40
CSS Float Property
 The CSS float property defines that an element should be taken
out of the normal flow of the document and placed along the left
or right side of its containing block.
 Text and inline elements will then wrap around this element.

CSS
CSS
#division1{
#division1{
background-color
background-color :: red;
red;
HTML
HTML float
float :: left;
left;
width:
width: 40%;40%;
<div
<div id="division1">
id="division1"> }}
ABC
ABC Content
Content #division2{
#division2{
</div>
</div> background-color
background-color :: blue;
blue;
<div
<div id="division2">
id="division2"> float
float :: right;
right;
XYZ
XYZ Content
Content width:
width: 40%;40%;
</div>
</div> }}

Unit
Unit –– 3:
3: CSS
CSS 41
41
Introduction to CSS3
 CSS3 is the latest standard for CSS.
 CSS3 is completely backwards-compatible with earlier versions of
CSS.
 CSS3 has been split into "modules". It contains the "old CSS
specification" (which has been split into smaller pieces). In addition,
new modules are added.
 CSS3 Transitions are a presentational effect which allow property
changes in CSS values, such as those that may be defined to occur
on :hover or :focus, to occur smoothly over a specified duration –
rather than happening instantaneously as is the normal behaviour.
 Transition effects can be applied to a wide variety of CSS properties,
including background-color, width, height, opacity, and many more.

Unit
Unit –– 3:
3: CSS
CSS 42
42
Introduction to CSS3 (Cont)
 Some of the most important CSS3 modules are:
• CSS Animations and Transitions
• Calculating Values With calc()
• Advanced Selectors
• Generated Content and Counters
• Gradients
• Webfonts
• Box Sizing
• Border Images
• Media Queries
• Multiple Backgrounds
• CSS Columns

Courtesy : http://tutorialzine.com/2013/10/12-awesome-css3-features-you-can-finally-use/

Unit
Unit –– 3:
3: CSS
CSS 43
43

You might also like