Free Course of web designing using HTML5, CSS3, JAVASCRIPT BootStrap and many more

1. INTRODUCTION TO CSS3
SESSION 5
Aptech Computer Education
Presented by Muhammad Ehtisham Siddiqui (BSCS)
1

2. Objectives
 Identify the new functions of CSS3
 Explain the different types of selectors
 Explain nested tags
 Define Classes and IDs for applying styles
 Explain the process to apply styles to hyperlink
Presented by Muhammad Ehtisham Siddiqui (BSCS)
2

3. Introduction of CSS
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
3
 Cascading Style Sheet (CSS) is a style sheet language
 It informs the browser how to present a document
 It uses a markup language for describing the presentation
semantics of a document.
 It defines how HTML elements are to be displayed

4. CSS3
Presented by Muhammad Ehtisham Siddiqui
(BSCS)
4
 Used for adding style such as fonts, colors, and spacing to Web
documents.
 Has multiple levels and profiles.
 Updates each level of CSS from the earlier version, by adding new
features
 Denotes version as CSS1, CSS2, CSS3, and CSS4, where the
numbers are different for each version or level.
 Is divided into multiple documents called “modules” and each of
these modules have new capabilities or extends the features
present in CSS2.
 Started drafting of CSS3 when publication of the original CSS2
recommendation was released.

5. Modules
Presented by Muhammad Ehtisham Siddiqui (BSCS)
5
 As CSS3 is available as modules and is still evolving, there
are many modules having different stability and status.
 Only three modules are released as recommendations and
they are as follows:
 CSS Color level 3
 CSS Namespaces
 Selectors Level 3
 Modules that are stable and in recommendation stage are as
follows:
 Media Queries
 CSS Style Attributes

6. Modules
Presented by Muhammad Ehtisham Siddiqui (BSCS)
6
 Modules that are in testing phase and in recommendation stage are
as follows:
 CSS Background and Borders Level 3
 CSS Image Values and Replaced Content Level 3
 CSS Marquee
 CSS Multi-column Layout
 CSS Speech
 CSS Mobile Profile 2.0
 CSS TV Profile 1.0
 Modules that are in refining phase and in working draft stage are as
follows:
 CSS Transforms
 CSS Transitions
 CSS Values and Units Level 3
 CSS Print Profile

7. Modules
Presented by Muhammad Ehtisham Siddiqui (BSCS)
7
 Modules that are in revising phase and in working draft and
recommendation stage are as follows:
 CSS Animations
 CSS Flexible Box Layout
 CSS Fonts Level 3
 CSS Text Level 3
 CSS Basic User Interface Level 3
 CSS Writing Modes Level 3
 Some of the following modules are in exploring phase and in
working draft stage:
 CSS Cascading and Inheritance Level 3
 CSS Conditional Rules Level 3
 CSS Grid Layout
 CSS Line Grid

8. Modules
Presented by Muhammad Ehtisham Siddiqui (BSCS)
8
 Modules that are in rewriting phase and in working draft stage are
as follows:
 CSS Line Layout Level 3
 CSS Ruby
 CSS Syntax Level 3
 Modules that are in abandoned phase and in working draft stage
are as follows:
 Behavioral Extensions to CSS
 CSS Hyperlink Presentation

9. CSS Syntax
Presented by Muhammad Ehtisham Siddiqui (BSCS)
9
 Syntax of CSS consists of three parts namely, selector, property,
and value.
 Selector is an HTML element for which you want to specify the style
or the formatting instruction.
 Property of a selected element is a CSS property that specifies the
type of the style to be applied to the selector.
 Value refers to the value of the CSS property and a CSS property
can have multiple values.
 Property and the value for a selector are separated with a colon (:).
 They are enclosed within the curly brackets ({}) that is known as the
declaration block.

10. CSS Syntax
Presented by Muhammad Ehtisham Siddiqui (BSCS)
10
 You can specify multiple property-value pairs for a selector, which
are separated by a semicolon (;) within the declaration block..
 You can specify multiple selectors for a single property by grouping
