Web Development Course - HTML5 & CSS3 by RSOLUTIONS

Your Requirement. Our Commitment.

Index No Index No
HTML5 - Introduction 01 Canvas 16
Why HTML5 ? 02 SVG 17
What is new in HTML5? 03 Drag & Drop 18
HTML5 Doctype 04 Form Elements - email 19
Article 05 Form Elements - number 20
Header 06 Form Elements - url 21
Footer 07 Form Elements - tel 22
Nav 08 Form Elements - search 23
Main 09 Form Elements - color 24
Aside 10 Form Elements - range 25
Details & Summary 11 Form Elements - datetime 26
Figure & Figcaption 12 Form Elements – datetime-local 27
Audio 13 Form Elements - date 28
Video 14 Form Elements - time 29
Embed 15 Form Elements - week 30

Index No Index No
Form Elements - month 31 Application Cache – Manifest File 46
Form Attributes - Pattern 32 Web SQL 47
Form Attributes - Required 33 Web SQL – Open database 48
Form Attributes - min, max, step 34 Web SQL – Transaction 49
Form Attributes - maxlength 35 Web SQL – Queries 50
Form Attributes - Pattern 36 Geolocation 51
Form Attributes - novalidate 37 Web workers 52
Form Attributes - datalist 38 Web Sockets 53
Form Attributes - multiple 39 CSS3 - Introduction 54
Form Attributes - output 40 Vendor Prefixes 55
Form Attributes - autocomplete 41 Color Formats 56
Form Attributes - autofocus 42 Gradient 57
Form Attributes - placeholder 43 Linear Gradient 58
Web storage 44 Radial Gradient 59
Application Cache 45 Web fonts 60

Index No Index No
Text Shadows 61 Align Items 76
Word Wrapping 62 Align Contents 77
Multi Column Text 63 Order 78
Border Radius 64 Flex Grow 79
Border Images 65 Flex Shrink 80
Box Shadows 66 Flex Basis 81
Background size 67 Flex 82
Multiple Background Images 68 Align Self 83
Background Origin 69 Transition 84
Clip Background 70 Transform 85
Flex Container 71 Animation 86
Flex Direction 72 Selectors 87
Flex Wrap 73 Media Queries 88
Flex Flow 74
Justify Content 75

HTML5 - Introduction
 HTML5 is the latest version of HTML
 HTML stands for Hypertext Markup Language
 It is still in development phase
 But has amazingly broad browser support
 First draft was announced in the year 2008
 HTML5 is most widely used currently
 It eases the web development with the inclusion of support for many new features
01

Why HTML5 ?
02
 HTML5 is an evolution of HTML over XHTML
 Previous specifications left error handling up to user agents
 XHTML did not offer backward compatibility
 With the strict error handling XHTML would stop rendering millions of older web pages
 Whereas HTML5 specifies rules for error handling
 Offers backward compatibility thereby provides support for older versions of HTML
 Has support for several new elements
 Reduces the need for third party plugins by supporting those features directly in the browser

What is new in HTML5?
03
 HTML5 has several new elements such as:
 Article, section, header, footer, nav, menu, main, details, summary, command, figure, figcaption…
 Several attributes have been included too
 Web forms 2.0 is now included in HTML5
 Date picker, color picker controls and numeric stepper controls are added
 Input fields such as date, url, email, number, etc are included
 Supports autocomplete and validation
 Supports APIs
 Audio, video, offline apps, drag and drop, geolocation, web storage, web workers, etc

HTML5 Doctype
04
 HTML5 doctype has been simplified
 HTML5 does not need reference to DTD as it is not based on SGML
 <!doctype html>
 SGML (Standard Generalized Markup Language) is a standard for how to specify a document
markup language or tag set. Such a specification is itself a document type definition (DTD). SGML is
not in itself a document language, but a description of how to specify one.

Article
05
Syntax <article></article>
Description Used to define independent content in a page Can have a header tag and
can enclose para, span or other tags
Illustration <article>
<h2>Paragraph Examples</h2>
<p>Web designers who haven't kept up with the development of HTML
standards (tut-tut) will find this to be the biggest difference between
HTML</p>
</article>
Notes Can have multiple article tags in a web page

