CSS Basics 1x - Issaquah Connect
Download
Report
Transcript CSS Basics 1x - Issaquah Connect
Basic CSS
Cascading
Style
Sheets
Objectives
After 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>
How
easy
is
this
to
read?
</table>
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. Style
HTML 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)
History
The 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.
2.
3.
Style
The style attribute <p style=“prop: value”>
Styles in the document itself (in head tag)
Style in external files
- 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
Rule
Property
Value
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
Properties
Rules can have multiple properties
Comment
Multiple
properties
3 ways to use styles
1.
2.
3.
Inline style: <p style=“prop: value”>
Styles in the document itself (in head tag)
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?
What happens with the following?
It separates the content from the style
...
<head>
</head>
<body>
…
<style type="text/css">
p
{
</style>
}
color: #00FF00;
<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.
History
The 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.