Introduction to CSS
Introduction to CSS
LEARNING GOAL: The Basics of CSS
Students will be able to construct multi-page websites using Internal Links and External CSS.
Cascading Style Sheets, or CSS, are the best way to style multiple web pages, especially when you, the designer, want your pages to have the same look and appearance. What makes CSS different from the other two styles you learned (internal and inline) is that CSS can be saved as its own file, separated completely from the HTML. So in the same way you connect images to your pages, you would simply connect a .css file to your HTML.
Back when the World Wide Web first began, the people who were using it, if you remember from Learning Goal #1, were scientists, engineers, teachers, and students. They cared about information. But they didn’t care about the way information looked.
That all changed when regular people started using the World Wide Web. They wanted to use a variety of fonts, images, colors, margins, and much more. But there was no way to do that with HTML, so a friend of Tim Berners-Lee, also an engineer, wrote CSS as a styling language for HTML. This lesson and this learning goal are all about learning that language.
SCHEDULE (85 MINUTES):
PART 1: CLASS DISCUSSION – Introduction to CSS
Topic #1 – A Short History of CSS
When Tim Berners-Lee created the World Wide Web in 1991, most of the people who used it were interested in the information that you could find on the Web. They didn’t care much how the information looked. These people were scientists, engineers, teachers, and students. They cared more about information and content than they did about appearance. That’s why the first public website Tim made was just a white background, black text, and blue hyperlinks. Remember this?
However, as average people and everyday businesses started learning about the World Wide Web, everyone started demanding more control over the way their pages looked. So another engineer and friend of Tim Berners-Lee started creating a small, but important coding language called CSS, which stood for Cascading Style Sheets. The man who created CSS was Hakon Wium Lie.
The purpose of CSS was to allow designers more control over the appearance of their pages. Lie had been working with newspaper publications at MIT, the Massachusetts Institute of Technology, so he knew how important it was for information to be presented in a clear and effective way. But Lie also created CSS because he was afraid without it, everyone would stop using HTML and the World Wide Web would end. Earlier this year, he gave an interview with Net Online Magazine and said, “the primary reason for creating CSS was to save HTML.”
Over the next few lessons, we’ll read some other thoughts and ideas from Hakon Wium Lie. But for now, why do you think he used the word “cascading” to describe a style sheet? If you don’t know what “cascading” means, maybe now is a good time to look it up.
Topic #2 – How CSS Works
Up to this point in the semester, we’ve learned how to style in two ways: Inline styling (right inside the opening tags of an element) and Internal Styling (inside its own STYLE tag at the top of an HTML Document). Both of those forms of styling, even though you’ve been using them a lot, are not considered to be the best way of designing with CSS. Why? Because style should be completely separated from the HTML. In other words, you should be able to create several .html files and then create a single .css file that manages the style for all of your HTML pages.
Think of HTML as the skeleton and the information. Think of CSS as the way that information looks. If you only have the skeleton and the information, that’s a good start, but with CSS, you can make that information look much better. Take a look at this example from W3Schools.
Topic #3 – Syntax for CSS
With internal styling, you’ve basically seen the proper syntax for CSS. But you probably didn’t have much of an idea about how all those parts work together. For example, there were always colons and semicolons and curly brackets with your internal styling, but there wasn’t much of an explanation about why that stuff was there. CSS is made up of four things:
Take a look at this explanation from W3Schools before we get started.
PART 2: DAILY DESIGN – A New Demo with Notepad++
During this design, you will be building a three page website where the style is being controlled from a separate document. No more internal styling. No more inline styling. Pay close attention because you’re about to escape the world of basic Notepad and start learning a much better, more user-friendly program called Notepad++. Please do the first two steps below on your own or with your partner.
Step 1: Go to your “css” folder (the one you’ve never used) and create a new subfolder inside of it called “demo1”.
Step 2: Go to the Start Menu on your computer, find a program called Notepad++, then open it up so that it is the only thing on your screen.
Once the teacher gets you all set up, it will be time for the teacher to grade projects from Web Design II, so you will be responsible for finishing up the rest of your three-page websites.
This design will take you the rest of the class period and the plan is to create the following seven things:
1. Three separate, but similar HTML pages that use internal links to connect back and forth
2. A separate CSS file with style for those pages
3. A common link to CSS on all three pages
4. A common BODY background (black) for all three pages
5. A common SECTION border (white) for different elements
6. A common style (black and white) for all three links
7. Different information on all three pages