Responsive web design with html5 and css3

RESPONSIVE WEB DESIGN
WITH
HTML5 & CSS3
ADVANCED WEB TECHNOLOGY
MODULE 2
DIVYA TIWARI
MEIT
TERNA ENGINEERING COLLEGE

INDEX
• Introduction to CSS
1. Evolution of CSS
2. Syntax of CSS
3. Exploring CSS Selectors
4. Inserting CSS in an HTML Documents
5. Defining Inheritance in CSS
• CSS3 and Responsive Web Design
1. CSS3: Selectors, Typography and Color
Modes
2. Stunning Aesthetics with CSS3
3. CSS3 Transitions, Transformations and
Animations

Evolution of CSS
• CSS was introduced in late 1996 on the recommendation of World Wide Web
Consortium (W3C).
• The CSS level 1 (CSS 1) Recommendation was published in December, 1996.
• The W3C group worked on the issues that were not addressed in CSS 1. It gave
rise to the creation of higher version of CSS 1 namely CSS level 2 (CSS 2) on
November 4, 1997.
• CSS 2 was published as a W3C Recommendation on May 12, 1998. Some CSS 2
properties that could not be successfully implemented by the Web browsers were
discarded from CSS 2.
• Later, CSS 2.1 became a Candidate Recommendation on February 25, 2004, but
was pulled back to Working Draft status on June 13, 2005, and again returned to
Candidate Recommendation status on July 19, 2007.

Syntax of CSS
• Syntax can be defined as a rule that defines the structure or the order of the
statements used in a programming language.
• It also specifies how words and symbols are put together to form statements and
expressions.
• CSS also uses syntax to apply CSS rules in an HTML document. The CSS syntax
is divided into two different parts—selector and declaration.
• Selector defines an HTML element to which the CSS style is applied and the
declaration contains the CSS properties as well as the value of these properties.

Exploring CSS Selectors
• A selector is a pattern that is used to select an element to apply the CSS style rules.
• Selectors can be used as a condition or a CSS rule to determine the elements that
match with the selector.
• The CSS rule is divided into two parts: selectors and declaration.
• The different types of selectors are as follows:
a) The universal selector
b) The type selector
c) The class selector
d) The id selector
e) The child selector
f) The descendant selector
g) The adjacent sibling selector
h) The attribute selector
i) The query selector

Inserting CSS in an HTML Documents
• A CSS style sheet can be linked to an HTML document in a variety of ways,
where each way has its own advantages and disadvantages.
• The following are three ways to apply CSS style to your HTML document:
• The internal style sheet
• The external style sheet
• The in-line style
• The Internal Style Sheet
The internal style sheet is written within the HEAD element of the HTML
document. This style is applied only to the documents in which it is defined
and not referenced by any other Web document.
<STYLE type="text/css">
selector {property: value;}
</STYLE>

• The External Style Sheet
• The syntax to create an external style sheet is same as that of creating an internal
style sheet.
• In case of internal style sheet, the CSS file is placed inside the HTML document;
whereas, in case of external style sheet, the CSS file is written outside the HTML
document and the reference of the CSS file is placed in the HTML document.
• Linking—Refers to the HTML LINK element, which is used to link a style sheet. This
element has three attributes— rel, type, and href. The rel attribute specifies what you are
linking (style sheet in this case). The type specifies the MIME type for the browser, and
the href attribute specifies the path of the .css file.
<LINK rel=”style sheet” type=”text/css” href=”test.css”/>
• Importing—Helps you in accessing the style rules from other CSS style sheets. The
@import keyword is used, followed by the Uniform Resource Identifier (URI) of the
style sheet to which you want to import the style rules.
<STYLE TYPE="text/css">
@media screen
{ body {font-size: 13px} }
</STYLE>

• The Inline style
• The inline style properties are written in a single line separated by semicolons. These
properties are placed inside the style attribute of the HTML element, on which you want
to apply the style:
<P style="background:#ccc; color:#fff; border: solid black 1px;">

Defining Inheritance in CSS
• In CSS, a property that is applied to an element is also inherited by the child
elements of that element.
• For example, if the font-family property is declared for the BODY element, it is
automatically applied to all the elements present inside the BODY element.
• This inheritance saves your time in writing the repeated code for every single
element that constitutes the Web page.
• The following code snippet shows inheritance in CSS:
<DIV style="font-family:serif; border:1px solid red; padding:10px;">
This text will be in a serif font.
<P>
This text is also in a serif font, because font is inherited by default. But the border and
padding properties are not inherited from the parent div.
</P>
</DIV>

