Unit II Introduction to CSS3

SINHGAD INSTITUTE OF TECHNOLOGY, LONAVALA
DEPARTMENT OF ELECTRONICS & TELECOMMUNICATION
UNIT II
Introduction to CSS3
 Introduction to Style Sheet  Fonts and Text Effects

 Types of style Sheets  Colors, Background
 Inline, External, Embedded Images, and Masks
CSS.
 Architecture of CSS
 CSS Modules
 CSS Framework
 Selectors and Pseudo Classes
1 MASTER OF COMPUTER
APPLICATION
Unit Objective
I. To learn the fundamentals of CSS

II. To learn the different types of CSS in web technology.
III. To understand the different ways of implementation of CSS.
IV. To learn the concept of CSS3 in HTML
Unit Outcomes
i. To study the structure and principles of CSS

ii. To understand & implementation ways of CSS in HTML.
iii. To understand and learn the basic fundamental of
CSS3.
APPLICATION
What is CSS?
 What is CSS?
 CSS stands for Cascading Style Sheets.
 Cascading Style Sheets (CSS) is a simple mechanism for adding
style (e.g. fonts, colors, spacing) to Web documents. Tutorials,
books, mailing lists for users, etc.
 CSS is a well established and frequently used technology to
achieve the separation between formatting and content.
 CSS is a formatting language used to provide more customized
web pages and make it easier to make multiple pages use the
same style.
 CSS used to define colors, backgrounds, borders, margins,
alignment, fonts, sizes and loads of other things for almost any part
of your web pages
APPLICATION
Advantages of CSS?
 CSS saves time:
 In HTML a set the font face, size, color, style etc tags are every time
it occurs on a page.
 This means we find ourselves typing (or copying & pasting) the
same thing over and over again.
 But With CSS, you only have to specify these details once for any
element.
 CSS will automatically apply the specified styles whenever that
element occurs.
 Pages load faster
Less code means faster download times.
Easy maintenance
To change the style of an element, you only have to make an edit in
one place.
APPLICATION
Advantages of CSS?
 Superior styles to HTML
 CSS has a much wider array of attributes than HTML.
 Disadvantages of CSS
 Browser compatibility
 Browsers have varying levels of compliance with Style Sheets.
 Some Style Sheet features are supported and some aren't.
 Fortunately, browser compatibility is becoming less of an issue as the
latest browser versions are much more standards-compliant than their
earlier counterparts.
APPLICATION
Types of CSS?
 What are different types of CSS?
 There are three primary way to use style sheets
 Inline style sheets
 Embedded style sheets
 Linked style sheets
 This approach implements in existing HTML, tags within a standard
HTML documents & adds a specific style to the information
controlled by that tag.
 In this method the indentation of a single paragraph using the
style=“X” attribute within the <p> tag.
APPLICATION
Types of CSS?
 Another method of achieving this is combining the <span> tag and
style=“x” attribute.
 Here is an inline style example :
 <span style=“font: 15pt Arial”>
 Example of Inline Style Sheets :
<P style="font-size: x-large; color: #ff9900">
Using inline style sheets - or is that inline styles?
</p>

APPLICATION
Types of CSS?
 Embedded style sheets
 This method allows for the control of individual pages.
 The rules specified here can only be used for the current document,
but there is still a big win in using selectors to group style rules, which
serves to reduce duplication of effort by the author.
 It uses the <style> tags along with its companion tag</style>
 The STYLE element requires the TYPE attribute to tell the browser
which style language is being used.
 <style> p { font-family: Arial, helvetica,Times New Roman,
sans-serif ; }
</style>
 MASTER OF COMPUTER
8
APPLICATION
Types of CSS?
CSS Syntax
CSS include the style rules that are interpreted by the browser and then
applied to the corresponding elements in your document.
A style rule is made of three parts −
Selector − A selector is an HTML tag at which a style will be applied.
This could be any tag like <h1> or <table> etc.
Property − A property is a type of attribute of HTML tag. Put simply,
all the HTML attributes are converted into CSS properties.
They could be color, border etc.
Value − Values are assigned to properties. For example, color property
can have value either red or #F1F1F1 etc.
APPLICATION
Types of CSS?
CSS Syntax
 A CSS rule has two main parts: a selector, and one or more
