I’m blue

h1{color:blue;}
p {color:green;}
External file

syntax of a
Style Rule
color: blue;
font-size: small;
Declarations

• element type
• attribute
• pseudo-classes
• combinators (child, descendent)
https://www.w3schools.com/cssref/css_selectors.asp

ID and DESCENDENT selector
ID and DESCENDENT selector ELEMENT TYPE selector
TYPE and DESCENDENT selector
ATTRIBUTE selector DESCENDENT and CLASS selector

Inheritance and Cascade

specificity
inline style (e.g.

)
ID selectors (e.g. #hello)
Class selectors (e.g. .hello)
Type selectors (e.g. h1)

!important
Author styles (from web site)
User styles (added by the reader)
User agent styles (browser defaults)

Units of Size
• px: virtual pixel •
em (current font size) rem (root font size) vw, vh (% of viewport)
• % (of parent width)

typography & colour

CSS layout
Multi Column

Q: How can we make the text sit beside the picture and use available space?
A: Flexbox

using SECTIONs and FLEXBOX for layout and responsive design

3×3 GRID (highlighted)
Firefox Grid Inspector

• One element becomes the CONTAINER (same as with FlexBox).
• The children of the container become the grid ITEMS.
• You divide your container into ROWS and COLUMNS –
that is your grid. Rows and columns are called TRACKs.
• Any unit is ok for column-widths and row-heights; FR (fractional unit) helps with responsive design.
• The grid comprises CELLs, and you can define groups of cells called AREAs, which occupy the space between LINEs.
• Areas can be given NAMEs.
https://learningwebdesign.com/

Grid: rows and columns

Responsive Design
next lecture

Docs and Books
• Online documentation: https://developer.mozilla.org/
• Library books: listed on Canvas
• Developer discussion: https://stackoverflow.com/
• Design websites: https://www.behance.net/
• CSS examples: http://www.csszengarden.com/
• Games for learning CSS : https://flexboxfroggy.com

Software Libraries
• add-on libraries: Bootstrap, React
• CSS Grid, Flexbox

程序代写 CS代考加微信: powcoder QQ: 1823890830 Email: powcoder@163.com

I’m blue

Related Posts