Scribd
Upload
12 views

CSS1 1

Uploaded by

Mohammad Yusuf
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
12 views

CSS1 1

Uploaded by

Mohammad Yusuf
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 69

CSS stands for Cascading Style Sheets

Styles define how to display HTML


elements
Cascading Style Sheets (CSS) were established by the World Wide Web
Consortium (W3C). The CSS specification allows for more control over
the look, or style, of web pages or other
Why is it called “cascading”?
In CSS, multiple styles can be applied to a particular document (usually a
web page or XML file). The browser will interpret these styles in a
cascading fashion.
Style rules set up site-wide are overridden by styles located within
individual pages. Individual pages are overridden by styles inside an
individual tag. In addition, the end user can set up styles in the browser
that will override the author’s styles.
All matching rules for a particular selector will be applied, except where
they conflict with each other (in which case, the latter rule would be
applied, as determined by the cascade).
In the following example, <h2> tags would be displayed in red and italics
(but not blue):
h2 {font-style: italic;}
h2 {color: darkblue;}
h2 {color: red;}
⚫CSS Saves a Lot of Work!
⚫CSS defines HOW HTML elements are to be
displayed.
⚫Styles are normally saved in external .css files.
External style sheets enable you to change the
appearance and layout of all the pages in a
Web site, just by editing one single file!
Understanding Style Rules
⚫A Style Rule is composed of two parts: a
selector and a declaration.
Declaration
Selector

TH {color: red;}.
⚫The Selector indicates the element to which
the rule is applied.
⚫The Declaration determines the property values
of a selector.
Understanding Style Rules
⚫The Property specifies a characteristic, such as
color, font-family, position, and is followed by a
colon (:).
⚫The Value expresses specification of a property,
such as red for color, arial for font family, 12 pt
for font-size, and is followed by a semicolon (;).

Property Valu
P {color: red;} e
⚫ CSS declarations always ends with a semicolon, and
declaration groups are surrounded by curly brackets:
⚫ p {color:red;text-align:center;}To make the CSS more readable,
you can put one declaration on each line, like this:
⚫ Example
⚫p
{
color:red;
text-align:center;
}
CSS Comments
⚫ A CSS comment begins with "/*", and ends with "*/", like this:
⚫ /*This is a comment*/
{p
text-align:center;
/*This is another
comment*/
color:black;
font-family:arial;
}
⚫ The id and class Selectors

⚫ In addition to setting a style for a HTML element, CSS allows you to


specify your own selectors called "id" and "class".

⚫The id Selector
⚫ The id selector is used to specify a style for a single, unique element.
⚫ The id selector uses the id attribute of the HTML element, and is defined with a
"#".
⚫ The style rule below will be applied to the element with id="para1":
⚫ Example

⚫ #para1
{
text-align:center;
color:red;
}
The class Selector
⚫ The class selector is used to specify a style for a group of elements. Unlike the id
selector, the class selector is most often used on several elements.
⚫ This allows you to set a particular style for any HTML elements with the same
class.
⚫ The class selector uses the HTML class attribute, and is defined with a "."
⚫ In the example below, all HTML elements with class="center" will be center-
aligned:
⚫ Example
⚫ .center
⚫{
⚫ text-align:center;
⚫}

⚫ In the example below, all p elements with class="center" will be center-


aligned:
⚫ Example
⚫ p.center {text-align:center;}
Three Ways to Insert
CSS
External style sheet
Internal style sheet
Inline style

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external
style sheet, you can change the look of an entire Web site by changing one file. Each page
must link to the style sheet using the <link> tag. The <link> tag goes inside the head
section:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
An external style sheet can be written in any text editor. The file should not contain any
html tags. Your style sheet should be saved with a .css extension. An example of a style
sheet file is shown below:

