1. Instructor: Mike Panitz MPanitz@cascadia.edu Crash Course in CSS

2.  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 2

3. 3 Document Structure Document Appearance Interactivity

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. 4

5.  We’re focusing on programming JavaScript  Many 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 5

6. 6 H1 H3 P P P

7.  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 7

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 default 2. External style sheet 3. 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 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, the external style sheet will override the internal style sheet! 8

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: 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. 9

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 tag, like this: p {margin-left:20px; margin-right:600px; color:red;} body {background-color: #ffff99;} 10

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 tag. The tag goes inside the head section: 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. 11

12.  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 12

13. Commenting HTML Comment CSS Comment /* Comment Goes Here */ 13

14.  Go to the exercises for today  Find the exercise for identifying CSS & HTML regions of a file  Do that exercise 14

15. Feel free to follow along with the slides, or check out the demo file (CSS_Selectors.html) on the course web page 15

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;} 16

17. The element Selector Simply 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 CSS p { background-color: azure; } In the HTML This paragraph has a very light blue background-it’s azure! 17

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 Some stuff gokes here google! etc.www.google.com 18

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 Rex Winkus's Portfolio Week 01 this is the stuff in the first week Week 02 this is the stuff in the second week W3Schools: Class vs IDClass vs ID 19

20.  Fun fact: the popular JavaScript library named jQuery uses CSS selector syntax to identify which part(s) of the page to dynamically modify using JavaScript. 20

21. 21

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 This is heading 1 This is an ordinary paragraph. Notice that this text is red. The default text- color for a page is defined in the body selector. This is a paragraph with class="ex". This text is blue. W3Schools: colorcolor ValueDescription colorSpecifies the text color. Look at CSS Color Values for a complete list of possible color values.CSS Color Values (W3Schools also has a list of the predefined color names (like red, green, blue, aqua, etc, etc.).list of the predefined color names inheritSpecifies that the color should be inherited from the parent element 22

23. The background-color Property The background-color property sets the background color of an element. background-color:green; W3Schools: background-colorbackground-color 23

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 24

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 slide  Specifically, you will not be asked about hexadecimal#’s 25

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 This is heading 1 This is heading 2 This is a paragraph. This is a paragraph. W3Schools: font-familyfont-family 26

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 This is heading 1 This is heading 2 This is a paragraph. This is a paragraph. This is a paragraph. W3Schools: font-sizefont-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% 27

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 This is a paragraph, normal. This is a paragraph, italic. This is a paragraph, oblique. This is a heading1, oblique. W3Schools: font-stylefont-style 28

29. Some Other Basic CSS Properties: text-align The 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 This is heading 1 This is heading 2 This is heading 3 W3Schools: text-aligntext-align ValueDescription leftAligns to the left rightAligns to the right centerCenters the text justifystretches the lines so each line has equal width 29

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/ 30

31. 31