Header
06
Syntax <header></header>
Description  Used to specify a header for a document or section
 Used as a container for introductory content or set of navigational links
Illustration <header>
<nav>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
Notes  Cannot be placed within a <footer> or another <header> element.
 Can be used more than once in a document

Footer
07
Syntax <footer></footer>
Description  Used to define the FOOTER area of the page
 Used to contain information such as who wrote it, links to related
documents, copyright data, and the like.
Illustration <footer class="footer" >
@Copyright Reserved to RSolutions
<a href="#">Html </a>
<a href="#">CSS </a>
<a href="#">Sql </a>
<a href="#">JavaScript </a>
</footer>

Nav
08
Syntax <nav></nav>
Description  Used to create navigational links such as menu
 Can be included within the header, footer, side menu, etc
Illustration <nav>
<ul id="menu">
<li><a href="#">Home</a></li>
<li><a href="#">Categories</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
Notes  Do not enclose all links within nav tags

Main
09
Syntax <main></main>
Description Indicates where the main content begins
Illustration <main>
<section>
<article >
<h1> Heading h1 Example</h1>
</article>
…………..
…………..
</main>
Notes  Should be used only once in a web page

Aside
10
Syntax <aside></aside>
Description  Used to define independent content in a page
 Can have a header tag and can enclose para, span or other tags
Illustration <aside>
<h3>RSolutions Group Companies</h3>
<a href="http://www.rsolutionsglobal.co.in">Rsolutions Global</a><br/>
<a href="http://www.rsolutionsglobal.com/"> Rsolutions Products</a><br/>
</aside>
Notes  Can have multiple aside tags in a web page

Details & Summary
11
Syntax <details><summary></summary></details>
Description  Used to implement show and hide functionality
 Details is the wrapper for all the content we want to show and hide
 Summary contains the text that is clickable to view the hidden content
Illustration <details>
<summary>Technologies: </summary>
<p> Web: HTML, CSS, JavaScript, jQuery, JSON, AJAX, XML</br>
DOTNET: C#, ASP.NET, ASP.NET MVC</br> Database: SQL.</p>
</details>
Notes  Can have multiple details tag in a web page
 Summary tag is optional

Figure & Figcaption
12
Syntax <figure><figcaption></figcaption></figure>
Description  Used to call an image file inside the fixed container
 It has its fix container properties which is relevant to the remaining
text
 It automatically adjust the paragraph text and figure alignment
Illustration <figure>
<img src="/Rsolutions-Logo.jpg" alt=“Rsolutions Logo">
<figcaption>Tulip Garden</figcaption>
</figure
Notes  Can also contain code blocks, charts, etc

Audio
13
Syntax <audio></audio>
Description Used to play audio file in the browser with full user control support
Illustration <audio controls preload loop autoplay muted>
<source src="04-Death_Becomes_Fur.mp4" type='audio/mp4'>
<p>Your user agent does not support the HTML5 Audio element.</p>
</audio>
Notes  Prior to HTML5 additional plugins were required to play audio files in
browsers

Video
14
Syntax <video></video>
Description Used to play a movie or video clip on the website
Illustration <video id="videotag" preload muted loop controls autoplay
poster="http://dailydropcap.com/images/A-11.jpg" >
Your user agent does not support the HTML5 Video element. <source
src="movie.mp4#t=0,30" type="video/mp4">
</video>
Notes  Earlier to add video to web pages we had to use the object and embed
element and lengthy scripts

Embed
15
Syntax <embed></embed>
Description  Used to call a media file in browser
 A browser plugin may be require to play the media files
 Specially used for calling a flash movie
Illustration <embed src="Car-speakers-590x90.swf" </embed

Canvas
16
Syntax <canvas></canvas>
Description  Represents a rectangular area on an HTML page
 Has been built specially for graphical representation
 It is incomplete without writing the JavaScript along with it.
