CSS Tutorials
CSS exists to style your HTML — to present your content. The language of Cascading Style Sheets is somewhat different to HTML but it remains simple and straightforward.
CSS Beginner Tutorial
A step-by-step guide to CSS basics. Go here if you’re comfortable with basic HTML.
- Applying CSS - The different ways you can apply CSS to HTML.
- Selectors, Properties, and Values - The bits that make up CSS.
- Colors - How to use color.
- Text - How to manipulate the size and shape of text.
- Margins and Padding - How to space things out.
- Borders - Erm. Borders. Things that go around things.
- Putting It All Together - Throwing all of the above ingredients into one spicy hotpot.
CSS Intermediate Tutorial
Various odds-and-sods building on the basics of CSS.
- Class and ID Selectors: Make your own selectors without the need for sticky-backed plastic!
- Grouping and Nesting: Properties assigned to multiple selectors or selectors within selectors.
- Pseudo Classes: Defining various states of a link selector.
- Shorthand Properties: Various properties, such as borders and margins that amalgamate other properties into one.
- Background Images: Guess.
- Specificity: How a browser will deal with conflicting CSS rules.
- Display: Specifying the characteristics of a box.
- Pseudo Elements: Styling first letters, first lines and placing content before and after elements.
- Page Layout: Floating and positioning boxes.
CSS Advanced Tutorial
Exploiting the versatile depths of CSS.
- Rounded Corners: Corners. That are rounded.
- Shadows: Adding “pop” to boxes and text.
- Universal, Child, and Adjacent Selectors: More precise aim with clever selectors.
- Advanced Colors: Alpha transparency and HSL.
- At-Rules: Importing style sheets, styles for different media types, specifying the character set of a stylesheet and embedded fonts.
- Attribute Selectors: Targeting boxes by their elements’ HTML attributes.
- CSS Transitions: Creating smooth animations.
- Backgrounds: Multiples, Size, and Origin
- Transformations: Molding the size and shape of a box and its contents.
- Gradients: Linear and radial gradients without image files.
- Media Queries: Optimizing pages for different devices and screen sizes.