Introduction to Frontend Development - Session 2 - CSS Fundamentals
-
Upload
kalin-chernev -
Category
Education
-
view
110 -
download
0
description
Transcript of Introduction to Frontend Development - Session 2 - CSS Fundamentals
![Page 1: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/1.jpg)
Front-end development
Practical HTML, CSS and JavaScript
Session 2: CSS Fundamentals
Novice to professional
![Page 2: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/2.jpg)
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
![Page 3: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/3.jpg)
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
![Page 4: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/4.jpg)
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
![Page 5: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/5.jpg)
What is CSS - Example
![Page 6: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/6.jpg)
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
![Page 7: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/7.jpg)
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.
![Page 8: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/8.jpg)
Practice
Doing: Try the 4 methods of including CSS
At the end: separate file style.css in css folder
![Page 9: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/9.jpg)
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
![Page 11: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/11.jpg)
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
![Page 12: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/12.jpg)
Setting up the layout - the source
![Page 13: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/13.jpg)
Setting up the layout - browser
![Page 14: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/14.jpg)
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)
![Page 15: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/15.jpg)
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
![Page 16: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/16.jpg)
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.
![Page 17: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/17.jpg)
Float properties
● Property to specify whether or not an
element should float.
● Property options○ left
○ right
○ none - default value
![Page 18: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/18.jpg)
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
![Page 19: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/19.jpg)
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
![Page 20: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/21.jpg)
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.
![Page 22: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/22.jpg)
CSS box model
![Page 23: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/23.jpg)
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.
![Page 24: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/24.jpg)
Summary: HTML study
● Block-level and inline elements in HTML
● HTML tags:○ html, head, body
○ header, content, sidebar and footer
○ navigation
![Page 25: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/25.jpg)
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
![Page 26: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/26.jpg)
● 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
![Page 27: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/27.jpg)
● 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
![Page 28: Introduction to Frontend Development - Session 2 - CSS Fundamentals](https://reader033.fdocuments.in/reader033/viewer/2022051110/54c7b4d54a79599f758b45bf/html5/thumbnails/28.jpg)
Kalin Chernevt: @kalinchernevu: http://shtrak.eu/kalata e: kalin.chernev(at)gmail.com
Contacts