Illustration <canvas id="Canvas_Gradient"></canvas><br/>
<script> function Canvas_Gradient(){ var canvas =
document.getElementById('Canvas_Gradient'); var ctx =
canvas.getContext('2d'); var lingrad = ctx.createLinearGradient(0,0,0,150);
lingrad.addColorStop(0, '#00ABEB'); lingrad.addColorStop(1, '#fff');
ctx.fillStyle = lingrad; ctx.fillRect(10,10,130,130);}
</script>

SVG
17
Syntax <svg></svg>
Description  Stands for Scalable Vector Graphics (SVG)
 Also used to draw the graphical representation
 It defines the Vector based graphics
 The script of SVG is in XML format
 Quality is maintained even when scaled up
 Every independent element can be animated
Illustration <svg id="svgelem" height="200" >
<circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
</svg>

Drag & Drop
18
Syntax Draggable = “true”
Description We can move an object from one place to another place It involves
JavaScript
Illustration <div id="boxC" draggable="true" ondragstart="return dragStart(event)">
<p>User 3</p>
</div>
<div id="boxB" ondrop="return dragDrop(event)" ondragover="return
dragOver(event)">
List of Absentees
</div>
Notes  ondragover event specifies where the dragged data can be dropped
 To allow a drop, we must prevent the default handling of the element
using event. preventDefault() method

Form Elements - email
19
Syntax <input type = “email”>
Description Used to enter email addresses
Illustration <input type="email" name="user_email" >
Notes  By default it allows only one email id to be entered
 By setting the multiple attribute, a comma separated list of email
addresses can be entered

Form Elements - number
20
Syntax <input type = “number”>
Description Used to enter numerical values
Illustration <input type="number" name="age" >
Notes  Allows only numbers

Form Elements - url
21
Syntax <input type = “url”>
Description  Used to enter URL
Illustration <input type="url" name="website" >

Form Elements - tel
22
Syntax <input type = “tel”>
Description Used to add contact number
Illustration <input type=“tel" name="contact" >
Notes  It does not enforce a particular format

Form Elements - search
23
Syntax <input type = “search”>
Description  Used to implement search field
Illustration <input type="search" name="searchfield" >

Form Elements - color
24
Syntax <input type = “color”>
Description  Used to add color picker
Illustration <input type="color" name="favColor" >

Form Elements - range
25
Syntax <input type = “range”>
Description  Used to enter number input using a range control
Illustration <input type="range" name="maxprice" >

Form Elements - datetime
26
Syntax <input type = “datetime”>
Description Used to enter a date and time value where the time zone is provided as
GMT
Illustration <input type="datetime" name="dob" >
Notes  Not supported in any browsers

Form Elements – datetime-local
27
Syntax <input type = “datetime-local”>
Description  Used to enter a date and time value where the time zone is the local time
zone
Illustration <input type="datetime-local" name="dob" >

Form Elements - date
28
Syntax <input type = “date”>
Description  Used to enter date alone without time
Illustration <input type="date" name="dob" >

Form Elements - time
29
Syntax <input type = “time”>
Description  Used to enter time
Illustration <input type="time" name="batchtime" >

Form Elements - week
30
Syntax <input type = “week”>
Description  Used to enter week
Illustration <input type="week" name="currentweek" >

Form Elements - month
31
Syntax <input type = “month”>
Description  Used to enter month
Illustration <input type="month" name="currentmonth" >

Form Attributes - Pattern
32
Syntax pattern = <Reg_Exp>
Description  Used to specify a regular expression to validate the input
Illustration <input type="text" pattern="[A-Za-z]" >

Form Attributes - Required
33
Syntax required
Description  Used to specify that the input field must contain a value before the form
can be submitted
Illustration <input type="text" required >

Form Attributes - min, max, step
34
Syntax min = val
max = val
step = val
Description  Used to specify range and the increment for number and range input
types
Illustration <input type="number" min="0" max="100" step="1">

Form Attributes - maxlength
35
Syntax maxlength = val
Description  Used to specify the maximum length of an input field
Illustration <input type="text" maxlength="10">

