Lecture 2: Cascading Style Sheets (CSS) Instructor: Dr. M. Anwar Hossain
Lecture 2: Cascading Style Sheets (CSS) Instructor: Dr. M. Anwar Hossain.
Jan 21, 2016
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Lecture 2: Cascading Style Sheets (CSS)
Instructor: Dr. M. Anwar Hossain
Learning Outcomes
In this chapter, you will learn about:
◦ Formatting with CSS- A way to style HTML
CSS selectors, properties and values
body { font-size: 0.8em; color: navy;
} • em (such as font-size: 2em) is the unit for the
calculated size of a font. So "2em", for example, is two times the current font size.
• px (such as font-size: 12px) is the unit for pixels.• pt (such as font-size: 12pt) is the unit for points.• % (such as font-size: 80%) is the unit for... wait for
it... percentages.
CSS Embedding Style
• Inline styles, inside the HTML document, style information on a single element, specified using the "style" attribute. E.g.,
<p style="color: red">text</p>
CSS Embedding Style
• Embedded style, blocks of CSS information inside the HTML itself, e.g.
<head> <style type="text/css"> p { color: red; } a { color: blue; } </style> </head>
CSS examples - syntax<html><head>
<style type="text/css">p{
color:red;text-align:center;
} </style></head><body>
<p>Hello World!</p><p>This paragraph is styled with CSS.</p>
</body></html>
CSS examples – id selector
<html><head>
<style type="text/css">#para1
{text-align:center;
color:red;}
</style></head>
<body><p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p></body></html>
CSS examples – background color<html><head>
<style type="text/css">body
{background-color:#b0c4de;
}</style></head>
<body>
<h1>My CSS web page!</h1><p>Hello world! This is a W3Schools.com
example.</p></body></html>
CSS examples – color<html><head><style type="text/css">h1 {background-color:#6495ed; }p {background-color:#e0ffff;}div {background-color:#b0c4de;}</style></head><body><h1>CSS background-color example!</h1><div>This is a text inside a div element.<p>This paragraph has it's own background color.</p>We are still in the div element.</div></body></html>
CSS examples – background image
<html><head><style type="text/css">body{background-image:url('gradient2.png');background-repeat:repeat-x;}</style></head>
<body><h1>Hello World!</h1></body>
</html>
Note: The image is repeated only horizontally (repeat-x),
CSS examples – background image/no-repeat
body{background-image:url('img_tree.png');background-repeat:no-repeat;background-position:right top;margin-right:200px;}</style></head><body><h1>Hello World!</h1><p>W3Schools background no-repeat, ….</p><p>Now the background image is only ...</p><p>In this example we have right margin….</p></body></html>
CSS examples – padding
<html><head><style type="text/css">p{ background-color:yellow; }p.padding{ padding:25px 50px; }</style></head>
<body><p>This is a paragraph with no specified padding.</p><p class="padding">This is a paragraph with specified paddings.</p></body></html>
padding:25px 50px; - top and bottom paddings are 25px- right and left paddings are 50px
CSS examples – no style
CSS examples – style associated
CSS examples – external style file
body { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d }ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em }
CSS examples – external style (cont..)
h1 { font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif }ul.navbar li { background: white; margin: 0.5em 0; padding: 0.3em; border-right: 1em solid black }ul.navbar a { text-decoration: none }a:link { color: blue }a:visited { color: purple }address { margin-top: 1em; padding-top: 1em; border-top: thin dotted }
CSS examples – external CSS file linking to html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"><html><head> <title>My first styled page</title> <link rel="stylesheet" href="mystyle.css"></head>
<body>…
</body></html>
CSS examples – body content
<!-- Site navigation menu --><ul class="navbar"> <li><a href="index.html">Home page</a> <li><a href="musings.html">Musings</a> <li><a href="town.html">My town</a> <li><a href="links.html">Links</a></ul>
<!-- Main content --><h1>My first styled page</h1>
<p>Welcome to my styled page!
<p>It lacks images, but at least it has style.And it has links, even if they don't goanywhere…
<p>There should be more here, but I don't knowwhat yet.
<!-- Sign and date the page, it's only polite! --><address>Made 5 April 2004<br> by myself.</address>
CSS Authoring Tool
Simple CSS: http://www.hostm.com/simplecss-download.m OIKO CSS Editor: http://css-editor.info/
CSS tutorial
http://www.w3schools.com/css/default.asp http://www.w3.org/Style/Examples/011/firstcss http://www.w3.org/MarkUp/Guide/Style
Related Documents
