1. Improve the Look of Your Web Page with CSS Caroline Hallam September 16, 2014

2. CSS we’re focusing on today  Size  Color  Font  Margins & Padding  Borders

3. Cascading Style Sheets  Cascading Style Sheets are used to format the layout of web pages  CSS helps web developers create a uniform look across several pages of a website  Instead of defining the style of each block of text within a page’s HTML, commonly used styles will only need to be defined once in a CSS document

4. Types of CSS

5. Structure of CSS selector { property: value; property: value; property: value; } h1 { font-family: Arial, Helvetica, sans-serif ; font-size: medium; color: #000000; } Make sure to always check your syntax. You will break your CSS document if you forget a brace, colon, or semicolon.

6. Parents and Children  If one element contains another, it is the parent of the contained, or child, element  “Child” elements will inherit some properties from “parent” elements unless you specify otherwise

7. Example HTML: Font is Arial due to parent/child relationship. CSS: body { font-family: Arial, Helvetica, sans-serif; color: black; } p { font-size: 20px; color: hotpink; } Check it out!

8. Copyright Issues  Always note your source so it can be traced  Avoid using copyrighted materials as often as possible  Take advantage of being in college – educational exception under fair use educational exception under fair use  Always give credit where credit is due!

9. Colors Several ways to specify colors in CSS:colors in CSS  By name this one works but is limited, since there are only a handful of colors with usable names. p {color:red;}  By hex code p {color:#12310f;} p {color:#C30;}  By rgb / rgba or hsla value p {color:rgb(187, 49, 47);} p {color:hsla(170, 50%, 45%, 1);}

10. Fonts  CSS can define the font style, size, color, and boldness  CSS Font Families CSS Font Families  Other Font Options Other Font Options

11. Size  Defined in CSS with width and height properties  If you define only the width of an image, it will rescale the height to match img { width: 10%}  Try it out!

12. Liquid vs. Fixed Layout  In a fluid layout the sizes of areas expand and collapse as you resize your browser windowfluid layout  In a fixed layout, the sizes of areas stay the same because they are set by a specific numeric valuefixed layout  A combination of these two layouts is known as elastic – DON’T USE IT!DON’T USE IT!

13. Box Model

14.  When you are setting values for all four sides of padding, margin, border etc… there is no need to say: padding-top:10px; padding-right:0px; padding-bottom:10px; padding-left:0px; Instead, you can write: padding:10px 0px 10px 0px;  The order goes: top, right, bottom, left

15. Floats  Floating an element removes it from the normal flow of the page and places it to the right or left  Floating elements need an id and a width: #content { width:787px; border-top: solid #12310f 3px; border-left: solid #12310f 3px; padding: 20px; float:right;}  To turn off float, use: clear:both;

16. Extra Resources W3Schools CSS Reference CSS Pocket Reference Getting Started with CSS Firebug CSS validator

17. tag  Defines a division or a section in an HTML document  Often used to group block elements to format them with styles

18. Example Sweet Bunny! <img src="http://upload.wikimedia.org/wikipedia/commons/e/e5/ Easter_Bunny_Postcard_1907.jpg" class="postpic"> Sweet roll halvah tootsie roll croissant chocolate bar. Muffin tootsie roll candy applicake muffin gummies. Jelly beans ice cream wafer. Pudding jelly beans cupcake marzipan soufflé soufflé ice cream biscuit. Dragée ice cream topping jujubes. Soufflé caramels gingerbread fruitcake tiramisu soufflé gummi bears lemon drops.

19. tag  Similar to a div except that a tag is used to group inline elements in a document  Provides no visual change by itself, but it allows you to add styles to a specific section of content  For example, highlighting/emphasizing a section or title between paragraphs

20. Example In the body: You can add highlighted and colored text! In the CSS style sheet:.highlight { background-color: #FFFF00; color: red; font-size: 28pt;} Translates to: You can add highlighted and colored text!

21. id Selector  Used to specify a style for a single, unique element  Uses the HTML id attribute  Defined with a # in CSS style sheet

22. Example HTML: Module Name CSS: #banner { width: 400px; height: 120px; margin: 0; padding: 0; float: right; line-height: 95px; } Check it out!

23. class Selector  Used to specify a style for a group of elements  Unlike the id selector, the class selector is most often used on several elements allowing you to set a particular style for many HTML elements with the same class  Uses HTML class attribute  Defined with a period. in the CSS style sheet

24. Example HTML: Lorem ipsum dolor sit amet, consectetur adipiscing elit. CSS: p.red { font-family: "Times New Roman", Georgia, Serif; color:#FF0000; } p.blue { font-family: Arial, Helvetica, sans-serif; color:#0000FF; } Check it out!

25. Naming Selectors  Similar to HTML documents, you need to carefully consider how you name your CSS selectors  Avoid names that relate to presentation  For example, if you set up your website with a red layout and label class=“red” – what will happen when you decide to change your layout to blue next week?  Name selectors based on what they do not what they are such as mainimg instead of catpic

26. Specificity  When there are multiple rules that could apply to the same element, the browser will use the most specific one id is the most specific, then class, then an element with no id or class applied  If there are equally specific rules that could apply (two classes) then the bottom-most in the style sheet applies