Scribd
Upload
17 views

Lecture 10

The document discusses various CSS concepts including the CSS box model, box sizing, CSS layouts, responsive web design, and media queries. It explains the CSS box model consists of content, padding, border, and margin. It also describes different CSS layouts like fixed, fluid, and flexbox layouts. The document also covers responsive web design using media queries to adapt designs based on screen size.

Uploaded by

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

Lecture 10

The document discusses various CSS concepts including the CSS box model, box sizing, CSS layouts, responsive web design, and media queries. It explains the CSS box model consists of content, padding, border, and margin. It also describes different CSS layouts like fixed, fluid, and flexbox layouts. The document also covers responsive web design using media queries to adapt designs based on screen size.

Uploaded by

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

Web Technologies

CSS3
Today’s Lecture
• CSS Box Model
– CSS Height and Width, CSS Padding, CSS Border, and CSS Margin
• Box Sizing
– Content-Box, and Border-Box
• CSS Layouts
– Fixed Layout, Fluid Layout, and Flexbox Layout
• Responsive Web Design
• Media Queries
– Identifying Breakpoints
• Mobile First Approach
CSS Box Model
• It used when talking about design and layout.
• It’s a box that wraps around every HTML element.
• It consists of actual content, padding, border, and margin.
– Content - it’s a box where text appear.
– Padding - it clears an area around the content.
– Border - it goes around the padding and content.
– Margin - it clean area outside the border.
CSS Box Model
• CSS Height and Width
– It used to set height and width of an element.
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 150px;
width: 25%;
background-color: lightgreen;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 150px and a width of 25%.</div>
</body>
</html>
CSS Padding
• It used to specify space between element content and element
border.
• It contains padding-top, padding-right, padding-bottom, and
padding-left values.
div {
padding-top: 20px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 60px;
}
• padding Shorthand
– To shorten code, specify all the padding properties in one
property.
– padding property is a shorthand property for padding-top,
padding-right, padding-bottom, and padding-left padding
properties.
CSS Padding
• If padding property has 4 values
– padding: 25px 50px 75px 100px;
– Means top padding is 25px, right padding is 50px, bottom
padding is 75px, and left padding is 100px
• If padding property has 3 values
– padding: 25px 50px 75px;
– Means top padding is 25px, right and left paddings are 50px, and
bottom padding is 75px
• If padding property has 2 values
– padding: 25px 50px;
– Means top and bottom paddings are 25px, and right and left
paddings are 50px
• If the padding property has 1 value
– padding: 25px;
– Means all four paddings are 25px
CSS Padding
<html>
<head>
<style>
div {
border: 5px dotted black;
background-color: red;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
p{
border: 5px double black;
background-color: green;
padding: 50px 30px 50px 80px;
}
</style>
</head>
<body>
<h2>Using individual and shorthand padding properties</h2>
<div>This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left
padding of 80px.</div>
<p>This p element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left
padding of 80px.</p>
</body>
</html>
CSS Border
• It provide an outline around an element and fall between padding
and margin.
• It contains width, style, and color border properties.
• border-style
– It specifies the kind of border to display.
– It can have top border, right border, bottom border, and left
border.
– border-style values are:
• dotted (defines a dotted border)
• dashed (defines a dashed border)
• solid (defines a solid border)
• double (defines a double border)
• groove (defines a 3D grooved border, and effect depends on border-color value)
• ridge (defines a 3D ridged border, and effect depends on border-color value)
• inset (defines a 3D inset border, and effect depends on border-color value)
• outset (defines a 3D outset border, and effect depends on border-color value)
• hidden (defines a hidden border)
• none (defines no border)
CSS Border
CSS Border
• border-width
– It specifies width of the four borders.
– Width can be set as a specific size (for example in pixels) or by
using pre-defined values: thin, medium, or thick.
– It can have top border, right border, bottom border, and left
border.
CSS Border
• border-color
– It used to set the color of borders.
– color can be set by:
• name - specify a color name, like "green"
• HEX - specify a HEX value, like "#ff0000"
• RGB - specify a RGB value, like "rgb(255,0,0)"
CSS Border
• border Shorthand
– To shorten code, specify all the individual border properties in
one property.
– Border property is a shorthand property for border-width,
border-style, and border-color.
CSS Margin
• It used to create space around elements, outside of any defined
borders.
• CSS Margin properties are: margin-top, margin-right, margin-
bottom, and margin-left
p{
margin-top: 70px;
margin-right: 80px;
margin-bottom: 90px;
margin-left: 100px;
}
• margin Shorthand
– To shorten code, specify all the margin properties in one
property.
– margin property is a shorthand property for margin-top, margin-
right, margin-bottom, and margin-left
CSS Margin
• If margin property has 4 values
– margin: 25px 400px 75px 100px;
– Means top margin is 25px, right margin is 400px, bottom margin is
75px, and left margin is 100px
• If margin property has 3 values
– margin: 25px 50px 75px;
– Means top margin is 25px, right and left margins are 50px, and
bottom margin is 75px
• If margin property has 2 values
– margin: 25px 50px;
– Means top and bottom margins are 25px, and right and left
margins are 50px
• If margin property has 1 value
– margin: 25px;
– Means all four margins are 25px
CSS Margin
Size Of A Box
• Width of an element calculated as: margin right (20px) + border
right (6px) + padding right (20px) + width (400px) + padding left
(20px) + border left (6px) + margin left (20px) = 492px
• Height of an element calculated as: margin top (20px) + border top
(6px) + padding top (20px) + height (100px) + padding bottom
(20px) + border bottom (6px) + margin bottom (20px) = 192px
Box-Sizing
• CSS3 introduced the box-sizing property.
• box-sizing property has two values: Content-Box, and Border-Box
• content-box
– When using box-sizing: content-box;
• content size remain same, while border-box size grows as
padding and border grow.
• border-box
– When using box-sizing: border-box;
• border-box size remains same, while content size decreases
as padding and border grow.
Box-Sizing
Box-Sizing
CSS Layouts
• Fixed Layout
o A layout in which width of container is fixed (in pixels).
o Example: 280px, 720px, 1000px etc.

main { width:1000px; }
header { width:950px; }
#container{ width:1000px; }
section { float:left; width:800px;
margin:10px; }
aside { float:right; width: 100px;
margin:30px; }
footer { width: 950px; }
CSS Layouts
• Fluid Layout
o A layout in which width of container is flexible (in percentage).
o Example: 25%, 50%, and 100% etc.

main { width:100%; }
header {width:95%;}
#container { width:100%; }
section { float:left; width: 60%;
margin:1%; }
aside { float:right; width: 30%;
margin:1%; }
footer { width: 95%;}
CSS Layouts
• Flexbox Layout
– Easier to design flexible responsive layout structure without
using float or positioning.
• Example: menu bars, product listings etc.
– Advantages
• Ability to change the display order of items.
• Ability to make all items at the same height.
• Easy horizontal and vertical centering.
• Browser support available.
CSS Layouts
• Flexbox Layout
– Flex Container
• Create a flex container by setting element’s display property
to flex.
– flex-direction
• It allows to control how items appear within the container.
• Its values are row (default), row-reverse, column, and
column-reverse.
CSS Layouts - Flexbox Layout
• Flexbox Layout
Responsive Web Design (RWD)
• It was invented and developed by Ethan Marcotte in his
book Responsive Web Design in 2010.
• It is about creating web sites which automatically adjust themselves
to look good on all devices.
– RWD uses only HTML and CSS.
– It can be achieved by using the media queries.
– Media queries are a popular technique for delivering a tailored
style sheet to desktops, laptops, tablets, and mobile phones.
Media Queries
• Media Queries is a CSS technique, introduced in CSS3.
• Media Queries allow designers to deliver styles based on media types
and media features.
– Media Types specify target devices for which relevant properties
make sense.
– Media Features specify characteristics to differentiates one device
from another device.
• It uses @media rule to include a block of CSS properties only if a
certain condition is true.
• Example: media rule that works for all types of screens for size of
screen less than 1024px.
@media (max-width: 1024px)
{ ... }
Media Queries
• Media Types
– @media rule is used in media queries to apply different styles
for different media types/devices.
– For each different device that we access a website, we need a
different CSS too.
– Example: for all media type devices, use @media all { ... }
Media Queries
• Media Features
– It uses characteristics to differentiates one device from another
device.
– Width - width of the device/viewport.
– Height - height of the device/viewport.
– Orientation - orientation is portrait when height is greater than
or equal to width, otherwise orientation is landscape.
@media all and (orientation: portrait) { … }
@media all and (orientation: landscape) { … }
– Aspect-Ratio - ratio of width to height of the viewport.
@media (min-aspect-ratio: 3/2) {
div {background: aqua;}
– Resolution - number of pixels measures in Dots Per Inch (DPI).
Media Queries
• Logical Operator
– Logical operators and, not, and only can be used to compose a
complex media query.
– Example
• @media screen and (min-width: 400px) and (max-width:
700px) { … }
• @media not (screen and (max-width: 600px)) {……}
• @media only (screen and (max-width: 500px)) {……}
• Comma Operator
– Comma , is used to combine multiple media queries into a single
rule.
– Example
• @media (min-height: 680px), screen and (orientation:
portrait) { ... }
Media Queries
• We can use Internal CSS and External CSS for using media queries.
<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">
• Example: background-color lightgreen if viewport is min 580px wide or
more, or background-color aqua if viewport is less than 580px wide.
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: aqua;
}
@media screen and (min-width: 580px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h1>Resize browser window to see effect...</h1>
</body>
</html>
Media Queries
• Identifying Breakpoints
– A point at which media query delivers new set of styles.
– Usually, responsive sites use three designs targeted at typical
phone, tablet and desktop widths.
– How many we choose breakpoint, depends on the nature of the
site’s design.
Media Queries
• There are tons of screens and devices with different heights and
widths, so it is hard to create an exact breakpoint for each device.
• To keep things simple, we could target five groups:
Typical Device Breakpoints
Mobile First Approach
• It means designing for mobile before designing for desktop or any
other device.
– Contrary to traditional approach of starting with a desktop site
and then adapting it to smaller screens.
@media (min-width: 600px) {...}
@media (min-width: 768px) {...}
@media (min-width: 992px) {...}
@media (min-width: 1200px) {...}
Responsive Website Example
responsive layout - when screen is min 700px wide
Responsive Website Example
responsive layout - when screen is less than 700px
Small Viewport
Medium Viewport
Big Viewport
Summary of Today’s Lecture
• CSS Box Model
– CSS Height and Width, CSS Padding, CSS Border, and CSS Margin
• Box Sizing
– Content-Box, and Border-Box
• CSS Layouts
– Fixed Layout, Fluid Layout, and Flexbox Layout
• Responsive Web Design
• Media Queries
– Identifying Breakpoints
• Mobile First Approach
References
• Responsive Web Design by Ethan Marcotte
• https://www.w3schools.com/css/css_boxmodel.asp
• https://www.geeksforgeeks.org/css-box-model/
• https://www.w3schools.com/css/css_padding.asp
• https://www.w3schools.com/css/css_margin.asp
• https://www.w3schools.com/css/css3_flexbox.asp
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/
• https://www.w3schools.com/css/css_rwd_intro.asp
• https://www.w3.org/TR/css3-mediaqueries/
• https://www.w3schools.com/css/css3_mediaqueries.asp

You might also like