0% found this document useful (0 votes)

4 views

3_CSS

Uploaded by

lohithjkofficial

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

4 views

3_CSS

Uploaded by

lohithjkofficial

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 194

We are on a mission to address the digital

skills gap for 10 Million+ young professionals,

train and empower them to forge a career
path into future tech
Cascading Style Sheets
SEPTEMBER, 2024
Cascading Style Sheets

Introduction

• Cascading Style Sheets (CSS) is a style sheet language used for describing the look and
formatting of a document written in a markup language.

• Used to describe the presentation of documents

• Define sizes, spacing, fonts, colors, layout.

• Improve content accessibility and flexibility.

• It is a highly effective HTML tool that provides easy control over layout and presentation of website
pages by separating content from design.

• Typical CSS file is a text file with an extension .css and contains a series of commands or rules.

• These rules tell the HTML how to display.

3 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Introduction

• Developed to enable the separation of document content from document presentation

• Initial release in 1996 (CSS1).

• CSS2 published as a recommendation in May 1998 and builds on CSS1.

• CSS3 recommendation in June 1999 and builds on older versions CSS.

4 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

HTML without CSS

• “HTML without CSS is like a piece of candy

without a pretty wrapper.”

• Without CSS, HTML elements typically flow

from top to bottom of the page and position
themselves to the left by default.

• With CSS help, we can create containers or

HTML HTML + CSS
DIVs to better organize content and make a (Structure) (Presentation)
Web page visually appealing.

5 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS

• CSS handles the look and feel part of a web page.

• Using CSS, you can control

– the color of the text

– the style of fonts

– the spacing between paragraphs

– how columns are sized and laid out

– what background images or colors are used

– layout designs and

– variations in the display for different devices and screen sizes

as well as a variety of other effect

6 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Benefits

• Separates structure from presentation

• Provides advanced control of presentation

• Easy maintenance of multiple pages

• Faster page loading

• Better accessibility for disabled users

• Easy to learn

7 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Style Sheets Syntax

• Style sheets consist of rules, selectors, declarations, properties and values.

• Selectors are separated by commas.

• Declarations are separated by semicolons.

• Properties and values are separated by colons.

8 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Attaching Style sheet

• HTML (content) and CSS (presentation) can be linked in three ways:

• Inline: the CSS rules in the style attribute

– No selectors are needed

• Embedded/Internal: in the <head> in a <style> tag

• External: CSS rules in separate file (best)

• Usually a file with .css extension

• Linked via <link rel="stylesheet" href=…> tag or @import directive in embedded CSS block

• Example: @import url(sheet2.css);

9 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Attaching Style sheet: Inline

• An inline style may be used to apply a unique style for a single element.

• An inline style loses many of the advantages of a style sheet (by mixing content with
presentation). Use this method sparingly!

• To use inline styles, add the style attribute to the relevant tag.

• The style attribute can contain any CSS property.

<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>

<p>This is a paragraph.</p>

10 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Attaching Style sheet: Internal

• An internal style sheet may be used if one single page has a unique style.

• Internal styles are defined within the <style> element, inside the head section of an HTML
page

• The <style> tag is used to define style information for an HTML document.

• Inside the <style> element you specify how HTML elements should render in a browser.

11 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Attaching Style sheet: Internal

<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

12 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Attaching Style sheet: External

• With an external style sheet, you can change the look of an entire website by changing just
one file.

• Each page must include a reference to the external style sheet file inside the <link> element.
The <link> element goes inside the head section

• An external style sheet can be written in any text editor. The file should not contain any html tags.

• The style sheet file must be saved with a .css extension.

• Using external files is highly recommended.

• Simplifies the HTML document.

• Improves page load speed as the CSS file is cached.

13 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Attaching Style sheet: External

• The <link> tag defines a link between a document and an external resource.

• The <link> tag is used to link to external style sheets.

rel

• Specifies the relationship between the current document and the linked document

type

• Specifies the media type of the linked document

href

• Specifies the location of the linked document

14 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Attaching Style sheet: External

<h1>This is a heading</h1>

mystyle.css
body {
background-color: lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}

15 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Attaching Style sheet: Combined

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>My mother has <span style="color:blue;font-weight:bold">blue</span> eyes and my father has <span
style="color:darkolivegreen;font-weight:bold">dark green</span> eyes.</p>
<p>The style of this document is a combination of an external style sheet, internal style and inline style sheet</p>

16 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Rule Structure

• A CSS RULE is made up of a selector and a declaration.

• A declaration consists of property and value.

selector {property: value;}

declaration

17 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Selectors

• Selectors determine which element the rule applies to

• All elements of specific type (tag)

• Those that mach a specific attribute (id, class)

• Elements may be matched depending on how they are nested in the document tree (HTML).

Examples:

h1 {color: green; }

Selectors

18 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Properties and Values

• Properties and values tell an HTML element how to • CSS code can be written in a linear
display. format or in a block format.

body {background: purple;}

