Lab 12, Part 2 - CSS
Overview
- style a page using CSS
Instructions
Prep Work
- WE’LL USE THE SAME HTML FILE THAT WE USED IN THE PREVIOUS LAB AS OUR STARTING POINT!
- in terminal change to your ~/Desktop/username/lab-12-html folder
- use pwd to make sure you’re in the right directory!
Style Your Page With CSS
Include an External CSS File
- open up SublimeText (try Command+SPACEBAR to search for SublimeText)
- if you don’t have index.html already open, go to the top menu bar, click on File→Open
- browse to home→Desktop→usernamefolder→lab-12-html→index.html
- create a new file by going to File→New
- immediately save your new file by going to File→Save As
- browse to home→Desktop→usernamefolder→lab-12-html
- name your file style.css
- add this to style.css
p {
color: red;
}
- add your external css file to your page
- in your <head> tag
- add… <link rel="stylesheet" href="style.css">
- view your page by opening it in your browser (double click on the file from finder or Option-click→Open With)
- you should see your paragraph tags in red
Changing Color and Text
(view your page after each modification)
- using the color property:
- change your largest header (h1) to green using hex values (try #008000 or look up another)
- change your paragraphs so that they’re blue using hex values (e.g. #0000FF)
- change the background color on all headers (h1 and h2) so that they’re gray (maybe something like #888888)
- use font-family on body to change all of your text to sans-serif
- use font-size on all paragraphs to make the text 12px (see link above for a reference)
- use text-decoration on all paragraphs … try line-through
- use text-decoration on your second largest header (h2) … try underline
- use text-transform on your largest header (h1) to change to uppercase
- view your page
- use git to check the status, add to staging, and commit (don’t forget the -m ‘message’ part)
Margins, Padding and Border
- add 20px margin to your largest header (h1)
- add 40px padding to your largest header (h1)
- add a 5 pixel wide, dashed, red border around your largest header (h1)
- use git to check the status, add to staging, and commit (don’t forget the -m ‘message’ part)
Using Chrome Inspector or Firebug
- Right click on your h1 heading and choose "Inspect Element"
- You should see something like this:
- Like with JavaScript, the console can be very helpful in debugging CSS/HTML.
Classes, IDs, Grouped Selectors
In index.html…
- add an id selector (use div tag with id= ___) to your first paragraph called intro
- add a class selector (use inline with class=___) to your first header (h1) called spotlight
In style.css…
- add a ID (#yyy) selector for #intro
- set the border to one pixel, solid, black
- add a CLASS (.zzz) selector for .spotlight
- set the background-color to yellow (try #FEFE22)
- remove any color properties from your h2 and paragraph selectors
- group h2 and p so that their color is dark green
- use git to check the status, add to staging, and commit (don’t forget the -m ‘message’ part)
*** extra credit*** Nesting, Pseudo Classes, Background
- create a selector that changes all of the link text within a paragraph (p a)
- using a pseudo class, create a selector that changes link text to uppercase when hovered over (a:hover)
- add a repeating image to the background
body {
background: white url(http://entertainmenttechnology.github.io/Wilson-MTEC1003/resources/img/lab-13-face.png) repeat top right;
}
- use git to check the status, add to staging, and commit (don’t forget the -m ‘message’ part)