Media and Web Development
ICOM-101-01 / MTEC-617-01
Week 4 ● Advanced CSS
Background Images and Effects
Positioning and Layout cont.
Embedded content
CLOSING TAGS AND QUOTED ATTRIBUTES
TAG STRUCTURE
CSS RULES
The 2000 key/value pairs that make websites look nice.
CSS RULES
The 2000 key/value pairs that make websites look nice.
INLINE STYLES
Inline styles in CSS refer to the styling of an individual HTML element within the HTML code itself, rather than in a separate CSS file or style sheet. Inline styles are specified using the style attribute, which can be added to any HTML element.
IMAGE SOURCES
FLEX BOX
Flex box lets us position elements within a container with greater control than we had with just the box model + floats.
JUSTIFY CONTENT
DIRECTION AND ALIGN ITEMS
WRAP
IMAGE
GRADIENTS
EMBEDDED CONTENT
We're entering the wild west a bit here. Different sites embed content in different ways, so you might need to mess around a bit to get something you like.
The idea with most of these things is pretty similar. You look for the share button, then find the embed code to copy.
embed codes usually start with an iframe element
embed codes usually start with an iframe element
In addition to the tag/class/descendant selectors we looked at last week, css gives psuedo-selectors.
These allow us to select an element based on a few more complex rules.
These allow us to select an element based on a few more complex rules.
FIRST/LAST-CHILD
AND
FIRST/LAST-OF-TYPE
AND
FIRST/LAST-OF-TYPE
HOVER
ACTIVE
Assignment #4
The things we learned in class this week are a little less linear, so for this assignment feel free to break away from the styled text document idea we have been working with. Try making a landing page, a looping animation, or just experiment and play with everything we've learned so far.
Not all techniques will be relevant to all projects, try to use at least 2 of the things we learned
this week. Plus anything else you are excited about.
● Use flex or grid in your layout
● Use a css gradient, or the background-image to add detail
● Use a pseudo-selector to add conditional styling to some part of your site
● Use a CSS transition to animate an element on :hover
● Add a CSS animation to your site
