Front-end development     Novice to professional Practical HTML, CSS and JavaScript       Session 2: CSS Fundamentals
Agenda● What do we have so far● What is CSS● Including CSS in your documents● Block-level elements properties● Setting up ...
What do we have so far●   Documents    ○   index.html●   HTML tags in practice    ○   paragraphs, spaces and breaks    ○  ...
What is CSS● CSS stands for Cascading Style Sheets● Styles define how to display HTML elements● External style sheets save...
What is CSS - Example
Methods of including CSS●   Inline stylesPlaced inside the HTML document, style information on a single element,specified ...
Rule of thumbWhen styling a HTML element, the closer the CSS rule is tothe given element, it overrides any preceding CSS r...
PracticeDoing: Try the 4 methods of including CSSAt the end: separate file style.css in css folder
Block-level elements● May appear only within a <body> element● Typically formatted with line breaks● May contain both inli...
Block-level elements                       Source: MDN
Inline elements● May contain only data and other inline elements● By default, do not begin with a new lineList of inline e...
Setting up the layout - the source
Setting up the layout - browser
PracticeDoing: Setup the header, content and footer regions.At the end: an index.html file with HTML markup forheader, con...
Display property● Sets the way to display a HTML element● Most popular values  ○ none - not displayed at all  ○ block - di...
Width and height properties● height property sets the height of the  element● width property sets the height of the elemen...
Float properties● Property to specify whether or not an  element should float.● Property options  ○ left  ○ right  ○ none ...
Clear properties● Property to specify which sides of an  element do not allow other floating elements● Property options  ○...
Position property●   Specifies the type of positioning method used for an element●   Property options    ○   static - elem...
Border property● Sets properties for the outline of the element● Shorthand for setting all properties at once● Property op...
Padding and margin properties● Padding - space between content of an  element and its border. Negative values are  not all...
CSS box model
PracticeDoing: Write the CSS to visualize the layoutAt the end: an index.html file with HTML markup forheader, content and...
Summary: HTML study● Block-level and inline elements in HTML● HTML tags:  ○ html, head, body  ○ header, content, sidebar a...
Summary: CSS study● Theory: Including CSS to HTML documents● Techniques: CSS reset● Properties: display   block, inline, n...
Practice at class● CSS reset● Layout setup for  ○ header  ○ group  ○ content  ○ main  ○ footer● Set fixed sizes on block e...
Practice at home● Read and learn about:  ○ fonts in CSS  ○ text CSS properties  ○ background properties● Repeat class exer...
ContactsKalin Chernevt: @kalinchernevu: http://shtrak.eu/kalatae: kalin.chernev(at)gmail.com
Upcoming SlideShare
Loading in …5
×

Introduction to Frontend Development - Session 2 - CSS Fundamentals

916 views

Published on

Slides for the CSS-related lectures in the fundamentals front-end development course at init Lab (http://initlab.org)

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

  • Be the first to like this

No Downloads
Views
Total views
916
On SlideShare
0
From Embeds
0
Number of Embeds
91
Actions
Shares
0
Downloads
20
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Introduction to Frontend Development - Session 2 - CSS Fundamentals

  1. 1. Front-end development Novice to professional Practical HTML, CSS and JavaScript Session 2: CSS Fundamentals
  2. 2. Agenda● What do we have so far● What is CSS● Including CSS in your documents● Block-level elements properties● Setting up the layout of the document● CSS properties and selectors to learn today● Class and home exercises
  3. 3. What do we have so far● Documents ○ index.html● HTML tags in practice ○ paragraphs, spaces and breaks ○ links, images● CSS we have ○ none so far● JavaScript we have ○ none so far
  4. 4. What is CSS● CSS stands for Cascading Style Sheets● Styles define how to display HTML elements● External style sheets save a lot of work● External style sheets are stored in CSS files
  5. 5. What is CSS - Example
  6. 6. Methods of including CSS● Inline stylesPlaced inside the HTML document, style information on a single element,specified using the style attribute● Embedded styleBlocks of CSS information inside the HTML itself● External style sheets - highly recommendedSeparate CSS file is referenced.● ImportImporting CSS file from another CSS file when many files are to be edit
  7. 7. Rule of thumbWhen styling a HTML element, the closer the CSS rule is tothe given element, it overrides any preceding CSS rulesbefore that.By importance: Link > Import > Embedded > InlineNote: Override any rule with the !important property.
  8. 8. PracticeDoing: Try the 4 methods of including CSSAt the end: separate file style.css in css folder
  9. 9. Block-level elements● May appear only within a <body> element● Typically formatted with line breaks● May contain both inline and other block-level elements● Contain "larger" structures
  10. 10. Block-level elements Source: MDN
  11. 11. Inline elements● May contain only data and other inline elements● By default, do not begin with a new lineList of inline elements:● b, big, i, small, tt● abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var● a, bdo, br, img, map, object, q, script, span, sub, sup● button, input, label, select, textarea Source: MDN
  12. 12. Setting up the layout - the source
  13. 13. Setting up the layout - browser
  14. 14. PracticeDoing: Setup the header, content and footer regions.At the end: an index.html file with HTML markup forheader, content and footer div containers, together with aCSS file (empty)
  15. 15. Display property● Sets the way to display a HTML element● Most popular values ○ none - not displayed at all ○ block - displayed as a block-level element ○ inline - default value, displayed as an inline element ○ table - displayed as a table
  16. 16. Width and height properties● height property sets the height of the element● width property sets the height of the elementBoth could take dimensions in px, pt, etc., orpercentage metrics.Values can also be auto or inherit.
  17. 17. Float properties● Property to specify whether or not an element should float.● Property options ○ left ○ right ○ none - default value
  18. 18. Clear properties● Property to specify which sides of an element do not allow other floating elements● Property options ○ left/right ○ both - most common use ○ none
  19. 19. Position property● Specifies the type of positioning method used for an element● Property options ○ static - elements render in the same order they are in the document ○ absolute - relative to the first positioned (not static) ancestor element ○ fixed - relative to the browser window ○ relative - relative to its normal position
  20. 20. Border property● Sets properties for the outline of the element● Shorthand for setting all properties at once● Property options ○ border-width ○ border-style ○ border-color
  21. 21. Padding and margin properties● Padding - space between content of an element and its border. Negative values are not allowed.● Margin - space between element border and elements next to it. Negative values are allowed.
  22. 22. CSS box model
  23. 23. PracticeDoing: Write the CSS to visualize the layoutAt the end: an index.html file with HTML markup forheader, content and footer div containers, together with aCSS file with selectors and properties to visualize themarkup well enough so one can "see" the divisions.
  24. 24. Summary: HTML study● Block-level and inline elements in HTML● HTML tags: ○ html, head, body ○ header, content, sidebar and footer ○ navigation
  25. 25. Summary: CSS study● Theory: Including CSS to HTML documents● Techniques: CSS reset● Properties: display block, inline, none position relative, absolute width size metric border size, color and place height size metric padding b/n content and border float left, right margin b/n border and outer element clear both
  26. 26. Practice at class● CSS reset● Layout setup for ○ header ○ group ○ content ○ main ○ footer● Set fixed sizes on block elements● Color the borders to see the layoutIf youre ready, start your homework at class :)
  27. 27. Practice at home● Read and learn about: ○ fonts in CSS ○ text CSS properties ○ background properties● Repeat class exercises if necessary● Make sure you understand how to make layouts
  28. 28. ContactsKalin Chernevt: @kalinchernevu: http://shtrak.eu/kalatae: kalin.chernev(at)gmail.com

×