Form Attributes - Pattern
36
Syntax pattern = <Reg_Exp>
Description  Used to specify a regular expression to validate the input
Illustration <input type="text" pattern="[A-Za-z]" >

Form Attributes - novalidate
37
Syntax <form novalidate>
Description  Used to indicate not to validate the form on submission
Illustration <form name=“login” novalidate>

Form Attributes - datalist
38
Syntax <datalist><options/></datalist>
Description  Used to suggest input values to the associated form field
 Suggests autocomplete option as the user types data
Illustration <input type="text" id="location" list="cities">
<datalist id="cities">
<option value="Bangalore" />
<option value="Chennai" />
<option value="Mumbai" />
</datalist>

Form Attributes - multiple
39
Syntax multiple
Description  Used to allow entering multiple values in a single input field Value": on/off
Illustration <input type="email" multiple>

Form Attributes - output
40
Syntax <output></output>
Description  Used to display the result of a calculation
Illustration <form oninput ="x.value = parseInt(a.value) > parseInt(b.value) ? True : false">
<input type="number" id="a" value="100"> >
<input type="number" id="b" value="50">= <output name="x" for="a
b">true</output>
</form>

Form Attributes - autocomplete
41
Syntax autocomplete = val
Description  Used to enable or disable autocomplete for entire form or for individual
input fields Value": on/off
Illustration <input type="text" autocomplete="off">

Form Attributes - autofocus
42
Syntax autofocus
Description  Used to set the focus on an input field
 Can be useful when you want the user to start using the form
Illustration <input type="text" autofocus>

Form Attributes - placeholder
43
Syntax placeholder = “value”
Description  Used to provide a hint to the user to specify what is expected to be
entered
Illustration <input type="text" placeholder="Enter your name">

Web storage
44
Syntax localStorage & sessionStorage
Description  Web storage can be used to store data locally within the user's
browser
 It can replace cookies which was earlier used for similar purpose
 Web Storage is more secure and faster
 Used to store large amounts of data, without affecting the website's
performance
 Data is not included with every server request, but used ONLY when
asked for The data is stored in name/value pairs, and is accessible by
the web page that stored the data
Illustration if (typeof(Storage) != "undefined") {
localStorage.setItem("lastname", "Smith");
document.getElementById("result").innerHTML =
localStorage.getItem("lastname"); }
Notes  sessionStorage is similar to localStorage, but the data is deleted when
the web page is closed

Application Cache
45
Syntax manifest = filename
Description Used to cache web application and makes web pages accessible without
internet connection Advantages:
 Offline browsing - users can use the application when they're offline
 Speed - cached resources load faster
 Reduced server load - browser will only download updated/changed
resources from the server
Illustration <html manifest="demo.appcache">
Notes  Uses a manifest file to specify the files that need to be cached

Application Cache – Manifest File
46
Syntax
Description It is a simple text file which tells the browser what to cache (and what to
never cache).
CACHE MANIFEST - Files under this will be cached after they are
downloaded for the first time
NETWORK - Files under this header will never be cached and require a
connection to the server
FALLBACK - used to specify fall-back page if a page is inaccessible
Illustration CACHE MANIFEST
/logo.gif
NETWORK:
login.asp
FALLBACK:
/html/ /offline.html
Notes  Application cache is available till the time:
 The user clears the browser's cache
 The manifest file is modified
 The application cache is programmatically updated

Web SQL
47
Syntax
Description Introduces a set of APIs to manipulate client-side databases using SQL
openDatabase: creates database object either using existing database or
creating new one
transaction: gives the ability to control a transaction and performing either
commit or rollback based on the situation
executeSql: used to execute actual SQL query
Illustration

Web SQL – Open database
48
Syntax openDatabase
Description Takes care of opening a database if it already exists
This method will create it if it does not exist
Parameters:
Database name
Version number
Text description
Size of database
Creation callback
Illustration openDatabase(‘logsdb', '1.0', 'Test DB', 2 * 1024 * 1024);

Web SQL – Transaction
49
Syntax transaction()
Description This function needs a single argument, which is a function that takes care of
actually executing the query as follows
Illustration db.transaction(function (tx) {
});

Web SQL – Queries
50
Syntax executeSql()
Description This function needs a single argument, which is a function that takes care of
actually executing the query as follows:
Illustration tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, “start")');
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) { var len =
results.rows.length;
});

