Scribd
Upload
62 views

Full Stack Development - 22CS2305: Module 2 - Css3

This document provides an overview of CSS Module 2 which covers CSS3. It discusses topics like levels of style sheets, style specification formats, selector forms, property value forms, font properties, list properties, color, alignment of text, background images, conflict resolution, CSS Box Model, and CSS3 features. Examples are provided to demonstrate inline styles, document-level styles, and external styles. The document aims to introduce students to CSS3 and its key concepts.

Uploaded by

rajgopalsae
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
62 views

Full Stack Development - 22CS2305: Module 2 - Css3

This document provides an overview of CSS Module 2 which covers CSS3. It discusses topics like levels of style sheets, style specification formats, selector forms, property value forms, font properties, list properties, color, alignment of text, background images, conflict resolution, CSS Box Model, and CSS3 features. Examples are provided to demonstrate inline styles, document-level styles, and external styles. The document aims to introduce students to CSS3 and its key concepts.

Uploaded by

rajgopalsae
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 161

1

Full Stack Development - 22CS2305

MODULE 2 – CSS3

Prof. Suvika K V,
Assistant Professor,
Dept. of CSE
2

Theory - Modules

Module Chapter Chapter Name

1 1 Markup Language (HTML5)

2 2 CSS3

3 3 JavaScript

4 4 Node JS

5 5 Express.JS
3

Module 2 - CSS3

Topics
1. Levels of style sheets
2. Style specification formats
3. Selector forms
4. Property value forms
5. Font properties
6. List properties
7. Color
8. Alignment of text
9. Background images
10. Conflict Resolution
11. CSS Box Model
12. CSS3 features: Box Shadow, Opacity, Rounded corners, Attribute selector
4

Introduction - What is CSS ?

➢ CSS stands for Cascading Style Sheets.

➢ CSS describes how HTML elements are to be displayed on screen, paper, or in other media.

➢ CSS can control the layout of multiple web pages all at once.

➢ CSS is used to define styles for your web pages, including the design, layout and variations in

display for different devices and screen sizes.


5

Introduction – Advantages of CSS ?

➢ Saves time

➢ Easy to change

➢ Keep consistency (always behave in the same way)

➢ More control over layout

➢ Create a common format for all the Web pages


6

1. Levels of Style Sheets

➢ The Cascading Style Sheets is defined at three different levels to specify the style of a Document.

➢ Lower level style sheets can override higher level style sheets , so the style of the content of a tag is
determined ,in effect ,through a cascade of style sheet applications.

➢ Inline style sheets have precedence over document style sheets ,which have precedence over external
style sheets.
Inline

Document/
Levels in CSS
Internal

External
7

i. Inline Styles

➢ Inline style sheets apply to content of single HTML element.

➢ Inline style specifications appear within the opening tag and apply only to the content

of that tag.
8

ii. Document/ Internal Styles

➢ Document level style sheets apply to the whole body of a document.

➢ Document level style specifications appear in the document head section and apply to

the entire body of the document.


9

iii. External Styles

➢ External Style sheets can apply to the bodies of any number of documents.

➢ External Style sheets stored separately and are referenced in all documents that use them

➢ External style sheets are written as text files with the MIME type text/css.

➢ The browser fetches external style sheets just as it fetches documents.


10

Gist of Levels of CSS

➢ Inline Styles: These are specified in the tag itself.

➢ Document-Level (Internal) Style Sheets: These are specified in the <head> of a document,

using the special tag <style>.

➢ External Style Sheets: These are specified in a separate CSS file that is connected to the HTML

file by the <link> tag.


11

Syntax

➢ A CSS rule consists of a selector and a declaration block.

➢ The selector points to the HTML element you want to style.


➢ The declaration block contains one or more declarations separated by semicolons.
➢ Each declaration includes a CSS property name and a value, separated by a colon.
➢ Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly
braces.
12

Syntax

•h1 is a selector in CSS (it points to the HTML element you want to style: <h1>).

•color is a property, and blue is the property value

•Font-size is a property, and 12px is the property value


13

Inline Styles – Code 1


<!DOCTYPE html>
<html>
<head>
<title>Inline</title>
</head>
<body>
<h1 style = "font-family : Lucida Handwriting;
font-size : 50pt;
color : red;
text-align : center;"> Dayananda Sagar University </h1>
</body>
</html>
14

Inline Styles – Code1 - Output


15

Inline Styles – Code 2


<!DOCTYPE html>
<html>
<head>
<title>Inline</title>
</head>
<body>
<h1 style = "font-family : Lucida Handwriting; font-size : 50pt; color : red; text-align : center;"> Film
Festivals </h1>
<p style = "color : blue;"> Indian films are regularly featured and awarded at prestigious international
film festivals, showcasing the quality and diversity of Indian cinema. </p>
</body>
</html>
16

Inline Styles – Code 2 - Output


17

Document-Level (Internal) Style Sheets – Code1


<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style type=“text/css”>
h1{font-family : Lucida Handwriting; font-size : 50pt ; color : red ; text-align : center;}
</style>
</head>
<body>
<h1> Dayananda Sagar University </h1>
</body>
</html>
18

Document-Level (Internal) Style Sheets – Code1 - Output


19

Document-Level (Internal) Style Sheets – Code2


<!DOCTYPE html>
<html>
<head>
<title>Document2</title>
<style type=“text/css”>
body{background-color:Linen;}
h1{font-family:Georgia; font-size:25pt ; color:red ; text-align:center;}
p{font-family:Aptos; font-size:20pt ; color:purple ; text-align:left;}
</style> </head>
<body>
<h1> Longest Running Film </h1>
<p> "Dilwale Dulhania Le Jayenge" (DDLJ), a classic Bollywood film, holds the record for the longest continuous run in a single theater. It
ran for over 20 years at Mumbai's Maratha Mandir cinema. </p>
</body>
</html>
20

