CSS stands for Cascading Style Sheets, a technology used to control the presentation and layout of HTML documents. By separating the presentation from the content, CSS allows for easier maintenance and faster loading times. the history, benefits, and syntax of CSS, as well as the different ways to apply it to HTML documents.
What you will learn
What are the different ways to apply CSS to HTML documents?
Can you provide an example of a CSS rule set?
What problem did CSS solve in web development?
What is the standard syntax for a CSS rule set?
How does CSS save time and effort in web development?
Download Understanding Cascading Style Sheets (CSS) for Web Development and more Study Guides, Projects, Research Advanced Computer Programming in PDF only on Docsity!
What is CSS? NAME:
INSERT OPENING GRAPHIC HERE:
Highlight VOCABULARY WORDS that you need defined. Put a? mark in any
area that you need clarified.
What is CSS?
CSS stands for C ascading S tyle S heets Styles define how to display HTML elements Styles were added to HTML 4.0 to solve a problem External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files.
Styles Solved a Big Problem
HTML was never intended to contain tags for formatting a document. HTML was intended to define the content of a document, like:
This is a heading
This is a paragraph.
When tags like , and color attributes were added to the HTML 3.
specification, it started a nightmare for web developers. Development of large web sites, 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.
In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.
All browsers support CSS today.
CSS Saves a Lot of Work!
CSS defines HOW HTML elements are to be displayed.
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
CSS Syntax
A CSS rule set consists of a selector and a declaration block:
CSS Selectors
CSS selectors allow you to select and manipulate HTML element(s).
CSS selectors are used to "find" (or select) HTML elements based on their id, classes, types, attributes, values of attributes and much more.
The element Selector
The element selector selects elements based on the element name.
You can select all
elements on a page like this: (all
elements will be center-aligned, with a red text color)
An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing just one file.
Each page must include a link to the style sheet with the tag. The tag goes inside the head section:
An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension. An example of a style sheet file is shown below:
"myStyle.css" :
body { background-color: lightblue; } h1 {
To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a h1 element:
Example
This is a heading.
Multiple Style Sheets
If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.
For example, assume that an external style sheet has the following properties for the h1 selector:
h1 { color: navy; margin-left: 20px; }
then, assume that an internal style sheet also has the following property for the h1 selector:
h1 { color: orange; }
If the page with the internal style sheet also links to the external style
sheet the properties for the h1 element will be:
color: orange; margin-left: 20px;
The left margin is inherited from the external style sheet and the color is replaced by the internal style sheet.
Multiple Styles Will Cascade into One
Styles can be specified:
inside an HTML element inside the head section of an HTML page in an external CSS file
Cascading order
What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:
Browser default
External style sheet
Try CSS:
Go to the CSS tutorial on the W2Schools site.
http://www.w3schools.com/css/default.asp
Click on 3 of the TRY IT links to try out CSS.
Use the snipping tool to complete the following table.
Original CSS example from TRY IT:
Edit the code and click submit.
Then, snip example with the CHANGES
you made to the code:
Use the notes you took from the article and your experience with the TRY IT
activities to answer the following questions.
**1. What is CSS?
How did CSS Styles Solve a Big Problem?
How does CSS Save a Lot of Work?
What is standard CSS Syntax?
Give an example of CSS code.
What are CSS Selectors?
What is an html element? What is an element Selector?
What are the Three Ways to Insert CSS?
How do you link an External Style Sheet to an HTML document?**
