CSS1.pptx

CSS Definitions
❖Cascading Style Sheets (CSS) are a stylesheet language used to describe the presentation
of a document written in HTML or XML (including XML dialects like SVG or XHTML).
❖CSS describes how elements should be displayed on screen, on paper, in speech, or on
other media. CSS is the only document styling language that browsers understand.
❖CSS has a standardized W3C specification.
❖CSS1 is now obsolete,
❖CSS2.1 is a recommendation,
❖CSS3 is split into smaller modules, progressing on the standardization track.

The Basic Syntax of CSS
p{
color : red;
}
p { color : red ; }
selector declaration
property value

The basic syntax of CSS
ORDER MATTERS COMMENTS IN CSS
P color will be lime

Adding styles to the page -external
styles

Adding styles to the page -internal
styles

Adding styles to the page -inline
styles

CASCADING STYLE SHEETS
Cascading Style Sheets is a simple design language intended to simplify
the process of making web pages presentable.
Using CSS, you can control the color of the text, the style of fonts, the
spacing between paragraphs, how columns are sized and laid out, what
background images or colors are used, layout designs, variations in
display for different devices and screen sizes as well as a variety of other
effects.
TYPES OF CSS
• Inline CSS
•Internal CSS
•External CSS

Example: Inline CSS
<!DOCTYPE html>
<html>
<head>
<title> Inline CSS </title>
</head>
<body>
<h1> Introduction to CSS</h1>
<p style=“color:red”> Hello LPU</p>
<p style= “color:red”> Welcome to CSS</p>
<body>
</html>

Example: Internal CSS
<!DOCTYPE html>
<html>
<head>
<title> CSS Internal </title>
<style>
p
{
color:red;
}
h1
{
background-color:blue;
}
</style>
</head>
<body>
<p > Hello LPU</p>
<p > Welcome to CSS</p>
</body>
</html>

Example: External CSS
<!DOCTYPE html>
<html>
<head>
<title> CSS External </title>
<link rel=“stylesheet” href=“b.css”>
</head>
<body>
<p > Hello LPU</p>
</body>
</html>
b.css
p
{
color:red;
}
h1
{
}

.
Example: Font Properties
<!DOCTYPE html>
<html>
<head>
<title> CSS Font Properties </title>
</head>
<body>
</body>
</html>
b.css
p
{
font-family:arial;
font-weight:bold;
font-style: italic;
font-size: 24px;
}

Example: Font Properties in One Line
<!DOCTYPE html>
<html>
<head>
<title> CSS Font Properties </title>
</head>
<body>
</body>
</html>
b.Css
p
{
font: bold italic 24px arial;
}

CSS Comments
p
{
font: bold italic 24px arial; /* weight style size family */
}

Example: Box Model-Padding
<!DOCTYPE html>
<html>
<head>
<title> CSS -Padding </title>
</head>
<body>
</body>
</html>
b.css
p
{
padding-top: 30px;
padding-bottom: 30px;
padding-left: 50px;
padding-right: 50px;
}
/* top right bottom left*/

Example: Box Model-Borders
<!DOCTYPE html>
<html>
<head>
<title> CSS -Borders </title>
</head>
<body>
</body>
</html>
b.css
p
{
padding: 30px;
border-style:solid;
border-width:10px;
border-color: green;
}
border: 5px ridge red;

Example: Box Model-Margin
<!DOCTYPE html>
<html>
<head>
<title> CSS -Margin </title>
</head>
<body>
</body>
</html>
b.css
p
{
margin-top: 30px;
margin-bottom: 30px;
margin-left: 50px;
margin-right: 50px;
}

Example: Background Images
<!DOCTYPE html>
<html>
<head>
<title> CSS –Background Images</title>
</head>
<body>
<div>
Hello LPU
</div>
</body>
</html>

b.css
div
{
height:200px;
width: 100%;
background-image:url(a.jpg);
background-repeat: repeat-x;
background-position:center top;
}

Example: Child Selectors
<!DOCTYPE html>
<html>
<head>
<title> CSS –Child Selectors</title>
</head>
<body>
<div>
<p> Hello LPU</p>
</div>
<p> Welcome to LPU</p>
</body>
</html>
div p
{
color:red;
}
P
{
color:yellow;
}

Example: Child Selectors
<!DOCTYPE html>
<html>
<head>
<title> CSS –Child Selectors</title>
</head>
<body>
<div class=“abc”>
<p> Hello LPU</p>
</div>
<div class=“def”>
<p> Welcome to LPU</p>
</div>
</body>
</html>

.abc p
{
color:red;
}
.def p
{
color:yellow;
}

Media type using media queries

Media type in HTML “media”
attribute

Basic Selectors
❖ ID
Selects the element with id="firstname"
❖ Class
Selects all elements with class="intro"
❖ Type
Selects all <p> elements
❖ Universal
Selects all elements

Combinators
Groups of selectors
A comma-separated list of selectors represents the union of all elements
selected by each of the individual selectors in the list
Descendant combinator
Selects all <p> elements inside <div> elements
Child combinator
Selects all <p> elements where the parent is a <div> element
Adjacent sibling combinator
Selects all <p> elements that are placed immediately after <div>
elements
General sibling combinator
Selects every <ul> element that are preceded by a <p> element
div , p
div p
div > p
div + p
p ~ ul
div > p
div + p

Pseudo-classes
The pseudo-class concept is introduced to
permit selection based on information that lies
outside of the document tree or that cannot be
expressed using the other simple selectors.

Dynamic Pseudo-classes
Link
User Action

(Some) structural pseudo-classes

!important
!important declaration overrides any other
CSS
declaration.
selector {
property: property value !important;
}

!important usage
You can use !important (it is not an anti-pattern), when
your goal is that the property should not be overridden.
Never use !important to override other rules!
Do use selectors with proper specificity to achieve that.

Specificity Calculator
Specificity Calculator :
https://specificity.keegan.st/

Games- Practising….
https://flukeout.github.io/ - ...selectors
https://flexboxfroggy.com/ - ...flexbox
https://cssgridgarden.com/ - ...css grid

CSS1.pptx

More Related Content

Similar to CSS1.pptx

Recently uploaded

CSS1.pptx