Chapterrr_8_Introduction to CSS.pptx.pdf

Good education material

1. Using CSS to Style a Site



Institute of Technical Education and Research (ITER),
Siksha 'O' Anusandhan University (SOA University)

Modern Web Development Workshop - 1

2. ➢Using Cascading Style Sheets (CSS), you can apply
styles to your web pages to make them look exactly
how you want.
➢It can control the layout of multiple web pages all at
once
➢With CSS and its integration with the DOM, you can
quickly and easily restyle any element.
➢A CSS rule consists of a selector and a declaration
block.
CSS Introduction

3. ➢A CSS selector selects the HTML element(s) you want
to style.
(1)The CSS element/type Selector
■The element selector selects HTML elements based on the
element name/type.

Here, all <p> elements on the page will be center-aligned, with a red text
color

p {
text-align: center;
color: red;
}
CSS Selectors

4. (2) The CSS id Selector
○A better solution for setting the style of an element is to assign
an ID to it in the HTML, like this:
<div id='welcome'>Hello there</div
➢The id of an element is 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.
#welcome { font-style:italic; color:blue; }
➔The CSS rule above will be applied to the HTML element
with id="welcome"
CSS Selectors

5. (3) The CSS class Selector
○If you would like to apply the same style to many elements, you
do not have to give each one a different ID because you can
specify a class to manage them all, like this:
<div class='welcome'>Hello there</div
➢To select elements with a specific class, write a period (.)
character, followed by the class name.
➢Once a class is applied, you can use the following rule,
either in the page header or within an external style‐ sheet,
for setting the styles for the class.
.welcome { font-style:italic; color:blue; }
CSS Selectors

6. (4) The Descendant Selector
○Descendant selectors let we apply styles to elements
that are contained within other elements.
<p><b>Hello</b> there </p>

<style>
p b { color:red; }
</style>
➢The above rule sets all text within <b>...</b> tags to
red, but only if those tags occur within <p>...</p> tags

CSS Selectors

7. (5) The Child Selector
○The child selector is similar to the descendant selector but is
more restrictive about when the style will be applied, by
selecting only those elements that are direct children of another
element.
In Descendant Selector
<p><i><b>Hello</b> there</i></p>
p b { color:red; }
➢The above rule sets all text within <b>...</b> tags to
red, but only if those tags occur within <p>...</p> tags
p > b { color:red; }
●Sets bold text to red only if the element is a direct
child of a paragraph and is not itself contained within
another element.
●Now Hello will not change color because <b> is not a
direct child of <p>
CSS Selectors

8. (5) The Attribute Selector
○It is possible to style HTML elements that have specific
attributes or attribute values.
○The [attribute] selector is used to select elements with a
specified attribute.
a[target] {
background-color: yellow;
}
●The [attribute="value"] selector is used to select elements with a
specified attribute and value
a[target="_blank"] {
background-color: yellow;
}
CSS Selectors

9. (6) The CSS Universal Selector
●The universal selector (*) selects all HTML elements on the page.
* {
text-align: center;
color: blue;
}
(7) The CSS Grouping Selector
●apply a rule to more than one element, class, or any other type of
selector at the same time by separating the selectors with
commas.
h1, h2, p {
text-align: center;
color: red;
}
p, #idname, .classname { border-bottom:1px dotted orange; }
CSS Selectors

10. (6) The CSS Universal Selector
●The universal selector (*) selects all HTML elements on the page.
* {
text-align: center;
color: blue;
}
(7) The CSS Grouping Selector
●apply a rule to more than one element, class, or any other type of
selector at the same time by separating the selectors with
commas.
h1, h2, p {
text-align: center;
color: red;
}
p, #idname, .classname { border-bottom:1px dotted orange; }
CSS Selectors

11. Three Ways to Insert CSS
➢External CSS
○External styles are defined within the <link>
element, inside the <head> section of an HTML
page.
○Change the look of an entire website by
changing just one file.
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
mystyle.css
body {
background-color:
lightblue;
}

h1 {
color: navy;
margin-left: 20px;
}
➢Internal CSS
○The internal style is defined inside the
<style> element, inside the head section
of an HTML page.

