CSS Lecture Slides 24102022 012810pm

CSS(Cascading Style Sheet)
What is CSS?
CSS stands for Cascading Style Sheets,
Design language intended to simplify the process of
making web pages presentable
handles the look and feel part of a web page
Advantages of CSS
CSS saves time

Pages load faster
Easy maintenance
Superior styles to HTML
Multiple Device Compatibility
Global web standards
SYNTAX
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 the value either red or #F1F1F1
etc.
selector { property: value }

Way of using CSS
Inline Style Sheet
Internal Style Sheet
External Style Sheet
Inline Style Sheet
Style attribute is used inside an HTML tag for inline
style sheet,
<element style="...style rules....">
Example:
<h1 style ="color:black;"> This is inline CSS </h1>
Output:
This is inline CSS
Internal Style Sheet
<head>
<style type="text/css">
Style Rules
............
</style>
</head>
Internal Style Sheet(Cont…)
Example:
<head>
h1{
color: balck;
}
</style>
</head>
Output:
This is inline CSS
External Style Sheet
Example :
Consider a simple style sheet file with a name mystyle.css having the
following rules:
h1, h2, h3 {
color: black;
font-weight: normal;
letter-spacing: .4em;
margin-bottom: 1em;
text-transform: lowercase;
}
External Style Sheet(Cont…)
Now you can include this file mystyle.css in any
HTML document as follows:
<head>
<link href="mystyle.css“ rel="stylesheet"/>
</head>
Priorities of Style Sheet
Inline
Internal
External
CSS Comments
/* This is an external style sheet file */
h1, h2, h3 {
color: #36C;
margin-bottom: 1em;
text-transform: lowercase;
}
/* end of style rules. */
Selectors
Class selector
Id selector
Descendant Selector
Child Selectors
Attribute Selectors
Grouping Selectors
Class selector
.red
{
color: red;
}
<h1 class=“red”> Black heading</h1>

<h1 class=“red”> Second heading</h1>
<p class=“red”>abc</p>
<h1 class=“red”> Third heading</h1>
Id selector
#red
{
color: red;
}
<h1 id=“red”> Black heading</h1>

Descendant Selector
Suppose you want to apply a style rule to a particular
element only when it lies inside a particular element.
As given in the following example, the style rule will
apply to <li> element only when it lies inside the <ul>
tag.
ul li
{
color: red;
}
Child Selectors
body > p
{
color: #000000;
}
This rule will render all the paragraphs in black if they

are a direct child of the <body> element. Other
paragraphs put inside other elements like <div> or
<td> would not have any effect of this rule.
Attribute Selectors
input[type="text"]
{
color: #000000;
}
p[lang] - Selects all paragraph elements with a lang attribute.

p[lang="fr"] - Selects all paragraph elements whose lang attribute
has a value of exactly "fr".
p[lang~="fr"] - Selects all paragraph elements whose lang attribute
contains the word "fr".
p[lang|="en"] - Selects all paragraph elements whose lang attribute
contains values that are exactly "en", or begin with "en-".
Grouping Selectors
h1, h2, h3 {
color: #36C;
margin-bottom: 1em;
}
Grouping Selector(Cont…)
#content, #footer, #supplement
{
Float-left: 510px;
width: 200px;
}
CSS colors
CSS Background Properties
background-color
background-image
background-repeat
background-position
background-attachment
background property
Set the Background Color
<p style="background-color:yellow;">
This text has a yellow background color.
</p>
Set the Background Image
<table
style="background-image:url(/images/pattern1.gif);">
<tr><td>
This table has background image set.
</td></tr>
</table>
Repeat the Background Image
<table
style="background-image:url(/images/pattern1.gif);
background-repeat: repeat;">
<tr><td>
This table has background image which repeats multiple
times.
</td></tr>
</table>
Repeat the Background
Image(Cont…)
Horizontally:
<table style="background-image:url(/images/pattern1.gif);
background-repeat: repeat-x;">
<tr><td>
This table has background image set which will repeat horizontally.
</td></tr>
</table>
Repeat the Background
Image(Cont…)
Vertically:
<table
style="background-image:url(/images/pattern1.gif);
background-repeat: repeat-y;">
<tr><td>
This table has background image set which will repeat
vertically.
</td></tr>
</table>
background-position
<table style="background-image:url(/images/pattern1.gif);
background-position:100px 200px;">
<tr><td>
This table has background image positioned 100
pixels away from the left and 200 pixels from the top.
</td></tr>
</table>
Set the Background Attachment
<p style="background-image:url(/images/pattern1.gif);
background-attachment:fixed;">
This parapgraph has fixed background image.
</p>
<p style="background-image:url(/images/pattern1.gif);
background-attachment:scroll;">
This parapgraph has scrolling background image.
</p>
CSS Fonts
CSS Fonts
font-family property
font-style property
font-variant property
font-weight property
font-size property
font-family property
<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the
default
serif font depending on which font you have at your system.
</p>
It will produce the following result:
font-style property
<p style="font-style:italic;">
This text will be rendered in italic style
</p> t-style:italic;">
It will produce the following result:

