Advanced CSS

On this page…

    Note that all the presentations on this page are available under a Creative Commons Attribution-ShareAlike License. You can use these slides in many ways, provided you follow the terms of the license.

    Scott & Jans: An Intro

    Scott. Jans. Lovecraft. An outline.

    CSS Building Blocks: Selectors

    How many? Key selectors. Web browser engines. Basic selectors. Combinators. Pseudo-Elements. Pseudo-Classes. Attributes.

    CSS Layout: Boxes, Displays, & Positioning

    Layout modes. Positioning. Normal flow. Out of normal flow. float & clear. position. z-index. Box model. Padding. Border. Margin. box-sizing. width & height. overflow. display. visibility. Opacity.

    Media-Specific Styles: Same HTML, Different CSS

    Media types. Media-specific rule sets. Common print styles. Print CSS. Media queries.

    CSS Animation: Visual Change Over Time

    <shape>. <time>. <timing-function>. <angle>. transition. animation. @keyframes.

    Tables & Lists: Organized Data

    Basic tables. Defining sets of rows. Table title. Styling tables. Columns. Sortable columns. Creating tables the easy way. Styling lists.

    Forms

    Daily use. How forms work. Labels, fields, & controls. Form attributes. Form containers. Text controls. Choice controls. File select controls. Submission controls. Accessibility. Tips & caveats.

    WebSanity Top Secret