Document-Level (Internal) Style Sheets – Code2 - Output


21

External Style Sheets – Code1 - CSS

h1{font-family:Georgia; font-size:25pt ; color:red ; text-align:center;}

p{font-family:Aptos; font-size:20pt ; color:blue ; text-align:left;}


22

External Style Sheets – Code1 - HTML


<!DOCTYPE html>
<html>
<head>
<title>External1</title>
<link rel="stylesheet" href="external1.css">
</head>

<body>
<h1> Silent Film Pioneers </h1>
<p> India's first silent feature film, "Raja Harishchandra," was released in 1913 by Dadasaheb Phalke, often regarded as the father of Indian
cinema. </p>
</body>
</html>
23

External Style Sheets – Code1 - Output


24

2. Style Specification Formats

➢ Inline style specifications appear as values of the style attribute of a tag,4 the general form of
which is as follows:

➢ Document style specifications appear as the content of a style element within the header of a
document, although the format of the specification is quite different from that of inline style sheets.
The general form of the content of a style element is as follows:
25

2. Style Specification Formats

➢ External style: Each style rule in a rule list has two parts: a selector, which indicates the
element or elements affected by the rule, and a list of property-value pairs. The list has the
same form as the quoted list for inline style sheets, except that it is delimited by braces rather than
double quotes. So, the form of a style rule is as follows:
26

3. Selector Forms

➢ A selector specifies the elements to which the following style information applies.

Simple
Selector
Forms
Universal Class
Selector Selectors

Selector
Pseudo
Forms
Generic
Classes Selectors

Contextual id
Selectors Selectors
27

i. Simple Selector Forms

➢ Here, the property values in the rule apply to all occurrences of the named element.

➢ The selector could be a list of element names separated by commas, in which case the property
values apply to all occurrences of all of the named elements.

➢ The first of these selector forms specifies that the following property-value list applies to all h1
elements.

➢ The second specifies that the following property-value list applies to all h2 and h3 elements
28

Simple Selector Forms – code1


<!DOCTYPE html>
<html>
<head>
<title>Simple Selector</title>
<style type="text/css">
h1 {font-family : Lucida Handwriting; font-size : 50pt ; color : red ; text-align : center;}
h2, h3 {font-family : Verdana; font-size : 30pt ; color : green ; text-align : left;}
</style>
</head>
<body>
<h1> My Favourite Books </h1>
<h2> Pride and Prejudice </h2>
<h3> Gone with the Wind </h3>
</body>
</html>
29

Simple Selector Forms – code1 - output


30

ii. Class Selectors

➢ Class selectors are used to allow different occurrences of the same tag to use different
style specifications.

➢ A style class is defined in a style element by giving the style class a name, which is attached to the
tag’s name with a period.

➢ For example, if you want two paragraph styles in a document—say, normal and warning—you could
define these two classes in the content of a style element as follows:

p.normal {property-value list}


p.warning {property-value list}
31

Class Selectors

➢ Within the document body, the particular style class that you want is specified with the class
attribute of the affected tag.
32

Class Selectors - Code


<!DOCTYPE html>
<html>
<head>
<title>Class Selector</title>
<style type="text/css">
h1.one{font-size : 50pt ; color : red ; text-align : center;}
h1.two{font-size : 30pt ; color : green ; text-align : left;}
</style> </head>
<body>
<h1 class="one"> My Favourite Series </h1>
<h1 class="two"> Friends </h1>
<h1 class=“one"> Breaking Bad </h1>
</body>
</html>
33

Class Selectors – Code - Output


34

iii. Generic Selectors

➢ It is convenient to have a class of style specifications that applies to the content of more than one
kind of tag.

➢ It is defined without a tag name in its selector.

➢ Without the tag name, the name of the generic class begins with a period.
35

Generic Selectors - code


<!DOCTYPE html>
<html>
<head>
<title>Simple Selector</title>
<style type="text/css">
.one{font-family: Monotype Corsiva; font-size : 50pt ; color : red ; text-align : center;}
</style> </head>
<body>
<h1 class="one"> My Favourite Anime </h1>
<p class="one"> Naruto </p>
<h6 class="one"> One Piece </h6>
</body>
</html>
36

Generic Selectors – code - Output


37

iv. id Selectors

➢ An id selector allows the application of a style to one specific element. The general form of an id
selector is as follows:

➢ the style specified in the id selector applies to the element with the given id.

➢ Following is the h2 element to which this style applies:


38

id Selectors - Code
<!DOCTYPE html>
<html>
<head>
<title>Simple Selector</title>
<style type="text/css">
#one{font-family: Monotype Corsiva; font-size : 50pt ; color : red ; text-align : center;}
#two{font-family: Monotype Corsiva; font-size : 30pt ; color : blue ; text-align : left;}
</style> </head>
<body>
<h1 id="one"> My Favourite Anime </h1>
<p id="two"> Naruto is my favourite </p>
</body>
</html>
39

id Selectors – Code - Output


40

v. Contextual Selectors

➢ A contextual selector is defined as a selector which considers the context where the style is to be
applied.

➢ In simple words, the specified style is applied to an element only if the element is in the specified
context.

➢ Context can be defined as a parent/child relationship or ancestor/descendant relationship between


different parts of the document.

➢ A contextual selector is made up of two or more simple selectors separated by white space.

➢ Contextual selector also known as element-element selector or space selectors.


41

Contextual Selectors – Code1


<!DOCTYPE html>

<html>

<head>

<title>Contextual Selectors1</title>

<style type="text/css">

div {color: red; font-size : 50pt}

p {color: green; font-size : 30pt}

</style> </head>

<body>

