<HTML>         <.CSS> Masterclass    21 November
What’s HTML and CSS?
<HTML>     <.CSS> Content     Style
HTMLIt’s all about the tags
Element
Element          Attribute
Element               Content          Attribute
HTMLAn example
Structure firstWhat’s inside an HTML document?
<HTML> The container
<HEAD> The setup
<BODY> The content
Writing the content
Block or Inline
BlockInline
BlockCreate a new line and occupy full width
InlineKeep the flow of the document
Usually work in pairs
Most Important Elements     You’ll use these 90% of the time
<DIV>The all-mighty block element
<SPAN>The inline <div>
<P>Paragraph is for text
<H1>Headings from H1 to H6
<A>Link to other pages or sections
But use them wisely
HTML is semantic
Tags have meanings
Don’t suffer from divitis
Start with the structure
Hello HTML5!
<HEADER>Header for a document or section
<NAV>The new navigation menu
<SECTION>  The new <div>
<ARTICLE>Blog posts, news stories, comments
<ASIDE>Related, but not really important content
<FOOTER>Footer for a document or section
A real example
<header>
<nav>
<section>
<article>
<footer>
HTML resources
Let’s start styling!
Add the CSS to the page
SelectorsSelect element to style
TagClass ID
Tag        Class      ID
You can be very specific
Be careful with the space
PropertiesWhat do you want to change?
ValuesDetermine the behaviour of the property
Browsers have custom styling
And custom properties
The box-model
CSS can change everything
CSS3 is awesome
But Keep It Simple!
You don’t even need to work
There are tons of CSS frameworks
Keep learning
Questions?
Thank you!         @braposobernardo@connectcoimbra.com
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
HTML & CSS Masterclass
Upcoming SlideShare
Loading in …5
×

HTML & CSS Masterclass

4,359 views

Published on

Masterclass about HTML and CSS, including the new HTML5 structure elements. Great for beginners.

Published in: Design
0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,359
On SlideShare
0
From Embeds
0
Number of Embeds
1,557
Actions
Shares
0
Downloads
283
Comments
0
Likes
10
Embeds 0
No embeds

No notes for slide

HTML & CSS Masterclass

  1. 1. <HTML> <.CSS> Masterclass 21 November
  2. 2. What’s HTML and CSS?
  3. 3. <HTML> <.CSS> Content Style
  4. 4. HTMLIt’s all about the tags
  5. 5. Element
  6. 6. Element Attribute
  7. 7. Element Content Attribute
  8. 8. HTMLAn example
  9. 9. Structure firstWhat’s inside an HTML document?
  10. 10. <HTML> The container
  11. 11. <HEAD> The setup
  12. 12. <BODY> The content
  13. 13. Writing the content
  14. 14. Block or Inline
  15. 15. BlockInline
  16. 16. BlockCreate a new line and occupy full width
  17. 17. InlineKeep the flow of the document
  18. 18. Usually work in pairs
  19. 19. Most Important Elements You’ll use these 90% of the time
  20. 20. <DIV>The all-mighty block element
  21. 21. <SPAN>The inline <div>
  22. 22. <P>Paragraph is for text
  23. 23. <H1>Headings from H1 to H6
  24. 24. <A>Link to other pages or sections
  25. 25. But use them wisely
  26. 26. HTML is semantic
  27. 27. Tags have meanings
  28. 28. Don’t suffer from divitis
  29. 29. Start with the structure
  30. 30. Hello HTML5!
  31. 31. <HEADER>Header for a document or section
  32. 32. <NAV>The new navigation menu
  33. 33. <SECTION> The new <div>
  34. 34. <ARTICLE>Blog posts, news stories, comments
  35. 35. <ASIDE>Related, but not really important content
  36. 36. <FOOTER>Footer for a document or section
  37. 37. A real example
  38. 38. <header>
  39. 39. <nav>
  40. 40. <section>
  41. 41. <article>
  42. 42. <footer>
  43. 43. HTML resources
  44. 44. Let’s start styling!
  45. 45. Add the CSS to the page
  46. 46. SelectorsSelect element to style
  47. 47. TagClass ID
  48. 48. Tag Class ID
  49. 49. You can be very specific
  50. 50. Be careful with the space
  51. 51. PropertiesWhat do you want to change?
  52. 52. ValuesDetermine the behaviour of the property
  53. 53. Browsers have custom styling
  54. 54. And custom properties
  55. 55. The box-model
  56. 56. CSS can change everything
  57. 57. CSS3 is awesome
  58. 58. But Keep It Simple!
  59. 59. You don’t even need to work
  60. 60. There are tons of CSS frameworks
  61. 61. Keep learning
  62. 62. Questions?
  63. 63. Thank you! @braposobernardo@connectcoimbra.com

×