1. CSSDeck.com
Check out some of the cool things you can do just using CSS3 and some of its cool new features. You will be doing a similar activity next week. These things were all created just using CSS and HTML!
2. Look at Medford Public Schools style sheet– good example of one external style sheet that controls an entire webpage- hundreds of pages.
3. External Style Sheet Practice
You will practice today with an external style sheet. This will be a separate file that is going to control one webpage. Ordinarily an external style sheet would control multiple webpages but we’re not doing that here just to save some time. You’ll get the idea!
You have three files in a CSS folder on your desktop, the beach picture, one webpage file, and one style sheet file. You will want to open both the webpage and style sheet files in Notepad and also open the webpage file in Firefox. When you download and save these files make sure they are all put in the same place (your folder, My Documents, whatever).
External style sheets are saved with the file extension .css. For example, stylesheet.css, which is fine if you’re just using one main style sheet for your entire webpage.
Check out what’s on the external style sheet:
# means it’s an ID, which is something that is specifically and uniquely applied on a page. In this case it’s for layout purposes to define a menu area and a content area
. means it’s a class, which you can create and apply to as many elements on the page as you want.
If there is nothing before the element then it’s a simple element we’re styling, such as defining what a paragraph or a headline should look like
A div (sometimes called container) refers to a separate section of the webpage that you can work on independently of the other sections. You can define and position divs however you want using margins and positioning properties. In our example we have two div areas, one on the left and one on the right since we’re working in a basic two-column layout. The divs are referred to in the body section of our webpage- div id=”menu” and div id=”content”
Key things to remember when using style sheets:
Internal style sheets are directly placed on the webpage and only apply to that specific page (or table on a page).
External style sheets can control an entire website and are separate files that are linked to each page of the website with a line of code in the head section.
To apply a style sheet you not only need to create it, you need to place the corresponding code in the body section of your webpage. For example, we created a special class for paragraphs called funky. In order to apply that class and see it in action, we had to use p class=”funky” in the body section of our page.
Resources for CSS