Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
17 views

CSS3 v3

Cascading Style Sheets (CSS) is used to separate the structure of HTML elements from their presentation or style. CSS allows for building web pages from the ground up to replace traditional design methods. Some key benefits of CSS include faster download times, shorter development time, greater control over typography and accessibility, and better separation of design from content. CSS declarations use selectors to target HTML elements and properties to set attributes like color, font, and layout. This separation of style from content improves performance, accessibility, and maintainability of websites.

Uploaded by

Tayyib ul Hassan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
17 views

CSS3 v3

Cascading Style Sheets (CSS) is used to separate the structure of HTML elements from their presentation or style. CSS allows for building web pages from the ground up to replace traditional design methods. Some key benefits of CSS include faster download times, shorter development time, greater control over typography and accessibility, and better separation of design from content. CSS declarations use selectors to target HTML elements and properties to set attributes like color, font, and layout. This separation of style from content improves performance, accessibility, and maintainability of websites.

Uploaded by

Tayyib ul Hassan
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 117

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
Top 10 Reasons for Using CSS
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
Top 10 Reasons for Using CSS
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
Background properties
• 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


Background properties
• 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
Background properties
• Setting the body background (internal CSS)
<style>
body { background: #000000 url(‘psumark.gif’)
no-repeat fixed center }
</style>
Background properties
• 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
• Basic CSS Properties
– Background Properties
– Text Properties
– Font Properties
– Border Properties
– Margin Properties

Web Tech 1. Cascading Style Sheets 39


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
• Basic CSS Properties
– Background Properties
– Text Properties
– Font Properties
– Border Properties
– Margin 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
• Basic CSS Properties
– Background Properties
– Text Properties
– Font Properties
– Border Properties
– Margin 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
• Basic CSS Properties
– Background Properties
– Text Properties
– Font Properties
– Border Properties
– Margin 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
Web Tech 1. Cascading Style Sheets 65
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
Web Tech 1. Cascading Style Sheets 66
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
CSS3 Rounded Corners(2)
• 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;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

71
CSS3 Rounded Corners(3)
• 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 {
border-radius: 15px 50px
30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

72
CSS3 Rounded Corners(4)
• 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 {
border-radius: 15px 50px
30px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

73
CSS3 Rounded Corners(5)
• Two values: first value applies to top-left and
bottom-right corner, and the second value
applies to top-right and bottom-left corner

Web Tech 1. Cascading Style Sheets 74


CSS3 Rounded Corners(4)
• Elliptical Corners

#rcorners7 {
border-radius: 50px/15px;
background: #8AC007;
padding: 20px;
width: 200px;
height: 150px;
}

75
CSS3 Rounded Corners(4)
• Elliptical Corners

#rcorners9 {
border-radius: 50%;
background: #8AC007;
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

Web Tech 1. Cascading Style Sheets 77


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;
}

Web Tech 1. Cascading Style Sheets 78


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.
Web Tech 1. Cascading Style Sheets 79
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.

Web Tech 1. Cascading Style Sheets 80


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);

Web Tech 1. Cascading Style Sheets 81


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;
}

Web Tech 1. Cascading Style Sheets 82


CSS3 Shadow Effects
• box-shadow

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

Web Tech 1. Cascading Style Sheets 83


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 */
}
Web Tech 1. Cascading Style Sheets 84
CSS3 Transforms
• 3d
– rotateX()
– rotateY()
– rotateZ()
• 2d
– translate()
– rotate()
– scale()
– skewX()
– skewY()
– matrix()
Web Tech 1. Cascading Style Sheets 85
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.

Web Tech 1. Cascading Style Sheets 86


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;
}

Web Tech 1. Cascading Style Sheets 87


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;
}

Web Tech 1. Cascading Style Sheets 88


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.

Web Tech 1. Cascading Style Sheets 89


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;}
}
Web Tech 1. Cascading Style Sheets 90
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; }
animation-duration: 4s;
}

/* Chrome, Safari, Opera */


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

Web Tech 1. Cascading Style Sheets 91


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
Web Tech 1. Cascading Style Sheets 92
CSS Animations
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

• Shorthand
div {
animation: example 5s linear 2s infinite alternate;
}

Web Tech 1. Cascading Style Sheets 93


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

Web Tech 1. Cascading Style Sheets 94


Without Box Sizing
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
Web Tech 1. Cascading Style Sheets 95
With Box Sizing
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
box-sizing: border-box;
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
box-sizing: border-box;
} 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.
Web Tech 1. Cascading Style Sheets 98
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

Web Tech 1. Cascading Style Sheets 99


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
Web Tech 1. Cascading Style Sheets 100
Media Queries: Examples
@media screen and (max-width: 480px) {
#main {margin-left: 4px;}
#leftsidebar {
float: none;
width: auto;
}
}

Web Tech 1. Cascading Style Sheets 101


RWD
• Responsive Web Design
• makes your web page look good on most
devices
• uses only HTML and CSS

Phone
Desktop Tablet
Web Tech 1. Cascading Style Sheets 102
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.

Web Tech 1. Cascading Style Sheets 103


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

Web Tech 1. Cascading Style Sheets 104


Building a Responsive Grid-View
* {
box-sizing: border-box;
}

• 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

Web Tech 1. Cascading Style Sheets 105


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

Web Tech 1. Cascading Style Sheets 106


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-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
Web Tech 1. Cascading Style Sheets 107
Float the columns & Pad the content

[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}
• floating to the left
• padding of 15px

Web Tech 1. Cascading Style Sheets 108


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 class="col-9">...</div>
</div>
<div class="row">
<div class="col-6">...</div>
<div class="col-6">...</div>
</div>
Web Tech 1. Cascading Style Sheets 109
Float the columns & Pad the content

.row:after {
content: "";
clear: both;
display: block;
}

• Clear the row follow up

Web Tech 1. Cascading Style Sheets 110


Media Queries + RWD
/* For desktop: */
.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-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.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%;
}
}

Web Tech 1. Cascading Style Sheets 111


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

Web Tech 1. Cascading Style Sheets 112


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-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}

Web Tech 1. Cascading Style Sheets 113


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-2 {width: 16.66%;} .col-5 {width: 41.66%;}
.col-m-3 {width: 25%;} .col-6 {width: 50%;}
.col-m-4 {width: 33.33%;} .col-7 {width: 58.33%;}
.col-m-5 {width: 41.66%;} .col-8 {width: 66.66%;}
.col-m-6 {width: 50%;} .col-9 {width: 75%;}
.col-m-7 {width: 58.33%;} .col-10 {width: 83.33%;}
.col-m-8 {width: 66.66%;} .col-11 {width: 91.66%;}
.col-m-9 {width: 75%;} .col-12 {width: 100%;}
.col-m-10 {width: 83.33%;} }
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
Web Tech 1. Cascading Style Sheets 114
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:
Web Tech 1. Cascading Style Sheets 115
Media Queries + RWD: Orientation
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}

Web Tech 1. Cascading Style Sheets 116


Thank you

NEXT TIME ON WEB ENGINEERING:


JAVASCRIPT

117

You might also like