declarations:
 The selector is normally the HTML element you want to style.
 Each declaration consists of a property and a value.
 The property is the style attribute you want to change.
 Each property has a value always ends with a semicolon, and
declaration groups are surrounded by curly brackets:
0 APPLICATION
CSS Selector
 CSS Selectors
 CSS selectors are used to "find" (or select) HTML elements based
on their element name, id, class, attribute, and more.
 element Selector
 id Selector
 class Selector
 Grouping Selectors
 element Selector
 The element selector selects elements based on the element name.
p{
text-align: center;
color: red;
}
1 APPLICATION
CSS Selector
The id Selector:
The id selector uses the id attribute of an HTML element to select a specific
element.
The id of an element should be unique within a page, so the id selector is
used to select one unique element.
To select an element with a specific id, write a hash (#) character, followed
by the id of the element.
<style>
#para1{
text-align: center;
color: red;
}
</style>>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
2 APPLICATION
CSS Selector
 The id Selector:
 The id attribute is used to specify a unique id for an HTML
element
 The value of the id attribute must be unique within the HTML
document
 The id attribute is used by CSS and JavaScript to style/select a
specific element
 The value of the id attribute is case sensitive
 The id attribute is also used to create HTML bookmarks
 JavaScript can access an element with a specific id with the
getElementById() method
3 APPLICATION
CSS Selector
 The class Selector
 The class selector selects elements with a specific class attribute.
 To select elements with a specific class, write a period (.) character,
followed by the name of the class.
<style>
#para1{
text-align: center;
color: red;
}
</style>
<h1 class="center">This is example of class selector</h1>
<p class="center">Red and center-aligned paragraph.</p>
.center { text-align: center;
color: black; }
<h2 class="center">Red and center-aligned paragraph.</h2>
4 APPLICATION
CSS Selector
Grouping Selectors
If you have elements with the same style <style>
definitions h1, h2, p {
h1 { text-align: center;
text-align: center; color: red;
}
color: red;
</style>
} </head>
h2 { <body>
text-align: center;
color: red; <h1>Hello World!</h1>
} <h2>Smaller heading!</h2>
p{ <p>This is a paragraph.</p>
text-align: center;
color: red; </body>
}
5 APPLICATION
External Style Sheet
 External Style Sheet
 The external style sheet is generally used when you want to make changes
on multiple pages.
 It is ideal for this condition because it facilitates you to change the look
of the entire web site by changing just one file.
 An external style sheet is a separate file where you can declare all the
styles that you want to use on your website.
 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.
 You then link to the external style sheet from all your HTML pages.
 This means you only need to set the styles for each element once.
 If you want to update the style of your website, you only need to do it in
one place.
6 APPLICATION
 The external style sheet is generally used when you want to make changes
on multiple pages.
 It is ideal for this condition because it facilitates you to change the look
of the entire web site by changing just one file.
 An external style sheet is a separate file where you can declare all the
styles that you want to use on your website.
 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.
 You then link to the external style sheet from all your HTML pages.
 If you want to update the style of your website, you only need to do it in
one place.
7 APPLICATION
<html>
h1 {
<head>
color: navy;
<link rel="stylesheet" type="text/css"
margin-left: 20px;
href="mystyle.css">
}
</head>
red {
<body>
color: red;
<p class = "red">This is red</p>
}
<p class = "thick">This is thick</p>
<p class = "green">This is green</p>
<p class = "thick green">This is thick and
mystyle.css
green</p>
</body>
</html>
8 APPLICATION
p
{font-family: Georgia, serif; font-size: x-small;}
h1 {color: #000099;
}
 Add the following between the <head>...</head> tags of all HTML
documents that you want to reference the external style sheet.
 <link rel="stylesheet" href="external_style_sheet.css" type="text/css">
 import a CSS file :
 You can use the @import rule to import rules from other style sheets.
 Add either of the following between the <head>...</head> tags of all
HTML documents that you want to import a style sheet into.
 @import "imported_style_sheet.css";
 @import url("imported_style_sheet.css");
9 APPLICATION
Implementing CSS
There are 4 ways of implementing CSS:
 Declare Inline : Style sheet information is applied to the current element.
 you only apply the style to the instance you want the style to apply to.
