basic css cascading style sheets. objectives after today, you will be able to describe cascading...
TRANSCRIPT
Basic CSSCascadingStyle Sheets
ObjectivesAfter today, you will be able to Describe Cascading Style Sheets (CSS) Explain why CSS is important Define styles for a Web site using CSS Evaluate the resultant style when styles
are placed inline, in the <head> element, and in an external file.
What we’ve learned so far A bunch of HTML tags:
HTML, HEAD, TITLE, BODY, H1-H6, A, IMG, TABLE, TR, TD, TH, BR, HR, P, FONT
How and where to organize them on the page for layout and content
How to do basic formatting of the content using attributes
What we’ve been doing:<table width="100%" height="100%" ><tr><td width="285px" valign="top"><a href="Home%20Page.html">
<font color="blue">Home</font></a><br><p><b><font color="blue">
Categories</font></b></p><br></td>
</tr></table>How easy is this to read?
Where we’re going:<table id=“sitenav”>
<tr><td >
<a href="HomePage.html">Home</a><p>Categories</p>
</td></tr>
</table>
Formatting will be separate
What are Cascading Style Sheets? Consistent format within a Web site
One set of styles applied to all pages Web designers use them to easily change the
look of entire Web site with a few simple changes in the CSS code.
CSS defines how html elements are displayed.
Content vs. StyleHTML is like the meat and vegetables of the web (the words of your page)
CSS is like the spices, herbs, sauces, and garnishes (the formatting and layout)
HistoryThe Need for CSS HTML defines the content of a Web page. With popularity of the Internet, style became important. HTML alone makes it difficult to separate style from the content.
The Result World Wide Consortium (W3C) created styles as a part of HTML 4.0. CSS separates content from style. A separate CSS file can contain almost all of the style details for the
Web site.
Breaking it Down: Cascading Style Sheet Cascading – can be defined in multiple places,
and they work in priority order:1. The style attribute <p style=“prop: value”>2. Styles in the document itself (in head tag)3. Style in external files
Style - Just a fancy word for formatting Sheet - A collection of styles that can be quickly
edited or replaced for a whole new look
CSS – Rules CSS Rule Syntax has 3 parts:
Selector Property Value
Selector
Property Value
Rule
Selectors We’ll learn about selectors in the next
lesson For today: they select or choose which
HTML tags on the page their formatting applies to
PropertiesRules can have multiple properties
Comment
Multiple properties
3 ways to use styles1. Inline style: <p style=“prop: value”>2. Styles in the document itself (in head
tag)3. Style in external files
We’ll try all 3, but almost always use the last one
External Styles Define external style sheet in the <head> tag
Exercise Open a new file in Notepad++ Select Language -> C ->CSS Type a CSS rule for the <p> tag that does the following:
Sets the color Sets the font-family (i.e. verdana)
Save as mystyles.css where favorites.html is Open favorites.html, add the <link> tag to the page to point to
mystyles.css
Inline Styles Define CSS style in the HTML tags The style attribute can be added to many HTML
tags
Exercise Open your favorites assignment Find a <p> tag Specify a color for the <p> tag by using the style
attribute Choose a color that is a part of the color scheme
Styles inside the file Define a CSS style in the <head> tag:
Exercise: Open your favorites.html file In the <head> section, add a <style> block to specify
the color for <p> tags
Best Practice / Requirements Use external styles for the web pages
you design This is the best practice recommended
by the industry All of our work in this class will do the
same
Review What is CSS?
CSS defines how html elements are displayed. Why is CSS important?
It separates the content from the style What happens with the following?
...<head>
<style type="text/css">p{
color: #00FF00;}
</style></head><body>
<p style="color: #FF0000">1st Para</p><p>2nd Para</p>
…
Backup
Debugging with chrome Press f12 after going to a page to view
its source Right click and select “Inspect Element”
Elements This is the html your browser is using, it
will have “fixed” some of your mistakes in this view
Use the Magnifying glass to find how the html is used.
HistoryThe Need for CSS HTML defines the content of a Web page. With popularity of the Internet, style became important. HTML alone makes it difficult to separate style from the content.
The Result World Wide Consortium (W3C) created styles as a part of HTML 4.0. CSS separates content from style. A separate CSS file can contain almost all of the style details for the
Web site.
Advantages of Using CSS Creates consistency within and across pages Example without a CSS file:
A designer creates a Web page containing code for the heading to be bold, green, 32 pt. Arial font.
On the second page of the site, a heading is entered but this time the designer enters 26 pt. font for the heading.
Example with a CSS file: Designer creates a CSS file to define h1 as bold, green, 32 pt. Arial font. The CSS file is referenced on both the first and second page. Every time h1 is used, a heading is as bold, green, 32 pt. Arial font. A change in the CSS file automatically changes both pages.
Advantages of Using CSS Improves the load time for Web pages. CSS code serves as the directions for the browser
to display both content and style. Once the style has been downloaded into
memory (cached), subsequent pages using the same style will load faster.