Syllabus Schedule Project Labs Canvas Server Access CSS Tutorial Assignment 1 Assignment 2 Assignment 3 Assignment 4 Assignment 5 Assignment 6 Assignment 7 Assignment 8 Assignment 9

CSS Tutorial

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."

  1. 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).
  2. Create a new file named testCSS.html.
  3. Complete W3Schools CSS tutorial through the topic "CSS Pseudo-classes."
  4. Create a new file named sampleCSS.html
  5. 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.)
  6. 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.
  7. 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 hand-coded.
  8. If you need help with CSS styling, first try Google. If you still need help ask Miles or Professor Sandvig.
  9. 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 background, 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.

Regular Expressions HTML Color Names Color Picker ASCII Character Codes Unicode Character Codes