CSS3 v3

Cascading Style Sheets
(CSS)
By
Fahad Ahmed Satti
What is CSS?
• A set of presentation
rules for styling the web
• Separation of structure
from style
Top 10 Reasons for Using CSS
1. Build from the ground up to replace
traditional Web design methods
 CSS to replace HTML tables, font tags, frames, and other presentational
hacks of HTML elements
2. Faster download times

 Reduction of file size is about 50% less than a Web page built with
traditional Web design methods.
3. Shorter development time

 Easily tweak the design of a thousand-page site with just a few edits of one
CSS file
4. It's easy to write

 You can create and edit CSS as easily as you can hand code HTML
5. Greater control over the typography in a Web
page
 CSS's ability to control typography better
6. Improvements in accessibility
 Different layout for different devices
 Using CSS effectively means structuring content with HTML elements e.g. <P>,
<Tables>, <H1> etc.
7. Print designs as well as Web page designs

 Create presentations not only for Web browsers, but also for other media like print
or PowerPoint-like presentations.
8. Better control over the placement of elements in

Web page
9. The design of Web pages is separated from
the content
 By keeping the design in separate files linked to the HTML pages, you
reduce the likelihood of your page designs falling apart over time as
different contributors add to the Web page
10. Better search engine rankings

 With only HTML used for structuring content in a Web document instead of
rigging tags for design, search engines will spider your Web page effectively,
and more likely give you a higher page ranking.
What is CSS?
Style
CONTENT
Web page
Essentially, what we are doing when we use cascading style sheets, it is

separating the content of the page from the style or formatting of the page. This
has advantages, in that once the style sheet is loaded locally, all other pages
that are based on that style sheet will load quicker. The reason being that the
stylistic markup for defining the appearance of the page is loaded separately
from the content of the page.
What is CSS?
Web page
CSS CSS
Physical layout
Text
CSS CSS
Headings
Body
What is CSS?
• One cascading style sheet can be used to set the style and
format for many different web pages.
• The biggest advantage is that if the web author wants to make
whole changes to a website, the style editing takes place in
one location (the CSS), yet is applied to all related locations
(the pages).
• Imagine a large site with hundreds of pages. To change even
on item on each page, without a CSS, would require editing of
each of the hundreds of pages.
• In contract, a CSS based website would require the editing of
only one file – the CSS.
Types of CSS
• External
• Internal/Embedded
• Inline
External
• Allows for using style sheets from other sources
• Connection made via the LINK tag
• Use the optional TYPE attribute to specify a media type
• Two Methods
Linking a CSS file: (Recommended)
<head>
<link rel=“stylesheet” type=“text/css” href=“mystyle.css” />
</head>
Importing a CSS file: (Not supported in older browsers)
<head>
<style type=”text/css”>@import url(path/to/cssdoc.css);</style>
</head>
Internal/Embedded
• Style characteristics are embedded in the HEAD
section of the webpage
• Perhaps best used when a single page requires a
unique style sheet
<head>
<style type=“text/css”>
hr { color: navy}
body {margin-left: 20px}
</style>
</head>
Inline
• Least flexible
• Requires each element to be tagged if you
want them to appear differently
• Looses the advantage of using CSS
<p style=“color: yellow; font-family: verdana”>

This is a paragraph
</p>
Using multiple sheets
• You can use multiple sheets to define the style
of your document
• Internal styles will override external styles, if
they are duplicated
Using multiple sheets
h3 {color: red; text-align: right; font-size: 8pt}
(external CSS)
h3 {text-align: center; font-size: 20pt} (internal CSS)

will yield
h3 {color: red; text-align: center; font-size: 20pt }

Understanding the Cascade
• Cascading
– Determining rule weight by order
• Based on order of rule within style sheet
– Those listed later take precedence over those listed
earlier in the style sheet
Understanding the Cascade
• Inheritance
– Based on hierarchical structure of
documents
• CSS rules inherit from parent elements to child
elements:
– thus <LI> elements will inherit style rules
from <UL> elements unless a style rule is
specifically set for the <LI> element
Basic CSS Syntax
• Three parts:
– selector
– property
– value
selector {property: value} } declaration

Basic CSS Syntax
selector {property: value}
selector: the basic HTML element tag you wish to

define
property: the attribute of the selector that you wish
to change
value: the particular markup value for that attribute
body {color : black}

