the look of the web. css3 cascading style sheets- third iteration separate page the user never sees...
TRANSCRIPT
CSSThe Look of the Web
CSS3Cascading Style Sheets- Third iterationSeparate page the user never sees
unintentionallyUsed to alter appearance and visual appeal to
sitesHas Grammar and VocabularyDefines Layout and StyleCreated to simplify Website redesign by
separating style and structureChange one page to adjust the look of 2, 5, 10,
50, 1000
Parts of a CSS StyleSelector
Element you want to adjust the appearanceDeclaration
A change you want to makeProperty
Factor of the element that is changingValue
Variable you are changing that factor to appear as
Parts of a CSS Stylea
{color: #F60;text-decoration: none;
}a{
color:#F60;text-decoration:none;}
a{color:#F60;text-decoration:none;}
SelectorsThree main types of SelectorsHTML Tag
Adjusts all HTML Elements with that tagClass
Adjusts all HTML Elements with that class assignment
Declared in a CSS document with a period before a user defined variable .blogTitle{text-size:16pt;} <h1 class=“blogTitle”> This One Time At
Bandcamp…</h1>
SelectorsID
Adjusts the HTML element with that ID assignment
Declared in a CSS document with a pound symbol (or Hashtag, if you prefer) before a user defined variable #navBar{width:100%;} <div id=“navBar”>Home | About | Blog | Cat Videos
</div>
What is the difference between ID and Class?Classes can be used multiple times on a single
pageIDs can be used only ONCE on a page
SelectorsMnemonic to remember which is which
You attend many classes every day, but only have one student ID number
When do you use an ID vs. a Class?There’s no rule for using a Class instead of an IDIDs are typically used for structural elements and
Classes are used for style elements When are you ever going to have two divs that need to
be a navBar?
More selectors at http://www.w3schools.com/cssref/css_selectors.asp
Adding CSSThree Ways to add CSSInline
<p style=“font-size:20px;”>Big Words</p>Terrible, bad, awful, horrible, no-good idea
Internally<head>
<style>body{background-color:#000;}</style></head>
Adding CSSExternally
<head><link rel="stylesheet" type="text/css" href="master.css"></head>
Super, Excellent, Amazing, Stupendous, Awesome, Terrific, Wonderful, Brilliant Idea
Literally the entire reason CSS was created
Priority of CSS StylesBrowser DefaultExternallyInternallyInline
Structure Tags<span> and <div>
Useless by themselvesWhen paired with CSS, very powerful layout
tools<span> - inline tag- does not break flow of
textUnless you tell it to!
<div> - block tag- will create its own lineUnless you tell it not to!