Geolocation
51
Syntax navigator.geolocation
Description  Used to locate the position of current internet user
 Not only gives the latitude but can also view the digital map
 Can be used on browser, but best suited for smartphones
Illustration function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition,showError);
} }
function showPosition(position) {
var latlon = position.coords.latitude+","+position.coords.longitude;
alert(latlon);

Web workers
52
Syntax worker()
Description  Used to run JavaScripts in the background, independently of other scripts
It runs without affecting the performance of the page
Illustration if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}

Web Sockets
53
Syntax websocket
Description  Web Sockets is a next-generation bidirectional communication
technology
 It operates over a single socket and exposed via JavaScript interface
 You can send data by calling send() method
 Data is received by an onmessageevent handler
Illustration if ("WebSocket" in window) {
var ws = new WebSocket("ws://echo.websocket.org");
ws.onopen = function() {
ws.send("Message to send");
};
ws.onmessage = function (evt) {
var received_msg = evt.data; };
}
Notes  The socket starts out as a HTTP connection and then upgrades to a TCP
socket after a HTTP handshak

Web Sockets
54
Syntax websocket
Description  Web Sockets is a next-generation bidirectional communication
technology
 It operates over a single socket and exposed via JavaScript interface
 You can send data by calling send() method
 Data is received by an onmessageevent handler
Illustration if ("WebSocket" in window) {
var ws = new WebSocket("ws://echo.websocket.org");
ws.onopen = function() {
ws.send("Message to send");
};
ws.onmessage = function (evt) {
var received_msg = evt.data; };
}
Notes  The socket starts out as a HTTP connection and then upgrades to a TCP
socket after a HTTP handshak

CSS3 - Introduction
 CSS3 is the latest version of Cascading Style Sheet language
 Work on CSS3 began in the year 1998 and the working draft was released in 2001
 CSS3 is still under development
 CSS3 is divided into different modules
 CSS3 offers backward compatibility
 Some of the CSS3 modules are:
 Background
 Box
 Font
 Layout
 Color
 Selectors
 Media queries
55

Vendor Prefixes
55
Syntax Ios, chrome, & safari: -webkit-
Firefox: -moz-
Internet explorer: -ms-
Opera: -o-
Description  CSS vendor prefixes or CSS browser prefixes are a way to add support
for new CSS features in a sort of testing and experimentation period
Illustration -moz-border-radius: 10px 5px;
-webkit-border-radius: 10px 5px;
Border-radius: 10px 5px;
Notes  Vendor prefixes are temporary

Color Formats
56
Syntax HSL (Hue, Saturation, Lightness)
HSLA (Hue, Saturation, Lightness, Alpha)
RGBA (Red, Green, Blue, Alpha)
Description  The CSS3 Color module introduces several new, more convenient ways
to specify colors and transparency
Illustration background-color: hsla(190, 30%, 94%, 1);
Notes

Gradient
57
Syntax linear-gradient
radial-gradient
Description  CSS3 gradients let you display smooth transitions between two or
more specified colors 2 types: Linear gradient & Radial gradient
Illustration background: -webkit-linear-gradient(white, blue);
Notes  Earlier images were used for such effects.
 CSS3 gradients reduce download time and bandwidth usage
 Gradients look better when zoomed, because the gradient is generated
by the browser

Linear Gradient
58
Syntax gradient
Description  Defined by the direction – down, up, right, left, diagonal
Illustration background: -webkit-linear-gradient(white, blue);
background: -webkit-linear-gradient(left, white, blue);
background: -webkit-linear-gradient(bottom right, white, blue);
background: -webkit-linear-gradient(45deg, white, blue);
background: -webkit-linear-gradient(blue, white, blue);
background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%);

