For this lab we will use edit plus http://www.editplus.com. Edit plus is an HTML editor for windows that will recognize CSS keywords.
- Please follow the directions. Create the following directories on your local system.
- Make sure you have an it130 directory on your C: drive.
- Create a subdirectory of it130 called lab3.
- Get the HTML code for http://condor.depaul.edu/~alarrain/hci201/examples/defliststyle.html
View Source and save the code into your local system. Make sure the file name is defliststyle.html
- Open the file in edit plus. Take some time and study the html and CSS code.
The CSS code is the code inside the head section of the document.
This question has multiple parts. For each part you will add the styles to defliststyle.html.
You must type these in. After you add a part open it in the browser to see the changes.
- Place the style definition after the <style> tag but before the </style> tag in defliststyle.html. There should allready be one in there for the dt tag, don't remove it just add the styles after the closing brace
' } '
<![CDATA[
body {
margin-top: 3%;
margin-left: 10%;
margin-right:20%;
font-family: Verdana,sans-serif;
}
]]>
After you insert the above piece of code display deflistlab.html in your browser. Compare it to the original.
- Add the following style. Remember to display it in the browser.
<![CDATA[
h2{ margin-left: -2%;}
]]>
- After the above style add the following style. Remember to display it in the browser.
<![CDATA[
dd{padding-bottom: 1%;}
]]>
- After the above style add the following style. Remember to display it in the browser.
<![CDATA[
p {color:maroon;font-weight:bold;}
]]>
- After the above style add the following style. Remember to display it in the browser.
<![CDATA[
a{color:olive;}
]]>
- After the above style add the following declaration to the body selector. Remember to display it in the browser.
<![CDATA[
background-image:url(book.jpg);
]]>
To See the image you need to download it and save it to the same directory as the HTML file.
http://condor.depaul.edu/~alarrain/hci201/examples/book.jpg
To download the image.
- right click on the image
- select "save picture as"
- save the file book.jpg to the folder where deflistlab.html is.
- Play around with some the styles, create your own style. Change colors, fonts, margins etc ... Go to W3Schools