<head><style>
body {
background-color: linen;
}
h1 {
color: maroon;margin-left: 40px;
}
</style></head>
➢Inline or Embedded CSS

➢An inline style may be used to apply a unique
style for a single element.
➢Inline styles are defined within the "style"
attribute of the relevant element

<h1
style="color:blue;text-align:cente
r;">This is a heading </h1>
<p style="color:red;">This is a
paragraph.</p>

12. ➢One of the most important aspects of CSS is the cascading order,
which determines the priority of styles applied to an element.
➢Cascading in CSS refers to the way CSS rules are applied to
HTML elements, especially when there are multiple, potentially
conflicting rules. CSS follows a specific order to determine which
styles take precedence.
➢Styles cascade from parent elements to child elements.
○Inline style (inside an HTML element)
○External and internal style sheets (in the head section)
○Browser default
So, an inline style has the highest priority, and will override external
and internal styles and browser defaults.
➢When multiple conflicting styles exist, the one with higher
specificity takes precedence.
What is the Meaning of Cascading in CSS?

13. ➢If there are two or more CSS rules that point to the same element,
the selector with the highest specificity value will "win", and its
style declaration will be applied to that HTML element.
<html>
<head>
<style>
#demo{color: blue;}
.test {color: green;}
p {color: red;}
</style>
</head>
<body>
<p class="test" id="demo">Hello World 1!</p> /*blue*/
<p id="demo" class="test" style="color: pink;">Hello World
2!</p> /*pink*/
</body>
</html>
➔Inline styles have the highest specificity, followed by IDs, classes, and
element selectors.
What is Specificity?

14. ➢There are four categories which define the specificity level of a
selector (the specificity hierarchy):

1.Inline styles - Example: <h1 style="color: pink;">
2.IDs - Example: #navbar
3.Classes, pseudo-classes, attribute selectors - Example: .test,
:hover, [href]
4.Elements and pseudo-elements - Example: h1, ::before

➢Start at 0, add 100 for each ID value, add 10 for each class value
(or pseudo-class or attribute selector), add 1 for each element
selector or pseudo-element.
➢Inline style gets a specificity value of 1000, and is always given
the highest priority!

What is Specificity?

15. The selector with the highest specificity value will win and
take effect!
➢Where two or more style rules are exactly equivalent, only
the most recently processed rule will take precedence.




Calculation of Specificity
Selector Calculation Specificity Value
p 1 1
p.test 1 + 10 11
p#demo 1 + 100 101
<p style="color: pink;">1000 1000
#demo 100 100
.test 10 10
p.test1.test2 1 + 10 + 10 21
#navbar p #demo 100 + 1 + 100 201
* 0 (the universal selector
is ignored)
0

16. Calculation of Specificity
<!DOCTYPE html>
<html>
<head>
<style>
body { font-size: 300%; }
div { font-size: 80%; color:red;}
p { font-size: 80%;color:blue; }
span.smaller { font-size: 80%;
font-weight: bold; color:green;}
#smallest { font-size: 80%; font-weight:
normal; color:gray; }
</style>
</head>
<body>
Hello
<div>
This text is in a div.
<p>This test is in a paragraph.</p>
<p><span class="smaller">This is in a
span with the class “smaller” inside a
paragraph.</span></p>
<p><span class="smaller">
<span id="smallest">This text is
in a span with the ID “smallest”.</span>
</span>
</p>
</div>
</body>
</html>

17. ➢Both <div> and <span> elements are types of container.
➢A <div> element has infinite width (at least to the browser edge) while, a
<span> element is only as wide as the text it contains.

DIV vs. SPAN
<!DOCTYPE html>
<html>
<head>
<title>Div and span example</title>
<style>
div, span { border :1px solid black; }
div { background-color:yellow; }
span { background-color:cyan; }
</style>
</head>
<body>

<div> This text is within a div tag</div>
This isn't. <div> And this is again.</div>
<span> This text is inside a span tag. </span>
This isn't. <span> And this is again. </span>
<div> This is a larger amount of text in a div
that wraps around to the next line of the
browser </div>
<span> This is a larger amount of text in a
span that wraps around to the next line of the
browser </span>
</body>
</html>

