What is CSS?
CSS is the language we use to style an HTML document.
CSS describes how HTML elements should be displayed.
Details:
CSS describes how HTML elements should be displayed.
Details:
- 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
Video What is a Cascading Style Sheet??
|
Marcordes Lecture: |
Additional Info: |
Each tag can be stylized individually!
For example if you add a paragraph to your page like this:
<p> Hello World </p>
You can change the color the text by linking to it in the style sheet like this:
p{ color:blue;}
This is an example using an external style sheet.
You can also change the color of the text internally like this (but this is the outdated method):
<p style="color:blue;"> Hello World </p>
<p> Hello World </p>
You can change the color the text by linking to it in the style sheet like this:
p{ color:blue;}
This is an example using an external style sheet.
You can also change the color of the text internally like this (but this is the outdated method):
<p style="color:blue;"> Hello World </p>
CSS History:
CSS Solved a Big ProblemHTML 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, 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!
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, 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!
How to write CSS:
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
Multiple CSS declarations are separated with semicolons, and declaration blocks are surrounded by curly braces.
Example:
ExampleIn this example all <p> elements will be center-aligned, with a red text color:
p { color: red; text-align: center; } |
|
Try This:
"Styles Tutorial"
1. Create a new document on Liveweave.com
2. Set up a basic website using the following tags:
<!DOCTYPE html> <html> <head> <body> <footer> <header> <p>
3. Add a list of your choice to your page:
<ul> <ol> <dl>
4. Change the background color of your list.
5. Change the font color within your list.
6. Add an h1, h2, & h3 tag to your page.
7. Change the background color and font color for each separately.
8. Add a <header> tag inside as the title of your page.
9. Create a border around the outside of your header tag.
10. Change any other styles you would like!
11. Save your Liveweave (it should read as Liveweave.com/(letters and numbers) ).
12. Copy the Liveweave web address and submit it on Google Classroom under "Lists Tutorial."
2. Set up a basic website using the following tags:
<!DOCTYPE html> <html> <head> <body> <footer> <header> <p>
3. Add a list of your choice to your page:
<ul> <ol> <dl>
4. Change the background color of your list.
5. Change the font color within your list.
6. Add an h1, h2, & h3 tag to your page.
7. Change the background color and font color for each separately.
8. Add a <header> tag inside as the title of your page.
9. Create a border around the outside of your header tag.
10. Change any other styles you would like!
11. Save your Liveweave (it should read as Liveweave.com/(letters and numbers) ).
12. Copy the Liveweave web address and submit it on Google Classroom under "Lists Tutorial."