< back to syllabus
CSS styles and selectors, external stylesheets
- Inline and Internal Styles (recommended)
- We watched the first 5 minutes of this one in the last readings, so watch from 5 minutes til the end.
- So far, we've only used Inline Styles (the
style attributes on all of our tags). This video introduces Internal Styles, which are
<style> tags placed in the
<head> of the page.
- Using Internal Styles is generally always better than using Inline Styles!
- External Style Sheets (recommended)
- Using External Style Sheets is generally always better than using Internal or Inline Styles!
- Intro to Selectors (recommended)
- Selectors are what we use to pick elements on the page that we'd like to style.
- Type Selectors (recommended)
- These selectors select certain types of elements to style on the page.
- ID Selectors (recommended) and Class Selectors (recommended)
- ID and Class selectors style all elements that have a given
- Reusing Classes (optional)
- You can add multiple
classes to a tag to make things a bit easier. (But you should probably avoid adding multiple
ids to a tag!)
- Descendant Selectors (optional)
- We can use Descendant Selectors to style certain
<p>s inside a certain
<li>s inside a
- Background Images and Position
- Color and Images (recommended)
- Size and Position (recommended)
- There's a bunch of times when we want text or divs over an image -
background-image fixes that for us.
- Border Radius (optional)
border-radius is handy when we've got to round the corners of a
div, but looks better when we've got a
- The Cascade & Specificity and Source Order (optional)
- We touched on specificity last time - these videos don't go into detail, but does give some examples that might help.