font-variant property
<p style="font-variant:small-caps;">
This text will be rendered as small caps
</p>

font-weight property
<p style="font-weight:bold;">
This font is bold.
</p>
<p style="font-weight:bolder;">
This font is bolder.
</p>
<p style="font-weight:900;">
This font is 900 weight. </p>
font-size property
<p style="font-size:20px;">
This font size is 20 pixels
</p>
<p style="font-size:small;">
This font size is small
</p>
<p style="font-size:large;">
This font size is large
</p>
CSS Text
color property
direction property
letter-spacing property
word-spacing property
text-indent property
text-align property
text-decoration property
text-transform property
white-space property
text-shadow property
Explore it by yourself
CSS Links
CSS Links
:link signifies unvisited hyperlinks.
:visited signifies visited hyperlinks.
:hover signifies an element that currently has the
user's mouse pointer hovering over it.
:active signifies an element on which the user is
currently clicking.
Explore it by yourself
CSS Tables
CSS Tables
border-collapse specifies whether the browser should control the
appearance of the adjacent borders that touch each other or whether
each cell should maintain its style.
border-spacing specifies the width that should appear between table
cells.
caption-side captions are presented in the <caption> element. By
default, these are rendered above the table in the document. You use
the caption-side property to control the placement of the table caption.
empty-cells specifies whether the border should be shown if a cell is
empty.
table-layout allows browsers to speed up the layout of a table by using
the first width properties it comes across for the rest of a column
rather than having to load the whole table before rendering it.
CSS Border
CSS Border
The border properties allow you to specify how the
border of the box representing an element should look.
There are three properties of a border you can change:
border-color specifies the color of a border.

border-style specifies whether a border should be
solid, dashed line, double line, or one of the other
possible values.
border-width specifies the width of a border.
The border-color Property
border-bottom-color changes the color of bottom

border.
border-top-color changes the color of top border.
border-left-color changes the color of left border.
border-right-color changes the color of right
border.
Example
p.example1{
border:1px solid;
border-bottom-color:#009900; /* Green */
border-top-color:#FF0000; /* Red */
border-left-color:#330000; /* Black */
border-right-color:#0000CC; /* Blue */
}
p.example2{
border:1px solid;
Example(Cont…)
border-color:#009900; /* Green */
}
</style>
<p class="example1">
This example is showing all borders in different colors.
</p>
<p class="example2">
This example is showing all borders in green color only.
</p>
The border-style Property
none: No border. (Equivalent of border-width:0;)
solid: Border is a single solid line.
dotted: Border is a series of dots.
dashed: Border is a series of short lines.
double: Border is two solid lines.
groove: Border looks as though it is carved into the page.
ridge: Border looks the opposite of groove.
inset: Border makes the box look like it is embedded in
the page.
The border-style Property(Cont…)
outset: Border makes the box look like it is coming

