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 were teachers, students, and engineers. They cared about information, but they didn’t care much 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, who was also an engineer, wrote a language called CSS, that he wanted to use as a way to style various elements in HTML. This lesson and this learning goal are all about learning how to write that language.
LEARNING GOAL #3: The Basics of CSS
Students will be able to construct multi-page websites using Internal Links and External 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.
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. We’ll let him introduce himself in the video below.
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. A few years ago, he did 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 (where you style 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:
Selectors
Declarations or Instructions
Properties
Values
Take a look at this explanation from W3Schools before we get started.
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 – Folder Setup
Go to your “css” folder (the one you’ve never used) and create a new subfolder inside of it called “demo1”.
Step #2 – Find the Program
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.
STOP
Overview
Once the teacher gets you all set up, it will be time for you to finish 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
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.
Topic #1 – A Short History of CSS
Up to this point in the semester, we’ve learned how to style in two ways: Inline styling (where you style 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.
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.