h1 {color: green; } body {

h2 {font-size: large;} background: purple;

p {color: #ff0000;} color: green;

/hexadecimal for red/ }

19 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Grouping Selectors

• Group the same selector with different declarations together on one line.

• Example of grouping selectors (both are correct):

h1 {color: black;} h1 {

h1 {font-weight: bold;} OR color: black;

h1 {background: white;} font-weight: bold;

background: white;

20 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Grouping Selectors

• Group different selectors with the same declaration on one line.

• Example of grouping selectors (both are correct):

h1 {color: yellow;}

h2 {color: yellow;}

h3 {color: yellow;}

h1, h2, h3 {color: yellow;}

21 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Grouping Selectors

Three primary kinds of selectors:

By tag (type selector): h1 { font-family: verdana,sans-serif; }

By element id (#): #element_id { color: #ff0000; }

By element class name (.): .myClass {border: 1px solid red}

Selectors can be combined with commas:

h1, .link, #top-link {font-weight: bold}

This will match <h1> tags, elements with class link, and element with id top-link

22 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

ID’s and Classes

• ID's are unique

– Each element can have only one ID

– Each page can have only one element with that ID

• Classes are NOT unique

– You can use the same class on multiple elements.

– You can use multiple classes on the same element.

– Any styling information that needs to be applied to multiple objects on a page should be done
with a class.

23 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Selectors

Selector Example Example description

.class .intro Selects all elements with class="intro"
.class1.class2 .name1.name2 Selects all elements with both name1 and name2 set
within its class attribute
.class1 .class2 .name1 .name2 Selects all elements with name2 that is a descendant of an
element with name1
#id #firstname Selects the element with id="firstname"
* * Selects all elements
element p Selects all <p> elements
element.class p.intro Selects all <p> elements with class="intro"
element,element div, p Selects all <div> elements and all <p> elements
element element div p Selects all <p> elements inside <div> elements

24 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Selectors

Selector Example Example description

element>element div > p Selects all <p> elements where the parent is a <div> element
element+element div + p Selects the first <p> element that is placed immediately after <div>
elements
element1~element2 p ~ ul Selects every <ul> element that is preceded by a <p> element
[attribute] [target] Selects all elements with a target attribute
:active a:active Selects the active link
::after p::after Insert something after the content of each <p> element
::before p::before Insert something before the content of each <p> element
:checked input:checked Selects every checked <input> element
More Selectors: https://www.w3schools.com/cssref/css_selectors.asp

25 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Selectors: Example #1

<head>
<style>
p{
text-align: center;
color: red;
}
</style>
</head>
<body>

<p>Every paragraph will be affected by the style.</p>

26 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Selectors: Example #2

<head>
<style>
#para1 {
text-align: center;
color: red;
}
</style>
</head>
<body>

<p id="para1">Hello World!</p>

<p>This paragraph is not affected by the style.</p>

27 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Selectors: Example #3

<head>
<style>
.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">Red and center-aligned heading</h1>

<p class="center">Red and center-aligned paragraph.</p>

28 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Selectors: Example #4

<head>
<style>
p.center {
text-align: center;
color: red;
}
</style>
</head>
<body>

<h1 class="center">This heading will not be affected</h1>

<p class="center">This paragraph will be red and center-aligned.</p>

29 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Selectors: Example #5

<head>
<style>
[title~=flower]
{
border:5px solid yellow;
}
</style>
</head>
<body>

<p>The image with the title attribute containing the word "flower" gets a yellow border.</p>

<img src="klematis.jpg" title="klematis flower" width="150" height="113" />

<p><b>Note:</b> For [<i>attribute</i>~=<i>value</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p>

30 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Selectors: Example #6

<head>
<style>
input[type=text]:enabled {
background: #ffff00;
}

input[type=text]:disabled {
background: #dddddd;
}
</style>
</head>
<body>

<form action="">
First name: <input type="text" value="Mickey"><br>
Last name: <input type="text" value="Mouse"><br>
Country: <input type="text" disabled="disabled" value="Disneyland">
</form>

31 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Selectors: Example #7

<head>
<style>
a:hover
{
background-color:yellow;
}
</style>
</head>

<body>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>

<p><b>Note:</b> The :hover selector style links on mouse-over.</p></form>

32 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Selectors: Example #8

<head>
<style>
input:focus
{
background-color:yellow;
}
</style>
</head>
<body>

<p>Click inside the text fields to see a yellow background:</p>

<form>
First name: <input type="text" name="firstname" /><br>
Last name: <input type="text" name="lastname" />
</form>

33 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Comments in CSS

• Explain the purpose of the coding

• Help others read and understand the code

• Serve as a reminder to you for what it all means

• Starts with /and ends with/

Example:

p {color: #ff0000;} /Company Branding/

/* This is a single-line comment */

/* This is

a multi-line

comment */
34 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets

Values in CSS Rules

• Colors are set in RGB format (decimal or hex):

– Example: #a0a6aa = rgb(160, 166, 170)

– Predefined color aliases exist: black, blue, etc.

• Numeric values are specified in:

– Pixels, ems, e.g. 12px , 1.4em

– Points, inches, centimeters, millimeters

– E.g. 10pt , 1in, 1cm, 1mm

– Percentages, E.g. 50%

– Zero can be used with no unit: border: 0;

35 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

Default Browser Styles

• Browsers have default CSS styles

– Used when there is no CSS information or any other style information in the document

• Caution: default styles differ in browsers

• E.g. margins, paddings and font sizes differ most often and usually developers reset them

* { margin: 0; padding: 0; }

body, h1, p, ul, li { margin: 0; padding: 0; }

36 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Background

• CSS background properties are used to define the background effects of an element.

• CSS properties used for background effects:

• background-color

• background-image

– background-repeat

• background-attachment

• background-position

37 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Background : Color

• The background-color property specifies the background color of an element.

<head>
<style>
body {
background-color: #b0c4de;
}
</style>
</head>

38 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Background : Color

• The background-color property specifies the background color of an element.

<head>
<style>
h1 { background-color: #6495ed; }

p { background-color: #e0ffff; }

div { background-color: #b0c4de; }

</style>
</head>
<body>
<h1>CSS background-color Example!</h1>
<div>
This is a text inside a div element.
<p>This paragraph has its own background color.</p>
We are still in the div element.
</div>

39 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Background: Repeat

• The background-image property specifies an image to use as the background of an element.

• By default, a background-image is placed at the top-left corner of an element, and repeated both
vertically and horizontally.

40 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Background : Repeat

background-repeat: no-repeat; background-repeat: repeat-x;

background-repeat: repeat-y; Default both x and y

41 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Background: Repeat

<h1>Hello World!</h1>
<p>Background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>

42 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Background: Repeat

43 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Background: Attachment

• The background-attachment property sets whether a background image is fixed or scrolls

with the rest of the page.
<style>
body {
background-image: url('smiley.png');
background-repeat: no-repeat;
background-attachment: fixed;
//background-attachment: scroll;
}
</style>
</head>

<body>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>
<p>The background-image is fixed. Try to scroll down the page.</p>

44 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Background: Position

• The background-position property sets the starting position of a background image.

• By default, a background-image is placed at the top-left corner of an element, and repeated both
vertically and horizontally.
Value Description
left top, left center, left bottom If you only specify one keyword, the other value will be "center"
right top, right center, right bottom
center top, center center, center bottom
x% y% The first value is the horizontal position and the second value is
the vertical. The top left corner is 0% 0%. The right bottom
corner is 100% 100%. If you only specify one value, the other
value will be 50%. . Default value is: 0% 0%
xpos ypos The first value is the horizontal position and the second value is
the vertical. The top left corner is 0 0.

45 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Background: Position

<head>
<style>
body {
background-image: url('smiley.png');
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center top;
}
</style>

46 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Display Property

• The display property specifies how an element is displayed.

• Every HTML element has a default display value depending on what type of element it is. The default

display value for most elements is block or inline.

• A block-level element always starts on a new line and takes up the full width available

• An inline element does not start on a new line and only takes up as much width as necessary.

• Changing an inline element to a block element, or vice versa, can be useful for making the page look

a specific way.

47 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Display Property

<ul>
<li><a href="/html/default.asp" target="_blank">HTML</a></li>
<li><a href="/css/default.asp" target="_blank">CSS</a></li>
<li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

48 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : float property

• The float property is used for positioning and formatting content.

• The float property can have one of the following values:

• left - The element floats to the left of its container

• right- The element floats to the right of its container

• none - The element does not float (will be displayed just where it occurs in the text). This is default

• inherit - The element inherits the float value of its parent

49 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : float property

50 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : float property

51 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : clear property

• The clear property specifies what elements can float beside the cleared element and on which side.

• The most common way to use the clear property is after you have used a float property on an element.

• When clearing floats, you should match the clear to the float: If an element is floated to the left, then you

should clear to the left.

• Your floated element will continue to float, but the cleared element will appear below it on the web page.

52 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : clear property

<head> .div4 {
<style> border: 1px solid red;
.div1 { clear: left;
float: left; }
width: 100px; </style>
height: 50px; </head>
margin: 10px; <body>
border: 3px solid #73AD21; <h2>Without clear</h2>
} <div class="div1">div1</div>
.div2 { <div class="div2">div2 - Notice that div2 is after div1 in the HTML code.
border: 1px solid red; However, since div1 floats to the left, the text in div2 flows around
} div1.</div>
.div3 { <br><br><br>
float: left; <h2>With clear</h2>
width: 100px; <div class="div3">div3</div>
height: 50px; <div class="div4">div4 - Here, clear: left; moves div4 down below the
margin: 10px; floating div3. The value "left" clears elements floated to the left. You can also
border: 3px solid #73AD21; clear "right" and "both".</div>
}

53 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : clear property

54 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : overflow property

• The overflow property specifies whether to clip the content or to add scrollbars when the content of an

element is too big to fit in the specified area.

• The overflow property has the following values:

• visible - Default. The overflow is not clipped. The content renders outside the element's box

• hidden - The overflow is clipped, and the rest of the content will be invisible

• scroll - The overflow is clipped, and a scrollbar is added to see the rest of the content

• auto - Similar to scroll, but it adds scrollbars only when necessary

55 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : overflow property

<head> <body>
<style> <p>In this example, the image is taller than the element containing it, and it is floated,
div { so it overflows outside of its container:</p>
border: 3px solid #8AC007;
} <div><img class="img1" src="rose-flower.jpg" alt="Rose" width="100" height="140">
The rose is a type of flowering shrub. Its name comes from the Latin word Rosa. The
.img1 { flowers of the rose grow in many different colors, from the well-known red rose or
float: right; yellow rose and sometimes white or purple rose. Roses belong to the family of plants
} called Rosaceae.</div>
<p style="clear:right">Add a clearfix class with overflow: auto; to the containing
.clearfix { element, to fix this problem:</p>
overflow: auto;
} <div class="clearfix"><img class="img2" src="rose-flower.jpg" alt=“Rose" width="100"
height="140">
.img2 { The rose is a type of flowering shrub. Its name comes from the Latin word Rosa. The
float: right; flowers of the rose grow in many different colors, from the well-known red rose or
} yellow rose and sometimes white or purple rose. Roses belong to the family of plants
</style> called Rosaceae.</div>
</head>
</body>

56 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : overflow property

57 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : overflow property

<head> <body>
<style>
div.scroll { <p>The overflow property specifies what to do if the content of an element exceeds
background-color: #00FFFF; the size of the element's box.</p>
width: 100px;
height: 100px; <p>Result with overflow:scroll</p>
overflow: scroll; <div class="scroll">You can use the overflow property when you want to have better
} control of the layout. The default value is visible.</div>

div.hidden { <p>Result with overflow:hidden</p>

background-color: #00FF00; <div class="hidden">You can use the overflow property when you want to have
width: 100px; better control of the layout. The default value is visible.</div>
height: 100px;
overflow: hidden; </body>
}
</style>
</head>

58 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : overflow property

59 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : overflow property

<head> <body>
<style>
div { <p>The overflow property decides what to do if the content inside an element
background-color: #00FFFF; exceeds the given width and height properties.</p>
width: 150px; <div>You can use the overflow property when you want to have better control of the
height: 350px; layout. Try to change the overflow property to: visible, hidden, scroll, or inherit and
overflow: auto; see what happens. The default value is visible.</div>
}
</style> </body>
</head>

60 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Position

• The position property specifies the type of positioning method used for an element (static, relative, fixed
or absolute).

• HTML elements are positioned static by default.

– Static positioned elements are not affected by the top, bottom, left, and right properties.

61 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Position

• An element with position: relative; is positioned relative to its normal position.

– Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be
adjusted away from its normal position.

62 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Position

• An element with position: fixed; is positioned relative to the viewport, which means it always stays in the

same place even if the page is scrolled.

• An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of

positioned relative to the viewport, like fixed).

– However; if an absolute positioned element has no positioned ancestors, it uses the document body,

and moves along with page scrolling.

63 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Position

• When elements are positioned, they can overlap other elements.

• The z-index property specifies the stack order of an element (which element should be placed in front

of, or behind, the others).

• An element can have a positive or negative stack order.

• An element with greater stack order is always in front of an element with a lower stack order.

64 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Position property

<head> Without z-index property

</body>

65 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : 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 every HTML element. It consists of: margins,
borders, padding, and the actual content.

66 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Box Model

• The CSS box-sizing property allows us to include the padding and border in an element's total width and
height.

• By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element

height + padding + border = actual height of an element

• content-box: The width and height properties (and min/max properties) includes only the content. Border
and padding are not included

• border-box: The width and height properties (and min/max properties) includes content, padding and
border

67 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox

• Flexbox makes it easier to design flexible and responsive layout structures without using float or

positioning.

• It helps to align items, distribute space dynamically, and order elements as needed.

Basic Terminology:

• Flex Container: The parent element where the display: flex; property is applied.

• Flex Items: The direct children of the flex container.

68 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Setting Up Flexbox

<head>
<style>
.flex-container {
display: flex;
}
.flex-item {
padding: 10px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item">Item 1</div>
<div class="flex-item">Item 2</div>
<div class="flex-item">Item 3</div>
</div>
</body>

69 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox - Container Properties

• flex-direction: Defines the direction of the main axis.

• flex-wrap: Controls whether the flex container is single-line or multi-line.

• flex-flow: A shorthand for flex-direction and flex-wrap.

• justify-content: Aligns flex items along the main axis.

• align-items: Aligns flex items along the cross axis.

• align-content: Aligns flex lines when there is extra space in the cross axis.

70 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox - Direction

• row: Default value, places items in a horizontal line.

• row-reverse: Places items in a horizontal line in reverse order.

• column: Places items in a vertical line.

• column-reverse: Places items in a vertical line in reverse order.

71 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox - Flex Wrap

It controls whether the flex container is single-line or multi-line, and the direction of the cross-axis.

• nowrap: Default value, all flex items will be on one line.

• wrap: Flex items will wrap onto multiple lines, from top to bottom.

• wrap-reverse: Flex items will wrap onto multiple lines, from bottom to top.

72 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox - Justify Content

It aligns flex items along the main axis.

• flex-start: Items are packed toward the start line.

• flex-end: Items are packed toward the end line.

• center: Items are centered along the line.

• space-between: Items are evenly distributed; the first item on the start line, last item on the end line.

• space-around: Items are evenly distributed with equal space around them.

• space-evenly: Items are distributed so that the space between any two items (and the space to the

edges) is equal.

73 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox - Justify Content

74 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox - Align Items

It aligns flex items along the cross axis.

• stretch: Default value, items stretch to fill the container.

• flex-start: Items are aligned at the start of the cross axis.

• flex-end: Items are aligned at the end of the cross axis.

• center: Items are centered along the cross axis.

• baseline: Items are aligned such that their baselines align.

75 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox - Align Content

It aligns flex lines when there is extra space in the cross-axis. It applies only when there are multiple flex

items with the flex-wrap property set to either wrap or wrap-reverse.

• stretch: Default value, lines stretch to fill the container.

• flex-start: Lines are packed toward the start of the cross-axis.

• flex-end: Lines are packed toward the end of the cross-axis.

• center: Lines are centered in the container.

• space-between: Lines are evenly distributed; the first line is at the start, the last line at the end.

• space-around: Lines are evenly distributed with equal space around them.

76 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox - Flex Item Properties

• order: Controls the order of the flex items.

• flex-grow: Defines the ability for a flex item to grow if necessary.

• flex-shrink: Defines the ability for a flex item to shrink if necessary.

• flex-basis: Defines the default size of an element before the remaining space is distributed.

• flex: A shorthand for flex-grow, flex-shrink, and flex-basis.

• align-self: Allows the default alignment (or the one specified by align-items) to be overridden for

individual flex items.

77 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox - Flex Item Properties - Order

<style> line-height: 80px;

.flex-grow { text-align: center;
background-color: #776fac; font-size: 18px;
padding: 5px; }
display: flex; </style>
} <div class="flex-order">
.flex-order > div { <div style="order: 3">1</div>
background-color: aliceblue; <div style="order: 2">2</div>
margin: 5px; <div style="order: 4">3</div>
height: 80px; <div style="order: 1">4</div>
width: 100px; </div>

78 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox - Flex Item Properties - Flex Grow

<style> line-height: 80px;

.flex-grow { text-align: center;
background-color: #776fac; font-size: 18px;
padding: 5px; }
display: flex; </style>
} <div class="flex-grow">
.flex-grow > div { <div style="flex-grow: 1">1</div>
background-color: aliceblue; <div style="flex-grow: 1">2</div>
margin: 5px; <div style="flex-grow: 8">3</div>
height: 80px; </div>
width: 80px;

79 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox - Flex Item Properties – Flex Shrink

<style> <div class="flex-shrink">

.flex-shrink { <div>1</div>
background-color: #776fac; <div style="flex-shrink: 2">2</div>
padding: 5px; <div>3</div>
display: flex; <div>4</div>
} <div>5</div>
<div>6</div>
.flex-shrink>div { <div>7</div>
background-color: aliceblue; </div>
margin: 5px; After resizing the browser window
height: 80px;
width: 100px;
line-height: 80px;
text-align: center;
font-size: 18px;
}
</style>

80 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox - Flex Item Properties - Flex Basis

<style> line-height: 80px;

.flex-grow { text-align: center;
background-color: #776fac; font-size: 18px;
padding: 5px; }
display: flex; </style>
} <div class="flex-basis">
.flex-basis > div { <div>1</div>
background-color: aliceblue; <div style="flex-basis: 40%;">2</div>
margin: 5px; <div>3</div>
height: 80px; <div>4</div>
width: 1000px; <div>5</div>
</div>

81 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox - Flex Item Properties – Flex

• The flex property is a shorthand for flex-grow, flex-shrink, and flex-basis.

Benefits of Using flex

• Conciseness: It simplifies your code by combining three properties into one, making your stylesheets

82 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox - Flex Item Properties – Flex

• Syntax: flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis’> ]

• The default value is: flex: 0 1 auto

• If we set only the flex-grow and flex-shrink values, flex basis would default to zero. This is called

an absolute flex, when we set only the flex-basis, you get a relative flex .
• Absolute flex: flex: 1 1; //flex-basis defaults to 0;
• Relative flex: flex-basis: 200px; //only flex-basis is set

• Flex items will never shrink below their minimum content size, which is determined by the length of the

longest word or fixed-size elements within them. If you need to force shrinking beyond this point, you

can set min-width or min-height to a lower value.

83 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets

CSS Layout : Flexbox - Flex Item Properties – Flex

• flex: auto (equivalent to flex: 1 1 auto): This is the most common case. Items become fully flexible,
having a default width based on their content. They will grow proportionally to fill the available space
and shrink if necessary to fit the container.
• flex: none (equivalent to flex: 0 0 auto): This cancels the flexibility of the item. It neither grows nor
shrinks to fill the space in the container, maintaining its original size (based on content or defined
width/height). This is often used for elements with fixed dimensions.
• flex: initial (equivalent to flex: 0 1 auto): Resets values to the default, where items will shrink if
there's not enough space but won't expand beyond their content size.
• flex: <positive-number> (Caution!): Using a single positive number can be misleading. For example,
flex: 1 actually translates to flex: 1 1 0. This sets flex-grow to 1 (grow proportionally), but also sets flex-
basis to 0, essentially overriding the item's default size and potentially causing unexpected layout
behavior.
84 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets

CSS Layout : Flexbox - Flex Item Properties - Flex

<style> padding: 10px;

.container { width: 200px; /* Fixed width for item2 */
display: flex; }
} .item3 {
.item1 { flex: 1;/* Item 3 grows to fill remaining space */
flex: 2 1 auto; /* Item 1 grows twice as much, shrinks relatively less, background-color: lightcoral;
and has an initial size of 'auto' */ padding: 10px;
background-color: lightblue; }
padding: 10px; </style>
} <div class="container">
.item2 { <div class="item1">Item 1 (Flexible)</div>
flex: none; /* Item 2 maintains its original size */ <div class="item2">Item 2 (Fixed Width)</div>
background-color: lightgreen; <div class="item3">Item 3 (Flexible)</div>
</div>

85 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox - Flex Item Properties – Align Self

It allows the default alignment (or the one specified by align-items) to be overridden for individual flex

items.

• auto: Default. The element inherits its parent's align-items property, or stretch if not set.

• flex-start: Aligns the item at the start of the cross axis.

• flex-end: Aligns the item at the end of the cross axis.

• center: Centers the item along the cross axis.

• baseline: Aligns the item such that its baseline aligns with the baseline of the parent.

• stretch: Stretches the item to fill the container.

86 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Layout : Flexbox - Flex Item Properties – Align Self

87 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Grid

• Grid is a layout system that uses a grid with rows and columns.

• A grid container defines the rows and columns.

• Grid items are then added to fill the grid container. Grid items are the immediate child elements of the

container.

• Grid lines are the horizontal and vertical dividing lines between the rows and columns.

88 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Grid

• A grid gap is the spacing between the rows and columns.

• Grid cells are the individual units of a grid, much like table cells.

• Grid tracks are the zones between two adjacent grid lines.

• Grid areas are rectangular areas covering two or more cells.

• It offers page layouts that are supported by all modern browsers.

89 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Grid - Properties

PROPERTY DESCRIPTION
grid A shorthand property for a grid container. Sets all grid properties in a single
declaration.
grid-area A shorthand property for a grid item. Sets the item's size and location in a grid.
grid-auto-columns A grid container property that sets the size of a grid column.
grid-auto-flow A grid container property that sets how auto-placed items flow in the grid.
grid-auto-rows A grid container property that sets the size of a grid row.
grid-column A shorthand property for a grid item that sets the element's size and location within
a column.
grid-column-end An item property that sets the element's end position within the grid column.
grid-column-gap A grid container property that sets the gap (gutter) between the columns.
grid-column-start An item property that sets the element's start position within the grid column.

90 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Grid - Properties

PROPERTY DESCRIPTION
grid-gap A grid container property that sets the gap (gutter) between the rows and columns.
grid-row An item property that sets the size and location within the row.
grid-row-end An item property that sets the element's end position within the grid row.
grid-row-gap A grid container property that sets the gap (gutter) between the rows.
grid-row-start An item property that sets the element's start position within the grid row.
grid-template A grid container property that is a shorthand for defining rows, columns, and areas.
grid-template- Defines the container line names and track sizing functions of the columns.
columns
grid-template-rows Defines the container line names and track sizing functions of the rows.

91 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Grid

<style> padding: 20px;

.grid-layout { text-align: center;
background-color: steelblue; font-size: 18px;
padding: 10px; }
display: grid; </style>
grid-gap: 10px; <div class="grid-layout">
grid-template-areas: <div style="grid-area: header">Header</div>
'header header header header header header' <div style="grid-area: menu">Menu</div>
'menu main main main right right' <div style="grid-area: main; height: 100px;">Main</div>
'menu footer footer footer footer footer'; <div style="grid-area: right">Right</div>
} <div style="grid-area: footer">Footer</div>
.grid-layout > div { </div>
background-color: aliceblue;

92 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Icons

• Lightweight and scalable

• Consistent appearance across browsers

• Easily customizable with CSS

• Extensive variety of icons available

• Improves user experience with clear visuals

Techniques for Using CSS Icons

• Inline elements with font icons

• Using pseudo-elements like :before and :after

• Background images with CSS

94 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
Cascading Style Sheets

CSS Icons - Popular Icon Libraries

• Font Awesome: Extensive collection, free and paid plans [Font Awesome fontawesome.com]

• Material Design Icons: Google's design language, clean and consistent [Material Design Icons

material.io]

• Ionicons: Open-source, wide range of customizable icons [Ionicons ionicons.com]

• Bootstrap Icons: Integrates seamlessly with Bootstrap framework [Bootstrap Icons getbootstrap.com]

95 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

Cascading Style Sheets

CSS Grid

<head> <i class="material-icons">attachment</i>

96 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

97 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3 Evolution

• Cascading Style Sheets, level 1 (CSS1) was came out of W3C as a recommendation in December

1996.

• This version describes the CSS language as well as a simple visual formatting model for all the HTML

tags.

• CSS2 became a W3C recommendation in May 1998 and builds on CSS1.

• This version adds support for media-specific style sheets.

e.g. printers and aural devices, downloadable fonts, element positioning, and tables.

98 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3 Evolution

• CSS3 became a W3C recommendation in June 1999 and builds on older versions CSS.

• It has divided into documentation is called as Modules and here each module having new extension
features defined in CSS2.

• CSS3 is the latest standard of CSS earlier versions (CSS2).

• The main difference between CSS2 and CSS3 is as follows:

– Media Queries

– Namespaces

– Selectors Level 3

– Color

99 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

What’s new with CSS3?

• There’s a huge amount of improvements over the last version, like the ability to easily add video and

3D objects to your webpage.

• In fact there’s much more that can be done on this platform.

Backwards compatible

• CSS3 is completely backwards compatible with earlier CSS versions.

• That old site running on a previous CSS version can be reworked with CSS3.

100 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

What’s new with CSS3?

Independent modules

• CSS3 is broken up into many individual modules, improving both functionality and ease of working that
it makes CSS3 a lot easier to handle.

• The most important modules include Selectors, Color, Box Model, Backgrounds and Borders, Text
Effects, 2D/3D Transformations and user interface.

• Though many of these are in old CSS specifications, they have been split into small functional pieces
called modules in CSS3.

Easy to change. Easy to view

• With the modular structure and new functionalities, CSS3 makes it much easier to make changes.

• This allows individual module testing!

101 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

What’s new with CSS3?

Faster development speed

• CSS3 has also managed to set new benchmarks in development speed.

• The speed of website built with CSS to the same one with CSS3 was compared by ‘The Smashing
Magazine’.

• According to the results, CSS3 really pays off for production time and size.

102 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

What’s new with CSS3?

• Multiple background: Multiple background images can be included on a page and layered.

• CSS3 background size: The CSS3 background-size property allows to specify the size of these
background images

• Borders and text effects: CSS3 has also managed to set new benchmarks in development speed

103 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3

• CSS3 is still under development

• Modules: A new approach to standardization

• Each browser still implementing slightly different syntax for certain properties:

moz – <property> ; //Firefox

webkit – <property>; //Chrome, Safari (webkit)

Opera (in most cases) uses the default with no prefix but in some cases you will see

– o – <property>;

104 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3
.div2
{
• CSS3 Rounded corners are used to add special width:300px;
height:300px;
colored corner to body or text by using the border-
border: 3px solid #000;

radius property. background:#cc0000;

border-radius:30px;

• Makes creating rounded divs a breeze //Prefix to make this work in Firefox
-moz-border-radius:30px;
//Prefix to make this work in webkit
-webkit-border-radius:30px;
browsers
}

105 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3 Rounded Corners

• border-radius: Use this element for setting four boarder radius property

• border-top-left-radius: Use this element for setting the boarder of top left corner

• border-top-right-radius: Use this element for setting the boarder of top right corner

• border-bottom-right-radius: Use this element for setting the boarder of bottom right corner

• border-bottom-left-radius: Use this element for setting the boarder of bottom left corner

106 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3 Rounded Corners

<html>

<head>

<style>

#rcorners1 { Rounded Corners!

border-radius: 25px;

background: #8AC007;

padding: 20px;

width: 200px;

height: 150px;

107 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3 Rounded Corners

</style>

</head>

<body>

<p id = "rcorners1">Rounded corners!</p> Rounded Corners!

</body>

</html>

108 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3 Rounded Corners

<html>

<head>

<style>

#rcorners2 { Rounded Corners!

border-radius: 25px;

border: 2px solid #8AC007;

padding: 20px;

width: 200px;

height: 150px;

109 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3 Rounded Corners

</style>

</head>
Rounded Corners!
<body>

<p id = "rcorners2">Rounded corners!</p>

</body>

</html>

110 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

<html>
CSS3 Features
<head>
CSS3 Rounded Corners <style>
#rcorners1 {
border-radius: 15px 50px 30px 5px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
#rcorners3 {
border-radius: 15px 50px;
background: #a44170;
padding: 20px;
width: 100px;
height: 100px;
}
</style>
</head>
<body>
<p id = "rcorners1">Rounded corners!</p>
<p id = "rcorners3">Rounded corners!</p>
</body>
111 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
</html>
CSS3 Features

CSS3 Border Images

• CSS Border image property is used to add image boarder to some elements.

• you don't need to use any HTML code to call boarder image.

– border-image-source: Used to set the image path

– border-image-slice: Used to slice the boarder image

– border-image-width: Used to set the boarder image width

– border-image-repeat: Used to set the boarder image as rounded, repeated and stretched

112 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3 Border Images

• Format: border-image: source slice width outset repeat;

• Markup:

border-image: url(borderbg.jpg) 30 30 repeat;

-webkit-border-image: url(borderbg.jpg) 30 30 repeat;

-moz-border-image: url(borderbg.jpg) 30 30 repeat;

113 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features
<html> <head> <style>
CSS3 Border Images #borderimg1 {
border: 10px solid transparent; padding: 15px;
border-image-source: url(/https/www.scribd.com/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 10px;
}
#borderimg3 {
border: 10px solid transparent; padding: 15px;
border-image-source:url(/https/www.scribd.com/css/images/border.png);
border-image-repeat: round;
border-image-slice: 30;
border-image-width: 30px;
}
</style> </head>
<body>
<p id = "borderimg1">This is image boarder example.</p>
<p id = "borderimg3">This is image boarder example.</p>
</body> </html>

114 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3 Shadows

• CSS3 supported to add shadow to text or elements.

• Shadow property has divided as follows:

– Text shadow

– Box Shadow

115 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3 Shadows

• Once again no IE support

• Format: box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow == Position of horizontal shadow

v-shadow == Position of vertical shadow

• Blur == Blur distance

• Spread == Size of shadow

• Color == Shadow Color

• Inset == Make the shadow an inner (shadow)

116 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
CSS3 Features
<html> <head> <style>
CSS3 Shadows h1 {text-shadow: 2px 2px; }
h2 {text-shadow: 2px 2px red; }
h3 {text-shadow: 2px 2px 5px red; }
h4 {color: white; text-shadow: 2px 2px 4px #000000; }
h5 {text-shadow: 0 0 3px #FF0000; }
h6 {text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF; }
p{
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px
darkblue;
}
</style> </head>
<body>
<h1>Sample1</h1>
<h2>Sample2</h2>
<h3>Sample3</h3>
<h4>Sample4</h4>
<h5>Sample5</h5>
<h6>Sample6</h6>
<p>Sample7</p>
117 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
</body> </html>
CSS3 Features
<html>
CSS3 Box shadow
<head>
<style>
div {
• Used to add shadow effects to elements, Following is width: 300px;
height: 100px;
the example to add shadow effects to element. padding: 15px;
background-color: red;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>
This is a div element with a box-shadow
</div>
</body>
</html>

118 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3 Backgrounds

• CSS Multi background property is used to add one or more images at a time without HTML code, We can
add images as per our requirement.

• Format: background-size: length | percentage | cover | contain;

• Sample Markup:

background-size: 400px 500px; //width, height

background-size:30% 40%; //width, height

background-size:100%; //Omitting first value sets

//the second to auto

background-size:cover;

background-size:contain;

119 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3 Multi Background

• CSS Multi background property is used to add one or more images at a time without HTML code, We can

add images as per our requirement.

– Background: Used to setting all the background image properties in one section

– background-clip: Used to declare the painting area of the background

– background-image: Used to specify the background image

– background-origin: Used to specify position of the background images

– background-size: Used to specify size of the background images

120 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features
<html>
CSS3 Multi Background <head>
<style>
#multibackground
{
background-image: url(/https/www.scribd.com/css/images/logo.png),
url(/https/www.scribd.com/css/images/border.png);
background-position: left top, left top;
background-repeat: no-repeat, repeat; padding:
Tutorial
75px;
}
Sample Tutorial
</style>
</head>
<body>
<div id = "multibackground">
<h1>Tutorial</h1>
<p> Sample Tutorial </p>
</div>
</body>
</html>

121 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3 Multi Background

• Size of Multi background

• Multi background property is accepted to add different sizes for different images.

#multibackground {

background: url(/https/www.scribd.com/css/imalges/logo.png) left top no-repeat,

url(/https/www.scribd.com/css/images/boarder.png) right bottom no-repeat,

url(/https/www.scribd.com/css/images/css.gif) left top repeat;

background-size: 50px, 130px, auto;

• Each image is having specific sizes as 50px, 130px and auto size.

122 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3-Colors

• CSS3 has Supported additional color properties as follows −

– RGBA colors

– HSL colors

– HSLA colors

– Opacity

123 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3-Colors

• RGBA stands for Red Green Blue Alpha.

• It is an extension of CSS2,Alpha specifies the opacity of a color and parameter number is a numerical

between 0.0 to 1.0.

#d1 {background-color: rgba(255, 0, 0, 0.5);}

#d2 {background-color: rgba(0, 255, 0, 0.5);}

#d3 {background-color: rgba(0, 0, 255, 0.5);}

124 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3-Colors

• HSL stands for hue, saturation, lightness.

• Here Hue is a degree on the color wheel, saturation and lightness are percentage values between 0 to

100%.

#g1 {background-color: hsl(120, 100%, 50%);}

#g2 {background-color: hsl(120, 100%, 75%);}

#g3 {background-color: hsl(120, 100%, 25%);}

125 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3-Colors

• HSLA stands for hue, saturation, lightness and alpha.

• Alpha value specifies the opacity of the color as a number between 0.0 to 1.0.

#g1 {background-color: hsla(120, 100%, 50%, 0.3);}

#g2 {background-color: hsla(120, 100%, 75%, 0.3);}

#g3 {background-color: hsla(120, 100%, 25%, 0.3);}

126 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1

CSS3 Features

CSS3-Colors

• Opacity adds transparency to the background of an element.

#g1 {background-color:rgb(255,0,0);opacity:0.6;}

#g2 {background-color:rgb(0,255,0);opacity:0.6;}

#g3 {background-color:rgb(0,0,255);opacity:0.6;}

CSS3 Features

CSS3-Colors
<html>
<head>
<style>
#p1 {background-color:rgba(255,0,0,0.3);}
#g2 {background-color:hsl(120,100%,75%);}
#d3 {background-color:hsla(120,100%,25%,0.3);}
#m1 {background-color:rgb(255,0,0);opacity:0.6;}
</style>
</head>
<body>
<p>RGBA colors:</p>
<p id = "p1">Red</p>
<p id = "g2">Normal Green</p>
<p id = "d3">Green</p>
<p id = "m1">Red</p>
</body></html>

CSS3 Features

CSS3 - Gradients

• Gradients displays the combination of two or more colors

• Types of gradients

– Linear Gradients(down/up/left/right/diagonally)

– Radial Gradients

CSS3 Features

CSS3 – Linear Gradients

<html>
<head>
• Linear gradients are used to arrange two or more <style>
colors in linear formats like top to bottom. #grad1 {
height: 100px;
background: -webkit-linear-gradient(pink,green);
background: -o-linear-gradient(pink,green);
background: -moz-linear-gradient(pink,green);
background: linear-gradient(pink,green);
}
</style>
</head>
<body>
<div id = "grad1">
</div>
</body>
</html>

CSS3 Features

CSS3 – Linear Gradients

<html>
<head>
• Linear gradients are used to arrange two or more <style>
colors in linear formats like left to right. #grad1 {
height: 100px;
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
background: -moz-linear-gradient(right, red, blue);
background: linear-gradient(to right, red , blue);}
</style>
</head>
<body>
<div id = "grad1">
</div>
</body>
</html>

CSS3 Features <html>

CSS3 – Linear Gradients <head>

CSS3 Features
<html>
CSS3 – Linear Gradients <head>
<style>
#grad2 {
• Linear gradients are used to arrange two or more height: 100px;
background: -webkit-linear-gradient(red, orange, yellow, red,
colors in linear formats like Multi color. blue, green,pink);
background: -o-linear-gradient(red, orange, yellow, red, blue,
green,pink);
background: -moz-linear-gradient(red, orange, yellow, red,
blue, green,pink);
background: linear-gradient(red, orange, yellow, red, blue,
green,pink);
}
</style>
</head>
<body>
<div id = "grad2">
</div>
</body>
</html>

CSS3 Features <html>
<head>
CSS3 - Radial Gradients <style>
#grad2 {
height: 100px; width: 550px;
• Radial gradients appears at center. background: -webkit-radial-gradient(red 5%, green 15%, pink
60%);
background: -o-radial-gradient(red 5%, green 15%, pink
60%);
background: -moz-radial-gradient(red 5%, green 15%, pink
60%);
background: radial-gradient(red 5%, green 15%, pink 60%);
}
</style>
</head>
<body>
<div id = "grad2">
</div>
</body>
</html>

CSS3 Features
<html>
CSS3 – Repeat Radial Gradients <head>
<style>
#grad2 {
height: 100px; width: 550px;
background: -webkit-repeating-radial-gradient(blue, yellow
10%, green 15%);
background: -o-repeating-radial-gradient(blue, yellow 10%,
green 15%);
background: -moz-repeating-radial-gradient(blue, yellow
10%, green 15%);
background: repeating-radial-gradient(blue, yellow 10%,
green 15%);
}
</style>
</head>
<body>
<div id = "grad2">
</div>
</body>
</html>
135 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
CSS3 Features

CSS Text Properties

• Text Overflow

• Word Break

• Text Shadow

• Various values

– text-align-last: Used to align the last line of the text

– text-emphasis: Used to emphasis text and color

– text-overflow: used to determines how overflowed content that is not displayed is signaled to users

– word-break: Used to break the line based on word

– word-wrap: Used to break the line and wrap onto next line

CSS3 Features

CSS Text Properties – Text Overflow

• Supported in Internet Explorer (+ other browsers)

• The text-overflow property determines how overflowed content that is not displayed is signalled to users.

• Format: text-overflow: clip | ellipsis | string;

• Also requires the whitespace:nowrap; & overflow:hidden properties to be set.

#div1
{
width:200px;
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}

<html> <head> <style>
CSS3 Features
p.text1 {
CSS Text Properties – Text Overflow white-space: nowrap; width: 500px;
border: 1px solid #000000;
overflow: hidden; text-overflow: clip; }
p.text2 {
white-space: nowrap; width: 500px;
border: 1px solid #000000;
overflow: hidden; text-overflow: ellipsis; }
</style> </head> <body>

<b>Original Text:</b>
<p> The text-overflow property determines how overflowed
content that is not displayed is signaled to users. </p>
<b>Text overflow:clip:</b>
<p class = "text1"> The text-overflow property determines
how overflowed content that is not displayed is signaled to
users. </p>
<b>Text overflow:ellipsis</b>
<p class = "text2"> The text-overflow property determines
how overflowed content that is not displayed is signaled to
users. </p>
138 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1 </body> </html>
<html>
CSS3 Features
<head>
CSS Text Properties – Word Breaking <style>
p.text1 {
width: 140px; border: 1px solid #000000;
word-break: keep-all; }
p.text2 {
width: 140px; border: 1px solid #000000;
word-break: break-all; }
</style>
</head>
<body>
<b>line break at hyphens:</b>
<p class = "text1">
The text-overflow property determines how overflowed
content that is not displayed is signaled to users. </p>
<b>line break at any character</b>
<p class = "text2">
The text-overflow property determines how overflowed
content that is not displayed is signaled to users. </p>
</body>
</html>
139 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
CSS3 Features

CSS3 Text Properties – Word Wrap

• Word wrapping is used to break the line and wrap onto next line

• Force a line break even with a long word

• Format: word-wrap:break-word|normal;

word-wrap: break-word;

CSS3 Features

CSS3 Text Properties – Text Shadow

• Can be added outside the graphic

• No IE support

• Format: text-shadow: h-shadow v-shadow blur color;

CSS3 Features

CSS3 Transformations

• CSS3 supports 2D & 3D transformations

• 2D transforms are used to re-change the element structure as translate, rotate, scale, and skew.

• 2D transforms:

– Translate

– Rotate

– Scale

– Skew

CSS3 Features
<html>
CSS3 Transformations - 2D Rotate <head>
(20 Degrees) <style>
div {
width: 300px;
height: 100px;
background-color:
pink; border: 1px solid black;
}
div#myDiv {
/* IE 9 */
-ms-transform: rotate(20deg);
/* Standard syntax */
transform: rotate(20deg);
}
</style>
</head>
<body>
<div> Sample Rotate </div>
<div id = "myDiv"> Sample Rotate </div>
</body>
</html>
143 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
CSS3 Features