18. ➢Many CSS properties take "length" values, such as width,
margin, padding, font-size, etc.
➢CSS supports an impressive range of units of measurement,
enabling you to tailor.
➢There are two types of length units: absolute and relative.
Absolute length:

Measurements
Unit Description
cm centimeters
mm millimeters
in inches (1in = 96px = 2.54cm)
px a single dot on the screen(depend on
viewing device)
pt points (1pt = 1/72 of 1in)
pc picas (1pc = 12 pt)

19. Relative Lengths









* Viewport = the browser window size.
If the viewport is 50cm wide, 1vw = 0.5cm.
Measurements
UnitDescription
em Relative to the font-size of the element (2em means 2 times the size of the current font)
ex Relative to the x-height of the current font (rarely used)
ch Relative to the width of the "0" (zero)
rem Relative to font-size of the root element
vw Relative to 1% of the width of the viewport*
vh Relative to 1% of the height of the viewport*
vminRelative to 1% of viewport's* smaller dimension
vmaxRelative to 1% of viewport's* larger dimension
% Relative to the parent element

20. ➢Colors are specified using predefined color names, or RGB, HEX, HSL,
RGBA, HSLA values.
➢We can apply colors to the foreground and background of text and objects
by using the color and background-color properties
<h1 style="background-color:DodgerBlue;"> Hello World</h1>
<h1 style="color:Tomato;">Hello World</h1>

<h1 style="background-color:rgb(255, 99, 71);"> ...</h1>
<h1 style="background-color:#ff6347;"> ...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);"> ...</h1>

<h1 style="background-color:rgba(255, 99, 71, 0.5);"> ...</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);"> ...</h1>

➢An RGB color value represents RED, GREEN, and BLUE light sources.
○To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
○To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
➢RGBA Value: rgba(255, 99, 71, 0.5) -> rgba(red, green, blue, alpha)
○The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (not
transparent at all).
CSS Colors

21. ➢HEX Value: #rrggbb
○Where rr (red), gg (green) and bb (blue) are hexadecimal values
between 00 and ff (same as decimal 0-255).
○To display black, set all values to 00, like this: #000000.
○To display white, set all values to ff, like this: #ffffff.
○We use #f49, omitting the second hex digit from each pair, which
equates to a color value of #ff4499.

➢HSL Value: hsl(hue, saturation, lightness)
○Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is
green, and 240 is blue.
○Saturation is a percentage value. 0% means a shade of gray, and
100% is the full color.
○Lightness is also a percentage. 0% is black, 50% is neither light or
dark, 100% is white

Ex: hsl(300, 76%, 72%)
CSS Colors

22. ➢In place of using a solid background color, you can choose to apply a gradient,
which will then automatically flow from a given initial color to a final color of
your choice.

➢CSS defines three types of gradients:
○Linear Gradients (goes down/up/left/right/diagonally)
○Radial Gradients (defined by their center)
○Conic Gradients (rotated around a center point)

➢CSS Linear Gradients
○To create a linear gradient you must define at least two color stops. Color
stops are the colors you want to render smooth transitions among. You can
also set a starting point and a direction (or an angle) along with the gradient
effect.
○Direction - Top to Bottom (default)
#grad {
background-image: linear-gradient(red, yellow) ;
}
#grad {
background-image: linear-gradient(to right, red , yellow) ;
}
#grad {
background-image: linear-gradient(to bottom right, red, yellow) ;
}

Gradients

23. ➢A linear gradient (from top to bottom) with multiple color stops.
#grad {
background-image: linear-gradient(red, yellow, green) ;
}




➢CSS Radial Gradients
○To create a radial gradient you must also define at least two color stops.
#grad {
background-image: radial-gradient(red, yellow, green) ;
}
#grad {
background-image: radial-gradient(circle, red, yellow, green) ;
}
Gradients

24. ➢CSS Conic Gradients
○A conic gradient is a gradient with color transitions rotated around a
center point.
○To create a conic gradient you must define at least two colors.
○By default, angle is 0 deg and position is center.
<!DOCTYPE html>
<html>
<head>
<style>
#grad1 {
height: 200px;
width: 200px;
background-image: conic-gradient(red, yellow, green);
}
</style>
</head>
<body>
<h1>Conic Gradient - Three Colors</h1>
<div id="grad1"></div>
</body>
</html>