Radial Gradient
59
Syntax gradient
Description A radial gradient is defined by its center You can specify the gradient's
center, shape (circle or ellipse) as well as its size. By default, center is
center, shape is ellipse, and size is farthest-corner.
Illustration background: -webkit-radial-gradient(red, green, blue);
background: -webkit-radial-gradient(circle, red, yellow, green);
background: -webkit-radial-gradient(60% 55%, closest-side, blue, green,
yellow, black);
background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%);

Web fonts
60
Syntax @font-face
Description Used to add fonts that are not installed on the user’s system Allows you to
use any font which will be downloaded to the user’s system and used
Illustration @font-face {
font-family: newFont;
src: url(sansation_light.woff);
}
p {
font-family: newFont;
}

Text Shadows
61
Syntax text-shadow
Description  Used to apply shadows to text
 You can specify horizontal shadow, vertical shadow, blur distance and the
color of the shadow
Illustration text-shadow:10px 10px 5px #FF0000;

Word Wrapping
62
Syntax word-wrap
Description  Used to break long words and wrap onto the next line
Illustration word-wrap: break-word;

Multi Column Text
63
Syntax column-count, column-gap & column-rule
Description Used to display text in multiple columns, like in newspapers Properties:
 column-count
 column-gap
 column-rule
Illustration -webkit-column-count: 4; /* Chrome, Safari, Opera */
-webkit-column-gap: 10px; /* Chrome, Safari, Opera */
-webkit-column-rule:1px outset #ff00ff; /* Chrome, Safari, Opera */

Border Radius
64
Syntax border-radius
Description Used to specify rounded borders
Illustration border: 2px solid red;
border-radius: 5px;
border-top-left-radius: 10px;
border-right-bottom-radius: 12px;

Border Images
65
Syntax border-image
Description Used to add image as a border
Illustration border-image: url(border.png) 30 30 round;
border-image: url(border.png) 30 30 stretch;

Box Shadows
66
Syntax box-shadow: h-shadow v-shadow blur color
Description Used to add shadows to divs
Illustration box-shadow: 10px 10px 5px #888888;