CSS3 Transformations - 2D Skew(X axis) <html>

<head>
<style>
div {
width: 300px;
height: 100px;
background-color:
pink; border: 1px solid black;
}
div#skewDiv {
/* IE 9 */
-ms-transform: skewX(20deg);
/* Standard syntax */
transform: skewX(20deg);
}
</style>
</head>
<body>
<div> Sample Skew </div>
<div id = “skewDiv"> Sample Skew </div>
</body>
144 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
</html>
CSS3 Features

CSS3 3D Transformations

• Using with 3D transforms, we can move element to x-axis, y-axis and z-axis, Below example clearly

specifies how the element will rotate.

• 3D transforms:

– Translate

– Rotate

– Scale

– Skew

CSS3 Features <html>
<head>
CSS3 Transformation- Rotate (X Axis)
<style>
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black; }
div#myDiv {
/* IE */
-ms-transform: rotateX(150deg);
/* Standard Syntax */
transform: rotateX(150deg);
}
</style>
</head>
<body>
<div> 3D Rotate </div>
<p>Rotate X-axis</p>
<div id = "myDiv"> 3D Rotate </div>
</body>
</html>
146 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
CSS3 Features
<html>
CSS3 Transformation- Rotate <head>
<style>
(Z Axis)
div {
width: 200px;
height: 100px;
background-color: pink;
border: 1px solid black; }
div#myDiv {
/* IE */
-ms-transform: rotateZ(90deg);
/* Standard Syntax */
transform: rotateZ(90deg);
}
</style>
</head>
<body>
<div> 3D Rotate </div>
<p>Rotate Z-axis</p>
<div id = "myDiv"> 3D Rotate </div>
</body>
147 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1 </html>
CSS3 Features

