This week we will also learn about CSS (Cascading Style Sheets) and how it is used to build websites.
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.
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. The style sheet we will create in class this week will be an external style sheet. 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 (the code is in the handout and we will go over this in class). 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. We will also look at an example of an internal style sheet in class.
Here are two great websites to help you with your CSS coding:
http://lissaexplains.com/css.shtml
Web-Safe Fonts and Colors
When we learn CSS we will talk about web-safe fonts and colors. Web-safe fonts and colors are basically fonts and colors that will always appear as you have intended them to 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- that is how we will code them with CSS.
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
