Last week we learned about CSS (Cascading Style Sheets) and how it is used to control how a website looks.
What is CSS?
Basically, CSS controls how your content looks (font, headlines, pictures, etc.) while HTML controls the layout of your content. They work together to tell a web browser (Firefox, Internet Explorer, etc.) how your website should appear online. However, CSS can also control the layout of your website- for example, it can be used to create a three-column layout that has distinct left, middle, and right sections. To see a great example of this please see http://lissaexplains.com/css3.shtml.
CSS is very useful because it allows you to build your website so you don’t have to create everything by hand for each web page you create. It controls font, font size, font color, link color, and other important style attributes on your website. With one style sheet you can control all of these style attributes on each page of your site, so if you wanted to make changes, you only have to change one document rather than making each change individually on each page of your site.
If you end up working on a website that has already been created then you will be able to edit and modify the existing style sheet rather than having to create a new one.
CSS Handout
Click here for the CSS handout (updated September 28, 2010).
How do I Create a Cascading Style Sheet?
You can create a cascading style sheet in Notepad or Dreamweaver. You must save it as .css (example- stylesheet.css) or else it will not be understood to be a CSS file. Generally, style sheets are called stylesheet.css.
There are both internal and external style sheets. We created both in class. External style sheets are separate files that need to be linked to your website by a small line of code that goes in the <head> section of a webpage. An internal style sheet would be adding the style sheet code directly into the code of the webpage. It also goes in the <head> section of the webpage but the code is different.
External style sheet code (goes in head section)
<link rel=”stylesheet” href=”NAME_OF_YOUR_STYLESHEET.css” type=”text/css”/>
As long as this line of code is in the head section of every page of your website your style sheet will control how the entire site looks.
Internal style sheet code (also goes in head section)
<style type=”text/css”>
Followed by all of your elements (h1, a:link, body, etc.)
</style>
This type of style sheet only applies to that particular page for which it is coded.
Here are two great websites to help you with your CSS coding:
http://www.w3schools.com/
http://lissaexplains.com/css.shtml
Web-Safe Fonts and Colors
When we learned CSS we talked about web-safe fonts and colors, which will always look the same in all browsers.
There are serif and sans-serif fonts. Serif fonts look good printed on paper and sans-serif fonts look good on a computer screen in a browser. A prominent serif font is Times News Roman. A prominent sans-serif font is Arial. Other sans-serif fonts are Verdana and Georgia. Arial is often used on websites.
Here is a good website with some more information about web-safe fonts:
http://www.w3schools.com/css/css_websafe_fonts.asp
Web-safe colors are colors that will always appear the same in each browser. They are also usually known by a six-digit combination of letters and numbers (ex. #000000). You can also use their names- see that here http://www.w3schools.com/html/html_colornames.asp.
Here is a good website with a list of web-safe colors and their values:
http://andrew.hedges.name/web_safe.html
Filed under: CSS | Leave a comment »