CSS3 Transitions
• Effects that let an element change from one style to another.

• Limited Support – Currently only supported by Webkit based browsers (Chrome, Safari)

• Cautions:

– Must specify the property needed to add an effect.

– Must specify a duration for the effect

– Effect is typically applied on property change.

Format:

transition: <property> <duration>

-webkit-transition: <property> <duration>

*You can specify multiple properties separated by commas

CSS3 Features

CSS3 Animations

• Animation is process of making shape changes and creating motions with elements.

• Effects that let an element change from one style to another.

• Limited Support – Currently only supported by Webkit based browsers (Chrome, Safari)

CSS3 Features

CSS3 Animations - @keyframes

• Keyframes will control the intermediate animation steps in CSS3.

@keyframes animation {

from {background-color: pink;}

to {background-color: green;}

div { width: 100px; height: 100px;

background-color: red; animation-name: animation;

animation-duration: 5s;

CSS3 Features

CSS3 Nicely Formatted Columns

• CSS3 supported multi columns to arrange the text as news paper structure.

• Putting content into columns is super easy

• Again, No IE support

CSS3 Features

CSS3 Nicely Formatted Columns

• Values

– column-count: Used to count the number of columns that element should be divided.

– column-fill: Used to decide, how to fill the columns.

– column-gap: Used to decide the gap between the columns.

– column-rule: Used to specifies the number of rules.

– rule-color: Used to specifies the column rule color.

– rule-style: Used to specifies the style rule for column.

– rule-width: Used to specifies the width.

– column-span: Used to specifies the span between columns.

CSS3 Features <html> <head> <style>
.multi {
CSS3 Multi Columns
/* Column count property */
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
/* Column gap property */
-webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px;
/* Column style property */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid; }
</style> </head>
<body> <div class = "multi">
Animation is process of making shape changes and creating
motions with elements.Effects that let an element change
from one style to another.Limited Support – Currently only
supported by Webkit based browsers (Chrome, Safari)
]</div> </body> </html>

CSS3 Features

CSS3 Font Faces

• Allows you to use non-standard fonts • Format:

• Mixed support for otf, ttf, svg and eot @font-face

• Things to remember: {

– Internet Explorer only supports EOT font-family:<makeupaname>;

– Mozilla browsers support OTF and TTF src:url(‘localfontname.ttf’) ||

url(‘http://fontlocation’);
– Safari and Opera support OTF, TTF and SVG
}
– Chrome supports TTF and SVG.

CSS3 Features

CSS3 Different web fonts formats

• TrueType Fonts (TTF): TrueType is an outline font standard developed by Apple and Microsoft in the late
1980s, It became most common fonts for both windows and MAC operating systems.

• OpenType Fonts (OTF): OpenType is a format for scalable computer fonts and developed by Microsoft

• The Web Open Font Format (WOFF): WOFF is used for develop web page and developed in the year of
2009. Now it is using by W3C recommendation.

• SVG Fonts/Shapes: SVG allow SVG fonts within SVG documentation. We can also apply CSS to SVG
with font face property.

• Embedded OpenType Fonts (EOT): EOT is used to develop the web pages and it has embedded in
webpages so no need to allow 3rd party fonts

CSS3 Features <html>
<head>
CSS3 Different web fonts formats
<style>
@font-face {
font-family: myFirstFont;
src: url(/https/www.scribd.com/css/font/SansationLight.woff);
}
div {
font-family: myFirstFont;
}
</Style>
</head>
<body>
<div>
This is the example of font face with CSS3.
</div>
<p>
<b>Original Text : </b>
This is the example of font face with
CSS3.
</p>
</body>
156 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
</html>
CSS3 Features

CSS3 Fonts Descriptions

• font-family: Used to defines the name of font

• Src: Used to defines the URL

• font-stretch: Used to find, how font should be stretched

• font-style: Used to defines the fonts style

• font-weight: Used to defines the font weight(boldness)

CSS3 Features

Responsive Web Design

• Responsive web design makes the web page look good on all

devices.

• The term Responsive Web Design was given by Ethan Marcotte.

• Web pages can be viewed using many different devices: desktops,

tablets, and phones.

• It is called responsive web design when we use CSS and HTML to

resize, hide, shrink, enlarge, or move the content to make it look

good on any screen.

CSS3 Features

Screen resolutions

There’s no common or standard resolution its based on the websites requirements:

• Smartphone: 480px and below

• Phones to tablets: 767px and below

• Portrait Tablet: 768px and above

• Netbook: 990px to 1024px

• Desktop: 10240px and above

CSS3 Features

The Viewport

• The viewport is the user's visible area of a web page.

• The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

• Before tablets and mobile phones, web pages were designed only for computer screens, and it was

common for web pages to have a static design and a fixed size.

• Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages

were too large to fit the viewport.

• Users are used to scroll websites vertically on both desktop and mobile devices - but not horizontally!

• So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a

poor user experience.

The Viewport - Setting The Viewport

• HTML5 introduced a method to let web designers take control over the viewport, through

the <meta> tag.

• The <meta> tag does not display on the webpage, but it is used by browsers which scan the site or

webpage to know about the webpage.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• This gives the browser instructions on how to control the page's dimensions and scaling.

• The width=device-width part sets the width of the page to follow the screen-width of the device

(which will vary depending on the device).

• The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
161 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
CSS3 Features

The Viewport

CSS3 Features

CSS3 Media Queries

• CSS media queries is used to assign different stylesheets depending on browser window size.

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

– width and height of the viewport

– width and height of the device

– orientation (is the tablet/phone in landscape or portrait mode)

– resolution

• Using media queries are a popular technique for delivering a tailored style sheet to desktops, laptops,

tablets, and mobile phones.

CSS3 Media Queries

Media Query Syntax

• A media query consists of a media type and can contain one or more expressions, which resolve to either true

or false.
@media not|only mediatype and (expressions) {
CSS-Code;
}

• A media type, which tells the browser what kind of media this code is for (e.g. print, or screen).

• A media expression, which is a rule, or test that must be passed for the contained CSS to be applied.

• A set of CSS rules that will be applied if the test passes and the media type is correct.

• Unless we use the not or only operators, the media type is optional and the all type will be implied.
164 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
CSS3 Features

CSS3 Media Queries

Media Query Syntax

The CSS media query syntax for calling an external stylesheet is like this:

<link rel="stylesheet" media="mediatype and|not|only (expressions)" href="print.css“>

CSS3 Features

CSS3 Media Queries

Media Query Types

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

CSS3 Features

CSS3 Media Queries

Media Query Expressions

Value Description
width The viewport width
height The viewport height
max-width The maximum width of the display area, such as a browser window

min-width The minimum width of the display area, such as a browser window

max-height The maximum height of the display area, such as a browser window

min-height The minimum height of the display area, such as a browser window

orientation The orientation of the viewport (landscape or portrait mode)

CSS3 Features

CSS3 Media Queries Expressions -Width

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<style>
body {
background-color: pink;
}
@media screen and (width: 480px) {
body { When browser is minimized to width
background-color: lightgreen; 480px the background color changes to
}
} lightgreen
</style>
</head>
<body>
<p>Responsive web design makes the web page look good on all
devices.</p>
</body>
</html>
168 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
CSS3 Features

CSS3 Media Queries Expressions - Height

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<style>
body {
background-color: pink;
}
@media screen and (height: 480px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<p>Responsive web design makes the web page look good on all
devices.</p>
</body>
169
</html>
Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
CSS3 Features

CSS3 Media Queries Expressions – Min-width

To changes the background-color to lightgreen if the viewport is 480 pixels wide or wider

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<style>
body {
background-color: pink;
} If the viewport is less than 480 pixels, the
@media screen and (min-width: 480px) {
body { background-color will be pink
background-color: lightgreen;
}
}
</style>
</head>
<body>
<p>Resize the browser window to see the effect!</p>
</body>
</html>
170 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
CSS3 Features

CSS3 Media Queries Expressions – Max-width

To changes the background-color to lightblue if the viewport is 600 pixels or less

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<style>
body {
background-color: lightgreen;
} If the viewport is more than 600 pixels, the
@media only screen and (max-width: 600px) {
background-color will be lightgreen
body {
background-color: lightblue;
}}
</style>
</head>
<body>
<p>Resize the browser window. </p>
</body>
</html>
171 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
CSS3 Features

CSS3 Media Queries Expressions – Min Width to Max Width

(max-width: ..) and (min-width: ..) values are used to set a minimum width and a maximum width. For
example, when the browser's width is between 600 and 900px, change the appearance of a <div> element:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 900px) and (min-width: 600px) {
div.example {
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}}
</style></head>
<body>
<h2>Change the appearance of DIV on different screen sizes</h2>
<div class="example"> DIV</div>
</body></html>
172 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
CSS3 Features

CSS3 Media Queries Expressions – Min Width to Max Width

Using an additional value: In the example below, we add an additional media query to our already
existing one using a comma (this will behave like an OR operator):

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
@media screen and (max-width: 600px) and (min-width: 400px), (min-
width: 650px) {
div.example{
font-size: 50px;
padding: 50px;
border: 8px solid black;
background: yellow;
}}
</style></head>
<body>
<h2>Change the appearance of DIV on different screen sizes</h2>
<div class="example">DIV.</div>
</body></html>
173 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
CSS3 Features

CSS3 Media Queries Orientation: Portrait / Landscape

• Media queries can also be used to change layout of a page depending on the orientation of the browser.
• We can have a set of CSS properties that will only apply when the browser window is wider than its height, a so
called "Landscape" orientation:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body { Landscape
background-color: lightgreen;
}
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}
</style></head> Portrait
<body>
<p>Resize the browser window. </p>
</body></html>
174 Cascading Style Sheets | © SmartCliff | Internal | Version 1.1
CSS3 Features

CSS3 Media Queries Orientation: Portrait / Landscape

<!DOCTYPE html>
<html>
<head>
<style>
body {
Landscape
background-color: pink;
}
@media not screen and (orientation: landscape) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
<h3>Responsive web design makes the web page look good on all
devices.</h3>
Portrait
</body>
</html>

CSS3 Features

CSS3 Media Queries for Menu navbar

We use media queries to create a responsive navigation menu, that varies in design on different screen
sizes.

CSS3 Features

CSS3 Media Queries for Menu navbar

<!DOCTYPE html> text-decoration: none;
<html lang="en"> }
<head> /* On screens that are 600px wide or less, make the
<meta charset="utf-8"> menu links stack on top of each other instead of next to
<meta name="viewport" content="width=device-width, each other */
initial-scale=1"> @media screen and (max-width: 600px) {
<style> .topnav a {
*{ float: none;
box-sizing: border-box; width: 100%;
} }
/* Style the top navigation bar */ }
.topnav { </style>
overflow: hidden; </head>
background-color: #333; <body>
} <h2>Responsive navigation menu</h2>
/* Style the topnav links */ <div class="topnav">
.topnav a { <a href="#">Link</a>
float: left; <a href="#">Link</a>
display: block; <a href="#">Link</a>
color: #f2f2f2; </div>
text-align: center; </body>
177padding: 14px
Cascading Style 16px;
Sheets | © SmartCliff | Internal | Version 1.1 </html>
CSS3 Features

CSS3 Media Queries for Menu navbar

CSS3 Features

CSS3 Media Queries – Responsive Image Gallery

CSS media queries is used to create a responsive image gallery that will look good on desktops, tablets
and smart phones.

CSS3 Features

CSS3 Media Queries - Responsive Image Gallery

CSS3 Features

CSS3 Media Queries - Responsive Image Gallery

<div class="responsive"> <div class="responsive">
<div class="gallery"> <div class="gallery">
<a target="_blank" href="nature2.jpg"> <a target="_blank" href="nature4.jpg">
<img src="nature2.jpg" alt="Nature 2" width="600" <img src="nature4.jpg" alt="Nature 4" width="600"
height="400"> height="400">
</a> </a>
<div class="desc">Add a description of the image here</div> <div class="desc">Add a description of the image here</div>
</div> </div>
</div> </div>
<div class="responsive"> <div class="responsive">
<div class="gallery"> <div class="gallery">
<a target="_blank" href="nature3.jpg"> <a target="_blank" href="nature5.jpg">
<img src="nature3.jpg" alt="Nature 3" width="600" <img src="nature5.jpg" alt="Nature 5" width="600"
height="400"> height="400">
</a> </a>
<div class="desc">Add a description of the image here</div> <div class="desc">Add a description of the image here</div>
</div> </div>
</div> </div>
</body>
</html>

CSS3 Features

CSS3 Media Queries - Responsive Image Gallery

CSS3 Features

CSS3 Media Queries - Responsive Image Gallery

@media only screen and (max-width: 700px)

CSS3 Features

CSS3 Media Queries - Responsive Image Gallery

@media only screen and (max-width: 500px)

Cascading Style Sheets

Quiz

1. What does ‘a’ stand for in RGBA?

a) alpha b) aqua

