Start Here
If you are looking for a quick and robust jump into CSS, check these resources:
- General CSS: Learn to Code HTML & CSS (Shay Howe).
- CSS Grids: Don’t Overthink Grids (Chris Covier).
- Don’t mistake for new “grid” property, currently only supported by Microsoft.
General
- W3Schools.
- Learn CSS Layout.
- Mozilla Developer Network (MDN) CSS.
- W3C CSS.
- WebPlatform CSS.
- CSS Tutorial.
- CSS Basics.
- Learn X in Y Minutes: CSS.
- CSS-Tricks.
Tools
Pre-processors
- Less (Leaner CSS)- Influenced by SASS
- SASS (Syntactically Awesome Style Sheets)
- SCSS – Influenced by Less.
Units of Measurement
- em – equal to the current font-size. If utilized with children, results in increasing font-sizes – probably not desired result.
- rem – r stands for “root.” Whenever utilized it is measuring in proportion to the documents root font size, not its parent.
- vh – 1/100th of height of viewport.
- vw – 1/10th of width of viewport.
- vmin / vmax
- ex – x-height of current font or half of one em.
- ch – stands for character.
- Advanced Selectors
- Advanced Display Values
- Fonts:
- font-size
- font-family
- serif (little bits on ends of letters), sans-serif (without bits), cursive
- You can use a list of fonts which will be used in order depending on what fonts are available on the system, e.g. Verdana, Tahoma, serif
- color
- background-color
- text-align: left, center, or right
- Comments: /* */
- Border – e.g., 1px dashed blue
- border-radius – Modifies corners of objects.
- text-decoration: none
- margin: auto
- You can choose a selector that involves nested elements, for example: div div p { property:value; }
- * selects every element on the page.
- Elements in HTML can be parents, children, or siblings. If an element is nested within other elements it is the child of each of the enclosing elements, not just one of them.
- To get only direct children when applying a rule use > like so: div > p. This means that code like this will be affected: <div><p></p></div> but code like this will not: <div><ul><li><p></p></li></ul></div>
- Selectors apply from least to more specific; so for example, if you have an element nested like so <div><table><tr><td></td></tr></table> the rule div table tr td { property:value } will take precedence over div table.
- Classes and IDs are selectors considered more specific than nested selectors.
- Use a class to apply a rule to multiple elements that all should be styled the same.
- ex: <p class=”myclass”></p>
- ex: .myclass { property:value; }
- Use IDs for when only one element should be styled a specific way.
- ex: <p id=”myid”></p>
- ex: #myid { property:value; }
- pseudo-class selector – For selecting items that aren’t part of the HTML tree.
- e.g., status of a link (clicked, unclicked).
- ex: selector:pseudo-class_selector { property:value; }
- ex: a:hover { property:value; }
- a:link (unvisited); a:visited (visited); a:hover (mouse hovering over).
- first-child – A pseudo-class selector that applies only to the elements that are first children of their parents.
- ex: <div><p>First child</p><p>Not</p></div>
- ex: p:first-child { property:value; }
- nth-child(x) – A pseudo-class that allows you to select any element after the first child.
- ex: p:nth-child(2) { property-value; }
- z-index – Determines the position of elements in the third dimension (not x/y, second dimension).
- Only works with positioned elements (relative, absolute, fixed).
- Stacking Level – The higher the number the closer to the front (screen).
- If not defined, determined by elements order in document.
- See Calculating Stack Level for important caveats.
- Stacking Context – If defined, an element’s stacking level is not in relation to every other element on the page, but only those within its stacking context. If undefined it is in relation to document root element. See Stacking Context.
Basic CSS
You’ll also want to know these by heart.
- CSS are rules about how styling is applied to HTML elements.
- h1 { property: value; }
- h1 is the selector (what HTML element)
- One can select classes, use .
- .header { property: value; }
- To be more specific combine classes and element names.
- .header p { property: value }
- You can also access classes similarly:
- .header .my-class p { property: value }
- Layout
- HTML elements are treated like boxes by CSS.
- If element is block it is on a new line.
- If element displays on same line it is inline.
- display: block;
- position: relative (or fixed);
- top, bottom, left, right: 9x;
- float: left (or right);
- Moves element to far left/right of page.
- HTML elements are treated like boxes by CSS.
Basic CSS Properties
- color – sets color of text.
- Use named colors, RGB (0 to 255), or hex (00 to ff) – from dullest to brightest.
- color: rgb(102,153,0)
- color: #9933CC
- clear: both;
- font-family – sets font of text.
- Commonly used: Arial, Helvetica, sans-serif; “Times New Roman”, Times, serif; “Courier New”, Courier, monospace
- font-family: ‘Open Sans’, sans-serif
- font-size – sets size of text.
- height – sets height of element.
- Space Around Element:
- Imagine a box around element.
- background-color
- background-image
- border – Set width, style, and color of element border
- border: 3px solid #cc0000
- border: width style color
- border-bottom: 1px solid #dbdbdb (also -right, -left, -top)
- padding – Between content and border of an element.
- Can be set on specific sides using padding-top, padding-bottom, padding-left, padding-right
- margin – Increases outside border of element.
- Specific sides same as padding.
- Setting margin-left or margin-right to auto results in it using as much as possible.
- Move Element to Far Left: margin-right: auto
- Move Element to Far Right: margin-left: auto
- Center Element: margin-right and margin-left to auto
Other CSS
You may be surprised at some of the rules I have included here. I have not chosen which rules to place here based solely on complexity but also on frequency of use…
Other CSS Properties
- text-transform: uppercase;
CSS Framework
- Bootstrap – provides prewritten CSS rules for grid layouts, navigation, showcases, etc.
- Has a grid of 12 equal columns.
- To span a specific number of columns: <div class=”col-md-6″>Spans six columns</div>
- Use the row class to put columns in a horizontal group: <div class=”row”></row>
- To make list items into tabs:
- <ul class=”nav nav-tabs”></ul>
- Set active tab by associating class=”active”
- <ul class=”nav nav-tabs”></ul>
- To make list items into pills:
- Use nav-pills
- Showcase – Large area featuring important content, aka jumbotron.
- <div class=”jumbotron”></div>
- .pull-left: left align element
- .pull-right: right align element
- .thumbnail: display a grid of images.
- Each image needs its own class of thumbnail.
Bibliography / Further Reading
- Adrian Sandu. Understanding and Using rem Units in CSS. Sitepoint, 10/6/15. – Good article on rem units.
- See also Cutrell’s article.
- George Martsoukos. 5 Things You Might Not Know About the CSS Positioning Types. scotch.io, 10/19/15.
- Ire Aderinokun. How z-index Works. bitsofco.de, 10/20/15. – Great article on using z-index.
- Jonathan Cutrell. 7 CSS Units You Might Not Know About. Tuts+, Nov. 10, 2014. – Covers rem, vh, vw, vmin, vmax, ch, and ex.
- See also Sandu’s article.
- Rachel Andrew is one of the primary authorities on CSS layout. See her home site as well as the following articles:
- Grid, Flexbox, Box Alignment: Our New System for Layout. 24 Ways, Dec. 15, 2015.
- Iggy. “10 CSS Rules Every Web Designer Should Know.” Line25.