Intro to CSS

1,304 views
1,238 views

Published on

Intro to CSS. This presentation was built for a design and development class at the UC Berkeley Graduate School of Journalism.

Published in: Education
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,304
On SlideShare
0
From Embeds
0
Number of Embeds
198
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Intro to CSS

  1. 1. Cascading Style Sheets UC Berkeley Graduate School of JournalismTuesday, March 15, 2011
  2. 2. CSS fundamentals • CSS is for styling an HTML document. • CSS can affect fonts, sizes, colors, backgrounds, spacing, borders, and more. • CSS is its own language, with its own syntax.Tuesday, March 15, 2011
  3. 3. Where is CSS kept?Tuesday, March 15, 2011
  4. 4. One of three ways 1. Loaded in a separate document. 2. Specified in the <head> tag of the HTML document. 3. Specified directly in the HTML tags themselves.Tuesday, March 15, 2011
  5. 5. One of three ways • External Style Sheets • Embedded Style Sheets • Inline Style SheetsTuesday, March 15, 2011
  6. 6. External Style Sheets <head  lang="en">    <meta  charset="utf-­‐8">    <title>This  is  my  title</title>    <meta  name="description"  content="This  is  an  example  of  my  webpage">    <meta  name="author"  content="Jeremy  Rue">    <link  rel="stylesheet"  href="css/style.css"> </head>Tuesday, March 15, 2011
  7. 7. External Style Sheets • The best way to include CSS in a document. • The only drawback (and it’s a small one) is that if the style sheet is separate, therefore if it ever gets deleted then the page won’t look right. • Most general method of including styles.Tuesday, March 15, 2011
  8. 8. Embedded Styles <head  lang="en"> <meta  charset="utf-­‐8"> <title>This  is  my  title</title>   <style  type="text/css"> h1  {color:red} p  {color:blue} </style> </head>Tuesday, March 15, 2011
  9. 9. Embedded Styles • Will override any similar rules from external style sheets. • Sometimes this is used because you want a single page to have some different styles that the rest of your website. • Styles stay with the HTML page, because it’s a part of the page.Tuesday, March 15, 2011
  10. 10. Inline Styles <body> <header> <h1  style=“color:red”>Hello  World</h1> </header> </body>Tuesday, March 15, 2011
  11. 11. Inline Styles • The worst way to include CSS in a document. Avoid if possible. • Sometimes it can be needed, because you are working in a system where you just need one specific element, in a single webpage, to look a certain way and you don’t have access to the style sheets.Tuesday, March 15, 2011
  12. 12. SyntaxTuesday, March 15, 2011
  13. 13. Parts of CSS element body  { font-­‐size:  12px; color:  #000000; }Tuesday, March 15, 2011
  14. 14. Parts of CSS element body  { font-­‐size:  12px; color:  #000000; } This is the SELECTOR. It is specifying the part of the page that will be affected by the style.Tuesday, March 15, 2011
  15. 15. Parts of CSS element body  { font-­‐size:  12px; color:  #000000; } These are PROPERTIES. There are a number of defined properties that you can change.Tuesday, March 15, 2011
  16. 16. Parts of CSS element body  { font-­‐size:  12px; color:  #000000; } These are VALUES of the property.Tuesday, March 15, 2011
  17. 17. Parts of CSS element body  { font-­‐size:  12px; color:  #000000; } A COLON separates the properties from the values.Tuesday, March 15, 2011
  18. 18. Parts of CSS element body  { font-­‐size:  12px; color:  #000000; } A SEMI-COLON ends each line of code.Tuesday, March 15, 2011
  19. 19. Parts of CSS element body  { font-­‐size:  12px; color:  #000000; } Note the CURLY BRACKETS, one opens and the other closes.Tuesday, March 15, 2011
  20. 20. font-family • Specifies a family of fonts to use. Create a list of fallbacks should the user not have the font installed. • Put font names with more than one word in quotes. • Example: font-­‐family:“Times  New  Roman”,  Times,  serifTuesday, March 15, 2011
  21. 21. color • Specifies the color of text. • Specify one of three ways: Hexadecimal, RGB or simple names. We will use hexadecimal. • Example: color:#aaf999Tuesday, March 15, 2011
  22. 22. font-size • You should use either px or em. • PX stands for pixels, and is a fixed font size in Internet Explorer. • EM is a relative size, and is based on the default font size of the browser. • 1 em = 16 px in most browsers. • font pixels/16 = the size you want.Tuesday, March 15, 2011
  23. 23. EXAMPLE body  { font-­‐family:“Palatino  Linotype”,   “Book  Antiqua”,  Palatino,  serif; color:  #eeeeee; }Tuesday, March 15, 2011
  24. 24. background-color • Specifies the background color of an element using the same color units as color. We use hexadecimal. • Example: background-­‐color:  #f5f5f5;Tuesday, March 15, 2011
  25. 25. Base Styles • Base styles means when you apply a style to an element, like h1, h2 or p. • Applies to that element throughout the document. • Example: h1  {      font-­‐family:  Helvetica,  Arial,  sans-­‐serif; }Tuesday, March 15, 2011
  26. 26. Grouping (selectors) • If you want to apply a style to multiple elements, use a comma. • Example: h1,  h2,  h3  {      font-­‐family:  Helvetica,  Arial,  sans-­‐serif; }Tuesday, March 15, 2011
  27. 27. Nested (Selectors) • If several base elements are listed with a space, it means only elements that are descendants of the first element. • Example: article  h1{            font-­‐size:  1.2  em; }Tuesday, March 15, 2011
  28. 28. IDs vs ClassesTuesday, March 15, 2011
  29. 29. IDs and Classes • IDs allow you specify specific elements in an HTML document. Each ID can only be specified once. • Classes allow you to specify a group of elements in an HTML document.You can use a class an unlimited number of times.Tuesday, March 15, 2011
  30. 30. IDs • Each unique ID can be applied only once to a document. • HTML attribute example:  id=“copyright”   • CSS example: #copyright  {      font-­‐style:italic; }Tuesday, March 15, 2011
  31. 31. Classes • Classes can apply to any number of elements. Use classes to group elements to your own grouping method. • HTML example: class=“headlines” • CSS  example: .headlines  {          font-­‐size:  1.2em; }Tuesday, March 15, 2011
  32. 32. Selectors • There are lots of ways to specify the elements you are trying to style. • The most common: 1) base style 2) descendants 3) IDs/classes h2  {  color:#000000;  } h2  p  {  color:#000000;  } #firstpost  {  color:#000000;}Tuesday, March 15, 2011
  33. 33. CSS Box ModelTuesday, March 15, 2011
  34. 34. The Box Model <div  id=“content”> <p>Some  content  inside  the  box</p> </div>Tuesday, March 15, 2011
  35. 35. Tuesday, March 15, 2011
  36. 36. The Box Model • Margin - Clears an area around the border. The margin does not have a background color, it is completely transparent • Border - A border that goes around the padding and content. • Padding - Clears an area around the content. • Content - The content of the box, where text and images appearTuesday, March 15, 2011
  37. 37. The Box Model • A DIV’s default height is defined by it’s content. • A DIV’s default width is defined by it’s parent’s width. • When width and height are defined, the content will “overflow” if it’s larger than the size of the box.Tuesday, March 15, 2011
  38. 38. The Box Model #content  { border:  10px  solid  #98bf21; margin:  15px; padding:  10px; width:  300px; height:  300px; }Tuesday, March 15, 2011
  39. 39. 250 pxTuesday, March 15, 2011
  40. 40. Box Model The width and height properties only define the size of the content area.Tuesday, March 15, 2011
  41. 41. Assignment: Cookie Recipe 1. Find a cookie recipe online. Anything will do. 2. Include a photo, ingredients and directions and headline. 3. Make sure you style the: i. Fonts ii. Colors iii. And group it all in a boxTuesday, March 15, 2011
  42. 42. Tuesday, March 15, 2011

×