lyurrutia / fa21-cse110-lab3 Goto Github PK

Implement at least one query based on screen width to make website friendly for multiple devices.

Include and use a 3rd party font (https://fonts.google.com/)
Can either load font in HTML or CSS.

Create empty stylesheet for meeting minutes page.

Implement flexbox that allows elements to lay themselves out automatically.

• Apply flex to the display property
• Must have more than two children on element using flexbox
• Must use minimum of three flexbox related attributes

Implement Units of Measurement in CSS Stylesheet for sizing and spacing elements.

3 Relative Units

• Instance 1
• Instance 2
• Instance 3

3 Absolute Units

• Instance 1
• Instance 2
• Instance 3

Implement Text Styling in CSS Stylesheet.

• color
• text-decoration
• text-align

Implement positioning on the page in a CSS Stylesheet, making use of two of the following features on the position property.

• static
• relative
• fixed
• absolute
• sticky

Specify selections based on element positioning in the DOM tree

• Decendant Combinator (element element)
• Child Combinator (element > element)
• General Sibling Combinator (element ~ element)
• Adjacent Sibling Combinator (element + element)
• Combining Two Selectors (element.class)

Edit display settings in CSS Stylesheet, experimenting with these values: none, block, inline-block, inline on the display.

Include at least two of them in your page.

• Instance One
• Instance Two

• Create a standup notes template in a Markdown file standup.md

Configure containers that hold HTML content in CSS Stylesheet.

Margin

Spacing between html elements

• Long (margin-top, margin-bottom, margin-left, margin-right)
• Short (margin: <top> <right> <bottom> <left>)
• Auto margins: margin: auto

Padding

Spacing within html elements

• Long (padding-top, padding-bottom, padding-left, padding-right)
• Short (padding: <top> <right> <bottom> <left>)

Borders

borders around html elements (try before using margin/padding)

• border-style
• border-color
• border-width
• border-radius

Implement Background Styles in CSS Stylesheet.

• background-color

Implement Colors to HTML elements in CSS Stylesheet.

• rgb(r, g, b) or rgba(r, g, b, a) /* red, green, blue, alpha values */
• #FFF or #FFFFFF /* hex codes */
• hsl(h, s, l) or hsla(h, s, l, a) /* hue, saturation, lightness, alpha values */
• Color Name

Implement psuedo-classes that exist in a document conditionally.

• :hover
• :active

Set height and width for elements in CSS Stylesheet.

• height
• width
• max-width
• min-width

Implement grid for the layouts

• Apply grid to display property
• Must have more than two children within element using the grid
• Must use minimum of three grid related attributes

Implement various types of selectors to select HTML elements to style.

• Class Selector (.class)
• ID Selector (#id)
• Universal Selector (*)
• Event selector (element)
• Attribute selector (e.g. [attribute=foo])
• Psuedo-class Selector (e.g. p:hover)
• Selector List (element, element)