introduction to frontend development - session 2 - css fundamentals
DESCRIPTION
Slides for the CSS-related lectures in the fundamentals front-end development course at init Lab (http://initlab.org)TRANSCRIPT
Front-end development
Practical HTML, CSS and JavaScript
Session 2: CSS Fundamentals
Novice to professional
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
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
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
What is CSS - Example
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
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.
Practice
Doing: Try the 4 methods of including CSS
At 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 inline and other block-level elements
● Contain "larger" structures
Inline elements
Source: MDN
● 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
Setting up the layout - the source
Setting up the layout - browser
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)
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
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.
Float properties
● Property to specify whether or not an
element should float.
● Property options○ left
○ right
○ none - default value
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
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
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
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.
CSS box model
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.
Summary: HTML study
● Block-level and inline elements in HTML
● HTML tags:○ html, head, body
○ header, content, sidebar and footer
○ navigation
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
● 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 :)
Practice at class
● 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
Practice at home
Kalin Chernevt: @kalinchernevu: http://shtrak.eu/kalata e: kalin.chernev(at)gmail.com
Contacts