Css presentation introdution with sample basic projects

Cascading Style Sheets (CSS)
Introduction with sample basic projects
Satish Shende
satish.sixteen@gmail.com

What is CSS?
CSS stands for
Cascading Style Sheet.
Typical CSS file is a text
file with an extension .css
and contains a series of
commands or rules.
These rules tell the
HTML how to display
/* Styles for sitename.com*/
body {
font-family:Arial;
background: #000;
}
#container {
text-align:left;
width:1020px;
}
#header {
height:232px;
}
#footer {
width: 100%;
padding: 0 10px;
margin-bottom: 10px;
}
And so on….

CSS Benefits
• Separates structure from presentation
• Provides advanced control of presentation
• Easy maintenance of multiple pages
• Faster page loading
• Better accessibility for disabled users

HTML without CSS is
like a
piece of candy
without a
pretty wrapper

HTML & CSS
• HTML and CSS work together to produce
beautiful and functional Web sites
• HTML = structure
• CSS = style

Attaching a Style Sheet
Attach a style sheet to a page by adding the code to the <head>
section of the HTML page.
There are 3 waysto attach CSS to a page:
1. External Style Sheet:
Best used to control styling on multiple pages.
<link rel="stylesheet" type="text/css"
media="all" href="css/styles.css" />
2. Internal Style Sheet: Best used to control styling on one page.
<style type=“text/css”>
h1 {color: red)
</style>
3. Inline Style Sheet*: CSS is not attached in the <header> but is used
directly within HTML tags.
<p style=“color: red”>Some Text</p>

Properties and Values
body {background: purple;}
h1 {color: green; }
h2 {font-size: large;}
p {color: #ff0000;}

Typical Web Page (HTML)
<div id=“container”>
<div id=“header”>Insert Title</div>
<div id=“main">content
<div id=“menu”>content</div>
</div>
<div id=“footer”>content</div>
</div>

Typical Web Page (CSS)
#container{property: value;}
#menu{property: value;}
#main{property: value;}
#footer{property: value;}

IDs and Classes
• IDs (#)are unique and can only be used once on the page
• Classes (.)can be used as many times as needed
HTML Code:
<h1
id=“mainHeading”>Names</h1>
<p class=“name”>Joe</p>
CSS Code:
#mainHeading{color: green}
.name{color: red}

Text Properties
.mainHeading {
color: red;
letter-spacing: 5px;
text-transform: uppercase;
word-spacing: 15px;
text-align: left;
font-family: Times;
text-decoration: underline;
font-size: 12px;
font-style: italic;
font-weight: bold;
}
To style the main heading in
the paragraph above, we assigned
a class the HTML tag.
<h3 class=“mainHeading”>Main Heading</h3>

Layering
Background colors and images are layered like sheets
of paper one on top of the other.
#bg {background:url(leaves.jpg) no-repeat topleft}
#main {background-color: red}
#box {background-color: yellow}

Background-Image
li {
background-image:url(flower.jpg);
padding-left: 10px;
}

<!DOCTYPE html>
<html>
<head>
<style>
p {
border: 1px solid powderblue;
padding: 30px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<p>Every paragraph will be affected by the style.</p>
<p id="para1">Me too!</p>
<p>And me!</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has a light blue background
color!</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
p {
border-style: solid;
border-left-color: red;
border-right-color: blue;
border-top-color: green;
border-bottom-color: black;
}
</style>
</head>
<body>
<p>Satara is a city located in the Satara District of Maharashtra state of India,
near the confluence of the river Krishna and its tributary river Venna</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
ol {
background: #ff9999;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
</style>
</head>
<body>
<h1>Styling Lists With Colors:</h1>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 320px;
padding: 10px;
border: 5px solid gray;
margin: 0;
}
</style>
</head>
<body>
<h2>Calculate the total width:</h2>
<img src="8nr4.gif" width="350" height="263" alt="Klematis">
<div>The picture above is 350px wide. The total width of this element is also
350px.</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
background-color: lightgreen;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is 600 pixels or less,
the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>

Css presentation introdution with sample basic projects

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Css presentation introdution with sample basic projects

Similar to Css presentation introdution with sample basic projects (20)

More from Digital Shende

More from Digital Shende (20)

Recently uploaded

Recently uploaded (20)

Css presentation introdution with sample basic projects