Background size
67
Syntax background-size
Description Used to specify the size of the background image
Illustration background: url(“pattern.png");
background-size: 100px 50px;
background-repeat: no-repeat;

Multiple Background Images
68
Syntax background
Description Used to add multiple background images
Illustration background: url(pattern.png), url(gradient.png);

Background Origin
69
Syntax Background-origin
Description  Used to specify the position of the background image
 Values: border-box, content-box and padding-box
Illustration background-origin: content-box

Clip Background
70
Syntax background-clip
Description  Used to specify the area to which background has to be applied
 Values: border-box, content-box and padding-box
Illustration background-clip: content-box;

Flex Container
71
Syntax display: flex;
Description  Used to create a flex container, either inline or block
 Applied only to the direct children
Illustration display: flex
Notes  This should be applied to the parent element

Flex Direction
72
Syntax flex-direction: value;
Description  Used to define in direction in which the flex items should be placed in
the flex container
 Values: row, column, row-reverse, column-reverse
Illustration flex-direction: column;

Flex Wrap
73
Syntax flex-wrap: value;
Description  Used to allow the items to wrap within the flex container
 By default items in a flex container will fit onto one line
 Flex-wrap changes this default behavior
 Values: wrap, nowrap, wrap-reverse
Illustration flex-wrap: wrap;
 This property also depends on the direction of the flex items

Flex Flow
74
Syntax flex-flow: value;
Description  This is a shorthand property for flex-direction and flex-wrap
 Values: <flex-direction> <flex-wrap>
Illustration flex-flow: row wrap;

Justify Content
75
Syntax justify-content: value;
Description  Used to distribute the excess space between the flex items
 Excess space could be either due to inflexible items or flexible but have
reached their maximum size.
 Values: flex-start, flex-end, center, space-between, space-around
Illustration justify-content:flex-start;

Align Items
76
Syntax align-items: values;
Description  Used to define how to align the flex items along the cross axis
 Values: flex-start, flex-end, center, stretch and baseline
Illustration align-items: flex-start;

Align Contents
77
Syntax align-content: values;
Description  Used to align extra spaces in the cross-axis
 Similar to justify-content, but in the perpendicular direction
 Values: flex-start, flex-end, center, stretch, space-between, space-
around
Illustration align-content: flex-start;
 This property has no effect when there is only one line of flex items

Order
77
Syntax order: value;
Description  Used to control the order in which the flex item appear in a flex
container By default they are laid out in the order they are defined in
 Values: integer value
Illustration order: 1
Notes  This should be applied to the child elements

Flex Grow
78
Syntax flex-grow: value;
Description  Used to define the amount of space a flex item should take up within
the flex container This servers as a proportion
Illustration flex-grow: 2
Notes  This should be applied to the child element
 Default value is zero

Flex Shrink
79
Syntax flex-shrink: value;
Description  Allows a flex item to shrink if required
Illustration flex-shrink: 2
 Default value is zero

Flex Basis
80
Syntax flex-basis: value;
Description  Defines the default size of an element before the remaining space is
distributed
 Values: length, auto
Illustration flex-basis: 200px

Flex
81
Syntax flex: value;
Description  Shorthand for flex-grow, flex-shrink and flex-basis Flex-shrink and flex-
basis parameters are optional and defaults to 0 auto
 Values: <flex-grow> <flex-shrink> <flex-basis>
Illustration flex: 1 1 200px;
 Ensures all items are of the same length irrespective of the content

Align Self
82
Syntax align-self: value;
Description  Used to override default alignment for individual flex items
 Values: flex-start, flex-end, center, stretch, baseline
Illustration align-self: flex-end

Transition
83
Syntax transition: <property> <delay> <duration> <timing>
Description Used to add effects while changing styles of elements
Can replace flash or JavaScript to add effects
Property: name of the CSS property the transition effect is for
Delay: specifies the time frame after which the transition starts
Duration: time frame for the animation to complete
Timing: specifies the speed of the transition.
Values: ease, linear, ease-in, ease-out, ease-in-out
Illustration div{
width: 200px;
transition: width 2s;
}
div:hover{
width: 500px;
}
Notes

Transform
84
Syntax transform: <transform function>
Description Used to add 2D and 3D transformation to an element
Can be used to rotate, scale, move, skew
Some of the transform functions:
 translate(x,y), translateX(x), scale(x,y), scaleX(x), rotate(angle),
rotate(angle), skew(x-angle, yangle), skewX(angle)
Illustration div {
transform: scale(50px, 100px);
}

Animation
85
Syntax @keyframes <name>
animation: <name> <duration> <timing-function> <delay> <iteration>
<direction>
Description  Used to create animations by changing CSS properties
 Can specify when the change will take place using percentage(0%,
100%) or keywords(from, to)
Illustration @keyframes myanimation{
0%{ width: 100px; }
100%{ width: 500px;}
}
div{
animation: myanimation 2s;
}

Selectors
86
Syntax
Description  Many new selectors are added and implemented in CSS3
 Some of the new selectors are:
 Structural: root, nth-child(n), nth-last-child(n), last-child, empty, target,
 UI element: enabled, disabled, checked, selection
 Negation: not(s)
Illustration p:nth-child(2) {
background:#ff0000;
}

Media Queries
87
Syntax @media
Description  Used to write styles for different screen sizes, multiple devices
Illustration @media screen and (max-device-width: 320px) { }
/* smartphones (portrait) */
@media screen and (max-device-width: 480px) { }
/* smartphones (landscape) */
@media screen and (max-device-width: 1024px) { }
/* tablet */
<link rel="stylesheet" type="text/css" media="only screen and (max-device-
width: 480px)" href="small-device.css" />

Mob : +91 98440 18630 / 99000 98630
Mail : enquiry@rsolutions-india.com
Url : www.rsolutions-india.com

Web Development Course - HTML5 & CSS3 by RSOLUTIONS

More Related Content

What's hot (14)

Similar to Web Development Course - HTML5 & CSS3 by RSOLUTIONS (20)

More from RSolutions (9)

Recently uploaded (20)

Web Development Course - HTML5 & CSS3 by RSOLUTIONS