<P style="color:#ff9900"> CSS tutorial. </p>
 Embedded into the head of your document:
 You embed CSS information into an HTML document using the 'style'
element.
 By embedding the CSS information within <style>...</style> tags in the head of
your document.
<style type="text/css" media=screen> p {color:#ff9900;} </style>
 link to an external CSS file :
 An external style sheet is a separate file where you can declare all the styles
that you want to use throughout your website.
 Then link to the external style sheet from all your HTML pages.
 If you want to update the style of your website, you only need to do it in one
place.
0 APPLICATION
Implementing CSS
import a CSS file :
 You can use the @import rule to import rules from other style sheets.
 Add either of the following between the <head>...</head> tags of all
HTML documents that you want to import a style sheet into.
 @import "imported_style_sheet.css";
 @import url("imported_style_sheet.css");
1 APPLICATION
CSS Borders
 Border Style:
 The CSS border properties allow you to specify the style, width, and
color of an element's border.
 dotted - Defines a dotted border
 dashed - Defines a dashed border
 solid - Defines a solid border
 double - Defines a double border
 groove - Defines a 3D grooved border. The effect depends on the border-
color value
 ridge - Defines a 3D ridged border. The effect depends on the border-color
value
 inset - Defines a 3D inset border. The effect depends on the border-color value
 outset - Defines a 3D outset border. The effect depends on the border-color
value
 none - Defines no border
 hidden - Defines a hidden border
2 APPLICATION
CSS Borders
 Border Style:
 The CSS border properties allow you to specify the style, width, and
color of an element's border.
 p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
p.mix {border-style: dotted dashed solid double;}
3 APPLICATION
CSS Borders
Border Width:
The border-width property specifies the width of the four borders.
The width can be set as a specific size (in px, pt, cm, em, etc) or by using one of
the three pre-defined values: thin, medium, or thick.
 p.one {
border-style: solid;
border-width: 5px;
}
p.two {
border-width: medium;
}
p.three {
border-width: 2px 10px 4px 20px;
}
4 APPLICATION
CSS Borders
 Border Color:
 The border-color property is used to set the color of the
four borders.
 The color can be set by:

 name - specify a color name, like "red"
 Hex - specify a hex value, like "#ff0000"
 RGB - specify a RGB value, like "rgb(255,0,0)"
 transparent
 Border - Individual Sides:
 From the examples above you have seen that it is possible to
specify a different border for each side.
 In CSS, there are also properties for specifying each of the
borders (top, right, bottom, and left):
5 APPLICATION
CSS background
The CSS background properties are used to define the background
effects for elements.
CSS background properties:
•background-color
•background-image
•background-repeat
•background-attachment
•background-position
•Background Color:
•The background-color property specifies the background color of an
element.
•Background Image:
•The background-image property specifies an image to use as the
background of an element.
•By default, the image is repeated so it covers the entire element.
6 APPLICATION
CSS background
•Background Image - Repeat Horizontally or Vertically
•By default, the background-image property repeats an image both
horizontally and vertically.
•Background Image - Set position and no-repeat
•Showing the background image only once is also specified by the
background-repeat property:
body {
background-image: url(“myimage.jpg");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
7 APPLICATION
CSS Margins
 CSS Margins:
 The CSS margin properties are used to create space around
elements, outside of any defined borders.
 CSS has properties for specifying the margin for each side of an
element:
 margin-top
 margin-right
 margin-bottom
 margin-left
 All the margin properties can have the following values:
 auto - the browser calculates the margin
 length - specifies a margin in px, pt, cm, etc.
 % - specifies a margin in % of the width of the containing element
 inherit - specifies that the margin should be inherited from the
parent element
8 APPLICATION
CSS table
 Table Borders
 To specify table borders in CSS, use the border property.
 Collapse Table Borders
 The border-collapse property sets whether the table borders
should be collapsed into a single border:
 Table Width and Height:
 Width and height of a table are defined by the width and height
properties.
 Horizontal Alignment
 The text-align property sets the horizontal alignment (like left,
right, or center) of the content in <th> or <td>.
 By default, the content of <th> elements are center-aligned and
the content of <td> elements are left-aligned.
9 APPLICATION
CSS padding
 CSS Padding :
 The CSS padding properties are used to generate space around
an element's content, inside of any defined borders.
 With CSS, you have full control over the padding.
 There are properties for setting the padding for each side of an
element (top, right, bottom, and left).
 CSS has properties for specifying the padding for each side of an
element:
 padding-top
 padding-right
 padding-bottom
 padding-left
APPLICATION
CSS padding
 All the padding properties can have the following values:
 length - specifies a padding in px, pt, cm, etc.
 % - specifies a padding in % of the width of the containing
element
 inherit - specifies that the padding should be inherited from the
parent element
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
1 APPLICATION
CSS list
 In HTML, there are two main types of lists:
 unordered lists (<ul>) - the list items are marked with bullets
 ordered lists (<ol>) - the list items are marked with numbers or
letters
 The CSS list properties allow you to:
 Set different list item markers for ordered lists
 Set different list item markers for unordered lists
 Set an image as the list item marker
 Add background colors to lists and list items
2 APPLICATION
CSS list
 Different List Item Markers ol {
 The list-style-type property background: #ff9999;
specifies the type of list item padding: 20px;
marker. }
<style> ul {
ul.a {
background: #3399ff;
list-style-type: circle;
}
padding: 20px;
ul.b { }
list-style-type: square; ol li {
} background: #ffe5e5;
ol.c { padding: 5px;
list-style-type: upper-roman; margin-left: 35px;
} }
ol.d { ul li {
list-style-type: lower-alpha;
background: #cce5ff;
}
</style>
margin: 5px;
}
3 APPLICATION
CSS image
<style>
body {
background-image: url("aguila2.jpg");
background-repeat:no-repeat;
background-position: right top;
background-color: yellow;
background-image: linear-gradient(red, yellow, green);
}
</style>
APPLICATION
CSS3
 Cascading Style Sheets (CSS) is a style sheet language used for
describing the look and formatting of a document written in a
markup language.
 CSS3 is a latest standard of CSS earlier versions(CSS2).
 CSS3 is collaboration of CSS2 specifications
 Some of the modules are shown below −
 Selectors
 Box Model & Backgrounds
 Image Values and Replaced Content
 Text Effects
 2D Transformations & 3D Transformations
 Animations
 Multiple Column Layout
 User Interface
APPLICATION
CSS3 Gradients
What is Gradients?
Gradients displays the combination of two or more colors as
shown below −
Types of gradients
 Linear Gradients(down/up/left/right/diagonally)
 Radial Gradients
Linear gradients
Linear gradients are used to arrange two or more colors in linear
formats like
top to bottom.
Left to right
background: -webkit-linear-gradient(left, red , blue);
background: -o-linear-gradient(right, red, blue);
6 APPLICATION
CSS3 Gradients
<html>
<head>
<style>  Webkit is an open-source web
#grad1 { browser engine that was
height: 100px; developed by Apple.
background: -webkit-linear-  In CSS, the -webkit- prefix is
gradient(pink,green); used for CSS properties not
background: -o-linear-gradient(pink,green); yet officially implemented
background: -moz-linear-
either by the W3C
gradient(pink,green);
background: linear-gradient(pink,green); specifications or by all web
} browsers
</style>
</head>
<body>
<div id = "grad1"></div>
</body>
</html>
7 APPLICATION
CSS3 Gradients
 Diagonal
You can make a gradient diagonally by specifying both the horizontal and
vertical starting positions.
Diagonal starts at top left and right button.
<style>
#grad1 {
height: 100px;
background: -webkit-linear-gradient(left top, red , blue);
background: -o-linear-gradient(bottom right, red, blue);
background: -moz-linear-gradient(bottom right, red, blue);
background: linear-gradient(to bottom right, red , blue);
}
</style>
</head>
<body>
<div id = "grad1"></div> </body> </html>
8 APPLICATION
CSS3 Gradients
CSS3 Repeat Radial Gradients
<style>
#grad1 {
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>
9 APPLICATION
CSS3 Gradients
CSS3 Repeat Gradients
Linear Gradient - Top to Bottom (this is default)
background-image: linear-gradient(red, yellow);
Linear Gradient - Left to Right
background-image: linear-gradient(to right, red , yellow);
Linear Gradient – Diagonal
background-image: linear-gradient(to bottom right, red, yellow);
Using Angles
background-image: linear-gradient(-90deg, red, yellow);
Using Multiple Color Stops
background-image: linear-gradient(red, yellow, green);
Using Transparency
background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
Repeating a linear-gradient
background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
Set Shape
background-image: radial-gradient(circle, red, yellow, green);
0 APPLICATION
CSS Transitions
 CSS transitions allows you to change property values smoothly
(from one value to another), over a given duration.
 How to Use CSS Transitions?
 To create a transition effect, you must specify two things:
 the CSS property you want to add an effect
 the duration of the effect
1 APPLICATION
CSS Transitions
CSS Transition Properties
Property Description
A shorthand property for setting the four
transition
transition properties into a single property
Specifies a delay (in seconds) for the transition
transition-delay
effect
Specifies how many seconds or milliseconds a
transition-duration
transition effect takes to complete
Specifies the name of the CSS property the
transition-property
transition effect is for
transition-timing-fu Specifies the speed curve of the transition effect
nction
2 APPLICATION
CSS Transitions
 CSS Transition timing function Properties
 The transition-timing-function property can have the following
values:
 ease - specifies a transition effect with a slow start, then fast,
then end slowly (this is default)
 linear - specifies a transition effect with the same speed from
start to end
 ease-in - specifies a transition effect with a slow start
 ease-out - specifies a transition effect with a slow end
 ease-in-out - specifies a transition effect with a slow start and
end.
 cubic-bezier(n,n,n,n) - lets you define your own values in a cubic-
bezier function
3 APPLICATION
CSS Transitions
 CSS Transition timing function Properties
<style>
div {
width: 100px;
height: 100px;
background: red;
-webkit-transition: width 2s;
transition: width 2s;
}
#div1 {transition-timing-function: linear;}
#div2 {transition-timing-function: ease;}
#div3 {transition-timing-function: ease-in;}
#div4 {transition-timing-function: ease-out;}
#div5 {transition-timing-function: ease-in-out;}
div:hover { width: 300px; } </style>
APPLICATION
CSS3 - Animation
 CSS3 Animation:
 Animation is process of making shape changes and creating
motions with elements.
 CSS animations allows animation of most HTML elements without
using JavaScript or Flash
 What are CSS Animations?
 In animation an element gradually change from one style to
another.
 You can change as many CSS properties you want, as many times
you want.
 How to use CSS animation?
 you must first specify some keyframes for the animation.
 Keyframes hold what styles the element will have at certain times.
APPLICATION
CSS3 - Animation
 @keyframes Rule :
 First specify CSS styles inside the @keyframes rule.
 The animation will gradually change from the current style to
the new style at certain times.
 To get an animation to work, you must bind the animation to an
element.
 animation-duration property :
 This property defines how long time an animation should take to
complete.
 If this property is not specified, no animation will occur (default
value is 0s (0 seconds).
 animation-delay :
 This property specifies a delay for the start of an animation.

APPLICATION
CSS3 - Animation
 animation-iteration-count:
 This property specifies the number of times an animation should
run.
 animation-iteration-count: 3
 animation-direction
 property specifies whether an animation should be played forwards,
backwards or in alternate cycles.
 animation-direction property can have the following values:
 normal - The animation is played as normal (forwards & default)
 reverse - The animation is played in reverse direction (backwards)
 alternate - The animation is played forwards first, then
backwards
 alternate-reverse - The animation is played backwards first, then
forwards
APPLICATION
CSS3 - Mask
 CSS masking:
 The mask property in CSS is used to hide an element using the
clipping or masking the image at specific points.
 Masking defines how to use an image or the graphical element as a
luminance or alpha mask.
 It is a graphical operation that can fully or partially hide the
portions of an element or object.
APPLICATION

Unit II Introduction to CSS3

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Unit II Introduction to CSS3

Uploaded by

Copyright:

Available Formats

SINHGAD INSTITUTE OF TECHNOLOGY, LONAVALA

DEPARTMENT OF ELECTRONICS & TELECOMMUNICATION

 Introduction to Style Sheet  Fonts and Text Effects

I. To learn the fundamentals of CSS

i. To study the structure and principles of CSS

You might also like