Document Structure. Document Appearance. Interactivity

Size: px

Start display at page:

Download "Document Structure. Document Appearance. Interactivity"

Chad Boone
6 years ago
Views:

1 Crash Course in CSS

2 Document Structure Document Appearance Interactivity 2

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

4 out H1 P H3 P P 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 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 6

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

8 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 <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! 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: <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> 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 <style> tag, like this: <head> <style> p {margin-left:20px; margin-right:600px; color:red;} body {background-color: #ffff99;} </style> </head> 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 <link> tag. The <link> tag goes inside the head section: index.html <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: style.css p {color:red; margin-left:20px; margin-right:600px; } body {background-color: #cccc66; } 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 Commenting HTML Comment  CSS Comment /* Comment Goes Here */ 12

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

14 14

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

16 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 <p>this paragraph has a very light blue background-it s azure!</p> 16

17 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 to identify a single, specific thing on the page. 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 elements cannot use 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 #wrapper { width:70%; sets width of element in relation to the browser margin:0px auto; background-color: greenyellow; } In the HTML <p id="wrapper"> Some stuff goes here <a href= etc. </p> 17

18 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 18

19 Do Exercise #2 Then move on to the next topic: figuring out some CSS styles on your own: exercises #3-9 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. 19

20 20

21 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 Value color inherit Description 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.). Specifies that the color should be inherited from the parent element <h1>this is heading 1</h1> <p>this is an ordinary paragraph. Notice that this text is red. The default textcolor for a page is defined in the body selector.</p> W3Schools: color <p class="ex">this is a paragraph with class="ex". This text is blue.</p> 21

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

23 HTML Color Codes /* RGB model */ #F00 /* 3-digit shortchand hex form #rgb */ #FF0000 /* 6-digit traditional hex form #rrggbb */ rgb(255, 0, 0) /* integer range */ rgb(100%, 0%, 0%) /* float range 0.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 */ Red/Green/Blue Hecadecimal Triplets abcdef Red/Green/Blue RGB Decimal Code X11 Color Names thistle, magenta, indigo, gray, grey HSL/HSV hue-saturation-lightness -value 0-360, 0-100%, 0-100% Web Safe Colors VGA (6 6 6 = 216) each from 00 to FF

24 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 24

25 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 25

26 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 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% <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 26

27 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 27

28 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 Value left right center justify Description Aligns to the left Aligns to the right Centers the text stretches the lines so each line has equal width <h1>this is heading 1</h1> <h2>this is heading 2</h2> <h3>this is heading 3</h3> W3Schools: text-align 28

29 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 29

30 Exercises #3 9 (If you haven't done so already ) 30

What is CSS? NAME: INSERT OPENING GRAPHIC HERE:

What is CSS? NAME: INSERT OPENING GRAPHIC HERE: Highlight VOCABULARY WORDS that you need defined. Put a? mark in any area that you need clarified. 1 What is CSS? CSS stands for Cascading Style Sheets Styles