Upload or Display


You can upload your CSS file here, or select a previously uploaded css file to display. Only element css will display as classes and id's are not included in the master HTML file

Sorry, only CSS files are allowed.
Sorry, your file was not uploaded.

CSS Exploration

This is an exercise in editing css only. Do not add any new content to this HTML page. You may add classes and ids to the opening tags for the elements, but do not add new elements, or any new text on the page.

Using the css document for this web site, stylize all of the tags for this web page. Make sure to use at least one property in each of the selectors in the file. You can explore the web for a few different examples of properties to use, but to get you started I have these two links you can use:


While you are looking for styles to use, make sure to include the css properties listed below within your code. you can change the value as needed. Each of the styles listed here can be used within a variety of different selectors. You are only required to use it once. You can certainly use them more than once, but be certain to look for a variety of other selectors to use as well.

List of required properties

CSS properties and sample values
Property Values
font-size 24px
border-radius 10px 15px 15px 25px
text-align: center
box-shadow: -1px 1px 3px #000;
text-shadow: 2px 2px #990000;
font-family "Georgia"
width 45%

Classes and Ids

This example page has no classes applied to any of the markup tags. You will create your own classes to help stylize the page on your own. You should include at least 5 different classes within the style sheet, and include them on the page as needed to call the styles.

In addition to the classes, you should include at least three ids on different elements to stylize them as well. By isolating a handful of elements with ids you can target those items and stylize them differently as needed. Remember...EVERY ELEMENT can have an id or class applied to it, but only ONE instance of an id can exist on a page at a time. For example... this code is entirely valid:


	<span class="blue" id="one">This is a 'SPAN' element with a class of 'BLUE', id of 'ONE'</span>
	<span class="top" id="two">This is a 'SPAN' element with a class of 'TOP', id of 'TWO'</span>
	<span class="right" id="three">This is a 'SPAN' element with a class of 'RIGHT', id of 'THREE'</span>
		

However, this code would be invalid because there is a duplicated id on the page:


	<span class="blue" id="one">This is a 'SPAN' element with a class of 'BLUE', id of 'ONE'</span>
	<span class="top" id="two">This is a 'SPAN' element with a class of 'TOP', id of 'TWO'</span>
	<span class="right" id="one">This is a 'SPAN' element with a class of 'RIGHT', id of 'one'</span>
		

O.K. I lied... In the following section you can add new content. Please place your name into the <h4> tag below.

...your name here...