Embed Size (px)
Citation preview
CCascading ascading SStyle tyle SSHEETSHEETSfor formatting and layout controlfor formatting and layout control
CSSCSSHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
Why Use CSS?Why Use CSS?• Consistency and standardization (W3C)• Additional and consistent control to look
and layout of all web pages in a site• Changes can be made to multiple pages
through a single external source – SAVES TIME!!!SAVES TIME!!!
• Allows for more structurally sound code
CSSCSSHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTMLHTML
Vocabulary EquivalentsVocabulary Equivalents
CSSCSS HTMLHTML• SelectorsSelectors
• DeclarationsDeclarations– Properties– Values
• SyntaxSyntax– {Curly Braces}– Colons :– No quotes– Semi-colons ;
• Elements/TagsElements/Tags
• DefinitionsDefinitions– Attributes– Values
• SyntaxSyntax– <Angle Brackets>– Equal signs =– Quotes “ ”– Spaces
HTML CodeHTML Code<font size=“2” <font size=“2”
face=“verdana”></font>face=“verdana”></font>
CSS CodeCSS Codebody {font-size: medium; font-family: body {font-size: medium; font-family: verdana}verdana}
Located in <Located in <bodybody> AREA > AREA WITHIN <WITHIN <FONTFONT> TAG> TAG
Located in <Located in <headhead> area > area within <within <stylestyle> tag> tagLINKED to outside LINKED to outside CSSCSS file file
in <in <headhead> area > area within <within <LINKLINK> tag> tag
Locations for CSSLocations for CSS
• Within a separate Notepad file with a .css extension then linked with a <linklink> tag in the <headhead> section of an HTML page
• Within the <headhead> area within a <stylestyle> tag
• Embedded within a line of HTML code as a “style” attribute with declarations listed in one set of quotes
In Notepad, linked to HTML pageIn Notepad, linked to HTML page<html><html>
<head><head>
<title>CSS Sample</title><title>CSS Sample</title>
<link rel=“stylesheet” type=“text/css” <link rel=“stylesheet” type=“text/css” href=“href=“filename.cssfilename.css”>”>
</head></head>
In the <head> sectionIn the <head> section<html><html><head><head><title>CSS Sample</title><title>CSS Sample</title>
</head></head>
Takes precedence over Takes precedence over External CSSExternal CSS
Embedded in HTML codeEmbedded in HTML code
<html><html>
<head><head>
<title>CSS Sample</title><title>CSS Sample</title>
</head></head>
<body><body>
<p <p style=“font-size: small; color: red; style=“font-size: small; color: red; font-weight: bold; font-family: font-weight: bold; font-family: arial”>arial”>Sample text</p>Sample text</p>
Takes precedence over Takes precedence over External CSS AND External CSS AND CSS embedded in CSS embedded in
the <HEAD> sectionthe <HEAD> section
CSS Online RESOURCESCSS Online RESOURCES
Creating Order from Chaos Creating Order from Chaos •Webmonkey - CSS Resource Pages Webmonkey - CSS Resource Pages http://hotwired.http://hotwired.lycoslycos.com/.com/webmonkeywebmonkey/reference//reference/stylesheetstylesheet_guide/_guide/ •Cascading Style SheetsCascading Style Sheetshttp://www.http://www.webreferencewebreference.com/authoring/style/sheets/.com/authoring/style/sheets/ •The CSShark Answers FAQsThe CSShark Answers FAQsThe CSS Know-How SiteThe CSS Know-How Sitehttp://www.mako4css.com/http://www.mako4css.com/ •W3Schools CSS SamplesW3Schools CSS Samples http://www.w3schools.com/http://www.w3schools.com/csscss//csscss_examples.asp_examples.asp
ReadRead the introduction at the introduction at WebMonkeyWebMonkey
http://hotwired.lycos.com/http://hotwired.lycos.com/webmonkey/reference/webmonkey/reference/
stylesheet_guide/stylesheet_guide/
YesYes…RIGHT …RIGHT NOWNOW!!!!!!
GoGo to the class agenda for to the class agenda for todaytoday
Click on the link within the item Click on the link within the item
CSS PracticeCSS Practice
Read it NOW…Read it NOW………START it TODAY!!!START it TODAY!!!
SAMPLE CSSSAMPLE CSS