<div>

<p>Full Stack Development</p>

<p>Module 1: HTML</p>

</div>

<p>Module 2: CSS</p>

</body>

</html>
42

Contextual Selectors – Code1 - Output


43

Contextual Selectors – Code2


<!DOCTYPE html>

<html>

<head>

<title>Contextual Selectors2</title>

<style type="text/css">

div p{color: red; font-size : 50pt;}

p {color: green; font-size : 30pt;}

</style> </head>

<body>

<div>

<p>Full Stack Development</p>

<p>Module 1: HTML</p>

</div>

<p>Module 2: CSS</p>

</body>

</html>
44

Contextual Selectors – Code2 - Output


45

Contextual Selectors – Code3


<!DOCTYPE html>

<html>

<head>

<title>Contextual Selectors3</title>

<style type="text/css"> Element > Element


div > p{color: red; font-size : 50pt}

</style> </head> ➢ It is used to select elements with a specific parent.


<body>
➢ Elements that are not directly a child of the
<div>

<p>Full Stack Development</p> specified parent, are not selected.


</div>

<div>

<span><p>Module 2: CSS</p></span>

</div>

</body>

</html>
46

Contextual Selectors – Code3 - Output


47

Contextual Selectors – Code4

p:first-child {property-value list}


The properties in the list are applied to the first child element of each p element.

p:last-child {property-value list}


The properties in the list are applied to the last child element of each p element.

p:only-child {property-value list}


The properties in the list are applied to the child element of each p element that has just one child
element.

p:empty {property-value list}


The properties in the list are applied to each p element that has no child elements.
48

Contextual Selectors – Code4


<!DOCTYPE html>
<html>
<head>
<title>Contextual Selectors4</title>
<style type="text/css">
p:first-child {background-color: red; font-size: 40pt}
p:last-child {background-color: yellow; font-size: 40 pt}
</style> </head>
<body>
<div>
<p> Full Stack Development </p>
<p> Module 1: HTML </p>
<p> Module 2: CSS </p>
</div>
<p> Full Stack Development </p>
<p> Module 1: HTML </p>
</body>
</html>
49

Contextual Selectors – Code4 - Output


50

vi. Pseudo Classes

➢ Pseudo classes specify that certain styles apply when something happens, rather than because the
target element simply exists.

➢ Pseudo class selectors are used if properties are to be changed dynamically .

➢ Example: When mouse movement happens ,in other words hover happens or focus happens.

➢ The names of pseudo classes begin with a colon.


51

Pseudo Classes

Pseudo
Classes

Style
Style any
Hypertext
element
links

link hover

visited focus
52

Pseudo Classes – Style hypertext links

➢ The link pseudo class is used to style a link that has not been selected.

➢ The visited pseudo class is used to style a link that previously has been selected.

Pseudo Classes – Style any element

➢ The style of the hover pseudo class applies when its associated element has the mouse cursor
over it.

➢ The style of the focus pseudo class applies when its associated element has focus. {active}
53

Pseudo Classes – Code1


<!DOCTYPE html>
<html>
<head>
<style type=“text/css”>
a:link {color: red; font-size: 50pt;}
a:visited {color: green; font-size: 50pt;}
a:hover {color: hotpink; font-size: 50pt;}
a:focus {color: blue; font-size: 50pt;}
</style> </head>
<body>
<a href="https://www.google.com"> Google </a> <br>
<a href="https://www.gmail.com"> Gmail </a> <br>
<a href="https://www.fb.com"> FB </a>
</body>
</html>
54

Pseudo Classes – Code1 - Output


55

vii. Universal Selector

➢ The universal selector, denoted by an asterisk (*), applies its style to all elements in a document.

➢ For every element in a document to have a particular set of properties, we could include the
following:
56

Universal Selector - Code


<!DOCTYPE html>
<html>
<head>
<title>Universal Selector</title>
<style type="text/css">
*{color: purple;font-size: 50pt;}
</style>
</head>
<body>
<h1>National Award Winners</h1>
<ul>
<li>Rakshith Shetty</li>
<li>Allu Arjun</li>
<li>Kriti Sanon</li>
<li>Alia Bhatt</li>
</ul>
</body>
</html>
57

Universal Selector – Code - Output


58

4. Property Value Forms

➢ CSS includes a large number of different properties, arranged in categories.

➢ The most commonly used categories are: fonts, lists, alignment of text, margins, colors,
backgrounds, and borders.
59

Property Value Forms

font-size

➢ Keyword property values are used when there are only a few possible values and they are

predefined—for example, large, medium, and small.

➢ Keyword values are not case sensitive, so Small, SmAlL, and SMALL are all the same as small.
60

Property Value Forms

Image – width and height

➢ Number values are used when no meaningful units can be attached to a numeric property

value.

➢ A number value can be either an integer or a sequence of digits with a decimal point and can

be preceded by a sign (+ or -).


61

Property Value Forms

Length

➢ Length values are specified as number values that are followed immediately by a two-

character abbreviation of a unit name.

➢ There can be no space between the number and the unit name.

➢ The possible unit names are px, for pixels; in, for inches; cm, for centimeters; mm, for

millimeters; pt, for points (a point is 1/72 inch); and pc, for picas, which are 12 points.
62

Property Value Forms

Relative Length

➢ em → which is the value of the current font size in pixels.

➢ ex → which is the height of the letter x.


63

Property Value Forms

Percentage Values

➢ Percentage values are used to provide a measure that is relative to the previously used

measure for a property value.

➢ Percentage values are numbers that are followed immediately by a percent sign (%)

➢ Ex: Font size were set to 75% with a style sheet, it would make the new current size for the

font 75 percent of its previous value.

➢ Percentage values can be signed. If preceded by a plus sign, the percentage is added to the

