-
Details
• Read this article: http://www.w3schools.com/html/html_css.asp
Inline styles
Type this into your index.html
<![CDATA[
<!DOCTYPE html>
<html>
<body style="background-color:yellow;">
<p style="color:green;margin-left:30px;">
If skills sold, truth be told,
I'd probably be/Lyrically, Talib Kweli/
Truthfully, I wanna rhyme like Common Sense/
But I did 5 mill' -- I ain't been rhyming like Common since.</p>
</body>
</html>
]]>
Internal style
• Type in the following...
<![CDATA[
<html>
<head>
<style type="text/css">
body {
background-color:yellow;
}
p {
color:green;
}
</style>
</head>
<body>
<p>
As the rhythm designed to bounce
What counts is that the rhymes
Designed to fill your mind
Now that you've realized the prides arrived
We got to pump the stuff to make us tough
from the heart
It's a start, a work of art
To revolutionize make a change nothin's strange
People, people we are the same
</p>
</body>
</html>
]]>
External style
• Make a file called mystyles.css and put it in the css folder.
• Type in this code
<![CDATA[
body {
background-image: url("http://www.w3.org/StyleSheets/TR/logo-REC");
}
body {
background: none no-repeat fixed left top white;
color: #000000;
font-family: sans-serif;
margin: 0;
padding: 2em 1em 2em 70px;
}
]]>
• save the file
• Create a new html file called cssmagic.html
• Type in the following code.
<![CDATA[
<html>
<head>
<link rel="stylesheet" type="text/css" href="/teach/css/mystyles.css">
</head>
<body>
<p>
I got 99 problems and CSS aint one.
</p>
</body>
</html>
]]>
NOTE: change "/teach/css" to "css"
• Load the html file into the browser. Has the styling worked.
• Change the values in the css files. Save the file. Reload int the browser.
Questions
• Give an example of an inline style.
• Give an example of an internal style.
• Give an example of an external css file.