the selectors. To group the selectors, the selectors are separated by
commas followed by a declaration block of properties and values.
 You can specify properties for multiple selectors. Here, the comma-
separated selectors are followed with multiple property-value pairs

11. Length Measurement Units
Presented by Muhammad Ehtisham Siddiqui (BSCS)
11
 CSS uses various units of measurements for specifying size of the
font, width, and height of margins, and so on.
 These units measure the horizontal and vertical length of the content.
 CSS supports two types of length measurement units namely, relative
and absolute.
 Relative length specifies the length units related to other length
property that are calculated in comparison to a current value.
 Following table lists some of the relative length units.
Relative
Length
Description
em Specifies the font size (height) of a particular font. The em unit is
relative to the value of the font-size property of the selector
ex Specifies the ‘x-height’ of a particular font. The ‘x-height’ value is
approximately half the font size or the height of the lowercase letter
‘x
px Specifies the size in pixels, which is relative to the screen of the

12. Length Measurement Units
Presented by Muhammad Ehtisham Siddiqui (BSCS)
12
 Absolute lengths are specified when the Web page designer is aware
of the physical properties of the output device and are specific and
fixed values
 Following table lists some of the absolute length units
 Percentage allows specifying the length of the content, which is
relative to another value. Div1{
font-size:120%
}
Relative
Length
Description
in Specifies the size in inches, where 1 inch = 2.54 centimeters.
cm Specifies the size in centimeters
mm Specifies the size in millimeters
pt Specifies the size in points, where 1 point = 1/72th of an inch
pc Specifies the size in picas, where 1 pica = 12 points

13. Types of Style Sheets
Presented by Muhammad Ehtisham Siddiqui (BSCS)
13

14. External Style Sheet
Presented by Muhammad Ehtisham Siddiqui (BSCS)
14
 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:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
body {
background-
color: lightblue;
}
h1 {
color: navy;
margin-
left: 20px;
}

15. Internal Style Sheet
Presented by Muhammad Ehtisham Siddiqui (BSCS)
15
 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:
 <!DOCTYPE html>
<html>
<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>
</body>

16. Inline Styles
Presented by Muhammad Ehtisham Siddiqui (BSCS)
16
 An inline style may be used to apply a unique style for a single
element.
 To use inline styles, add the style attribute to the relevant element.
The style attribute can contain any CSS property.
 The example below shows how to change the color and the left
margin of a <h1> element:
 <!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1 style="color:blue;margin-left:30px;">This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

17. Selectors
Presented by Muhammad Ehtisham Siddiqui (BSCS)
17
 Selectors refer to the HTML elements with the styles that the users
want to apply to them.
 The four different types of CSS selectors are as follows:
 Universal selectors
 Type selectors
 ID selectors
 Class selectors

18. Type Selector
Presented by Muhammad Ehtisham Siddiqui (BSCS)
18
 Specifies the element name along with the styles to be applied to
that element
 Results in application of the specified styles to all the occurrence of
that element in a Web page
 Styles are specified only once for an HTML element and are applied
to all the occurrences of that elements
Syntax= element {
style properties
}
 For example= a{ h1{
color:red; background-color:blue
} }

19. Class Selector
Presented by Muhammad Ehtisham Siddiqui (BSCS)
19
 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.
 HTML elements can also refer to more than one class (look at
Example 2 below).
 Syntax= .class {
css declarations;
}
For example=
.hometown {
background-color: yellow;
}
<p class=“hometown” />

20. Id Selector
Presented by Muhammad Ehtisham Siddiqui (BSCS)
20
 The * selector selects all elements.
 The * selector can also select all elements inside another element
(See "More Examples").
 To reference an ID, you precede the ID name with a hash mark (#).
 Syntax= #id {
CSS Declaration
}
For example=

21. Universal Selector
Presented by Muhammad Ehtisham Siddiqui (BSCS)
21
 The universal selector denoted by *.
 The * selector selects all elements.
 The * selector can also select all elements inside another element