Gradients

25. ➢A pseudo-class is used to define a special state of an
element.
○Style an element when a user mouses 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;
}

Pseudo Classes

26. /* unvisited link */
a:link {
color: #FF0000;
}
/* visited link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}


Anchor Pseudo-classes
➔a:hover MUST come after a:link and a:visited in
the CSS definition in order to be effective!
➔a:active MUST come after a:hover in the CSS
definition in order to be effective!

27. ➢A CSS pseudo-element is used to style specified parts of an element.
○Style the first letter, or line, of an element
○Insert content before, or after, the content of an element
p::first-line {
color: #ff0000;
font-variant: small-caps;
}
p::first-letter {
color: #ff0000;
font-size: xx-large;
}
➢The ::before pseudo-element can be used to insert some content
before the content of an element.
h1::before {
content: url(smiley.gif);
}
Pseudo Elements

28. ➢The ::after pseudo-element can be used to insert some content after the
content of an element.
h1::after {
content: url(smiley.gif);
}
➢The ::marker pseudo-element selects the markers of list items.
::marker {
color: red;
font-size: 23px;
}

➢The ::selection pseudo-element matches the portion of an element that is
selected by a user.
::selection {
color: red;
background: yellow;
}
Pseudo Elements

29. Pseudo Elements

30. Pseudo The next sibling selector (+)
➔The selector h1 + p matches the
first paragraph that follows a
first level heading, assuming
they both have the same parent.

31. ➢The CSS border properties allow you to specify the style, width,
and color of an element's border.
➢CSS Border Style
○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
CSS Borders

32. ➢CSS 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 predefined values: thin, medium,
or thick.
○The border-width property can have from one to four values
(for the top border, right border, bottom border, and the left
border)
p.three {
border-style: solid;
border-width: 25px 10px 4px 35px ; /* 25px top, 10px right, 4px
bottom and 35px left */
}
p.two {
border-style: solid;
border-width: 20px 5px; /* 20px top and bottom, 5px on the sides */
}
CSS Borders

33. ➢CSS Border Color
p.one {
border-style: solid;
border-color: red;
}
p.one {
border-style: solid;
border-color: red green blue yellow ; /* red top, green right,
blue bottom and yellow left */
}
➢CSS Rounded Borders
○The border-radius property is used to add rounded borders to
an element:
p {
border: 2px solid red;// CSS Shorthand Border Property
border-radius: 5px;
}
CSS Borders

34. ➢To shorten the code, it is also possible to specify all the individual border properties in
one property.

➢The border property is a shorthand property for the following individual border
properties.
○border-width
○border-style (required)
○border-color
p {
border: 5px solid red;
}

P{
border-width: 1px 2px 3px 4px; //top right bottom left
border-style: solid dashed groove dotted ;
}

p {
border-left: 5px solid red;
border-right: 5px dotted green;
border-top: 5px dotted blue;
border-bottom: 15px dotted green;
}

CSS Shorthand Border

35. ➢All HTML elements can be considered as boxes.
➢The CSS box model is essentially a box that wraps around every
HTML element. It consists of: content, padding, borders and margins.
The image below illustrates the box model
➢Content - The content of the box, where text and images appear
➢Padding - Clears an area around the content. The padding is transparent
➢Border - A border that goes around the padding and content
➢Margin - Clears an area outside the border. The margin is transparent

The Box Model and Layout

36. ➢CSS Margins
○Margins 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
The Box Model and Layout

37. ➢CSS Margins
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}

div {
width: 300px;
margin: auto;
border: 1px solid red;
}
➢CSS Padding
○The CSS padding properties are used to generate space around an
element's content, inside of any defined borders.
The Box Model and Layout

38. ➢CSS Padding
○CSS has properties for specifying the padding for each side of
an element:
■padding-top
■padding-right
■padding-bottom
■padding-left
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
div {
padding: 25px 50px 75px 100px ;
}
The Box Model and Layout

39. Example:


<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
height: 50px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>

<h2>Calculate the total width:</h2>

<img src="klematis4_big.jpg" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is
also 350px. The total height of this element is 80px.</div>

