Scribd
Upload
6 views

03 styling-the-web-with-css-slides

Uploaded by

manju.raval
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

03 styling-the-web-with-css-slides

Uploaded by

manju.raval
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 26

<!

DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My HTML page!</title>
</head>
<body>
<div>
<ul>
<li>This</li>
<li>is an</li>
<li>unordered list</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My HTML page!</title>
</head>
<body>
<div style="color:blue">
<ul>
<li>This</li>
<li style="font-style:italic">is an</li>
<li>unordered list</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My HTML page!</title>
<style>
div {
color: blue
}
.italic {
font-style: italic
}
</style>
</head>
<body>
<div>
<ul>
<li>This</li>
<li class="italic">is an</li>
<li>unordered list</li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My HTML page!</title>
<link rel="stylesheet" type="text/css" href="StyleSheet.css">
</head>
<body>
<div>
<ul>
<li>This</li>
<li class="italic">is an</li>
<li>unordered list</li> div {
</ul> color: blue;
</div> }
</body>
</html> .italic {
font-style: italic;
}
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>My HTML page!</title> <title>My HTML page!</title>

<link rel="stylesheet" href="StyleSheet.css"> <link rel="stylesheet" href="StyleSheet.css">


</head> </head>
<body> <body>
<div> <div>
<ul> This is what the site is about
<li>This</li> </div>
<li class="italic">is an</li> </body>
<li>unordered list</li> </html>
</ul>
</div>
</body>
</html>
div { .class1 { #para1 {
color: blue; color: blue; color: blue;
} } }

div p { h1, h2, p {


text-align: center; text-align: center;
color: red; color: red;
} }
<p class="specific">Paragraph.</p>
<p class="specific" id="morespecific">Paragraph with id!</p>

#morespecific {
background-color: red;
border: 1px solid black;
}

.specific {
background-color: gray;
border: none !important;
}

p {
background-color: blue;
color: white;
padding: 5px;
}
@media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}

#grad {
background: linear-gradient(red, yellow);
}
•
• •
•
•
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet"
href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.6/css/bootstrap.min.css" />

<div class="row">
<div class="col-md-4">

</div>
<div class="col-md-4">

</div>
</div>
@color: #428bca;
a {
a { color: #428bca;
color: @color; }
} .otherthing {
color: #428bca;
.otherthing { }
color: @color;
}
-

-
-

-
-
-

You might also like