(See "More Examples").
 To reference an ID, you precede the ID name with a hash mark (#).
 Syntax= * {
CSS Declaration
}
For example=
div * {
background-color: yellow;
}

22. Generic Cascading Order
Presented by Muhammad Ehtisham Siddiqui (BSCS)
22
 W3C has defied some rules for applying styles to an HTML element.
 These rules are as follows.
 Gather all the styles that are to be applied to an element.
 Sort the declarations by the source and type of style sheet. The
source specifies the origin from where the styles are rendered.
 The highest priority is given to the external style sheet defied by an
author.
 The next priority is of the reader, which can be a software that reads the
content (screen reader software),and the last priority is of the browser.

23. Comments
Presented by Muhammad Ehtisham Siddiqui (BSCS)
23
 A comment refers to the descriptive text that allows a Web page
designer to provide information about the CSS code.
 Comments make the program more readable and help
the designer to explain the styles specified for elements.
 The browser can identity comments as they are marked with special
characters, which are
‘/*’ and ‘*/’.
 When the browser encounters these symbols, the text within them
are ignored
and are not displayed in the browser.
 You can have single-line and multi-line comments in
the CSS fie.

24. Pseudo Classes
Presented by Muhammad Ehtisham Siddiqui (BSCS)
24
 A pseudo-class is used to define a special state of an element.
 For example, it can be used to:
 Style an element when a user mouse over it
 Style visited and unvisited links differently
 Style an element when it gets focus
 The syntax of pseudo-classes:
selector: pseudo-class
{
property: value;
}

25. Pseudo Classes
Presented by Muhammad Ehtisham Siddiqui (BSCS)
25
 Try this code
<!DOCTYPE html><html>
<head><style>
/* unvisited link */
a:link { color: red;}
/* visited link */
a:visited { color: green;}
/* mouse over link */
a:hover { color: hotpink;}
/* selected link */
a:active { color: blue;}
</style></head>
<body>
<p><b><a href="default.asp" target="_blank">This is a link</a></b></p>
<p><b>Note:</b> a:hover MUST come after a:link and a:visited in the CSS definition
in order to be effective.</p>
<p><b>Note:</b> a:active MUST come after a:hover in the CSS definition in order to
be effective.</p>
</body></html>

26. Pseudo Class Selectors
Presented by Muhammad Ehtisham Siddiqui (BSCS)
26
Selector Type Description
:link Links Is used for selecting all unvisited links
:visited Links Is used for selecting all visited links
:hover Links Is used for selecting links on mouse over
:active Links Is used for selecting the active link
:focus Inputs Selects links that are the current focus of the
keyboard.
:enabled Inputs Selects inputs that are in the default state of
enabled and ready to be used.
:disabled Inputs Selects inputs that have the disabled attribute.
:required Inputs Selects inputs with the required attribute.
:checked Inputs Selects checkboxes that are, wait for it, checked.
:read-
only / :read-write
Inputs Selects elements based on a combination
of readonly and disabled attriutes.

27. Pseudo Class Selectors
Presented by Muhammad Ehtisham Siddiqui (BSCS)
27
Selector Type Description
:root Position
based
Selects the element that is at the root of the
document.
:first-child Position
based
Selects the first element within a parent.
:last-child Position
based
Selects the last element within a parent.
:nth-child() Position
based
Selects elements based on a simple provided
algebraic expression (e.g. "2n" or "4n-1").
:empty Relational Selects elements which contain no text and no
child elements. Like: <p></p>
::first-letter Text Related Selects the first letter of the text in the element.
::first-line Text Related Selects the first line of text in the element.
::before Content
Related
Is able to add content before a certain element.

28. Styles to Hyperlinks
Presented by Muhammad Ehtisham Siddiqui (BSCS)
28
 CSS can be used to change the appearance and behavior of
hyperlinks
 There are two other ways to assign hyperlink styles namely, div specific
and Link specific.
 A div specific hyperlink styles can be created and assigned to a specific
div and will have all the hyperlinks present within the div to follow the
specified rules
 Class specific hyperlink styles generally uses a class than an id. A point
to note that an id can only be used once on a page whereas a class
can be used multiple times as required
 For Example:
 a {
color: hotpink;
}

29. Questions?
Presented by Muhammad Ehtisham Siddiqui (BSCS)
29