What is CSS?
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS saves a lot of work. It can control the layout of multiple web pages all at once
- External stylesheets are stored in CSS files
Why Use CSS?
CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.
CSS Solved a Big Problem
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
CSS removed the style formatting from the HTML page!
CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files.
With an external stylesheet file, you can change the look of an entire website by changing just one file!
What Is CSS?
Most web pages are made from HTML, or hypertext markup language. This is the standard way to decorate plain web text with fonts, colors, graphic doodads, and hyperlinks (clickable text that magically transports the user somewhere else). But websites can get really big. When that happens, HTML is a very hard way to do a very easy thing. CSS (cascading style sheets) can make decorating web sites easy again!
Think of CSS as a kind of computer dress code. CSS mainly does just one thing: it describes how web pages should look. Even better, CSS can be easily separated from HTML, so that the dress code is easy to find, easy to modify, and can rapidly change the entire look of your web site. Like a dress code at school, you can change your CSS and the look of your students will change with it. Style sheets allow you to rapidly alter entire websites as you please, just like a fashion craze allows people to change with the times yet remain the same people.
A really neat thing about CSS, is that it cascades. Each style you define adds to the overall theme, yet you can make the most recent style override earlier styles. For example, with CSS we can start by saying we want all of our text 12px (12 units) high. Later we can say we want it to be red, too. Still later, we can tell it we want one phrase to be in bold or italics, or blue rather than red.
Three Types of CSS
CSS comes in three types:
- In a separate file (external)
- At the top of a web page document (internal)
- Right next to the text it decorates (inline)
External style sheets are separate files full of CSS instructions (with the file extension .css). When any web page includes an external stylesheet, its look and feel will be controlled by this CSS file (unless you decide to override a style using one of these next two types). This is how you change a whole website at once. And that's perfect if you want to keep up with the latest fashion in web pages without rewriting every page!
Internal styles are placed at the top of each web page document, before any of the content is listed. This is the next best thing to external, because they're easy to find, yet allow you to 'override' an external style sheet -- for that special page that wants to be a nonconformist!
Inline styles are placed right where you need them, next to the text or graphic you wish to decorate. You can insert inline styles anywhere in the middle of your HTML code, giving you real freedom to specify each web page element. On the other hand, this can make maintaining web pages a real chore!
CSS Instructions
Before we introduce CSS, let's briefly review HTML. A simple web page is made of tags. Everything must go between the opening and closing <html> tags. The <head> section contains invisible directions called meta information. The <body> section is where we put all the visible stuff. Here's a super simp
External CSS
