{"id":19026869,"url":"https://github.com/milesjos/advanced-css-workshop","last_synced_at":"2026-05-01T06:30:19.384Z","repository":{"id":68028889,"uuid":"56119926","full_name":"milesjos/Advanced-CSS-Workshop","owner":"milesjos","description":null,"archived":false,"fork":false,"pushed_at":"2016-04-19T22:51:23.000Z","size":415,"stargazers_count":1,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"gh-pages","last_synced_at":"2025-01-02T02:42:17.779Z","etag":null,"topics":["css","css-properties"],"latest_commit_sha":null,"homepage":"http://joshmiles.me/Advanced-CSS-Workshop/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/milesjos.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2016-04-13T04:05:23.000Z","updated_at":"2020-06-18T01:30:39.000Z","dependencies_parsed_at":"2023-04-13T09:20:31.038Z","dependency_job_id":null,"html_url":"https://github.com/milesjos/Advanced-CSS-Workshop","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milesjos%2FAdvanced-CSS-Workshop","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milesjos%2FAdvanced-CSS-Workshop/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milesjos%2FAdvanced-CSS-Workshop/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/milesjos%2FAdvanced-CSS-Workshop/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/milesjos","download_url":"https://codeload.github.com/milesjos/Advanced-CSS-Workshop/tar.gz/refs/heads/gh-pages","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240073189,"owners_count":19743719,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","css-properties"],"created_at":"2024-11-08T20:50:59.816Z","updated_at":"2026-05-01T06:30:19.322Z","avatar_url":"https://github.com/milesjos.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"Advanced CSS Techniques\n=====================\n\n![Spartan Hackers](http://spartanhackers.com/img/spartan-hackers-banner.png)\n\n### Notes from [Morgan](https://github.com/memuyskens) \u0026 [Josh's](https://github.com/milesjos) talk for [Spartan Hackers](http://spartanhackers.com/)\n\nWe've found these CSS techniques and resources extremely helpful through our adventures as web developers and we thought they would be helpful for anyone seeking help creating more advanced designs using CSS. Happy hacking!\n## Introduction\nDo you want to make your web pages beautiful? Would you like to wow your friends with your amazing transitions? Would you like to get more of a handle on positioning?\n\n**Well you've come to the right place**\n\nThe topics we'll be covering in this talk are:\n* Normalize/Reset\n* !important\n* Pseudo-Selectors\n* Units\n* Margins, Padding, and Box-Sizing oh my!\n* Positioning\n* Flex\n* Overflow\n* Transitions/Animations\n* Media Queries\n\nLet's a go!\n\n##CSS Normalize and Reset\n\nIn short, CSS Normalize and Reset are different solutions to the same problem:\n\n*How do we handle differences between vendor default stylesheets among commonly used web browsers?*\n\n###[normalize.css](https://necolas.github.io/normalize.css/)\n\nNormalize handles these differences by inserting one master stylesheet that makes html elements render with the same styles no matter what browser the page is viewed on. \n\n###[CSS Reset](http://cssreset.com/scripts/eric-meyer-reset-css/)\n\nUsing a CSS reset removes all default styles completely, making it up to you to apply everything. This means no bullet points for `\u003cul\u003e\u003c/ul\u003e`, no `\u003ch1\u003e\u003c/h1\u003e` sizing, no nothing.\n\n####Advantages\n\n* Easy to implement\n\t* Link one stylesheet and you're ready to go!\n* Keeps things consistent\n\t* All of the browsers will render your content the same\n\n####Disadvantages\n\n* Slows down load time\n\t* Adds an extra http request which can slow things down. This is notable when considering slower internet connections\n* Disadvantages of Reset\n\t* You have to set **All** of the styles. Including setting `\u003cstrong\u003e\u003c/strong\u003e` to bold text, `\u003cul\u003e\u003c/ul\u003e` to make a bulleted list, and `\u003ch1\u003e\u003c/h1\u003e` to have a different font size than `\u003ch2\u003e\u003c/h2\u003e`.\n\t* Doesn't attempt to specifically target cross-browser issues\n* Disadvantages of Normalize\n\t* Declarations that are unnecessary, such as arbitrary margins on certain elements\n\t* The file is fairly large for what it does, but is manageable if you remove all the comments, minify it, and include it as one line in the main stylesheet\n\n##!important\n\nEssentially, !important follows a property value and gives it highest priority in the stylesheet. This breaks the cascading order of stylesheets.\n\n####Example 1\n\n```css\np {\n\tcolor: white !important;\n}\n#p_tag {\n\tcolor: red;\n}\n```\n\n```html\n\u003cp id='p_tag'\u003eThis will be white.\u003c/p\u003e\n```\n\nAbove is an example of !important abuse. IDs should be used for specificity in styling. In this case, either color shouldn't be used for the ID styling (since you obviously want the general style) or the !important needs to go.\n\n####Example 2\n\n```css\np {\n\tcolor: white !important;\n}\n```\n\n```html\n\u003cp style='color: red;'\u003eThis will be white.\u003c/p\u003e\n```\n\nThis could be thought of as an abuse of !important (it disrupts the cascading order seen below), but maybe you don't want inline styles to show up anymore.\n\nThe difference here is that you have a reason, whereas most abuse of !important comes from dungbeetling your CSS and being too lazy to fix it (view Example #1).\n\n*Note that any conflicts with the order below are solved through using the styling of the more specific selector*\n\n####Cascading Order (no. 4 is most important)\n\n1. Browser default\n2. External style sheet (for example, a stylesheet pulled from a CDN or anything that you've created)\n3. Internal style sheet (CSS styles included in your HTML file)\n4. Inline style (styles inside elements)\n\n!important would override all of these.  If there were a second !important, it would only override the first if:\n\n* The selector were more specific (ID vs. Class == ID)\n* If the the second use was defined further down in the stylesheet\n\nIt's up to you to decide when to use !important, but know that with great power comes great responsibility!\n\n##CSS Selectors\n\nEveryone knows the standard `class` and `id` selectors, but there are tons of other selectors that can be very useful in situations that require a bit more finesse\n\n|Selector|Syntax|Description|\n|--------------|-----------------|--------------|\n|`.class`|`.selected`|Selects all elements with `class=\"selected\"`|\n|`#id`|`#selected`|Selects the element with `id=\"selected\"`|\n|`*`|`*`|Selects all elements|\n|`element, element`|`.class1, .class2`|Selects all elements with `class=\"class1\"` **and** `class=\"class2\"`|\n|`element element`|`.class1 .class2`|Selects all `class2` elements that are nested within `class1` elements|\n|`element\u003eelement`|`.class1 \u003e .class2`|Selects all `class2` elements that are direct children of a `class1` element|\n|`element+element`|`.class1 + .class2`|Selects the `class2` elements that are directly after `class1` elements|\n|`element~element`|`.class1 ~ .class2`|Similar to the + selector, but less strict. Selects any `class2` elements following a `class1 element`|\n|`[attribute]`|`[href]`|Selects all elements with href attribute|\n|`:link`|`a:link`|Selects anchor tags that have not yet been visited|\n|`:visited`|`a:visited`|Selects anchor tags that have been visited|\n|`:focus`|`input:focus`|Selects the input element that has focus (currently selected)|\n|`:hover`|`a:hover`|Selects tags on mouse over|\n|`:checked`|`input:checked`|Selects all checked inputs|\n|`::before/::after`|`div::after`|Inserts content before/after every div on the page|\n|`::first-letter`|`p::first-letter`|Selects first letter of every `\u003cp\u003e` element|\n|`::selection`|`::selection`|Selects the portion that is selected/highlighted by the user|\n\n\n##Units\n\nSometimes your standard pixels just aren't enough and you need different units for your styles. Here's a breakdown for all the different units you can use in CSS.\n\n|Unit\t\t|Syntax\t\t\t|Description\t\t\t\t|\n|-----------|---------------|---------------------------|\n|Pixels\t\t|`width: 1000px;`|Most commonly used unit. Is actually an [angular measurement](http://inamidst.com/stuff/notes/csspx) and is not mapped to the physical pixels on the screen|\n|Inches\t\t|`width: 10in;`\t|Not actual inches. Directly mapped to pixel size `1in == 96px`|\n|Centimeters|`width: 100cm;`|Also mapped to pixels `1cm == 37.8px`|\n|Millimeters|`width: 1000mm;`|`1mm == 0.1cm ==3.78px`|\n|Ems\t\t|`width: 10em;`\t|Relative to the current font size of the parent element and will multiply upon themselves upon nesting. When not nested at all, `1em == 16px`|\n|Rems\t\t|`width: 10rem;`|Like em, but is relative to the [root element](https://en.wikipedia.org/wiki/Root_element) instead of the parent element|\n|Points\t\t|`width: 100pt;`|Physical measurement. `1pt == 1/72 of an inch`|\n|Pica\t\t|`width: 12pc;`\t|`1 pc == 12pt`|\n|ex\t\t\t|`width: 50ex;` |Similar to ems, but based on the height of the x-character and will change size depending on the font family|\n|ch\t\t\t|`width: 50ch;` |Same as ex, but based on the width of the 0 character|\n|Viewport Width|`width: 10vw;`|`1vw` is equal to 1% of the width of the viewport|\n|Viewport Height|`width: 10vh;`|Same as vw, but based on viewport height|\n|Viewport Minimum|`width: 10vmin;`|Chooses whichever is smaller at the moment, vw or vh|\n|Viewport Maximum|`width: 10vmax;`|Chooses whichever is larger at the moment, vw or vh|\n|Percent\t|`width: 50%;`|References the parent element's size|\n\n##Margin \u0026 Padding Tips\n\nMargin and padding are a pretty simple concepts once you see the CSS Box Model (see [here](http://www.w3schools.com/css/css_boxmodel.asp) if you need a refresher).\n\nIt's easy as a beginner, though, to set a static width and height on an element before giving the element margin, padding, and a border.\n\nThis means your final width (and height) would look something like this:\ndefined width + padding + border = *Probably more than you intended*\n\nLet's say, for example, that you want 3 boxes on a row of your page. Each would need to be 33.33...%. If you add a thick border that would throw off the width you defined. So then you might decide to subtract the border size from 33.33...%.\n\nOr, to make it easier for yourself, let's check out the CSS property:\n\n```css\nbox-sizing: content-box /* This is the default value */\n```\n\nThe default property value is content-box because that's what the box model is: your set width is the width of the content. Not including the padding and border.\n\nBut...\n\n```css\nbox-sizing: border-box /* This includes padding \u0026 border */\n```\n\nAllows you to set a width that includes padding and border in the final dimensions.\n\nNeat trick, right?\n\n##Positioning\n**There are four position values you need to know:**\n\n* Static\n* Relative\n* Fixed\n* Absolute\n\n####Static\nThis is the default value of the position property.\n```css \n* {\nposition: static;\n}\n```\nWith this value, every element is displayed on the page in the order it was listed in the HTML.\n\nIf you have properties for top, right, bottom, and left defined they will be ignored under a value of static.\n\n####Relative\n```css \n* {\nposition: relative;\n}\n```\nWith this value, elements are displayed with an offset that is defined by properties top, right, bottom, and left.\n```css\n* {\nposition: relative;\ntop: -10px;\nright: 0;\nleft: 5px;\nbottom: 0;\n}\n```\nThis would result in an element rendered 10px closer to the top of the page and 5px to the right.\n\n####Fixed\n```css \n* {\nposition: fixed;\n}\n```\nWith this value, elements are placed with respect to the viewport. \n```css\n* {\nposition: fixed;\ntop: 0;\nright: 0;\nleft: 0;\n}\n```\nThis would result in an element that is always \"stuck\" to the top of the window. You'll often see those properties and values used for navigation bars.\n\n####Absolute\n```css \n* {\nposition: absolute;\n}\n```\nWith this value, elements are placed with respect to a parent element. You might consider fixed to be placement relative to the window and absolute to be placement relative to a parent.\n```css\n* {\nposition: relative;\nright: 0;\nbottom: 0\nleft: 0;\n}\n```\nThis would result in an element that is always \"stuck\" to the bottom of the *closest ancestor with a position value != to static*. Usually you would want that ancestor to be the parent, but not always.\n\n##Flexbox\nIn the past, the spacing of children elements inside their parents required methods that sometimes felt inconsistent, like a lot of work for little gain, and overall somewhat \"hacky\". \n\nFor example, centering a child vertically within their parent might have required you to take half of the child's height, subtract that from half the parent's height, and then use \"position: absolute; top [calculated value];\" on the child.\n\n**Sounds like more trouble than it's worth, right?**\n\nLuckily, we no longer have to worry about hacking out a solution. We now have flexbox.\n\n[This page](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) is a fantastic resource. Flexbox requires a lot of memorization, and both of us still reference this article.\n\n**Here are the basics:**\n\n* Your parent container needs the property `display: flex;`\n* You'll usually use two other properties on the parent:\n  * `justify-content: [property value]; /* horizontal alignment */`\n  * `align-items: [property value]; /* vertical alignment */` \n* There's a property called \"flex-direction\" which defaults to row.\n  * If you change this to `flex-direction: column;`\n     * justify-content now controls vertical alignment\n     * align-items now controls horizontal alignment\n* `flex-wrap: nowrap;` is default. This means children stay on one line and will shrink to fit within the parent element.\n  * `flex-wrap: wrap;` makes the elements *wrap* around to the next line instead of shrinking to fit. Also, this setting allows you to use the property `align-content`.\n* `align-content: stretch /* the default when flex-wrap is set to wrap */`\n  * This is similar to align-items, but rather than handle the alignment of a single row, align-content handles the entire block's alignment. \n\nThere are properties you can define for flex children, but the secret sauce is in the parent styling and that should be your main focus when using flexbox.\n\n**So that was a lot of text.**\n\nFlexbox is really visual, so we encourage you to check out the awesome examples located [here](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [here](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties)\n\n##Overflow\n![CSS is Awesome](http://www.tivix.com/uploads/original_images/css_is_awesome.png)\nIn certain situations, content can overflow the boundaries given by the parent element. The overflow property controls what happens in these situations.\n\n####Overflow Values\n\n| Value | Description |\n|-------|-------------|\n|Visible|Default value; content allowed outside of box model|\n|Hidden\t|Content is hidden\t|\n|Scroll\t|Same as hidden, but there is always a scrollbar present|\n|Auto\t|Same as Scroll, but the scrollbar is only there when it needs to be|\n\n####Overflow-x and Overflow-y\nThese values control the overflow properties of each axis and can use all values\n\n####Example\nThis is taken directly from the sample site\n```css\n.overflow-box {\n    border: 5px solid rgb(40, 97, 172);\n    height: 150px;\n    width: 50%;\n    /*overflow: hidden;*/\n    /*overflow: scroll;*/\n    overflow-y: scroll;\n    margin: 0 auto;/* for centering using this method, your width must be defined */\n    background-color: white;\n    padding: 0 10px;\n    box-sizing: border-box;\n}\n```\n\n##Transitions\n\nTransitions are a smooth change from one CSS property value to another over a duration.\n\nThe shorthand for a transition is this:\n```css\ntransition: [transition-property] [transition-duration] [transition-timing-function] [transition-delay];\n```\n\nFor example, if you have:\n```css\nbutton {\n\tbackground-color: blue;\n}\n```\nand that changes on hover to:\n```css\nbutton:hover {\n\tbackground-color: red;\n}\n```\n**It's not a smooth transition**. It is blue one moment and red the next when you hover.\n\nHowever, if we add the transition property to button like so:\n```css\nbutton {\n\tbackground-color: blue;\n\ttransition: background-color 400ms ease-in 0s;\n}\n```\nThe button will change from blue to red over 400ms and it will begin the transition immediately since the delay was 0s.\n\nLet's break down the transition shorthand property.\n\n####Transition-property\n\n* This is the CSS property you want to have a gradual change.\n* Not every CSS property can be animated.\n  * [This](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties) is a list of all properties available for transitions/animations.\n\n####Transition-duration\n* This is duration of your transition\n* Valid values are:\n  * [time]ms (e.g. 400ms)\n  * [time]s (e.g. 0.4s)\n* Default is 0s\n\n####Transition-timing-function\n* This property is a function that speeds up or slows down periods during the transition. [Here's](https://css-tricks.com/almanac/properties/t/transition-timing-function/) a great page explaining this property.\n* For example, \"ease-in\" has a parabolic function. It starts slow and get fast within the transition-duration.\n* These are the predefined functions you can use:\n  * ease\n  * linear\n  * ease-in\n  * ease-out\n  * ease-in-out\n  * step-start\n  * step-end\n* You can also provide your own function too!\n  * step() allows you show distinct steps in the transition\n  * cubic-bezier() allows you to provide a smooth transition function\n     * A fun tool we use to simplify their creation is [here](http://cubic-bezier.com/)\n\n####Transition-delay\n* This is the amount of time before your transition begins\n* Valid values are:\n  * [time]ms (e.g. 400ms)\n  * [time]s (e.g. 0.4s)\n* Default is 0s\n\nCSS Animations are really similar to transitions, but they take considerably more effort to create as you break down your transition piece-by-piece using keyframes. We won't be covering them in this talk, but a knowledge of transitions is a good start.\n\n##Media Queries\n\nMedia Queries are a new technique introduced in CSS3 that basically act as if-else statements in CSS despite the syntax for them being quite different.\n\n####Syntax\n\nThe syntax for media queries is fairly simple. Just choose the media type and a condition to decide when the styles will be used and you're good to go! Here's the example that we used in our sample webpage.\n\n```css\n@media screen and (max-width: 600px) {\n  body {\n    background-color: purple;\n  }\n}\n```\n\n####Media Types\n\n|Value \t|Description\t\t\t|\n|------ |-----------------------|\n|all\t|Used for all devices\t|\n|print\t|Used for print view/printers|\n|screen\t|Used for desktop and mobile views|\n|speech\t|Used for screenreaders|\n\n####Media Features\n\nThis is a list of the most commonly used features. A full list can be found [here](http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)\n\n|Value\t\t\t|Description\t\t\t\t\t|\n|---------------|-------------------------------|\n|max-height\t\t|The maximum height of the display area\t|\n|max-width\t\t|The maximum width of the display area\t|\n|min-height\t\t|The minimum height of the display area\t|\n|min-width\t\t|The minimum width of the display area\t|\n|orientation\t|Orientation of the viewport (landscape/portrait)|\n\n##Resources and Further Reading\n\nHere's a list of all the resources we used in the making of this talk. \n\n######General Resources\n\n* [Can I use](http://caniuse.com/)\n* [CSS Tricks](https://css-tricks.com/)\n\n######CSS Normalize and Reset\n\n* [Normalize CSS](https://necolas.github.io/normalize.css/)\n* [The most commonly used version of CSS Reset](http://cssreset.com/scripts/eric-meyer-reset-css/)\n* [A good summary of the two and their differences](https://ddessaunet.gitbooks.io/css-training/content/content/reset/reset-vs-normalize-doc.html)\n* [Codepen showing the differences between them](http://codepen.io/nategreen/pen/MwxRvP?editors=110)\n\n######!important\n\n* [Article on how and when to use !important](https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/)\n\n######Selectors \u0026 Pseudo-Selectors\n\n* [In depth explanation of some important selectors](http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048)\n\n######Units\n\n* [Article on the subtleties between each of the different units](http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048)\n\n######Margin and Padding\n\n* [Margin rules](https://css-tricks.com/almanac/properties/m/margin/)\n* [Padding Rules](https://css-tricks.com/almanac/properties/p/padding/)\n* [Border-box](https://css-tricks.com/almanac/properties/b/box-sizing/)\n\n######Positioning\n\n* [General rules](https://css-tricks.com/almanac/properties/p/position/)\n* [Centering in CSS](https://css-tricks.com/centering-css-complete-guide/)\n\n######Flex\n\n* [CSS Tricks guide](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)\n* [scotch.io tutorial](https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties)\n\n######Overflow\n\n* [General rules](https://css-tricks.com/almanac/properties/o/overflow/)\n\n######Transitions and Animations\n\n* [General rules and information](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)\n* [List of elements that can have transition properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties)\n* [CSS Animations vs. Javascript](https://css-tricks.com/myth-busting-css-animations-vs-javascript/)\n\n######Media Queries\n\n* [General rules and information](http://www.w3schools.com/cssref/css3_pr_mediaquery.asp)\n* [Article on using Media Queries](http://www.w3schools.com/css/css_rwd_mediaqueries.asp)\n\n######Miscellaneous\n\n* [How CSS actually works](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/How_CSS_works)\n* [CSS History](https://en.wikipedia.org/wiki/Cascading_Style_Sheets#History)\n* [CSS Preprocessors](http://www.sitepoint.com/6-current-options-css-preprocessors/)\n\t* [Sass](http://sass-lang.com/)\n\t* [Less](http://lesscss.org/)\n* [initial-scale=1](https://css-tricks.com/probably-use-initial-scale1/)\n* CSS Autoprefixers for [Sublime Text](https://github.com/sindresorhus/sublime-autoprefixer) and [Atom](https://atom.io/packages/autoprefixer)\n* [Another HUGE css resource list](https://github.com/sotayamashita/awesome-css)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmilesjos%2Fadvanced-css-workshop","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmilesjos%2Fadvanced-css-workshop","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmilesjos%2Fadvanced-css-workshop/lists"}