Basic CSS Syntax
If the value has multiple words, put the value in
quotes
p {font-family: “sans serif”}
Apply this style to all p element

Paragraph element of HTML
used in this document
Basic CSS Syntax
You can specify multiple properties to a single
selector. Properties must be separated by a
semicolon.
p { text-align: left; color: red }
Use semicolon for multiple

properties
Basic CSS Syntax
To make properties more readable, put each on a
separate line.
p { text-align: center;
color: navy;
font-family: arial
}
Basic CSS Syntax – Grouping Selectors
Selectors can be grouped so that a common property
can be specified
p, h1, h2, h3, h4

{
font-family: Arial;
color: yellow
}
<h1> This is a level 1 heading </h1>

<h2> This is a level 2 heading </h2>
Basic CSS Syntax – Descendants
Selectors can be descendants
p b { color: yellow }
Only those <b> element would be yellow

that are within a <p> element
<p><b> This would be yellow </b></p>
<b>This would not be yellow</b>

<p>Not this either</p>
CSS Syntax – class selector
The class selector allows you to create different
styles for the same HTML element.
p.center { text-align: center; color: green }

p.right { text-align: right; color: red }
This style will be applied to only those <p>

element that has a value of class attribute
equal to “right”
CSS Syntax - class
p.right { text-align: right }
<p class=“right”>
This paragraph will be right aligned.
</p>
Note: the class name must be in quotes inside the

opening tag
CSS Syntax - class
This is improper use of the class selector:
<p class=“right” class=“center”>

This paragraph will be right aligned.
</p>
Only one class selector can be included inside the tag

CSS Syntax – class free of tag name
You can also create a class selector free of a tag
name if you want all tags that have a particular
class to be formatted the same. E.g.
.center { text-align: center; font-style: italic }
Any tag with a “center” class will be aligned center and

italic
CSS Syntax – class free of tag name example
.center { text-align: center }

<h1 class=“center”>
This heading will be centered
</h1>
<p class=“center”>
So will this text
</p>
CSS Syntax – id Selector
While the class selector can apply to several
different elements, the id selector can only apply
to one, unique element with in a document.
p#para1 { text-align: center; color: green }
This style will apply to only that <p> element that has id
value equal to para1
CSS Syntax – id Selector
p#para1 { text-align: center; color: green }
<p id=“para1”>
This text would be centered and green
</p>
CSS Syntax - comment
You can insert comments to help you describe the particular style
Comments open with /* and are closed with */
/* This is a comment */
P { color: red;
/* This is another comment */
Font-family: verdana }
CSS Properties
• Basic CSS Properties
– Background Properties
– Text Properties
– Font Properties
– Border Properties
– Margin Properties
32
Background properties
• Define the background effects of an element
• Effects include color, using an image for a
background, repeating an image and
positioning an image
• Basic syntax
– background
• background-color
• background-image
• background-repeat (no-repeat, repeat)
• background-attachment (scroll, fixed)
• background-position
Background-repeat
Web Tech 1. Cascading Style Sheets 35

• All attributes can be set in a single declaration:
Shorthand Property:
background: #000000 url(‘psumark.gif’) no-
repeat fixed center
Equivalent to:
background-color: #000000; background-image:
url(‘psumark.gif’); background-repeat: no-
repeat; background-attachment: fixed;
background-position: center
• Setting the body background (internal CSS)
<style>
body { background: #000000 url(‘psumark.gif’)
no-repeat fixed center }
</style>
• Elements can also be set separately (internal
CSS)
<style>
body { background-color: #000000; background-
image: url(‘psumark.gif’); background-repeat:
no-repeat; background-attachment: fixed;
background-position: center }
</style>
CSS Properties
– Text Properties
– Font Properties

