Introduction to Frontend Development - Session 2 - CSS Fundamentals
0 likes819 views
Slides for the CSS-related lectures in the fundamentals front-end development course at init Lab (http://initlab.org)
More Related Content
Similar to Introduction to Frontend Development - Session 2 - CSS Fundamentals (20)
More from Kalin Chernev (20)
Recently uploaded (20)
Introduction to Frontend Development - Session 2 - CSS Fundamentals
- 1. Front-end development Novice to professional Practical HTML, CSS and JavaScript Session 2: CSS Fundamentals
- 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. 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. 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. What is CSS - Example
- 6. Methods of including CSS ● Inline styles Placed inside the HTML document, style information on a single element, specified using the style attribute ● Embedded style Blocks of CSS information inside the HTML itself ● External style sheets - highly recommended Separate CSS file is referenced. ● Import Importing CSS file from another CSS file when many files are to be edit
- 7. Rule of thumb When styling a HTML element, the closer the CSS rule is to the given element, it overrides any preceding CSS rules before that. By importance: Link > Import > Embedded > Inline Note: Override any rule with the !important property.
- 8. Practice Doing: Try the 4 methods of including CSS At the end: separate file style.css in css folder
- 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. Block-level elements Source: MDN
- 11. Inline elements ● May contain only data and other inline elements ● By default, do not begin with a new line List 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. Setting up the layout - the source
- 13. Setting up the layout - browser
- 14. Practice Doing: Setup the header, content and footer regions. At the end: an index.html file with HTML markup for header, content and footer div containers, together with a CSS file (empty)
- 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. Width and height properties ● height property sets the height of the element ● width property sets the height of the element Both could take dimensions in px, pt, etc., or percentage metrics. Values can also be auto or inherit.
- 17. Float properties ● Property to specify whether or not an element should float. ● Property options ○ left ○ right ○ none - default value
- 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. 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. 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. 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. CSS box model
- 23. Practice Doing: Write the CSS to visualize the layout At the end: an index.html file with HTML markup for header, content and footer div containers, together with a CSS file with selectors and properties to visualize the markup well enough so one can "see" the divisions.
- 24. Summary: HTML study ● Block-level and inline elements in HTML ● HTML tags: ○ html, head, body ○ header, content, sidebar and footer ○ navigation
- 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. 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 layout If you're ready, start your homework at class :)
- 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. Contacts Kalin Chernev t: @kalinchernev u: http://shtrak.eu/kalata e: kalin.chernev(at)gmail.com