In this lab you will use Visual Studio to complete W3Schools CSS tutorial. You
should have already completed the HTML tutorial up to "HTML Forms."
- Use Visual Studio to open the web site that you
created last week (you will need to create only one web
site in MIS 324).
- Create a new file named testCSS.html.
- Complete W3Schools CSS tutorial
through the topic "CSS Pseudo-classes."
- Create a new file named sampleCSS.html
- Create a new file named style.css for your styles (styles
can be defined in-line, in the page header, or a separate
style sheet. The later is usually preferred.)
- Attach your style sheet to your html page. View the html
page in Visual Studio's design view and drag the style sheet onto
the design surface. Visual studio will create a link tag with the
correct file path.
- Return Visual Studio to Source view for the remainder of the
tutorial. In design view Visual Studio will create in-page CSS but it
will be difficult to read, modify or maintain. CSS should be
- If you need help with CSS styling, first try Google. If you still
need help ask
Miles or Professor Sandvig.
- Use HTML and CSS to create a page that
looks like this. Tips:
- In the style sheet create a class .contentContainer with
width 60%, centered, lightgray
and black border. Google "css centering div" to see how to
center block elements (divs) using margin auto.
- Add a div to your html page, add class="contentContainer" and
but in some placeholder text (so you can see the div).
- Add a centered h3 tag with a title.
- View the html page in Visual Studio's web browser to see
how it looks.
- Add 15px of padding to all sides of the div.
- Add an image.
- Create a border to the image by adding 10px of padding on all
sides and white background. (you will want to create a new class
with the image styles).
- Add a css box-shadow (Google "css box shadow") to the image
- Add some text inside paragraph tags.
- The paragraph tags (block elements) will align below the image. To
wrap the text around the image add float left to the image. Also add
right and bottom margins to the image to create some white space between the text
and the image.
- Add other content and styles of your choice.
Professor Sandvig and Miles are available to help you and answer questions.