Text properties
• Controls the appearance of text in the web
page
• Commonly used attributes
– color
– direction
– text-align
– text-decoration
– text-indent
Text properties
• color
– sets the color of the text
– color can be represented by the color name (red),
an rgb value (rgb(255,255,255)), or by a
hexadecimal number (#ffffff)
• Syntax
– body {color: #ffffff}
Text properties
• direction
– sets the direction of the text
– can be set as left to right (ltr) or right to left (rtl)
– unicode-bidi
• together with the direction property defines, whether
the text should be overridden to support multiple
languages in the same document.
<!DOCTYPE html>
Text properties; Example <p>
<html> div.rtlText{<br/>
<head> direction: rtl;<br/>
<style> }<br/>
</p>
div.ex1 {
</div>
direction: inherit;
<hr/>
unicode-bidi: bidi-override;
<div class="ex1">Some text. Right-to-left direction.<br/>
}
<p>
div.rtlText{
div.ex1 {<br/>
direction: rtl;
direction: inherit;<br/>
} unicode-bidi: bidi-override;<br/>
div.ltrText{ }<br/>
direction: ltr; </p>
} </div>
</style> <hr/>
</head> <div class="rtlText">
<body> <div class="ex1">Here we are utilizing the direction inherit
<div class="ltrText">Some text. Default writing direction. property, from rtlText<br/>
<p> </div>
div.ltrText{<br/> </div>
direction: ltr;<br/> </body>
}<br/> </html>
</p>
</div>
<hr/>
<div class="rtlText">rtl Text
Text properties
• text-align
– aligns the text in an element
– possible values are left, right, center and justify
• Syntax
– p {text-align: justify}
Text properties
• text-decoration
– adds certain decoration elements to the text
– possible values are none, underline, overline,
line-through
• Syntax
– p {text-decoration: underline}
Text properties
• text-indent
– indents the first line of text inside an element
– possible values are length (defines a fixed value)
and %
• Syntax
– p {text-indent: 20px} or
– p {text-indent: 5%}
CSS Properties
– Text Properties
– Font Properties
47
Font properties
• Define the look of the font in text areas
• One of the broader sets of properties in CSS
– font
• font-style
• font-variant
• font-weight
• font-size/line-height
• font-family
Font properties
• All attributes can be set in a single declaration:
Shorthand Property:
font: italic small-caps 900 12px arial
Equivalent to:
font-style: italic; font-variant: small-caps; font-
weight: 900; font-size: 12px; font-family: arial
49
Font properties
• font-style
– Normal
– Italic
– oblique
• Syntax
– body {font-style: italic}
Font properties
• font-variant
– Normal
• font displays as is
– small-caps
• font displays in all capitals, with lower case letters in smaller size
Syntax:
body {font-variant: small-caps}
Font properties
• font-weight
– normal
– bold range from 100 – 900
– bolder 400 is the same as normal weight
700 is the same as bold weight
– lighter
– weighted values
Syntax:
body {font-weight: bold}
Font properties
• font-size
• xx-small
• x-small
• Small
• Medium
• Large
• x-large
• xx-large
• %
Syntax:
body {font-size: 20px}
{font-size: x-large}
{font-size: 125%}
Font properties
• font-family
– family-name
• “times”, “arial”, “courier”, “verdana”
– generic-family
• “serif”, “sans-serif”, “monospace”
Syntax:
body {font-family: verdana, sans-serif}
CSS Properties
– Text Properties
– Font Properties
55
Border properties
• Allows you to specify the width, style, and
color of an element’s border
• Many different properties can be applied
• Border border-color
border-style (DOTTED |
DASHED | SOLID)
border-width border-right
border-right-color
border-bottom border-right-style
border-bottom-color
border-right-width
border-bottom-style
border-bottom-width border-top
border-top-color
border-left border-top-style
border-left-color
border-top-width
border-left-style
border-left-width
Border properties
• You can specify the width, style, color and on which sides the
border appears
Shorthand Property:
border: medium double rgb(250,0,255)
Equivalent to:
border-width: medium; border-style: double; border-color:
rgb(255,0,255)
CSS Properties
– Text Properties
– Font Properties
58
Margin properties
• Define the space around elements
• You can use negative values to overlap content
• Margins can be set independently or
collectively
• Can be set to auto, a fixed length or a % of the
total height of the document
Margin properties
• Properties
– margin
– margin-top
– margin-right
– margin-bottom
– margin-left
Margin properties
• Can be set in one declaration
• Think clock face (clockwise)
– top, right, bottom, left
h1 {margin: 10px 20px 30px 40px}

Margin properties
• All margins can be set the same
h1 {margin: 40px}
Margin properties
• Margin settings can be paired (left and right,
top and bottom)
h1 {margin: 40px 5%}
In this example, the top and bottom margins would be 40 pixels,

While the left and right margins would be 5% of the total height of
the document.
Margin properties
• 0 size margins do not need to be specified.
0px, 0pt and 0 are all equivalent.
h1 {margin: 40px 0 5% 0}
In this example, the top margin would be 40 pixels, the left and
right margins would be 0, and the bottom margin would
be 5% of the total height of the document.
CSS Box Properties
• Content - The content of the
box, where text and images
appear
• Padding - Clears an area
around the content. The
padding is transparent
• Border - A border that goes
around the padding and
content
• Margin - Clears an area
outside the border. The
margin is transparent
CSS Box Properties
div {
width: 300px;
height: 100px;
padding: 25px;
border: 25px solid navy;
margin: 25px;
}
• Total Width: 300+50+50+50=450px
• Total Height: 100+50+50+50=250PX
CSS 3
67
CSS3
• latest standard for CSS.
• completely backwards-compatible with earlier
versions of CSS.
• most of the CSS3 Modules are W3C
Recommendations
• and most of the new CSS3 properties are
already implemented in modern browsers.
68
CSS3 Modules
• 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
69
CSS3 Rounded Corners(1)
• with border-radius property, you can give any element
"rounded corners".
#rcorners1 {
border-radius: 25px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}
<p id="rcorners1">Rounded
corners!</p>
• What happens if you specify 1 radius only, or 2 and not 4?

70
• Four values: first value applies to top-left,
second value applies to top-right, third value
applies to bottom-right, and fourth value
applies to bottom-left corner
#rcorners4 {
border-radius: 15px 50px
30px 5px;
padding: 20px;
width: 200px;
height: 150px;
}
71
• Three values: first value applies to top-left,
second value applies to top-right and bottom-
left, and third value applies to bottom-right
#rcorners5 {
30px;
padding: 20px;
width: 200px;
height: 150px;
}
72
• Three values: first value applies to top-left,
second value applies to top-right and bottom-
left, and third value applies to bottom-right
#rcorners5 {
30px;
padding: 20px;
width: 200px;
height: 150px;
}
73
• Two values: first value applies to top-left and
bottom-right corner, and the second value
applies to top-right and bottom-left corner