CSS3: Selectors, Typography and Color
Modes
• CSS3 has Supported additional color properties as follows −
• RGBA colors (Red Green Blue Alpha)
• HSL colors (hue, saturation, lightness)
• HSLA colors (hue, saturation, lightness and alpha)
• Opacity
RGBA colors (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.
• A Sample syntax of RGBA as shown below −
#d1 {background-color: rgba(255, 0, 0, 0.5);}
Output

HSL colors (hue, saturation, lightness)
• 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%.
• A Sample syntax of HSL as shown below −
#g1 {background-color: hsl(120, 100%, 50%);}
Output
Code –
<!DOCTYPE html>
<html>
<head>
<style>
#g1 {background-color:hsl(120,100%,50%);}
</style>
</head>
<body>
<p>HSL colors:</p>
<p id="g1">Green</p>
<p id="g2">Normal Green</p>
<p id="g3">Dark Green</p>
</body>
</html>

HSLA colors (hue, saturation, lightness and alpha)
• HSLA stands for hue, saturation, lightness and alpha.
• Alpha value specifies the opacity as shown RGBA.
• A Sample syntax of HSLA as shown below −
#g1 {background-color: hsla(120, 100%, 50%, 0.3);}
Output
Code –
<!DOCTYPE html>
<html>
<head>
<style>
#d1 {background-color:hsla(120,100%,50%,0.3);}
</style>
</head>
<body>
<p>HSLA colors:</p>
<p id="d1">Less opacity green</p>
<p id="d2">Green</p>
<p id="d3">Green</p>
</body>
</html>

Stunning Aesthetics with CSS3
• Creating text shadows with CSS3
• Creating box shadows with CSS3
• Gradient backgrounds with CSS3

Creating text shadows with CSS3
• The CSS text-shadow property applies shadow to text.
• In its simplest use, you only specify the horizontal shadow (2px) and the vertical shadow
(3px):
• Adding a blur effect to the shadow
• Adding color to the shadow
Syntax :
.element { text-shadow: 2px 3px 1px #ccc; }
Output
Code –
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px 5px red;
}
</style>
</head>
<body>
<h1>Text-shadow effect!</h1>
</body>
</html>
Text-shadow effect!

Creating box shadows with CSS3
• The CSS box-shadow property applies shadow to elements.
Syntax :
.shadow { box-shadow: 0px 3px 5px #444; }
Output
Code –
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px grey;
}
</style>
</head>
<body>
<div>This is a div element with a box-
shadow</div>
</body>
</html>

Gradient backgrounds with CSS3
• CSS gradients let you display smooth transitions between two or more specified colors.
• CSS defines two types of gradients:
• Linear Gradients (goes down/up/left/right/diagonally)
• Radial Gradients (defined by their center)
Syntax
background: linear-gradient(direction, color-stop1, color-stop2, ...);
background: linear-gradient(angle, color-stop1, color-stop2);
background: radial-gradient(shape size at position, start-color, ..., last-color);
 The angle is specified as an angle between a horizontal line and the gradient line.
 The shape parameter defines the shape. It can take the value circle or ellipse. The
default value is ellipse.

Example :-
Code –
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 100px;
background: red; /* For browsers that do not support gradients */
background: linear-gradient(to right, red , yellow); /* Standard syntax (must be last) */
}
#grad2 {
height: 100px;
background: linear-gradient(-90deg, red, yellow); /* Standard syntax (must be last) */
}
#grad3 {
height: 150px;
width: 200px;
background: radial-gradient(circle, red, yellow, green); /* Standard syntax (must be last) */
}
#grad4 {
height: 200px;
background: repeating-linear-gradient(90deg,red,yellow 7%,green 10%); /* Standard syntax
(must be last) */
}
</style>
</head>
<body>
<h1>Linear Gradient - Left to Right</h1>
<div id="grad1"></div>
<h1>Linear Gradient - Left to Right with angle</h1>
<div id="grad2" style="text-align:center;">-90deg</div><br>
<h1>Radial Gradient - Shapes</h1>
<h1>A repeating gradient on 90deg starting red and finishing green:</h1>
</body>
</html>
Output

CSS3 Transitions, Transformations and
Animations
• CSS3 transitions allows to change property values smoothly, over a given duration.
• Properties of Transitions are:
• Transition
• Transition-delay
• Transition-duration
• Transition-property
• Transition-timing-function
Output

• CSS3 Transformation provides following transformation methods:
• Translate()
• Rotate()
• scaleX()
• scaleY()
• scale()
• skewX()
• skewY()
• skew()
• matrix()
Output

• CSS3 allows animation of HTML elements without using JavaScript or Flash.
• Properties of Animations are:
• @keyframes
• animation-name
• animation-duration
• animation-delay
• animation-iteration-count
• animation-direction
• animation-timing-function
• animation-fill-mode
Output

MU Exam Questions
May 2017
• Explain how to design a responsive web with HTML5 and CSS. 10 marks
Dec 2018
• Explain in detail Responsive web design with an example. 10 marks
• What are major differences between CSS3 and CSS2. 10 marks
May 2019
• Explain in detail Responsive web design using HTML5 and CSS3 with an example.
10 marks
• Create a web page to show how you can apply the transformation effects so that the image
rotates by 150 degree. Assume suitable parameters if required. 10 marks

Responsive web design with html5 and css3

Responsive web design with html5 and css3

More Related Content

What's hot (20)

Similar to Responsive web design with html5 and css3 (20)

More from Divya Tiwari (13)

Recently uploaded (20)

Responsive web design with html5 and css3