previous value; if negative, the percentage is subtracted.


64

Property Value Forms

Color Property

➢ Color property values can be specified as color names, as six-digit hexadecimal numbers, or

in RGB form.

➢ RGB form is just the word rgb followed by a parenthesized list of three decimal numbers in

the range of 0 to 255 or three percentage values.

➢ These numbers or percentages specify the levels of red, green, and blue, respectively.

➢ Hexadecimal numbers must be preceded with pound signs (#), as in #43AF00.


65

Property Value Forms

URL Property

➢ URL property values use a form that is slightly different from references to URLs in links.

➢ The actual URL, which can be either absolute or relative, is placed in parentheses and

preceded by url.
66

5. Font Properties
Font
Families

Text Font
Spacing Sizes

Text
Font Variants
Decoration

Font Font
Shorthands Styles

Font
Weights
67

i. Font Families

➢ The font-family property is used to specify a list of font names.


➢ The browser uses the first font in the list that it supports.
➢ Ex: font-family: Arial, Helvetica, Futura
➢ A generic font can be specified as a font-family value.
➢ If a font name has more than one word, the whole name should be delimited by single quotes.
➢ Ex: font-family: 'Times New Roman’ {Recommended}
68

Font Families - Code

<!DOCTYPE html>
<html>
<head>
<title>Font Families</title>
<style type="text/css">
div p{font-family: 'Times New Roman';font-size: 30pt;}
p{font-family: monospace;font-size: 50pt;}
</style>
</head>
<body>
<p>National Award Winners</p>
<div>
<p>Rakshith Shetty</p>
<p>Allu Arjun</p>
</div>
<p>Kriti Sanon</p>
<p>Alia Bhatt</p>
</body>
</html>
69

Font Families – Code - Output


70

ii. Font Sizes

➢ The font-size property specifies the size of the font.

➢ Absolute: the size value could be given as a length value in points, picas, or pixels, or as a keyword

from the list: xx-small, x-small, small, medium, large, x-large, and xx-large.

➢ Relative: The relative size values are smaller and larger, which adjust the font size relative to the

font size of the parent element.

➢ Problem with the keyword sizes is that the size relationship between adjacent keywords is not

exactly the same on different browsers.


71

Font Sizes - Code

<!DOCTYPE html>
<html>
<head>
<title>Font Sizes</title>
<style type="text/css">
div p{font-family: 'Times New Roman';font-size: small;}
p{font-family: monospace;font-size: 50%;}
</style>
</head>
<body>
<p>National Award Winners</p>
<div>
<p>Rakshith Shetty</p>
<p>Allu Arjun</p>
</div>
<p>Kriti Sanon</p>
<p>Alia Bhatt</p>
</body>
</html>
72

Font Sizes – Code - Output


73

iii. Font Variants

➢ The default value of the font-variant property is normal, which specifies the usual

character font.

➢ This property can be set to small-caps to specify small capital letters.

➢ These are all uppercase, but the letters that are normally uppercase are a bit larger than

those that are normally lowercase.


74

Font Variants - Code


<!DOCTYPE html>
<html>
<head>
<title>Font Variants</title>
<style type="text/css">
div p{font-size: 30pt;}
p{font-size: 30pt; font-variant: small-caps;}
</style>
</head>
<body>
<p>National Award Winners</p>
<div>
<p>RAKSHITH SHETTY</p>
<p>ALLU ARJUN</p>
</div>
<p>Kriti Sanon</p>
<p>Alia Bhatt</p>
</body>
</html>
75

Font Variants – Code - Output


76

iv. Font Styles

➢ The font-style property is usually used to specify italic:

font-style: italic

➢ oblique: value is almost similar to italic.

➢ normal: value specifies the font to be normal style.


77

Font Styles - Code

<!DOCTYPE html>
<html>
<head>
<title>Font Styles</title>
<style type="text/css">
h2{color: red; font-style: oblique;}
p{font-size: 30pt; font-style: italic;}
</style>
</head>
<body>
<h2>National Award Winners - MUSIC</h2>
<p>DEVI SRI PRASAD</p>
<p>KALA BHAIRAVA</p>
<p>SHREYA GHOSHAL</p>
</body>
</html>
78

Font Styles – Code – Output


79

v. Font Weights

➢ The font-weight property is used to specify the degree of boldness:


font-weight: bold
➢ Besides bold:
→ normal (default)
→ bolder
→ lighter
➢ Specific numbers also can be given in multiples of 100 from 100 to 900, where 400 is
the same as normal and 700 is the same as bold.
80

Font Weights - Code


<!DOCTYPE html>
<html>
<head>
<title>Font Weights</title>
<style type="text/css">
h1{color: blue; font-weight: lighter;}
h2{color: red; font-weight: bold;}
p{font-size: 30pt; font-weight: bolder;}

</style>
</head>
<body>
<h1>2023 Awards</h1>
<h2>National Award Winners - MUSIC</h2>
<p>DEVI SRI PRASAD</p>
<p>KALA BHAIRAVA</p>
<p>SHREYA GHOSHAL</p>
</body>
</html>
81

Font Weights – Code - Output


82

vi. Font Shorthands

➢ If more than one font property must be specified, the values can be stated in a list as the

value of the font property.

➢ The browser then determines which properties to assign from the forms of the values.

font: bold 1.1em 'Times New Roman' Palatino

➢ The above property specifies that the font weight should be bold, the font size

{second to last} should be 1.1 times that of its parent element, and either Times New

Roman or Palatino font name {last} should be used, with precedence given to Times

New Roman.
83

Font Shorthands - Code

<!DOCTYPE html>
<html>
<head>
<title>Font Shorthands</title>
<style type="text/css">
h2{color: red;}
p{font: bolder 32px 'Open Sans', sans-serif;}

</style>
</head>
<body>
<h2>National Award Winners - MUSIC</h2>
<p>DEVI SRI PRASAD</p>
<p>KALA BHAIRAVA</p>
<p>SHREYA GHOSHAL</p>
</body>
</html>
84

Font Shorthands – Code - Output


85

vii. Text Decoration

➢ The text-decoration property is used to specify some special features of

text.

➢ The available values are line-through, overline, underline, and

none, which is the default. Many browsers implicitly underline links.

➢ The none value can be used to avoid this underlining.


86

Text Decoration - Code

<!DOCTYPE html>
<html>
<head>
<title>Text Decoration</title>
<style type="text/css">
p.one{font-size: 50pt; color: red ; text-decoration: line-through;}
p.two{font-size: 30pt; color: green ; text-decoration: underline;}
p.three{font-size: 30pt; color: purple ; text-decoration: overline;}
</style>
</head>
<body>
<p class="one"> My Favourite Series </p>
<p class="two"> Friends </p>
<p class="three"> Breaking Bad </p>
</body>
</html>
87

Text Decoration – Code - Output


88

viii. Text Spacing

Text Spacing

letter-spacing line-height
word-spacing
(Tracking) (Leading)

letter-spacing: 1px word-spacing: 1px


line-height: 24px
Spreads the letters Spreads the words

letter-spacing: -1px
word-spacing: -1px
Squeezes the
Squeezes the words
letters
89

Text Spacing - Code


<!DOCTYPE html>
<html>
<head>
<title>Text Spacing</title>
<style type="text/css">
p.one{font-size: 50pt; color: red ; letter-spacing: 2px;}
p.two{font-size: 30pt; color: green ; letter-spacing: -2px;}
p.three{font-size: 30pt; color: purple ; word-spacing: 2px;}
p.four{font-size: 30pt; color: blue ; word-spacing: -2px;}
p.five{font-size: 30pt; color: grey ; line-height: 24px;}
</style>
</head>
<body>
<p class="one"> My Favourite Series </p>
<p class="two"> Friends: Chandler is best.</p>
<p class="three"> Breaking Bad: I know a guy who knows a guy.</p>
<p class="four"> Suits: You always have a choice.</p>
<p class="five"> Game of Thrones: Winter is coming.<br>House of Dragons Season 2 coming soon</p>

</body>
</html>
90

Text Spacing – Code - Output


91

6. List Properties

➢ Two presentation details of lists can be specified in HTML documents: the shape of the bullets
that precede the items in an unordered list and the sequencing values that precede the items in
an ordered list.

➢ The list-style-type property is used to specify both of these.

➢ If list-style-type is set for a ul or an ol tag, it applies to all of the list items in the list.

➢ If a list-style-type is set for an li tag, it only applies to that list item.

➢ The list-style-type property of an unordered list can be set to disc (the default), circle,
square, or none.

➢ A disc is a small filled circle, a circle is an unfilled circle, and a square is a filled square.
92

Unordered List – Code1

<!DOCTYPE html>
<html>
<head>
<title>Unordered List1</title>
<style type="text/css">
ul{font-size: 30pt; color: red;}
</style>
</head>
<body> By Default, disc – bullet is
<h1>Programming languages</h1>
<ul>
considered for unordered list
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
</ul>
</body>
</html>
93

Unordered List – Code1 - Output


94

Unordered List – Code2

<!DOCTYPE html>
<html>
<head>
<title>Unordered List2</title>
<style type="text/css">
ul{font-size: 30pt; color: blue; list-style-type: square;}
</style>
</head>
<body>
<h1>Programming languages</h1>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li> Here, list-style-type is square.
</ul>
</body>
</html>
95

Unordered List – Code2 - Output


96

Unordered List – Code3

<!DOCTYPE html>
<html>
<head>
<title>Unordered List3</title>
<style type="text/css">
ul{font-size: 30pt; color: blue; list-style-type: circle;}
</style>
</head>
<body>
<h1>Programming languages</h1>
<ul>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li> Here, list-style-type is circle.
</ul>
</body>
</html>
97

Unordered List – Code3 - Output


98

Unordered List – Code4


<!DOCTYPE html>
<html>
<head>
<title>Unordered List4</title>
<style type="text/css">
li.one{font-size: 30pt; color: blue;}
li.two{font-size: 30pt; color: red; list-style-type: circle;}
li.three{font-size: 30pt; color: green; list-style-type: square;}
li.four{font-size: 30pt; color: purple; list-style-type: none;}
</style>
</head>
<body>
<h1>Programming languages</h1>
<ul>
<li class="one">C</li> Here, list-style-type is given for
<li class="two">C++</li>
<li class="three">Java</li> individual items.
<li class="four">Python</li>
</ul>
</body>
</html>
99

Unordered List – Code4 - Output


100

Unordered List – Code5


<!DOCTYPE html>
<html>
<head>
<title>Unordered List5</title>
<style type="text/css">
li.one{font-size: 20pt; list-style-image: url(one.png);}
li.two{font-size: 20pt; list-style-image: url(two.png);}
li.three{font-size: 20pt; list-style-image: url(three.png);}
li.four{font-size: 20pt; list-style-image: url(four.png);}
</style>
</head>
<body>
<h1>Programming languages</h1>
<ul>
<li class="one">C</li> Here, list-style-image property
<li class="two">C++</li>
<li class="three">Java</li> is used.
<li class="four">Python</li>
</ul>
</body>
</html>
101

Unordered List – Code5 - Output


102

Ordered List

➢ The list-style-type property can be used to specify the types of sequence values.
103

Ordered List – Code1

<!DOCTYPE html>
<html>
<head>
<title>Ordered List1</title>
<style type="text/css">
ul{font-size: 30pt; color: red;}
</style>
</head>
<body> By Default, numbers from 1 is
<h1>Programming languages</h1>
<ol>
considered for ordered list
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
</ol>
</body>
</html>
104

Ordered List – Code1 - Output


105

Ordered List – Code2

<!DOCTYPE html>
<html>
<head>
<title>Ordered List2</title>
<style type="text/css">
li{font-size: 30pt; color: blue; list-style-type: upper-alpha;}
</style>
</head>
<body>
<h1>Programming languages</h1>
<ol>
<li>C</li>
<li>C++</li>
<li>Java</li>
<li>Python</li>
</ol>
</body>
</html>
106

Ordered List – Code2 - Output


107

Implement HTML code for the given output.


108

Exercise - Solution

<!DOCTYPE html> <body>


<html> <h1>MOVIES</h1>
<head> <ol>
<title>Exercise</title> <li> KANNADA </li>
<style type="text/css"> <ol>
<li>KGF</li>
h1{font-size: 40pt; color: red;} <ol>
<li>Chapter-1</li>
ol{font-size: 30pt; list-style-type: <li>Chapter-2</li>
upper-roman; color: blue;} </ol>
<li>SSE</li>
ol ol{font-size: 30pt; list-style-type: <ol>
upper-alpha; color: purple;} <li>Side-A</li>
<li>Side-B</li>
ol ol ol{font-size: 30pt; list-style- </ol>
type: lower-roman; color: hotpink;} </ol>
</ol>
</style> </body>
</head> </html>
109

7. Color

Color Groups

3 Groups

Web Palette –
17 Colors 147 Colors
216 Colors
110
Color Properties - Code

<!DOCTYPE html> <table border="1" width="60%">


<html> <tr>
<head> <th>Subjects</th>
<title>Color</title> <th>Module1</th>
<th>Module2</th>
<style type="text/css"> </tr>
th{color: red; font-size: 20pt;} <tr>
td.green{color: green; font-size: 20pt;} <td class="green">FSD</td>
td.purple{color: purple; font-size: 20pt;} <td class="purple">HTML</td>
td.hotpink{color: hotpink; font-size: 20pt;} <td class="hotpink">CSS</td>
</style> </tr>
<tr>
</head> <td class="green">DMGT</td>
<body> <td class="purple">SETS</td>
<td class="hotpink">RELATIONS</td>
</tr>
</table>
</body>
</html>
111
Color Properties – Code - Output
112

8. Alignment of Text

➢ The text-indent property can be used to indent the first line of a paragraph. This property takes

either a length or a percentage value.

➢ The text-align property, most commonly used keyword values are left, center, right, and justify, is

used to arrange text horizontally.

➢ The float property is used to specify that text should flow around some element, often an image or a

table. The possible values for float are left, right, and none, which is the default.
113
Alignment of Text - Code

<!DOCTYPE html> <body>


<html> <h1>Dayananda Sagar University</h1>
<head> <p>
<title>Alignmnet of Text</title> <img src="one.png" alt="error"/>
<style type="text/css"> </p>
About College
h1{text-align: center;}
p.one{text-indent: 0.5in; text-align: justify;} <p class="one">Dayananda Sagar Institutions
img{float:right} founded in the 60s by one such visionary, late Sri
Dayananda Sagar committed to take knowledge to the
</style> people, transforms today’s students into responsible
</head> citizens and professional leaders of tomorrow.</p>

</body>
</html>
114

Alignment of Text – Code - Output


115

9. Background Images

➢ The background-image property is used to place an image in the background of an element.

➢ The background image is replicated as necessary to fill the area of the element. This replication is

called tiling.

➢ Tiling can be controlled with the background-repeat property, which can take the value repeat (the default),

no-repeat, repeat-x, or repeat-y.

➢ The no-repeat value specifies that just one copy of the image is to be displayed.

➢ The repeat-x value means that the image is to be repeated horizontally; repeat-y means that the image is to be

repeated vertically.
116

Background Images

➢ The position of a non repeated background image can be specified with the background-position property,

which can take a large number of different values.

➢ The keyword values are top, center, bottom, left, and right, all of which can be used in combinations.

➢ It is easiest to use one keyword to specify the horizontal placement and one to specify the vertical placement,

such as top left, bottom right, and top center.

➢ If only one keyword is given, the other is assumed to be center. So, top is equivalent to top center (or center

top), and left is the same as center left (or left center).
117

Background Images – Code1


<!DOCTYPE html>
<html>
<head>
<title>Background Image1</title>
<style type="text/css">
body {background-image: url(one.png); background-size: 375px 300px;}
p {font-size: 40pt; text-align: justify;}
</style>
</head>
<body>
<h1>Dayananda Sagar University</h1>
<p class="one">Dayananda Sagar Institutions founded in the 60s by one such visionary, late Sri
Dayananda Sagar committed to take knowledge to the people, transforms today’s students into responsible
citizens and professional leaders of tomorrow.</p>
</body>
</html>
118

Background Images – Code1 - Output


119

Background Images – Code2


<!DOCTYPE html>
<html>
<head>
<title>Background Image2</title>
<style type="text/css">
p.one {background-image: url(one.png); background-repeat: repeat-x;}
p.two {background-image: url(two.png); background-repeat: repeat-y;}
</style>
</head>
<body>
<h1>Dayananda Sagar University</h1>
<p class="one">Dayananda Sagar Institutions founded in the 60s by one such visionary, late Sri
Dayananda Sagar.</p>
<p class="two">He was committed to take knowledge to the people, transforms today’s students into
responsible citizens and professional leaders of tomorrow. He was committed to take knowledge to the people,
transforms today’s students into responsible citizens and professional leaders of tomorrow. He was committed to
take knowledge to the people, transforms today’s students into responsible citizens and professional leaders of
tomorrow.</p>
</body>
</html>
120

Background Images – Code2 - Output


121

Background Images – Code3 - URL


<!DOCTYPE html>
<html>
<head>
<title>Background Image3</title>
<style type="text/css">
p {background-image: url("C:\\Users\\kvsuv\\OneDrive\\Desktop\\DSU\\FSD\\Module
2\\one.png"); background-size: 375px 300px;}
p {font-size: 40pt; text-align: justify;}
</style>
</head>

<body>
<h1>Dayananda Sagar University</h1>
<p class="one">Dayananda Sagar Institutions founded in the 60s by one such visionary, late Sri
Dayananda Sagar committed to take knowledge to the people, transforms today’s students into responsible
citizens and professional leaders of tomorrow.</p>
</body>
</html>
122

Background Images – Code3 – URL - Output


123

<span>

➢ In many situations , we want to apply special font properties to less than a whole paragraph of text
may be for a single word.

➢ By default, span doesn’t have any implied layout.


124

<span> - Code
<!DOCTYPE html>
<html>
<head>
<title>Span</title>
<style type="text/css">
p{font-size: 20pt;}
.one{font-size: 30pt; color: red;}
</style>
</head>
<body>
<p> My favourite subject is <span class="one">FSD</span></p>
</body>
</html>
125

<span> - Code - Output


126

<div>

➢ We can apply a style to a section of document rather than to each paragraph . This can be done with
the <div> tag.

➢ By default, span doesn’t have implied layout.


127

<div> - Code
<!DOCTYPE html>
<html>
<head>
<title>Div</title>
<style type="text/css">
.one{font-size: 30pt; color: red;}
.two{font-size: 25pt; color: blue;}
</style>
</head>
<body>
<div class="one">
<p> My favourite subject is FSD</p>
<p> My favourite module is CSS</p>
</div>
<div class="two">
<p> My favourite subject is FSD</p>
<p> My favourite module is CSS</p>
</div>
</body>
</html>
128

<div> - Code - Output


129

10. Conflict Resolution

1. When style sheets at 2 or more levels specify different value for same property on some element.

➢ The inline level gets the highest priority over the document level.

➢ The document level gets the higher priority over the external level.
130

Conflict Resolution

2. A property value conflict may occur within a single style sheet. Consider the following style specifications,

which are next to each other in the same document-level style sheet:

• h3 {color: blue;}

• body h3 {color: red;}

➢ Both these specifications apply to all h3 elements in the body of the document.

➢ The browser has to resolve this conflict


131

Conflict Resolution

3. Another source of conflict can arise from the fact that there can be several different origins of the

specification of property values.

➢ For example, they may come from a style sheet written by the author of the document itself but they may

come from the browser user and from the browser.


132

Conflict Resolution

The property value specifications can be marked as being important by including !important in the

specification. For example, in the specification:

p.special {font-style: italic !important; font-size: 1.2em}


133

Conflict Resolution

The process of conflict resolution is a multi stage process.

Step 1: Gather information about levels of style sheet. All the origins and weights are sorted. The following

rules are considered: The precedence is followed as below:


1. Important declarations with user origin
2. Important declarations with author origin
3. Normal declarations with author origin
4. Normal declarations with user origin
5. Any declarations with browser (or other user agent) origin.
134

Conflict Resolution

The process of conflict resolution is a multi stage process.

Step 2: If there are other conflicts even after sorting ,The next step is sorting by specificity. Rules are:
1. id selectors
2. Class and pseudo class selectors
3. Contextual selectors (more element type names means that they are more specific)
4. Universal selectors

➢ If there still conflicts, they are resolved by giving precedence to most recently seen specification.

• The whole sorting process that is used to resolve style specification conflicts is called the cascade.
135

Conflict Resolution

➢ Inheritance is another source of property-value conflicts; although as we already know, the inherited

property value is always overridden by the property value given to the descendant element.

➢ A child element always inherits the styles of the parent element, unless declared otherwise separately. Even

here, if the declarations are not in conflict, they simply merge.


136

Conflict Resolution – Inheritance - Code

<!DOCTYPE html>
<html>
<head>
<title>Inheritance</title>
<style type="text/css">
.one{font-size: 30pt; color: red;}
.two{font-size: 25pt; color: blue;}
.three{font-size: 25pt; color: hotpink;}
</style>
</head>
<body>
<p class="one">
<p class="two"> My favourite subject is FSD</p>
</p>
<p class="one">
<p class="two three"> My favourite subject is FSD</p>
</p>
</body>
</html>
137

Conflict Resolution – Inheritance – Code - Output


138

11. CSS - Box Model

➢ Virtually all document elements can have borders with various styles, such as color and width.

➢ The amount of space between the content of an element and its border, known as padding, can be
specified, as well as the space between the border and an adjacent element, known as the margin.
This model, called the box model.

Figure: The Box Model


139

Borders

Border-style → border-top-style, border-bottom-style, border-left-style, border-right-style

Values → dotted, dashed, solid, double

Border-width → border-top-width, border-bottom-width, border-left-width, border-right-width

Values → thin, medium, thick

Border-color → border-top-color, border-bottom-color, border-left-color, border-right-color


140

Borders

The shorthand for setting the style properties of all four borders of an element, border.

border: 5px solid blue;

The equivalent code is:

border_width: 5px; border-style: solid; border-color: blue;

The cells of a table can have borders, like any other element:

td, th {border: thin solid black;}


141

Borders - Code

<!DOCTYPE html> <table border=“border”>


<html> <tr>
<head> <th>Subjects</th>
<title>Borders</title> <th>Module1</th>
<th>Module2</th>
<style type="text/css"> </tr>
td, th {border: thin solid black;} <tr>
table{border: thin solid black; <td class="green">FSD</td>
border-collapse: collapse; <td class="purple">HTML</td>
border-top-width: medium; <td class="hotpink">CSS</td>
border-bottom-width: thick; </tr>
border-top-color: red; <tr>
border-bottom-color: blue; <td class="green">DMGT</td>
border-top-style: dotted; <td class="purple">SETS</td>
border-bottom-style: dashed;} <td class="hotpink">RELATIONS</td>
</style> </tr>
</table>
</head> </body>
<body> </html>
142

Borders – Code - Output


143

Margins and Padding

➢ Padding is the space between the content of an element and its border.

➢ Margin is the space between the border of an element and the element’s neighbors.

➢ When there is no border, the margin plus the padding is the space between the content of an element and its
neighbors.

➢ There is a difference when the element has a background: The background extends into the padding, but not
into the margin.

➢ Margin Properties → margin → margin-left, margin-right, margin-top, and margin-bottom.

➢ Padding Properties → padding → padding-left, padding-right, padding-top, and padding-bottom.


144

Margins and Padding - Code

<!DOCTYPE html> <body>


<html> <p class="one">Dayananda Sagar Institutions
<head> founded in the 60s by one such visionary, late Sri
<title>Margins and Padding</title> Dayananda Sagar committed to take knowledge to the
people, transforms today’s students into responsible
<style type="text/css"> citizens and professional leaders of tomorrow. </p>
p.one{margin: 15px; padding: 15px;
background-color:red; border-style:solid;} <p class="two">Dayananda Sagar Institutions
founded in the 60s by one such visionary, late Sri
p.two{margin: 35px; padding: 25px; Dayananda Sagar committed to take knowledge to the
background-color:hotpink; border-style:solid;} people, transforms today’s students into responsible
</style> citizens and professional leaders of tomorrow. </p>

</head> </body>
</html>
145

Margins and Padding – Code - Output


146

12. CSS3 Features - Box Shadow

➢ The box-shadow property attaches one or more shadows to an element.

Value Description
None Default value, No shadow is displayed

H-offset The horizontal offset of the shadow. A positive value puts the shadow on the
right side of a Box. A negative value puts the shadow on left side of the box.

V-offset The vertical offset of the shadow. A positive value puts the shadow below
the box. A negative value puts the shadow above the box.

Blur Optional. The blur radius ,the higher the number ,the more blurred the
shadow will be.

Color The color of the shadow, the default value is text color.
147

Box Shadow – Code

<!DOCTYPE html>
<html>
<head>
<style>
#ex1{border: 1px solid; padding: 10px; box-shadow: 5px 10px 8px blue;}
#ex2{border: 1px solid; padding: 10px; box-shadow: -5px -10px 28px red;}
</style>
</head>

<body>

<p id="ex1">My fav sub is FSD</p> <br> <br>


<p id="ex2">My fav food is Maggie</p>

</body>
</html>
148

Box Shadow – Code - Output


149

12. CSS3 Features - Opacity

➢ The opacity property specifies the opacity/transparency of an element.

➢ Opacity value can take a value from 0.0 -1.0. The lower value, the more transparent.
150

CSS3 Features – Opacity – Code1


<!DOCTYPE html>
<html>
Image with no opacity
<head>
<title> Opacity1 </title>
</head>

<body>
<h1> Image Transparency </h1>
<p> Image with NO opacity </p>
<img src="one.png" alt="One" width="200" height="150">
</body>
</html>
151

CSS3 Features – Opacity – Code1 - Output


152

CSS3 Features – Opacity – Code2


<!DOCTYPE html>
<html>
Image with 40% opacity
<head>
<title> Opacity2 </title>
<style>
img{opacity: 0.4;}
</style>
</head>
<body>
<h1> Image Transparency </h1>
<p> Image with 40% opacity </p>
<img src="one.png" alt="One" width="200" height="150">
</body>
</html>
153

CSS3 Features – Opacity – Code2 - Output


154

12. CSS3 Features – Rounded Corners

➢ With the CSS border-radius property, we can give any element “Rounded Corners”.
155

Rounded Corners - Code

<!DOCTYPE html>
<html>
<head>
<title> Rounded Corners </title>
<style>
#rcorners1{border-radius: 25px; padding: 20px; background: #73AD21; width: 200px; height: 150px;}
#rcorners2{border-radius: 45px; padding: 20px; border: 2px solid #73AD21; width: 200px; height: 150px;}
#rcorners3 {border-radius: 25px; padding: 20px; background: url(one.png); background-position: left top;
width: 200px; height: 150px;}
</style>
</head>
156

Rounded Corners - Code

<body>
<h1>The border-radius Property</h1>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rcorners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rcorners2">Rounded corners!</p>
<p>Rounded corners for an element with a background image:</p>
<p id="rcorners3">Rounded corners!</p>
</body>
</html>
157

Rounded Corners – Code - Output


158

12. CSS3 Features – Attribute Selector

➢ Styling HTML elements with specific Attributes:

It is possible to Style HTML elements that have specific Attributes or Attribute values.

➢ CSS [Attribute] selector

The [attribute] selector is used to select elements with a specified attribute.

Ex: The following example selects all <a> elements with a target attribute

a[target]{

background-color :yellow;

}
159

Attribute Selector – Code


<!DOCTYPE html>
<html>
<head>
<title> Attribute Selectors </title>
<style>
a[target] {background-color: yellow;}
</style> </head>
<body>
<h1> Attribute Selectors </h1>
<p>The links with a target attribute gets a yellow background </p>
<a href="https://www.google.com">Google</a>
<a href="http://www.fb.com" target>Facebook</a>
</body>
</html>
160

Attribute Selector – Code - Output


161

THANK YOU

You might also like