• Elliptical Corners
#rcorners7 {
border-radius: 50px/15px;
padding: 20px;
width: 200px;
height: 150px;
}
75
• Elliptical Corners
#rcorners9 {
border-radius: 50%;
padding: 20px;
width: 200px;
height: 150px;
}
76
CSS3 Border Images
• border-image
• you can set an image to be used as the border
around an element.
• The property has three parts:
– The image to use as the border
– Where to slice the image
– Define whether the middle sections should be
repeated or stretched

CSS3 Border Images
#borderimg {
border: 10px solid transparent;
padding: 15px;
-webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */
-o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */
border-image: url(border.png) 30 round;
}

RGBA/HSLA Colors
• RGBA color values are an extension of RGB color values with an
alpha channel - which specifies the opacity for a color.
• 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).
• You can also use “opacity”

– The text is also opaque in this case.
CSS3 Gradients
• To display smooth transitions between two or
more specified colors
• No more images for gradients.
• CSS3 gradients, can reduce download time
and bandwidth usage.
• Additionally, elements with gradients look
better when zoomed, because the gradient is
generated by the browser.

CSS3 Gradients Types
• Linear Gradients (goes down/up/left/right/diagonally)
background: linear-gradient(direction, color-

stop1, color-stop2, ...);
• Radial Gradients (defined by their center)
background: radial-gradient(shape size at position,

start-color, ..., last-color);

CSS3 Shadow Effects
• text Shadows
h1 {
text-shadow: 2px 2px 5px red;
}
h1 {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px
blue, 0 0 5px darkblue;
}

CSS3 Shadow Effects
• box-shadow
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px
grey;
}

CSS3 Transforms
• Transform elements in 2d or 3d
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#trans {
-webkit-transform:
rotateY(150deg); /* Safari */
transform:
rotateY(150deg); /* Standard
syntax */
}
CSS3 Transforms
• 3d
– rotateX()
– rotateY()
– rotateZ()
• 2d
– translate()
– rotate()
– scale()
– skewX()
– skewY()
– matrix()
CSS3 Transitions
• To create a transition effect, you must specify
two things:
– the CSS property you want to add an effect to
– the duration of the effect
Note: If the duration part is not specified, the

transition will have no effect, because the
default value is 0.

CSS3 Transitions
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width
2s; /* For Safari 3.1 to 6.0 */
transition: width 2s;
}
div:hover {
width: 300px;
}