</body>
</html>













The Box Model and Layout

40. ➢Each element is, by default, either a block element or an inline element, but
CSS provides the display property to allow you to change this behavior.
➢The block property supports values: block, inline, inline-block, and none.












CSS Display

41. CSS Display

42. CSS Display

43. ➢The max-width property defines the maximum width of an
element.
➢If the content is larger than the maximum width, it will
automatically change the height of the element.
➢If the content is smaller than the maximum width, the
max-width property has no effect.
➢The min-width property defines the minimum width of an
element.
➢If the content is smaller than the minimum width, the minimum
width will be applied.
➢If the content is larger than the minimum width, the min-width
property has no effect.

CSS max-width and min-width Properties

44. CSS max-width example

45. CSS min-width example

46. ➢The overflow property specifies what should happen if content overflows an
element's box.
➢This property specifies whether to clip content or to add scrollbars when an
element's content is too big to fit in a specified area.

○overflow: visible|hidden|clip|scroll|auto|initial|inherit;












CSS overflow Property
<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}</style>
</head>
<body>
<h2>overflow: scroll:</h2>
<div class="ex1">The overflow is clipped, but a
scroll-bar is added to see the rest of the
content</div>
</body>
</html>

47. CSS overflow Property

48. ➢The float CSS property places an element on the left or right side of
its container, allowing text and inline elements to wrap around it.

CSS float Property

49. CSS float Example
Float: none
Float: left
Float: right

50. 1.(i) Use CSS to create a box around a div with a 2px solid border, 20px of padding, and a
10px margin.
(ii) Set a maximum width of 600px for the box, and ensure the content doesn’t overflow the
box's boundaries.

2.Border Experiment
Objective: Create an element with different border styles and rounded corners.
Instructions:
●Create two div with dimensions of 200px by 200px with linear and radial background
respectively.
●Apply different border styles (solid, dashed, dotted, double) to each side of the div.
●Add a border radius of 30px to make the corners rounded.
●Can you create a circular div by adjusting the border-radius?

3.Pseudo-classes Experiment
Objective: Use pseudo-classes to add interactivity and dynamic styling.
Instructions:
●Create a ordered list of links.
●Use :hover to change the color and increase the font size when hovering over a link.
●Use :nth-child() to style only specific items in a list such as display alternative color in
item of list.

Quiz and Assignments

51. 4.(i) Use flexbox to create a simple layout where three divs are aligned in a row with
equal width.
(ii) How would you use CSS grid to create a two-column layout where the first
column takes up 30% of the width and the second column takes up 70%?
5.Float Experiment
Objective: Create a layout with floated elements and understand how floating
affects the layout.
Instructions:
●Create two div elements and float them to the left.
●Ensure both divs are displayed side by side.
●Create a third div below the floated elements and apply clear: both; to it

6.Overflow Experiment
Objective: Observe the behavior of content overflow inside an element.
Instructions:
●Create a div with a fixed height and width.
●Add content that exceeds the size of the div.
●Experiment with the values overflow: visible;, overflow: hidden;, overflow:
scroll;, and overflow: auto;.

Quiz and Assignments

52. 7.Float Experiment
Objective: Create a layout with floated elements and understand how floating affects the
layout.
Instructions:
●Create two div elements and float them to the left.
●Ensure both divs are displayed side by side.
●Create a third div below the floated elements and apply clear: both; to it

8.Overflow Experiment
Objective: Observe the behavior of content overflow inside an element.
Instructions:
●Create a div with a fixed height and width.
●Add content that exceeds the size of the div.
●Experiment with the values overflow: visible;, overflow: hidden;, overflow: scroll;,
and overflow: auto;.

9.Menubar Experiment
Objective: Create a navigation menu at the top of the page.
●Create a div with background color for the menu bar.
●Create a list of links with background color within the div horizontally.
●Apply :hover to change the background and font color of links.

Quiz and Assignments

53. 10.Measurement Experiment
●What is the difference between absolute units (like px) and relative units (like
em, rem, %)? Provide examples where you might use each.
●Set the font size of an element to be 2 times the size of its parent using relative
units.


Quiz and Assignments

54. Thank You