code icon

CSCI 1720

Intermediate Web


Lab 2 - CSS Timeline

  1. On your external drive, create a folder named your_etsu_id.csci1720.net, if you haven't already. Inside that folder, make a new subfolder named labs. Inside the labs folder, make a final subfolder named lab2
  2. Download lab2.zip and store it in your lab2 folder
  3. Extract the lab2.zip archive to the lab2 folder (Remember, 7-Zip → 'Extract Here'). This will give you an index page and two subfolders, named css and images
  4. In File Explorer, navigate to your labs folder. Right-click lab2 and select 'Open as Brackets project'. Open the files index.html and css/style.css by double-clicking them
  5. Look at index.html. The file is complete. We'll be styling it with our CSS file. Update the meta-information in the <head> element (name, date, etc.) and save. Launch index.html in Live Preview
  6. Notice that the main elements in the page are the header, navbar, and heading 1. But most of the content is inside a <div> element whose class is container. Setting it up this way makes it easier to style the important elements on a page without the 'cascading' part of CSS getting in the way
  7. Look at style.css. I've already added a rule for the body element. As it says in the comments, it's standard practice to apply the clearfix rules to 'reset' the page when it loads
  8. css rule
    Clearfix
  9. So, let's style the container. Setting the min- and max- width provides responsive behavior
  10. css rule
    Container
  11. Return to the browser and refresh the page. One thing to note here is that, while it looks a lot better, the text is still wide across the container. CSS includes a property that can be used to fix that without having to stack and float paragraphs: columns. Add the following to the container rule:
  12. css rule
    Columns
  13. Save, and refresh the page (don't worry about the images, we'll be taking care of those in a minute). This is a start, but let's dress it up a little more
  14. css rule
    Column Gap and Rule
  15. Let's add some styling for the anchor elements in the container:
  16. css rule
    Styling Anchor Elements

    Remember


    • text-decoration: none; removes the default underline from hyperlinks
    • The rgba color notation defines both color and opacity (the last value), allowing us to make transparent colors
    • .container a:hover is a pseudo class that modifies the CSS when the mouse hovers over the elements
  17. Style the header and nav elements. (The z-index property is for layering elements. The default value is zero, so setting the header and nav to 1 makes them overlay the rest of the page)
  18. css rule
    Header and Nav
    css rule
    Heading 1 Nested in Header
    css rule
    Heading 1s for the
    rest of the page
  19. Save your work and refresh the page. That looks considerably better, but the navbar still stinks. So let's fix it
  20. css rule
    Navbar
    The sticky value for the position property lets the element move until it reaches a certain point on the page. top: 0; 'sticks' it to the top of the page when it reaches it
  21. Save your work and refresh the page. Scroll down and notice that the navbar now stays at the top of the page
  22. Getting there, but the navbar still needs some work:
  23. css rule
    Navbar
    This makes the anchor elements (that are nested inside the navbar, as opposed to the ones that are in the container) behave like block-level elements, sets their width, gives them some space for separation, sets the color, and removes the underline
  24. Let's add a pseudo-class to the nav's links for more dynamic behavior:
  25. css rule
    Nav Pseudo Classes
    One of the things to note here: The transition property is a newer CSS 3 property, one of the animation properties that is bundled with it. In this example, it makes the changes occur over the course of four tenths of a second, instead of instantly, making the page more professional-looking in its behavior
  26. So things are looking better, but the images still need work. Let's make some classes
  27. css rule
    Image Classes
    css rule
    Image Classes
  28. Again, save and refresh the page. Now things are starting to shape up
  29. Now, for some more CSS 3. Let's add a little zing to the images
  30. css rule
    Image Classes
    Again, we're adding a little CSS 3 to the mix with the transition property
    By the way, the values for box-shadow:

    • 0 == offset left
    • 0 == offset top
    • 20px == blur
    • rgba(50,50,255,.9) == color
  31. Save and refresh the page. Hover over the images to see the effect
  32. LATE ADD!

    I remember from last semester that some folks were a little dissatisfied with the shifting text when you hover over the image. Turns out that the border-width: 0; rule is the culprit. Delete that, save, and try again (maybe change the box-shadow) blur from 20px to 10px ... Or try this: comment out both the border-width and the box-shadow rules. Add

    filter: grayscale(80%);
    Save and refresh and try that. CSS has a bunch of filters you can apply to images
  33. We're in the home stretch ... Now we want to make the table stand out a little more. Add this class:
  34. css rule
    Styling the table
  35. Save your work and refresh the page. Scroll down to the table. It's getting there, but let's add some additional styling:
  36. css rule
    Adding a little white space
  37. Save and refresh the page. See how the new class affects the display of the table
  38. Now, for a couple of new pseudo classes that'll further style the table
  39. css rule
    First cell of each row
    css rule
    Alternate rows
    As its name implies, the :nth-child() pseudo class styles alternating siblings differently to improve the appearance and readability of a page. In this example, we're telling the browser to style the first column (<td>) one way, and the following rows (<tr>) another. The value you use can be a specific number, even/odd, or even an equation (say, every third row, or something like that)
  40. Save and refresh
  41. Hover over the last image. One of the limitations of the box-shadow property - even though the image has a transparent background, the box shadow is, well, boxy. We can fix it in this case by adding
  42. css rule
    Styling the last image
    Notice that we're creating a rule for the image using its ID, instead of creating a class. Since the only image we want to style is the 'zen' image, this works
  43. One last thing just occurred to me. In your CSS file, go back up to the .container rule. Add the following property/value: text-align: justify;. Save and refresh the page. Notice how the text is now displayed
  44. All right. Let's wrap this up! Log in to the server using FileZilla. Remember, the hostname is csci1720.net and your login id is your ETSU id
  45. On the left pane, navigate to your external drive, where you have your files saved. On the right, create a new folder inside the labs folder named 'lab2' (no spaces!)
  46. Drag and drop index.html and the css and images folders from the left to the right (uploading all your files to the server)
  47. Return to the browser and enter the URL for your page:
    your_id.csci1720.net/labs/lab2
    For example, I would enter
    ramseyjw.csci1720.net/labs/lab2
    to access my lab
  48. Remember, since our file is named index.html, it isn't necessary to add it to the URL. The browser will look for it automagically
  49. Control-click both of the validation links in the lower right of the page to check for errors. If there are any errors, fix them, save, and re-upload. Rinse and repeat until your page is error-free
  50. Once all is well, copy the URL for your page into a new text document. Save the document as lab2.txt and upload it to the Lab 2 folder in the D2L dropbox

Have a nice day 😊