CSS3 Transitions
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s,
height 4s; /* For Safari 3.1 to 6.0
*/
transition: width 2s, height
4s;
}
div:hover {
width: 300px;
height: 300px;
}

CSS3 Animations
• gradually change from one style to another
• change as many CSS properties you want, as
many times you want
• The @keyframes Rule
– To get an animation to work, you must bind the
animation to an element.

CSS3 Animations
div {
width: 100px;
height: 100px;
background-color: red;
-webkit-animation-name: example; /* Chrome, Safari, Opera */
-webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
animation-name: example;
animation-duration: 4s;
}
/* Chrome, Safari, Opera */
@-webkit-keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* Standard syntax */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
CSS3 Animations
div { }
width: 100px;
height: 100px; /* Standard syntax */
background-color: red; @keyframes example {
-webkit-animation-name: example; /* Chrome, 0% {background-color: red;}
Safari, Opera */ 25% {background-color: yellow;}
-webkit-animation-duration: 4s; /* Chrome, Safari, 50% {background-color: blue;}
Opera */ 100% {background-color: green;}
animation-name: example; }
}
/* Chrome, Safari, Opera */

@-webkit-keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}

CSS3 Animations
• Default value of animation-duration is 0;
where nothing happens
• animation-delay property specifies a delay for
the start of an animation.
• animation-iteration-count property specifies
the number of times an animation should run
• animation-direction property is used to let an
animation run in reverse direction or
alternate cycles
CSS Animations
div {
animation-name: example;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
• Shorthand
div {
animation: example 5s linear 2s infinite alternate;
}

CSS3 Box Sizing
• include the padding and border in an
element's total width and height
• Without the CSS3 box-sizing Property
– width + padding + border = actual width of an
element
– height + padding + border = actual height of an
element

Without Box Sizing
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
With Box Sizing
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}
.div2 {
width: 300px;
height: 100px;
padding: 50px;
} 96
CSS3 Media Queries
• Media queries in CSS3 extend the CSS2 media types idea
– In CSS2 @media was used to define different style rules for
different media types(computers, printers, tablets, etc)
– In CSS3, Instead of looking for a type of device, they look at the
capability of the device.
• Media queries can be used to check many things, such as:

– width and height of the browser window
– width and height of the device
– orientation (is the tablet/phone in landscape or portrait mode?)
– resolution
97
Syntax
@media not|only mediatype and (expressions) {
CSS-Code;
}
• The result of the query is true if the specified media
type matches the type of device( the document is
being displayed on)
• and all expressions in the media query are true.
• When a media query is true, the corresponding style
sheet or style rules are applied, following the
normal cascading rules.
CSS3 Media Types
• Unless you use the not or only operators, the
media type is optional and the all type will be
implied.
Value Description
all Used for all media type devices
print Used for printers
screen Used for computer screens, tablets, smart-phones etc.
speech Used for screenreaders that "reads" the page out loud

Media Queries: Examples
@media screen and (max-width:
480px) {
body {
background-color: pink;
}
}
• changes the background-color to pink if the
width of the browser window is less than 480
pixels
Media Queries: Examples
@media screen and (max-width: 480px) {
#main {margin-left: 4px;}
#leftsidebar {
float: none;
width: auto;
}
}

RWD
• Responsive Web Design
• makes your web page look good on most
devices
• uses only HTML and CSS
Phone
Desktop Tablet
The Viewport
• user's visible area of a web page
• varies with the device(smaller on a mobile
phone than on a computer screen)
• <meta name="viewport" content="width=device-
width, initial-scale=1.0">
– width=device-width sets the width of the page to
follow the screen-width of the device
– initial-scale=1.0 sets the initial zoom level
when the page is first loaded by the browser.

Grid-View
• The web page is divided into columns(typically
12)
• total width of 100%
• View shrinks and expands according to
window size.

Building a Responsive Grid-View
* {
}
• all HTML elements must have the box-

sizing property set to border-box to ensure
that the padding and border are included in
the total width and height of the elements

For 2 col Layout
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}

For 12 col Layout
• 100% / 12 columns = 8.33%
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
Float the columns & Pad the content
[class*="col-"] {
float: left;
padding: 15px;
}
• floating to the left
• padding of 15px