hr {color:red;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
Internal Style Sheet

An internal style sheet should be used when a


single document has a unique style.
<head>
<style type="text/css">
hr {color:red;}
p {margin-left:20px;}
body {background-
image:url("images/bac
k40.gif");}
</style>
</head>
Inline Styles
<p style="color:red;margin-left:20px">This is a paragraph.</p>

Multiple Style Sheets


If some properties have been set for the same selector in different style sheets, the values will be
inherited from the more specific style sheet.
For example, an external style sheet has these properties for the h3
selector: h3
{
color:red;
text-align:left;
font-size:8pt;
}
And an internal style sheet has these properties for the h3 selector:
h3
{
text-align:right;
font-size:20pt;
}
If the page with the internal style sheet also links to the external style sheet the properties for
h3 will be:
color:red;
text-align:right;
font-size:20pt;
The color is inherited from the external style sheet and the text-alignment and the font-size is
replaced by the internal style sheet.
CSS Comments
CSS Colors
CSS Colors
CSS Colors
CSS Colors
Background Color
Background Image
Background Options
Background Attachment
Background Shorthand Property
CSS Borders
CSS Borders Width
CSS Borders Color
CSS Borders Style
CSS Border-Shorthand
CSS Rounded Borders
CSS Margins
CSS Margins(Collapse)
CSS Paddings
CSS Margins
CSS Height/Width
CSS Box Model
CSS Box Model
CSS Outline Style
CSS Outline Style
CSS Outline Style
CSS Outline Shorthand
CSS Text Color
CSS Text Alignment
CSS Text Decoration
CSS Text Transformation
CSS Text Shadow
CSS Grid
<body>
<!DOCTYPE html> <h1>Grid Elements</h1>
<html> <p>A Grid Layout must have a parent element
<head> with the <em>display</em> property set to
<style> <em>grid</em> or <em>inline-grid</em>.</p>
.grid-container {
display: grid; <p>Direct child element(s) of the grid container
grid-template-columns: auto auto auto; automatically becomes grid items.</p>
background-color: #2196F3;
padding: 10px; <div class="grid-container">
} <div class="grid-item">1</div>
.grid-item { <div class="grid-item">2</div>
background-color: rgba(255, 255, 255, 0.8); <div class="grid-item">3</div>
border: 1px solid rgba(0, 0, 0, 0.8); <div class="grid-item">4</div>
padding: 20px; <div class="grid-item">5</div>
font-size: 30px; <div class="grid-item">6</div>
text-align: center; <div class="grid-item">7</div>
} <div class="grid-item">8</div>
</style> <div class="grid-item">9</div>
</head> </div>
</body>
</html>
CSS Grid
<!DOCTYPE html>
CSS Buttons
<html>
<head>
<style>
.button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>

<h2>CSS Buttons</h2>

<button>Default Button</button>
<a href="#" class="button">Link Button</a>
<button class="button">Button</button>
<input type="button" class="button" value="Input Button">

</body>
</html>
<!DOCTYPE html>
<html>
<head> CSS Box Sizing
<style>
.div1 {
width: 300px;
height: 100px;
border: 1px solid blue;
}

.div2 {
width: 300px;
height: 100px;
padding: 50px;
border: 1px solid red;
}
</style>
</head>
<body>

<h1>Without box-sizing</h1>

<div class="div1">This div is smaller (width is 300px and


height is 100px).</div>
<br>
<div class="div2">This div is bigger (width is also 300px
and height is 100px).</div>

</body>
CSS Align Elements
<!DOCTYPE html>
<html>
<head>
<style>
.center {
margin: auto;
width: 60%;
border: 3px solid #73AD21;
padding: 10px;
}
</style>
</head>
<body>

<h2>Center Align Elements</h2>


<p>To horizontally center a block element (like div), use
margin: auto;</p>

<div class="center">
<p>Hello World!</p>
</div>

</body>
</html>
CSS Navigation Bars
CSS Navigation Bars
<!DOCTYPE html>
<html>
<head>
<style>
CSS Navigation Bars(Vertical)
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 60px;
}
li a {
display: block;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p>A background color is added to the links to show the link
area.</p>
<p>Notice that the whole link area is clickable, not just the
text.</p>
</body>
</html>
<head>
<style>
ul {
CSS Navigation Bars(Horizontal)
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
padding: 8px;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can
produce unexpected results.</p>
<p>A background color is added to the links to show the link area. The
whole link area is clickable, not just the text.</p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent
li elements from going outside of the list.</p>
</body>
<head>
<style>
.dropdown {
position: relative;
display: inline-block;
CSS Hoverable Dropdown
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>

<h2>Hoverable Dropdown</h2>
<p>Move the mouse over the text below to open the dropdown content.</p>

<div class="dropdown">
<span>Mouse over me</span>
<div class="dropdown-content">
<p>Hello World!</p>
</div>
</div>
</body>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
CSS Dropdown Menu
padding: 0;
overflow: hidden;
}
li {
float: left;
}
li a {
display: block;
padding: 8px;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
<p><b>Note:</b> If a !DOCTYPE is not specified, floating items can
produce unexpected results.</p>
<p>A background color is added to the links to show the link area. The
whole link area is clickable, not just the text.</p>
<p><b>Note:</b> overflow:hidden is added to the ul element to prevent
li elements from going outside of the list.</p>
</body>
<head>
<style>
.dropdown {
position: relative;
CSS Dropdown Image
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<h2>Dropdown Image</h2>
<p>Move the mouse over the image below to open the dropdown content.</p>
<div class="dropdown">
<img src="img_5terre.jpg" alt="Cinque Terre" width="100" height="50">
<div class="dropdown-content">
<img src="img_5terre.jpg" alt="Cinque Terre" width="300" height="200">
<div class="desc">Beautiful Cinque Terre</div>
</div>
</div>
</body>
CSS Counters
<head>
<style>
body {
counter-reset: section;
}

h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>

<h1>Using CSS Counters</h1>

<h2>HTML Tutorial</h2>
<h2>CSS Tutorial</h2>
<h2>JavaScript Tutorial</h2>
<h2>Python Tutorial</h2>
<h2>SQL Tutorial</h2>

</body>
CSS Opacity
<!DOCTYPE html>
<html>
<head>
<style>
img:hover {
opacity: 0.5;
}
</style>
</head>
<body>

<h1>Image Transparency</h1>
<p>The opacity property is often used together with the :hover
selector to change the opacity on mouse-over:</p>
<img src="img_forest.jpg" alt="Forest" width="170"
height="100">
<img src="img_mountains.jpg" alt="Mountains" width="170"
height="100">
<img src="img_5terre.jpg" alt="Italy" width="170" height="100">

</body>
</html>
CSS Positioning
CSS Positioning
CSS Positioning
CSS Positioning
CSS Task(Image Gallery)
CSS Task(Positioning)
CSS Task(Image Sprites)
CSS Task(Website Layout)

You might also like