instructor: mike panitz [email protected] crash course in css
TRANSCRIPT
![Page 2: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/2.jpg)
2
Anyone want to take notes? I’ve got a carbon-copy binder for notes for the quarter
You’d get paid $50
Talk to me 1-on-1 for details
![Page 3: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/3.jpg)
3
Document Structure
Document Appearance
Interactivity
![Page 4: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/4.jpg)
4
What is CSS ?
• CSS stands for Cascading Style Sheets• Styles define how to display HTML elements• Styles were added to HTML 4.0 to solve a problem of separating content from
the way it is formatted and displayed• External Style Sheets can save a lot of work by adding formatting and display
configuration to an entire web site• External Style Sheets are stored in .css files
CSS is a way to style and present the information offered in an HTML page. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document, including its font size and type, item colors, item formatting, margins and padding, rows and columns, in short the look and feel of a web page or entire web site.
![Page 5: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/5.jpg)
5
Why do we care about CSS?We’re focusing on programming JavaScriptMany web pages provide interactivity by changing their appearance
Form validation: highlight the wrong elements Changing (adding, removing) elements on the page with a specific
style so that they stand out
You can create 2D games! CSS can be used to position things CSS +JavaScript can move things around
CSS “selector syntax” is re-used by jQuery to identify items on a page
![Page 6: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/6.jpg)
6
With CSS Without CSS
H1
H3
P
P
P
![Page 7: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/7.jpg)
7
Goals & Objectives CSS is a separate language.
Since it has a different purpose (appearance) than HTML (structure), it has a different form Goal: Get a feel for the language Goal: Be able to use a couple of CSS properties
CSS & HTML are commonly mixed into the same file THIS IS GOING TO TAKE SOME GETTING USED TO, but you can do it! Goal: Be able to identify which parts of a single file are the HTML parts (and obey HTML
rules), and which are the CSS parts (and obey the CSS rules)
Goal: Be able to identify an external style sheet, and open / read the external stylesheet
Goal: Understand that in this class we’re going to mostly stick with ‘internal’ stylesheets, at least for now
![Page 8: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/8.jpg)
8
Styles can be specified three ways:
• inside an HTML element (Inline Style)• inside the head section of an HTML page (Internal Style Sheet)• in an external CSS file (External Style Sheet)
Tip: multiple external style sheets can be referenced inside a single HTML document.
Cascading Order – YOU DO NOT NEED TO REMEMBER THIS!!!
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:
1. Browser default2. External style sheet3. Internal style sheet (in the head section)4. Inline style (inside an HTML element)
So, an inline style (inside an HTML element) has the highest priority, which means that it will override a style defined inside the <head> tag, or in an external style sheet, or in a browser (a default value).
NOTE: If the link to the external style sheet is placed after the internal style sheet in HTML <head>, the external style sheet will override the internal style sheet!
![Page 9: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/9.jpg)
9
Inline Style
Inline style does exactly what it sounds like, it adds a style or styles in direct line with the HTML code itself (i.e., it is "embedded" inline with the HTML code)
An inline style loses many of the advantages of style sheets because the inline style mixes content with presentation.
To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example below shows how to change the font color and the left and right margins of a paragraph:
<p style="color:sienna; margin-left:20px; margin-right:600px;">THIS DEMONSTRATES THE INLINE METHOD OF CSS DECLARATION. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pellentesque iaculis luctus. Phasellus quis faucibus turpis. Ut convallis quam id risus mattis lobortis. Cras quis augue vulputate, laoreet mauris id, pharetra ligula. Curabitur placerat sem eros, non rhoncus justo sollicitudin eu.</p>
![Page 10: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/10.jpg)
10
Internal Style Sheet
An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:
<head><style>p {margin-left:20px; margin-right:600px; color:red;}body {background-color: #ffff99;} <!– or the pair shortcut #ff9 --></style></head>
![Page 11: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/11.jpg)
11
External Style Sheet
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 one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:
<head><link rel="stylesheet" type="text/css" href="style.css"></head>
An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension and given any name you choose appropriate to your design intentions (e.g., style.css). An example of a style sheet file is shown below:
p {color:red; margin-left:20px; margin-right:600px;}
body {background-color: #cccc66;}
style.css
index.html
FYI: link rel is link relation and in our case it is a "stylesheet". There are other types of relations besides stylesheet, like author, help, license, search, to name a few.
![Page 12: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/12.jpg)
12
Demonstration
There’s an HTML file on the website which demonstrates this in the Lecture 02 example files
In this class we’ll mostly be using the internal style sheets (at least for now) It’s still good to be able to recognize the others, too
![Page 13: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/13.jpg)
13
CommentingHTML Comment
<!-- Comment Goes Here -->
CSS Comment
/* Comment Goes Here */
![Page 14: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/14.jpg)
14
Exercise: Identify CSS & HTML
Go to the exercises for todayFind the exercise for identifying CSS & HTML regions of a file
Do that exercise
![Page 15: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/15.jpg)
15 CSS Selectors
Feel free to follow along with the slides, or check out the demo file (CSS_Selectors.html) on the course web page
![Page 16: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/16.jpg)
16
CSS Syntax for internal & external stylesheets
A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets or "squiggles":
p {color:red; text-align:center;}
![Page 17: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/17.jpg)
17
The element SelectorSimply list the name of an element (such as p, or a, or li, or div, or span, or….) and ALL paragraphs/anchors/list items/divs/spans/etc will have that style applied.
In the CSSp { background-color: azure;}
In the HTML
<p>This paragraph has a very light blue background-it’s azure!</p>
![Page 18: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/18.jpg)
18
The id Selector: #Standards specify that any given id name can only be referenced once within a page or document. From my experience, ids are most commonly used correctly in CSS layouts. This makes sense because there are usually only one 'wrapper' per page, or only one menu, one banner, usually only one content pane, etc. What this means is, two selectors cannot us the same id. If you want to do that, then you would create and use a class (which we'll talk about a bit later). NOTE: Do NOT start an id name with a number! It will not work in Firefox.
In the CSS
p#wrapper {width:70%; sets width of div in relation to the browser margin:0px auto; background-color: greenyellow;
}
In the HTML
<p id="wrapper"> Some stuff gokes here <a href=www.google.com>google!</a> etc.</p>
![Page 19: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/19.jpg)
19
The class Selector: .The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements. This allows you to set a particular style for many HTML elements with the same class. The class selector is defined with a period or "dot": . NOTE: You can name a class anything you want, although it is recommended you give it a name according to its function.
In the example below, all HTML elements with class="center" will be center-aligned:
In the CSS
.center {text-align:center;}
In the HTML
<h1 class="center">Rex Winkus's Portfolio</h1><p class="center">Week 01</p><p>this is the stuff in the first week</p><p class="center">Week 02</p><p>this is the stuff in the second week</p> W3Schools: Class vs ID
![Page 20: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/20.jpg)
20
Exercise: Style A Page Using SelectorsFun fact: the popular JavaScript library named jQuery uses CSS selector syntax to identify which part(s) of the page to dynamically modify using JavaScript.
![Page 21: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/21.jpg)
21 Some CSS Properties
![Page 22: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/22.jpg)
22
Basic CSS Properties: color
The color property specifies the color of text.
In the CSS
body {color:red;}h1 {color:#00ff00;}.ex {color:rgb(0,0,255);}
In the HTML
<h1>This is heading 1</h1><p>This is an ordinary paragraph. Notice that this text is red. The default text-color for a page is defined in the body selector.</p><p class="ex">This is a paragraph with class="ex". This text is blue.</p>
W3Schools: color
Value Description
color Specifies the text color. Look at CSS Color Values for a complete list of possible color values.(W3Schools also has a list of the predefined color names (like red, green, blue, aqua, etc, etc.).
inherit Specifies that the color should be inherited from the parent element
![Page 23: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/23.jpg)
23
The background-color Property
The background-color property sets the background color of an element.
background-color:green;
W3Schools: background-color
![Page 24: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/24.jpg)
24
HTML Color Codes
http://www.w3schools.com/html/html_colors.asp
http://www.w3schools.com/html/html_colornames.asp
• Red/Green/Blue Hecadecimal Triplets• 0123456789abcdef
• Red/Green/Blue RGB Decimal Code• 0 - 255
• X11 Color Names• thistle, magenta, indigo, gray, grey
• HSL/HSV hue-saturation-lightness -value
• 0 - 360° , 0 - 100%, 0 - 100%• Web Safe Colors
• VGA 256 216 (6 × 6 × 6 = 216)each from 00 to FF
http://www.computerhope.com/htmcolor.htm
http://www.computerhope.com/color-qa.htm
http://html-color-codes.info/
/* RGB model */#F00 /* 3-digit shortchand hex form #rgb */#FF0000 /* 6-digit traditional hex form #rrggbb */rgb(255, 0, 0) /* integer range 0 - 255 */rgb(100%, 0%, 0%) /* float range 0.0% - 100.0% */ /* RGB with alpha channel, added to CSS3 */rgba(255, 0, 0, 0.5) /* 0.5 opacity, semi-transparent */ /* HSL model, added to CSS3 */hsl(0, 100%, 50%) /* red */hsl(120, 100%, 50%) /* green */hsl(120, 100%, 25%) /* dark green */hsl(120, 100%, 75%) /* light green */hsl(120, 50%, 50%) /* pastel green */ /* HSL model with alpha channel */hsla(120, 100%, 50%, 1) /* green */hsla(120, 100%, 50%, 0.5) /* semi-transparent green */hsla(120, 100%, 50%, 0.1) /* very transparent green */
http://en.wikipedia.org/wiki/Web_colors
![Page 25: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/25.jpg)
25
HTML Color Codes
You are expected to be able to change the color of stuff on in-class exercises, homeworks, etc from memory
You are expected to recognize the color property, and be able to use at least the words ‘red’, ‘green’, and ‘blue’ on quizzes & exams
You are NOT expected to remember anything else from the prior slideSpecifically, you will not be asked about hexadecimal#’s
![Page 26: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/26.jpg)
26
Some Other Basic CSS Properties: font-family
In the CSS [remember, that these class names can be anything you want]
.serif { font-family:"Times New Roman",Times,serif; }
.sanserif { font-family:Arial,Helvetica,sans-serif; }
In the HTML
<h1 class="serif">This is heading 1</h1><h2 class="sansserif">This is heading 2</h2><p class="serif">This is a paragraph.</p><p class="sansserif">This is a paragraph.</p>
W3Schools: font-family
![Page 27: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/27.jpg)
27
Some Other Basic CSS Properties: font-size
In the CSS
h1 {font-size:250%;}h2 {font-size:200%;}.ften {font-size:10pt;}.bypixel {font-size:10px;}.f875em {font-size:0.875em;}
In the HTML
<h1>This is heading 1</h1><h2>This is heading 2</h2><p>This is a paragraph.</p><p class="ften">This is a paragraph.</p><p class="f875em">This is a paragraph.</p> W3Schools: font-size
An "em" is a relative property based on the default font-size of the browsers, which is typically 16px. For example, this means that:
• 1em = (16 x 1) = 16px = 100% • 1.25em (16 x 1.25) = 20px = 125%• 0.75em (16 x 0.75) = 12px = 75%• 2em (16 x 2) = 32px = 200%
![Page 28: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/28.jpg)
28
Some Other Basic CSS Properties: font-style
In the CSS [remember, that these class names can be anything you want]
.normal {font-style:normal;}
.italic {font-style:italic;}
.oblique {font-style:oblique;}
In the HTML
<p class="normal">This is a paragraph, normal.</p><p class="italic">This is a paragraph, italic.</p><p class="oblique">This is a paragraph, oblique.</p><h2 class="oblique">This is a heading1, oblique.</h2> W3Schools: font-style
![Page 29: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/29.jpg)
29
Some Other Basic CSS Properties: text-alignThe text-align property specifies the horizontal alignment of text in an element.
In the CSS
h1 {text-align:center}h2 {text-align:left}h3 {text-align:right}
In the HTML
<h1>This is heading 1</h1><h2>This is heading 2</h2><h3>This is heading 3</h3> W3Schools: text-align
Value Description
left Aligns to the left
right Aligns to the right
center Centers the text
justify stretches the lines so each line has equal width
![Page 30: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/30.jpg)
30
Just for fun:Assorted Tips & Tricks
Tips & Tricks• HTML5 & CSS3 Readiness Chart• Can I Use … ?• Initializer• Front End Tools for Workflow• The ToolBox
• HTML/CSS Frameworks• Blueprint• Bluetrip• Elements• Malo
• CSS Tips & Tricks• CSS3.me Generator• CSS3Generator• LayerStyles• Gradient Editor• Arrow Please• Create CSS3• CSS Values
http://www.pinterest.com/pibbydotcom/html5-css3-tips-and-tricks/
![Page 31: Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS](https://reader035.vdocument.in/reader035/viewer/2022062321/56649da15503460f94a8d35b/html5/thumbnails/31.jpg)
31
Exercise: Practice Using Some Basic CSS Styles