Content
• Each row should be wrapped in a <div>.
• The number of columns inside a row should
always add up to 12
<div class="row">
<div class="col-3">...</div>
</div>
<div class="row">
</div>
Float the columns & Pad the content
.row:after {
content: "";
clear: both;
display: block;
}
• Clear the row follow up

Media Queries + RWD
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {

/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}

Media Queries + RWD: Mobile First View
• Mobile First means designing for mobile

before designing for desktop or any other
device
• This will make the page display faster on
smaller devices

Media Queries + RWD: Mobile First View
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

Media Queries + RWD: Multiple
Breakpoints
/* For mobile phones: */ }
[class*="col-"] { @media only screen and (min-width:
width: 100%; 768px) {
} /* For desktop: */
@media only screen and (min-width: .col-1 {width: 8.33%;}
600px) { .col-2 {width: 16.66%;}
/* For tablets: */ .col-3 {width: 25%;}
.col-m-1 {width: 8.33%;} .col-4 {width: 33.33%;}
.col-m-3 {width: 25%;} .col-6 {width: 50%;}
.col-m-10 {width: 83.33%;} }
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
Media Queries + RWD: Multiple
Breakpoints
<div class="row"> • For desktop:
– The first and the third
<div class="col-3 col- section will both span 3
1
m-3">...</div> columns each. The middle
section will span 6 columns.
<div class="col-6 col- • For tablets:
2
m-9">...</div> – The first section will span 3
columns, the second will
span 9, and the third
3 <div class="col-3 col- section will be displayed
m-12">...</div> below the first two
sections, and it will span 12
</div> columns:
Media Queries + RWD: Orientation
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}

Thank you
NEXT TIME ON WEB ENGINEERING:

JAVASCRIPT
117

CSS3 v3

Uploaded by

Document Information

Original Description:

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

CSS3 v3

Uploaded by

Copyright:

Available Formats

Cascading Style Sheets

2. Faster download times

3. Shorter development time

4. It's easy to write

7. Print designs as well as Web page designs

8. Better control over the placement of elements in

10. Better search engine rankings

Essentially, what we are doing when we use cascading style sheets, it is

<p style=“color: yellow; font-family: verdana”>

h3 {text-align: center; font-size: 20pt} (internal CSS)

h3 {color: red; text-align: center; font-size: 20pt }

selector {property: value} } declaration

selector: the basic HTML element tag you wish to

body {color : black}

p {font-family: “sans serif”}

Apply this style to all p element

p { text-align: left; color: red }

Use semicolon for multiple

p, h1, h2, h3, h4

<h1> This is a level 1 heading </h1>

Only those <b> element would be yellow

<b>This would not be yellow</b>

p.center { text-align: center; color: green }

This style will be applied to only those <p>

Note: the class name must be in quotes inside the

<p class=“right” class=“center”>

Only one class selector can be included inside the tag

.center { text-align: center; font-style: italic }

Any tag with a “center” class will be aligned center and

.center { text-align: center }

p#para1 { text-align: center; color: green }

Comments open with /* and are closed with */

Web Tech 1. Cascading Style Sheets 35

Web Tech 1. Cascading Style Sheets 39

h1 {margin: 10px 20px 30px 40px}

h1 {margin: 40px 5%}

In this example, the top and bottom margins would be 40 pixels,

• What happens if you specify 1 radius only, or 2 and not 4?

Web Tech 1. Cascading Style Sheets 74

Web Tech 1. Cascading Style Sheets 77

Web Tech 1. Cascading Style Sheets 78

• You can also use “opacity”

Web Tech 1. Cascading Style Sheets 80

background: linear-gradient(direction, color-

• Radial Gradients (defined by their center)

background: radial-gradient(shape size at position,

Web Tech 1. Cascading Style Sheets 81

Web Tech 1. Cascading Style Sheets 82

Web Tech 1. Cascading Style Sheets 83

Note: If the duration part is not specified, the

Web Tech 1. Cascading Style Sheets 86

Web Tech 1. Cascading Style Sheets 87

Web Tech 1. Cascading Style Sheets 88

Web Tech 1. Cascading Style Sheets 89

/* Chrome, Safari, Opera */

Web Tech 1. Cascading Style Sheets 91

Web Tech 1. Cascading Style Sheets 93

Web Tech 1. Cascading Style Sheets 94

• Media queries can be used to check many things, such as:

all Used for all media type devices

print Used for printers

screen Used for computer screens, tablets, smart-phones etc.