out of the canvas.
hidden: Same as none, except in terms of border-
conflict resolution for table elements.
border-bottom-style changes the style of bottom
border.
border-top-style changes the style of top border.
border-left-style changes the style of left border.
border-right-style changes the style of right border.
CSS Lists
CSS Lists
Lists are very helpful in conveying a set of either numbered or bulleted points.
This chapter teaches you how to control list type, position, style, etc., using
CSS.
We have the following five CSS properties, which can be used to control lists:
list-style-type allows you to control the shape or appearance of the
marker.
list-style-position specifies whether a long point that wraps to a second
line should align with the first line or start underneath the start of the
marker.
list-style-image specifies an image for the marker rather than a bullet
point or number.
list-style serves as shorthand for the preceding properties.
marker-offset specifies the distance between a marker and the text in the
list.
Example
<ul style="list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style="list-style-type:square;">
<li>Maths</li>
<li>Physics</li>
</ul>
<ol style="list-style-type:decimal;">
<li>Maths</li>
<li>Physics</li>
Example(Cont…)
</ol>
<ol style="list-style-type:lower-alpha;">
<li>Maths</li>
<li>Physics</li>
</ol>
<ol style="list-style-type:lower-roman;">
<li>Maths</li>
<li>Physics</li>
</ol>
Example Output
CSS Box Model
CSS Box Model
All HTML elements can be considered as boxes. In
CSS, the term "box model" is used when talking about
design and layout.
The CSS box model is essentially a box that wraps
around every HTML element. It consists of: margins,
borders, padding, and the actual content. The image
below illustrates the box model:
Box Model
Mouse Hover Example
<!DOCTYPE html>
<html>
<head>
<style>
a:hover {
background-color: yellow;
}
</style>
</head>
<body>
<a href="http://www.w3schools.com">w3schools.com</a>
<a href="http://www.wikipedia.org">wikipedia.org</a>
<p><b>Note:</b> The :hover selector style links on mouse-over.</p>
</body>
</html>
Mouse Hover Example Output
Position property in CSS
Static
Relative
Absolute
Fixed
sticky
Static positioning example
<div id="OuterDiv">
<h3>Machine Learning Testing: Survey, Landscapes and Horizons</h3>
<div id="InnerDiv">Inner div</div>
<p>This paper provides a comprehensive survey of Machine Learning
Testing (ML testing) research. It covers 138 papers on testing properties (e.g.,
correctness, robustness, and fairness), testing components (e.g., the data,
learning program, and framework), testing workflow (e.g., test generation and
test evaluation), and application scenarios (e.g., autonomous driving, machine
translation). The paper also analyses trends concerning datasets, research trends,
and research focus, concluding with research challenges and promising research
directions in machine learning testing.
</p>
</div>
Static positioning example
#OuterDiv{
margin-left:15px;
margin-top:10px;
background-color:red;
width:700px;
height:300px;
}
#InnerDiv{
background-color:green;
width:50px;
height:50px;
position:static;
}
h3{
position:static;
}
Findings
There is no change in page because by default each
item has position static as shown in output
And static position not take top, left etc. attributes
Relative positioning example
<div id="OuterDiv">
</p>
</div>
Relative positioning example
#OuterDiv{
margin-left:15px;
margin-top:10px;
width:700px;
height:300px;
}
#InnerDiv{
width:50px;
height:50px;
position:static;
}
h3{
position:relative;
top:90px;
}
Findings
You can apply top, bottom, right and left property
on any item which having position relative
When apply top or any other with position relative
then this will no disturb other items position
Padding will disturb all the items position
Output
Absolute positioning example
<div id="OuterDiv">
</p>
</div>
Absolute positioning example
body{background-color:aqua;}
#OuterDiv{
margin-left:15px;
margin-top:10px;
width:700px;
height:300px;
position:relative;}
#InnerDiv{
width:50px;
height:50px;
position:absolute;
top:0px;
left:0px;}
Findings
• Element having absolute position will release its actual
space
• And start location from its parent element which who
have position relative, absolute or fixed
• Can apply top, bottom, left or right properties on that
elements
Output

CSS Lecture Slides 24102022 012810pm

Uploaded by

Document Information

Original Description:

Original Title

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

CSS Lecture Slides 24102022 012810pm

Uploaded by

Copyright:

Available Formats

CSS(Cascading Style Sheet)

CSS saves time

selector { property: value }

<h1 class=“red”> Black heading</h1>

<h1 id=“red”> Black heading</h1>

This rule will render all the paragraphs in black if they

p[lang] - Selects all paragraph elements with a lang attribute.

It will produce the following result:

It will produce the following result:

border-color specifies the color of a border.

border-bottom-color changes the color of bottom

outset: Border makes the box look like it is coming

<p><b>Note:</b> The :hover selector style links on mouse-over.</p>

You might also like