c) Apple d) about

Ans: a) alpha

Cascading Style Sheets

Quiz

2. What are the first three values of text-shadow in order?

a) vertical, blur, b) blur, vertical,

horizontal horizontal

c) vertical, horizontal, d) horizontal, vertical,

blur blur

Ans: d) horizontal, vertical,

blur

Cascading Style Sheets

Quiz

3. How do four values work on border-radius?

a) top, bottom, left, b) up, down, front,

right behind

c) top-left, top-right, d) bottom-left, bottom-

bottom-right, bottom-left right, top-right, top-left

Ans: c) top-left, top-right,

bottom-right, bottom-left

Cascading Style Sheets

Quiz

4. How do you add shadow to elements in CSS3?

b) shadow-right:10px
a) box-shadow: 10px 10px
shadow-bottom:10px;
5px grey;
shadow-color: grey;

d) alpha-effect[shadow]:
c) shadow-color: grey;
10px 10px 5px grey

Ans: a) box-shadow: 10px

10px 5px grey;

Cascading Style Sheets

Quiz

5. How to force a word wrap using CSS3?

a) word-wrap: break- b) text-wrap: break-

word; word

c) text-wrap: force; d) text-width: set;

Ans: a) word-wrap: break-

word

Cascading Style Sheets

Quiz

