50 ĐỀ LUYỆN THI IOE LỚP 9 - NĂM HỌC 2022-2023 (CÓ LINK HÌNH, FILE AUDIO VÀ ĐÁ...
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
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
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
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.
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