6. How to rotate objects using CSS3?

a) object-rotation: b)transform:rotate(30d
30deg; eg);

c) rotate-object: 30deg; d) transform: rotate-

30deg-clockwise;

Ans: b) transform:
rotate(30deg);

Cascading Style Sheets

Quiz

7. If you put a value of 0 for a Border-Radius what will happen?

a) The Corner will curve b) The Corner will be

horizontal. square

c) The Corner will curve

vertical d) The world will end

Ans: b) The Corner will be

square

Cascading Style Sheets

Quiz

8. The _____________ selector is used to specify a style for a

single, unique element.

a) id b) class

c) text d) bit

Ans: a) id

Cascading Style Sheets

Quiz

9. The CSS property used to specify the transparency of an

element is

a) opacity b) filter

c) visibility d) overlay

Ans: c) opacity

Cascading Style Sheets

Quiz

10. The CSS property used to make the rounded borders, or

rounded corners around an element is

a) border-collapse b) border-radius

c) border-spacing d) None of the above

Ans: b) border-radius

THANK YOU

Lightning Protection Report
100% (2)
Lightning Protection Report
7 pages
Operation Manual-3a - Gie-1109-Om3a
100% (1)
Operation Manual-3a - Gie-1109-Om3a
74 pages
Trophy Irix 70
100% (1)
Trophy Irix 70
127 pages
Chapter II - Cascading Style Sheet
No ratings yet
Chapter II - Cascading Style Sheet
13 pages
CH-3[Web Design & Dev't I]
No ratings yet
CH-3[Web Design & Dev't I]
22 pages
Css Introduction
No ratings yet
Css Introduction
11 pages
Developing Cascading Style
No ratings yet
Developing Cascading Style
19 pages
Introduction To CSS: What You Should Already Know
No ratings yet
Introduction To CSS: What You Should Already Know
85 pages
Chapter 3 - Creating Advanced Web Pages With Dynamic HTML
No ratings yet
Chapter 3 - Creating Advanced Web Pages With Dynamic HTML
128 pages
Cascading Style Sheets: October 3, Unit 4
No ratings yet
Cascading Style Sheets: October 3, Unit 4
24 pages
CSS-notes of class 11
No ratings yet
CSS-notes of class 11
3 pages
Using Cascading Style Sheets: Stanford University - Information Technology Services
No ratings yet
Using Cascading Style Sheets: Stanford University - Information Technology Services
25 pages
5.1 Intro To CSS
No ratings yet
5.1 Intro To CSS
13 pages
CH-3 CSS
No ratings yet
CH-3 CSS
11 pages
Cascading Style Sheets (CSS) : An Introduction and Overview
No ratings yet
Cascading Style Sheets (CSS) : An Introduction and Overview
37 pages
Css Presentation
No ratings yet
Css Presentation
42 pages
WP - Chapter Three
No ratings yet
WP - Chapter Three
57 pages
CSS Basics
No ratings yet
CSS Basics
30 pages
WT U-2 One Shot Revision Notes - 46015027 - 2024 - 11 - 07 - 17 - 38
No ratings yet
WT U-2 One Shot Revision Notes - 46015027 - 2024 - 11 - 07 - 17 - 38
141 pages
CSS Lab Material
No ratings yet
CSS Lab Material
49 pages
Computer Science8-Module 12
No ratings yet
Computer Science8-Module 12
5 pages
Chapter 2 - Part 3 (1)
No ratings yet
Chapter 2 - Part 3 (1)
39 pages
WT U-2 Combined Notes_47316420
No ratings yet
WT U-2 Combined Notes_47316420
155 pages
Web Develpment - Chapter Three - CSS
No ratings yet
Web Develpment - Chapter Three - CSS
48 pages
Unit-4 Unit-4: Cascading Style Sheet
No ratings yet
Unit-4 Unit-4: Cascading Style Sheet
15 pages
CSS-I
No ratings yet
CSS-I
42 pages
Cascading Style Sheet
No ratings yet
Cascading Style Sheet
20 pages
Creating Stylesheets
No ratings yet
Creating Stylesheets
7 pages
Cascading Style Sheets: Sergio Luján Mora
No ratings yet
Cascading Style Sheets: Sergio Luján Mora
43 pages
Chapt 3 PDF
No ratings yet
Chapt 3 PDF
93 pages
Unit 2 Notes
No ratings yet
Unit 2 Notes
27 pages
Css
No ratings yet
Css
113 pages
Web-Engineering: CSS - Cascading Style Sheet
No ratings yet
Web-Engineering: CSS - Cascading Style Sheet
15 pages
CSS - Introduction
No ratings yet
CSS - Introduction
23 pages
Css Part1 CHP 4 Hamid
No ratings yet
Css Part1 CHP 4 Hamid
56 pages
Unit-2 BSG
No ratings yet
Unit-2 BSG
80 pages
WT Chap 2 CSS
No ratings yet
WT Chap 2 CSS
37 pages
BSc VC (Web Designing) 1st Year 2nd Unit (CSS)
No ratings yet
BSc VC (Web Designing) 1st Year 2nd Unit (CSS)
20 pages
Web Tech 2
No ratings yet
Web Tech 2
132 pages
Introduction to CSS notes
No ratings yet
Introduction to CSS notes
22 pages
Cascading Style Sheets: Alexander Zangerl Az@bond - Edu.au
No ratings yet
Cascading Style Sheets: Alexander Zangerl Az@bond - Edu.au
21 pages
GR9 2ND QTR Module 2
No ratings yet
GR9 2ND QTR Module 2
17 pages
CSS (Cascading Style Sheet)
No ratings yet
CSS (Cascading Style Sheet)
23 pages
Cascading Style Sheets
No ratings yet
Cascading Style Sheets
25 pages
CSS Anshul
No ratings yet
CSS Anshul
14 pages
9 Cascading Style Sheets, Imported Style Sheet, C_241025_141458
No ratings yet
9 Cascading Style Sheets, Imported Style Sheet, C_241025_141458
17 pages
Cascading Style Sheets: An Introduction
No ratings yet
Cascading Style Sheets: An Introduction
0 pages
HTML Styles CSS
No ratings yet
HTML Styles CSS
13 pages
Topics: Cascading Style Sheet 22 February 2021
No ratings yet
Topics: Cascading Style Sheet 22 February 2021
19 pages
CSS For Styling
No ratings yet
CSS For Styling
37 pages
HTML Styles - CSS: Ms. Kristeen P. Ong
No ratings yet
HTML Styles - CSS: Ms. Kristeen P. Ong
21 pages
CSS Presentation
No ratings yet
CSS Presentation
17 pages
Cascading Style Sheets (CSS) : Web Based System Development
No ratings yet
Cascading Style Sheets (CSS) : Web Based System Development
48 pages
Lab 4 Intro To CSS
100% (1)
Lab 4 Intro To CSS
7 pages
Cascading Style Sheets
No ratings yet
Cascading Style Sheets
123 pages
CSS How To
No ratings yet
CSS How To
8 pages
Introduction, Using Styles, Simple Examples, Your Own Styles, Properties and Values in Styles, Style Sheet, Formatting Blocks of Information, Layers
No ratings yet
Introduction, Using Styles, Simple Examples, Your Own Styles, Properties and Values in Styles, Style Sheet, Formatting Blocks of Information, Layers
10 pages
Developing Cascading Style Sheets
100% (1)
Developing Cascading Style Sheets
55 pages
L3 Cascading Style Sheets
No ratings yet
L3 Cascading Style Sheets
59 pages
WS101 Mod 5
No ratings yet
WS101 Mod 5
5 pages
Master Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample Codes
From Everand
Master Cascading Style Sheets (CSS) Quickly: CSS Properties, CSS Property Definitions, Inline CSS, Internal CSS, External CSS and Sample Codes
Steven Bright
No ratings yet
CSS Selectors and Specificity
From Everand
CSS Selectors and Specificity
Abdelfattah Ragab
No ratings yet
The Basics of CSS (Cascading Style Sheets) Coding For Beginners: Learn Basic CSS Programming Concepts
From Everand
The Basics of CSS (Cascading Style Sheets) Coding For Beginners: Learn Basic CSS Programming Concepts
Roggie Clark
No ratings yet
Cse 423: Virtualization & Cloud Computing: by Mr. Ajay Kumar Badhan Assistant Professor M.Tech (CST), B.Tech (Cse)
No ratings yet
Cse 423: Virtualization & Cloud Computing: by Mr. Ajay Kumar Badhan Assistant Professor M.Tech (CST), B.Tech (Cse)
25 pages
Mechanical and Materials Engineering
No ratings yet
Mechanical and Materials Engineering
15 pages
Evaluation of Electronic Detonators - Requirements For Shunting & Circuit Testing
100% (1)
Evaluation of Electronic Detonators - Requirements For Shunting & Circuit Testing
27 pages
Visual Verbal
No ratings yet
Visual Verbal
23 pages
ABB Safety SIL Methodology
No ratings yet
ABB Safety SIL Methodology
24 pages
Fevicol Catalogue
No ratings yet
Fevicol Catalogue
11 pages
TDA4864J TDA4864AJ: 1. General Description
No ratings yet
TDA4864J TDA4864AJ: 1. General Description
18 pages
Cambio Automatico E39 BMW
No ratings yet
Cambio Automatico E39 BMW
14 pages
Cool Stuff
No ratings yet
Cool Stuff
1 page
Power Systems Big Data Analytics An Assessment of Paradigm Shift Barriers and Prospects
No ratings yet
Power Systems Big Data Analytics An Assessment of Paradigm Shift Barriers and Prospects
10 pages
Two-Way Valve: Operating Manual
No ratings yet
Two-Way Valve: Operating Manual
36 pages
Wepik Beyond The Wall Unleashing The Power of Stateful and Stateless Firewalls 202308241632259TJg
No ratings yet
Wepik Beyond The Wall Unleashing The Power of Stateful and Stateless Firewalls 202308241632259TJg
23 pages
Teaching Plan: B U 13 N S R, K W: WWW - Bahria.edu - PK
No ratings yet
Teaching Plan: B U 13 N S R, K W: WWW - Bahria.edu - PK
6 pages
Cambridge IGCSE: Computer Science 0478/11
No ratings yet
Cambridge IGCSE: Computer Science 0478/11
16 pages
Reliability 2022 Final
No ratings yet
Reliability 2022 Final
30 pages
WCF Interview Questions and Answers For Freshers and Experienced PDF
No ratings yet
WCF Interview Questions and Answers For Freshers and Experienced PDF
1 page
Acorn ARM SDTS Reference Manual
No ratings yet
Acorn ARM SDTS Reference Manual
582 pages
Nanotechnology An Overview: The Next Really Big Small Thing!!
No ratings yet
Nanotechnology An Overview: The Next Really Big Small Thing!!
49 pages
Dynamic Memory Allocation
100% (3)
Dynamic Memory Allocation
17 pages
Adelaide Doctype
No ratings yet
Adelaide Doctype
219 pages
V20 Protective Devices Prod Info 0621
No ratings yet
V20 Protective Devices Prod Info 0621
30 pages
Improvement The Performance of Mobility Pattern in Mobile Ad-Hoc Sensor Network Using Qualnet 5.0
No ratings yet
Improvement The Performance of Mobility Pattern in Mobile Ad-Hoc Sensor Network Using Qualnet 5.0
7 pages
REF615R - PG - 703789 - ENa ABB
No ratings yet
REF615R - PG - 703789 - ENa ABB
56 pages
DC/DC LVDT Sensors-Ø 20Mm Sx20Mexr: Sensorex
No ratings yet
DC/DC LVDT Sensors-Ø 20Mm Sx20Mexr: Sensorex
4 pages
Technical Data Sheet (TDS) Electric Top Guard Latest
No ratings yet
Technical Data Sheet (TDS) Electric Top Guard Latest
4 pages
Globetrotter Connect User Guide
No ratings yet
Globetrotter Connect User Guide
16 pages
V2-2024-Bar-Examplify-Manual
No ratings yet
V2-2024-Bar-Examplify-Manual
32 pages