CSS
Cascading Style Sheets (commonly abbreviated CSS) are page coding constructs used to separate form from content. It has become an internationally recognized W3C standard. Typically, you will define the various visual attributes of the objects and elements contained on your page through the CSS, covering any number of the following attributes:
- type
- size
- position
- margins
- padding
- borders
- colors
- focus
- displayed/hidden
- ...and many, many more
Contents
- 1 Specifications
- 2 Language
- 3 Tools
- 4 Resources
- 5 Tutorials
- 6 External Links
- 7 References
- 8 See Also
Specifications
- W3C CSS specifications: http://www.w3.org/Style/CSS/
- Mozilla CSS extensions: https://developer.mozilla.org/en-US/docs/Web/CSS/Mozilla_Extensions
- Webkit CSS extensions: https://developer.mozilla.org/en-US/docs/Web/CSS/Webkit_Extensions | pseudo-selectors
CSS3
CSS Media
CSS Media are another optional way to specify alternate presentations of content depending on the media format or device upon which the media is accessed.
- CSS Media Types: http://www.w3.org/TR/CSS2/media.html#media-types
- Adapt to your audience with CSS media types: http://blogs.techrepublic.com.com/programming-and-development/?p=640&tag=nl.e055[2]
CSS Print
Initially, one of CSS's main goals was to provide a means of printing webpages in a standard format. In fact, it is only moderately successful at fulfilling this premise and instead has been taken advantage of as a means of centralizing website presentation markup in one area (or a set of modular stylesheets which are adaptable and more easily updated so that changes are reflected across an entire site).
In any case the CSS print command to specify a printer-specific markup is as follows:
<link type="text/css" href="http://example.com/printer.css" rel="stylesheet" media="print" />
Selectors
- CSS 1.0 - Selectors API: https://www.w3.org/TR/selectors-api/
BEM
- Block Element Modifier (BEM): https://en.bem.info/ | NAMING CONVENTIONS | Quickstart
- CSS Style Guide - BEM Approach: http://www.logeshpaul.com/blog/css-style-guide-bem/
[9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24]
Language
Major Browser Implementations
Reset
A reset stylesheet in CSS helps account for cross-browser deviations between default styles and settings, typically setting everything (padding/margin/position, etc) to 0 and other sensible defaults. The original versions of CSS Reset was designed for HTML4 and xHTML, respectively.
- Reset.css: https://meyerweb.com/eric/tools/css/reset/
Normalize
Normalize is an HTML5-focused more modern CSS Reset.
- Normalize.css: https://necolas.github.io/normalize.css/[26]
Zoom
- MozDev -- "zoom" legacy experimental property (mostly only used in IE): https://developer.mozilla.org/en-US/docs/Web/CSS/zoom
HTC
HTML Components (HTCs) provide a mechanism to implement components in script (Javascript, JScript, VBscript, etc) as Dynamic HTML (DHTML) behaviors to perform on the currently loaded HTML. Together with Conditional Commenst, they are commonly used to fix browser inconsistencies (with specifications), version incompatibilities, operating system and browser combinations that produce unexpected behaviors as well as other display bugs/peculiarities.
- HTC Reference (MSDN): http://msdn.microsoft.com/en-us/library/ms531018%28VS.85%29.aspx[31]
- HTML Components - Componentizing Web Applications: http://www.w3.org/TR/NOTE-HTMLComponents
Conditional Comments
- MSDN -- About Conditional Comments (MSDN): http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
- List of IE hack conditional comments: https://css-tricks.com/how-to-create-an-ie-only-stylesheet/[32][33][34][35][36][37][38][39][40][41]
- wikipedia: Internet Explorer box model bug
Units
- CSS units -- Use em or px for font sizes (avoid pt, cm, in): https://www.w3.org/Style/Examples/007/units.en.html
Controlling CSS from JavaScript
- JavaScript Style Attributes: http://www.comptechdoc.org/independent/web/cgi/javamanual/javastyle.html
- JS change whole stylesheet: http://javascript.internet.com/css/change-style.html
- How to Use JavaScript to Change a Cascading Style Sheet (CSS) Dynamically: http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
- JavaScript – Change CSS class dynamically: http://www.easywayserver.com/blog/?p=18
- Altering CSS Class Attributes with JavaScript: http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html
- Change CSS Styles through javascript: http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_22981408.html?eeSearch=true
- JavaScript Detection using CSS: http://www.openjs.com/articles/javascript_detection_using_css.php
CSS Selectors
- Learn CSS selectors (QUIZ): https://flukeout.github.io
- w3schools - CSS Selector Reference: https://www.w3schools.com/cssref/css_selectors.asp
- w3schools - CSS Selectors Tester tool: https://www.w3schools.com/cssref/trysel.asp
Attribute
- CSS Attribute Selectors: https://www.w3schools.com/css/css_attribute_selectors.asp
z-index
- wikipedia: Z-index
- My approach to using z-index: https://hackernoon.com/my-approach-to-using-z-index-eca67feb079c
Specificity
- CSS - Specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
!important
- What Does !important Mean in CSS?: https://www.thoughtco.com/what-does-important-mean-in-css-3466876
- When Using !important is The Right Choice: https://css-tricks.com/when-using-important-is-the-right-choice/
Rounded Corners
- Nifty Corners - Javascript CSS rounded corners: http://www.html.it/articoli/niftycube/nifty5.html#[53]
Cursor Control
- CSS Cursor Control: http://rainbow.arch.scriptmania.com/css/css_cursor_control.html
- Change cursor to an Hourglass during function execution: http://www.webcodingtech.com/javascript/change-cursor.php
Change Class Attribute
- Change HTML class attribute using javascript: http://woork.blogspot.com/2008/01/change-class-attribute-using-javascript.html
Fade and Effects
- How to Create a Fancy Image Gallery with CSS3: http://www.admixweb.com/2010/03/08/how-to-create-a-fancy-image-gallery-with-css3/
- Image Swap Using CSS: http://www.michael-li.com/image-swap-using-css/2010/02/14/
Sprites
Sprites are single-images containing many icons, background images, textures, etc, that are commonly used in a given website or web application. They speed access significantly by reducing the total number of HTTP requests required to load multiple images (due to the overhead associated with HTTP requests, one single large HTTP request that is known to be reliable and expected to succeed is much more efficient than multiple requests to images in several different locations, or even in the same "images" folder).
- For more info, see: CSS Sprites
Floats
Floats (also called by their syntactic name, float) are a CSS mechanism for defining how and where content gets displayed on a page. It can be used to better control positioning and alignment.
- Extensive List of CSS Float Tutorials (by MaxDesign): http://css.maxdesign.com.au/floatutorial/
- A Better Fixed Positioning for Internet Explorer 6: http://ryanfait.com/resources/fixed-positioning-in-internet-explorer/
- When using "!important" his the right choice: https://css-tricks.com/when-using-important-is-the-right-choice/
Tools
- The Web Standards Project - ACID Tests: http://www.acidtests.org/ Acid1 | Acid2 | Acid3
- CSS Auditing Tools: https://www.smashingmagazine.com/2021/03/css-auditing-tools/
- CSS Selector test tool: https://www.w3schools.com/cssref/trysel.asp
- Selector Gadget: https://selectorgadget.com/
- CSS Selector Test: http://www.css3.info/selectors-test/
- CSS Layout Generator: http://csscreator.com/version2/pagelayout.php[56]
- Stylesheet Color Picker: http://andylangton.co.uk/stuff/colour-picker
- CSS Sprite-code generator: http://labs.engageinteractive.co.uk/nav-o-matic/
- FormatCSS: http://www.lonniebest.com/FormatCSS/
- CSS Specificity Graph generator: http://jonassebastianohlsson.com/specificity-graph/ (analyzes CSS code... spikes are bad, and specificity should increase as gradually as possible towards the end of the stylesheet)[57]
- CSS triangle generator: http://apps.eky.hk/css-triangle-generator/
Validation
Jigsaw is the W3C's implementation of a CSS validator. It supports multiple versions of CSS and detects any errors in syntax, or, warns about any browser-specific CSS or other possible presentation differences depending on the tags/selectors use. CSS3 is not fully supported by the validator yet, as a spec has not been released.
- CSS Validator: http://jigsaw.w3.org/css-validator/ | DOWNLOAD (install the CSS Validator on your own servers)
Optimization
- CSS Optimizer (CSSO): http://bem.info/tools/csso/
- cssMin: http://code.google.com/p/cssmin/
Resources
- MozDev -- CSS reference: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference[58]
- CSS Reference: https://tympanus.net/codrops/css_reference/
- CSS Reference from W3Schools: http://www.w3schools.com/css/css_reference.asp[59]
- Taming CSS (eBook): http://github.com/keithjgrant/Taming-CSS/
- BBC - Future Media Standards & Guidelines - Cascading Style Sheets (CSS) Standard v1.3: http://www.bbc.co.uk/guidelines/futuremedia/technical/css.shtml (guide for BBC devs)
- CSS Color Names: http://www.crockford.com/wrrrld/color.html
- W3school's CSS Color Names + Hex codes: http://www.w3schools.com/html/html_colornames.asp
- MozDev -- CSS - Pseudo-classes: https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes
- About Conditional Comments for IE: http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx
- CSS Hacks for IE 6/7/8/9: http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
- Comprehensive guide to IE CSS hacks (by version): http://www.webdevout.net/css-hacks
- CSS Hacks: http://www.cssportal.com/css-hacks/
- CSS Best Practices: http://www.learn-css-tutorial.com/CSS-Best-Practices.cfm
- CSS Standards & Best Practices (2009): http://www.dezinerfolio.com/2009/02/20/css-standards-best-practices
- CSS Best Practices DETAILED (2007): http://www.evotech.net/blog/2007/04/css-best-practices/
- CSS Tip #2 - Structural Naming Convention in CSS: http://sixrevisions.com/css/css-tips/css-tip-2-structural-naming-convention-in-css/
- CSS Best Practice about ID and Class?: http://stackoverflow.com/questions/298607/css-best-practice-about-id-and-class
- CSS ID and CLASS difference: http://www.maxi-pedia.com/css+id+class
- What is the best practice for naming and casing multi-word CSS classes and ids?: http://stackoverflow.com/questions/1646341/what-is-the-best-practice-for-naming-and-casing-multi-word-css-classes-and-ids
- Can I Use (web standards availability/implementation tables): http://caniuse.com/
- CSS - Comparing Font Sizes -- Size (small,medium,large), Percentage (%), Emphasis (em), Point (pt), and Pixel (px): http://net.jasonpearce.com/tools/cssfontsizes.html[64][65]
- The Perfect 'Double Page' 2 Column Liquid Layout (Percentage widths): http://matthewjamestaylor.com/blog/perfect-2-column-double-page.htm [66]
- design: creating an inline css image border: http://www.dynamixlabs.com/tag/mouseover/
- CSS background-image Tutorial: http://www.netlobo.com/css_background_image.html
- Centering a background image, using CSS: https://stackoverflow.com/questions/2643305/centering-a-background-image-using-css
- CSS background-repeat Property: http://www.w3schools.com/css/pr_background-repeat.asp
- CSS Tabs 2.0: http://unraveled.com/publications/css_tabs/
- Style Your Ordered List: http://www.webdesignerwall.com/tutorials/style-your-ordered-list/
- Dynamic Drive CSS Layouts: http://www.dynamicdrive.com/style/layouts/
- Creating 10 Most-Used Javascript Techniques Using Pure CSS Styling: http://devsnippets.com/article/techniques-using-pure-css-only.html
- Applying border & opacity to images onMouseover in CSS: http://www.javascriptkit.com/dhtmltutors/cssimage.shtml
- CSS Tricks - Downloadable Examples: http://css-tricks.com/downloads/
- CSS background-position: http://www.codertools.com/css_help_guide/css_background-position.aspx
- SlickMap CSS (sitemap): http://astuteo.com/slickmap/
- CSS Media Types: http://www.w3schools.com/CSS/css_mediatypes.asp
- CSS iPhone: http://cssiphone.com/
- CSS Image Maps: http://www.frankmanno.com/ideas/css-imagemap/
- CSSHttpRequest is cross-domain AJAX using CSS: http://nb.io/hacks/csshttprequest
- Pure CSS LightBox: http://www.studiomoh.com/fun/csslightbox/#top
- Pure CSS GUI icons: http://nicolasgallagher.com/pure-css-gui-icons/
- Futurebox, lightbox without the JavaScript OR CSS target pseudo-classApr 10: http://www.thecssninja.com/css/futurebox3
- Listamatic: http://css.maxdesign.com.au/listamatic
Frameworks
PureCSS
- Pure.CSS: https://purecss.io/ (pure CSS, modular alternative to LESS/SASS)
SASS
- SASS: http://sass-lang.com/ | DOCS (available in both SASS & SCSS syntaxes)[67][68]
- wikipedia: Sass (stylesheet language)
[69] [70] [71] [72] [73] [74] [75] [76] [77] [78] [79] [80] [81] [82] [83] [84] [85] [86] [87] [88] [89] [90]
LESS
- LESS CSS - framework: http://lesscss.org/[91]
- Online LESS compiler: http://winless.org/online-less-compiler | DOWNLOAD (useful tool for LESS training/practice)
- LESS CSS - compiler: http://www.freeformatter.com/less-compiler.html
- LESS tester tool: http://leafo.net/lessphp/#demo
[92] [93] [94] [95] [96] [97] [98] [99] [100] [101] [102] [103] [104] [105] [106] [107] [108]
Blueprint CSS
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
What does Blueprint have to offer?
* A CSS reset that eliminates the discrepancies across browsers. * A solid grid that can support the most complex of layouts. * Typography based on expert principles that predate the web. * Form styles for great looking user interfaces. * Print styles for making any webpage ready for paper. * Plugins for buttons, tabs and sprites. * Tools, editors, and templates for every step in your workflow.
- BluePrint CSS: http://www.blueprintcss.org/
- Blueprint Grid CSS Generator: https://web.archive.org/web/20090228173317/http://kematzy.com/blueprint-generator/[109]
- Quick-Start Tutorial: http://wiki.github.com/joshuaclayton/blueprint-css/quick-start-tutorial
- Tabs Demo (v. 0.1): http://blueprintcss.org/demos/tabs.html
- The Blueprint CSS Framework – Tutorials, How-to Guides and Tools: http://speckyboy.com/2009/10/26/the-blueprint-css-framework-tutorials-how-to-guides-and-tools/
960 Grid System
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
- 960-Grid: http://960.gs/ | DEMO
- Variable Grid System - (Custom Generator): http://web.archive.org/web/20110216022538/http://www.spry-soft.com/grids[110]
1Kb Grid
- 1KB CSS Grid: https://web.archive.org/web/20130114232359/http://1kbgrid.com/
- 1KB SCSS Grid: https://github.com/heygrady/1KB-SCSS-Grid
- Easy Percentage Grid System with HTML5: https://web.archive.org/web/20120204003657/http://cssglobe.com/post/9849/easy-percentage-grid-system-with-html5/ (based on 1KB Grid)
- The 1Kb CSS Grid, Part 1: https://web.archive.org/web/20160322011153/http://usabilitypost.com/2009/05/29/the-1kb-css-grid-part-1/
- The 1Kb CSS Grid, Part 2: https://web.archive.org/web/20160706195457/http://usabilitypost.com/2009/06/06/the-1kb-css-grid-part-2
- The 1Kb CSS Grid, Part 3: https://web.archive.org/web/20160323070737/http://usabilitypost.com/2009/06/19/the-1kb-css-grid-part-3/
Normalize
- Normalize.CSS: https://necolas.github.io/normalize.css/
Reset
- CSS Tools -- Reset CSS: https://meyerweb.com/eric/tools/css/reset/
PIE
- Progressive Internet Explorer (PIE): http://css3pie.com/ (offers backwards compatibility features for older IE 6-9 versions' CSS & DHTML to have more modern styling features)
- IE PNG Fix: www.twinhelix.com/css/iepngfix/
Tutorials
- How can I validate CSS on internal web pages?: http://stackoverflow.com/questions/1137884/how-can-i-validate-css-on-internal-web-pages
- Install the W3C CSS Validator locally: https://validator.w3.org/docs/install.html
- Reload CSS stylesheets with javascript: https://stackoverflow.com/questions/13721183/reload-css-stylesheets-with-javascript
- Mastering CSS Coding: http://coding.smashingmagazine.com/2009/10/05/mastering-css-coding-getting-started/ (with CSS expert Soh Tanaka)
- 30 CSS Selectors You Must Memorize: http://code.tutsplus.com/tutorials/the-30-css-selectors-you-must-memorize--net-16048
- Child & Sibling Selectors: https://css-tricks.com/child-and-sibling-selectors/
- Multiple Class / ID and Class Selectors : https://css-tricks.com/multiple-class-id-selectors/
- CSS can do that?: https://dev.to/ananyaneogi/css-can-do-that-18g7
- About HTML semantics and front-end architecture: http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
- DRY CSS -- A "Don’t-Repeat-Yourself" methodology for creating efficient, unified & scalable stylesheets: https://www.slideshare.net/jeremyclarke/dry-css-a-dontrepeatyourself-methodology-for-creating-efficient-unified-and-scalable-stylesheets
- The Protocol-relative URL: https://www.paulirish.com/2010/the-protocol-relative-url/
- Add CSS to <head> with JavaScript?: https://stackoverflow.com/questions/3922139/add-css-to-head-with-javascript
- How to create a <style> tag with Javascript: https://stackoverflow.com/questions/524696/how-to-create-a-style-tag-with-javascript
- Totally Pwn CSS with Javascript: https://web.archive.org/web/20080105011508/http://www.hunlock.com/blogs/Totally_Pwn_CSS_with_Javascript
- How do you add CSS with Javascript?: https://stackoverflow.com/questions/707565/how-do-you-add-css-with-javascript
- Style Ordered List with CSS: http://codeasily.com/css/style-ordered-list
- Showing and hiding something with pure CSS with show & hide button: https://stackoverflow.com/questions/40312901/showing-and-hiding-something-with-pure-css-with-show-and-hide-button
- Circling the square - round images with CSS only: http://wp-content-themes.com/circling-the-square-round-images-with-css-only/168
- Make the Footer Stick to the Bottom of a Page: http://ryanfait.com/resources/footer-stick-to-bottom-of-page/
- cleanstickyfooter - The cleanest way to a sticky footer with CSS: http://code.google.com/p/cleanstickyfooter/
- 8 different ways to beautifully style your lists : http://www.marcofolio.net/css/8_different_ways_to_beautifully_style_your_lists.html
- 15 Ways to Optimize CSS and Reduce CSS File Size: http://www.queness.com/post/588/15-ways-to-optimize-css-and-reduce-css-file-size
- CSS selectors tutorial: http://css.maxdesign.com.au/selectutorial/selectors_attribute.htm
- Making Image Overlay Caption Using CSS: http://web.enavu.com/tutorials/making-image-overlay-caption-using-css/
- Supersize that Background, Please!: http://www.alistapart.com/articles/supersize-that-background-please/
- How to make sexy cross-browser button-styled links with CSS: http://www.oscaralexander.com/tutorials/how-to-make-sexy-buttons-with-css.html
- Recreate Vimeo-like top navigation: http://www.jankoatwarpspeed.com/post/2009/01/19/Create-Vimeo-like-top-navigation.aspx
- Styling an input type="file": http://www.quirksmode.org/dom/inputfile.html
- Vertical Split Screen CSS Without Background Images: http://camendesign.com
- CSS Hacks for IE6, IE7, IE8, IE9: http://dimox.net/personal-css-hacks-for-ie6-ie7-ie8/
- IE Conditional Comments in XSLT 1.0: http://www.nickfitz.co.uk/2005/10/27/ie-conditional-comments-in-xslt-10/[116]
- A Whole Bunch of Amazing Stuff Pseudo Elements Can Do: http://css-tricks.com/pseudo-element-roundup/
- Styling an image title attribute using CSS?: https://stackoverflow.com/questions/11672946/styling-an-image-title-attribute-using-css
- CSS Content: http://css-tricks.com/css-content/
- Swapping Out Text, Five Different Ways: https://css-tricks.com/swapping-out-text-five-different-ways/
- How to change text (not font size) according to screen size in CSS?: https://stackoverflow.com/questions/39894291/how-to-change-text-not-font-size-according-to-screen-size-in-css
- Pure CSS GUI icons (experimental): http://nicolasgallagher.com/pure-css-gui-icons/
- CSS tips to tweak the look of your site: http://om4.com.au/client/css-tips-tweaks/
- RGBa Browser Support: https://css-tricks.com/rgba-browser-support/ (and using "rgb" without alpha/transparency as a fallback all the way back to IE 6)
- CSS background transparency without affecting child elements, through RGBa and filters: https://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
- IE Background RGB Bug: https://css-tricks.com/ie-background-rgb-bug/
- Non-Transparent Elements Inside Transparent Elements: http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
- Semi-transparent Backgrounds Script: http://www.ajaxupdates.com/semi-transparent-backgrounds-script/
- Pure CSS Content Slider: http://www.nealgrosskopf.com/tech/thread.php?pid=45
- Mountaintop Corners: http://www.alistapart.com/articles/mountaintop/
- SVG Clipping Paths: http://www.w3.org/TR/SVG/masking.html#ClippingPaths
- CSS2 Slants: http://www.infimum.dk/HTML/slantinfo.html
- Slantastic: http://meyerweb.com/eric/css/edge/slantastic/demo2.html
- Curvelicious: http://meyerweb.com/eric/css/edge/raggedfloat/demo2.html
- A Study of Regular Polygons: http://tantek.com/CSS/Examples/polygons.html
- http://www.russellheimlich.com/blog/pure-css-shapes-triangles-delicious-logo-and-hearts/
- Knuckelodeon - Unmatched Style’s CSS Off Was Slimey Fun: http://www.russellheimlich.com/blog/unmatched-styles-css-off-was-slimey-fun/
- CSS Vertical Text (in IE): http://www.ssi-developer.net/css/vertical-text.shtml
- Text Rotation with CSS: http://snook.ca/archives/html_and_css/css-text-rotation
- Sideways Headers: http://css-tricks.com/sideways-headers/
- Image Reflections with CSS: http://davidwalsh.name/css-reflection
- Realistic Reflection Effect with Pure CSS: https://redstapler.co/css-realistic-reflection-effect/
- CSS Hyperlink Tooltips: http://kalkran.com/tutorials/web-development/css-hyperlink-tooltips/
- Easy CSS Tooltip: http://www.kollermedia.at/archive/2008/03/24/easy-css-tooltip/
- Image-free CSS Tooltip Pointers - A Use for Polygonal CSS?: http://www.filamentgroup.com/lab/image_free_css_tooltip_pointers_a_use_for_polygonal_css/
- Pure CSS speech bubbles: http://nicolasgallagher.com/pure-css-speech-bubbles/
- Pure CSS Accordion: https://codepen.io/raubaca/pen/PZzpVe
- Raised and Pressed Div using CSS: http://tutobx.tumblr.com/post/24806696944/raised-and-pressed-div-using-css
- Anchor background image - anchor text overlaying image: https://stackoverflow.com/questions/14617162/anchor-background-image-anchor-text-overlaying-image#14617398
- CSS properties for Tables -- border-collapse, border-spacing, caption-side, empty-cells, and table-layout: https://quirksmode.org/css/css2/tables.html
- How to understand CSS Position Absolute once and for all: https://medium.com/free-code-camp/how-to-understand-css-position-absolute-once-and-for-all-b71ca10cd3fd
- Absolute Positioning Inside Relative Positioning: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
- How to determine using JavaScript if HTML element has overflowing content: http://stackoverflow.com/questions/143815/how-to-determine-using-javascript-if-html-element-has-overflowing-content/143889#143889
- Dynamically Resizing Text with CSS and Javascript: http://mirificampress.com/permalink/daynamically_resizing_text_with_css_and_javascript
- CSS Vertical Text: http://scottgale.com/blog/css-vertical-text/2010/03/01/
- Sliding Doors of CSS: http://www.alistapart.com/articles/slidingdoors/
- CSS Overlapping Tabs: http://www.codealamode.net/overlapping-tabs
- Tabs with Round Out Borders: http://css-tricks.com/tabs-with-round-out-borders/
- Interactive CSS Box Model explanation: http://www.redmelon.net/tstme/box_model/
- CSS Box Model for Beginners: https://dzone.com/articles/css-box-model-for-beginners
- Writing Modes & CSS Layout: https://www.smashingmagazine.com/2019/08/writing-modes-layout/
- How to create an "Hours of Operation" list with HTML and CSS?: https://stackoverflow.com/questions/37738278/how-to-create-an-hours-of-operation-list-with-html-and-css
- How to Anchor the Footer to Bottom of Page (or Header to Top)!: http://www.cssgirl.com/articles/2011/05/29/how-to-anchor-the-footer-to-bottom-of-page-or-header-to-top/
- CSS Refreshers -- Borders: http://code.tutsplus.com/tutorials/css-refreshers-borders--net-24655
- Does CSS Grid Replace Flexbox?: https://css-tricks.com/css-grid-replace-flexbox/
- Reset all Margins & Padding: https://css-tricks.com/reset-all-margins-padding/
- Understanding positioning in CSS: https://dev.to/huijing/understanding-positioning-in-css-7mn
- Understanding and Using rem Units in CSS: https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
- What is a Mixin?: https://marksheet.io/sass-mixins.html[117][118][119][120][121]
- DON’T READ this Less CSS tutorial: http://verekia.com/less-css/dont-read-less-css-tutorial-highly-addictive (self-reportedly "highly addictive and sure to switch you over from regular CSS")
- What are some examples of CSS used in an unusual way?: https://www.quora.com/What-are-some-examples-of-CSS-used-in-an-unusual-way
- CSS basic 8 - :hover, :active, :focus: https://dev.to/daaahailey/css-basic-8-hover-active-focus-4d78
- Is there a way to test CSS :hover in IE Developer tools?: https://stackoverflow.com/questions/13573302/is-there-a-way-to-test-css-hover-in-ie-developer-tools (advice works in FF & Chrome as well... ":hover" ":active" and/or ":focus" CSS states can be enabled for currently Inspected Element)
- Is it possible to put CSS @media rules inline?: https://stackoverflow.com/questions/9808233/is-it-possible-to-put-css-media-rules-inline (answer: NO of course, but there are some workarounds if you are trying to connect server-side values to CSS)
- Overlay opaque DIV over YouTube iFrame: https://stackoverflow.com/questions/3820325/overlay-opaque-div-over-youtube-iframe
- Why can't I use background image and color together?: https://stackoverflow.com/questions/903659/why-cant-i-use-background-image-and-color-together[122][123]
- Invert Colors Using CSS: https://davidwalsh.name/invert-colors-css | DEMO[124][125]
- Detect Inverted Color with CSS and JavaScript: https://davidwalsh.name/detect-invert-color
- Disable Text Selection Highlighting In HTML Using CSS: https://www.arungudelli.com/tutorial/css/disable-text-selection-in-html-using-user-select-css-property/
External Links
- wikipedia: CSS
- CSS Zen Garden - The Road to Enlightenment (some of the most impressive CSS Designs known to man): http://www.csszengarden.com/
- CSS Zen Garden -- lists as stylized select boxes: http://www.csszengarden.com/?cssfile=/057/057.css
- 2 Column Layout: http://www.visualdesigncore.com/tutorials/HTML-CSS/2-Column-Layout/
- CSSupdates - the latest and greatest CSS layouts and stylings: http://www.cssupdates.com/
- CSS Cheatsheet: http://web.tampabay.rr.com/bmerkey/cheatsheet.htm
- How do I test CSS selectors in JavaScript?: https://stackoverflow.com/questions/9165859/how-do-i-test-css-selectors-in-javascript
- Constraint CSS: https://web.archive.org/web/20170608093623/http://gridstylesheets.org:80/guides/ccss/
- Absolute, Relative, Fixed Positioning -- How Do They Differ? https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
- The ESPN.com (standards-based) Redesign: http://mikeindustries.com/blog/archive/2003/06/espn-interview
- Why Inline CSS And JavaScript Code Is Such A Bad Thing: http://css.dzone.com/news/why-inline-css-and-javascript-
- CSS File Size Limit in Internet Explorer 6 / 7 / 8: http://am-blog.no-ip.org/BlogEngine/post/2010/03/24/CSS-File-Size-Limit-in-Internet-Explorer-6-7-8.aspx
- IE Question - How many CSS includes can it handle?: http://efreedom.com/Question/1-1082849/IE-Question-Many-CSS-Includes-Can-Handle
- Internet Explorer’s annoying 30 CSS files limit bug: http://teqsnacks.com/2010/02/15/internet-explorer-annoying-30-css-files-limit-bug/
- MSDN - A webpage that uses CSS styles does not render correctly in Internet Explorer: http://support.microsoft.com/kb/262161
- CSS Gallery Inspiration: http://www.webair.it/blog/2008/12/15/css-gallery-inspiration/
- Best Designers and Developers RSS Feed: http://www.webair.it/blog/2009/02/19/best-designers-and-developers-rss-feed/
- Javascript/CSS Scrollbar Effects: http://andylangton.co.uk/articles/css/javascript-css-scrollbars/
- Cool CSS Image Pop-up: http://moneytreesystems.com/css/picpopup.html
- CSS Techniques, Experiments and Wheezes: http://www.zytrax.com/tech/css/workarounds.html#spacing
- Son of Suckerfish Dropdowns: http://htmldog.com/articles/suckerfish/dropdowns/
- Skinning HTML Select Boxes: http://www.lotsofcode.com/javascript-and-ajax/jquery-select-box-skin.htm
- Styling dropdown select boxes: http://home.tiscali.nl/developerscorner/fdc-varia/styling-dropdown-boxes.htm
- Forms With Style: http://dhtmlkitchen.com/learn/css/forms/index5.jsp
- Styling an input type="file": http://www.quirksmode.org/dom/inputfile.html
- How To Skin A Web Form With Pure CSS: http://www.onextrapixel.com/2009/08/25/how-to-use-pure-css-to-style-web-form-dynamically-plus-12-awesome-javascript-plugins/
- Javascript - onclick change css class: http://www.webmasterworld.com/javascript/3908605.htm
- CSS Image Swap: http://brassblogs.com/blog/css-image-swap
- Pure CSS Hide and Display Content: http://www.devinrolsen.com/css-hide-and-display-content/
- Essentials of CSS Hacking For Internet Explorer: http://www.maratz.com/blog/archives/2005/06/16/essentials-of-css-hacking-for-internet-explorer/
- Internet Explorer & CSS issues: http://www.webcredible.co.uk/user-friendly-resources/css/internet-explorer.shtml
- Definitive Guide to Taming the IE6 Beast: http://sixrevisions.com/web-development/definitive-guide-to-taming-the-ie6-beast/
- How to Use Different CSS Style Sheets For Different Browsers (and How to Hide CSS Code from Older Browsers): http://www.thesitewizard.com/css/excludecss.shtml
- CSS hacks for various browsers: http://www.webdevout.net/css-hacks
- IE PNG Alpha Fix v2.0 Alpha 4: http://www.twinhelix.com/css/iepngfix/demo/
- Pure CSS Light Box: http://www.tutorialhero.com/click-49852-pure_css_light_box.php
- CSS-based Dropdown with a twist: http://www.tjkdesign.com/articles/dropdown/demo.asp
- 37+ Great Ajax, CSS Tab-Based Interfaces: http://www.noupe.com/javascript/37-great-ajax-css-tab-based-interfaces.html
- Adaptive CSS-Layouts -- New Era In Fluid Layouts?: http://www.smashingmagazine.com/2009/06/09/smart-fixes-for-fluid-layouts/
- CSS Background Image Resize: http://nopeople.com/CSS/background_image_resize/
- IE CSS hack without using any hacks!: http://www.productivedreams.com/ie-css-hack-without-using-any-hacks/
- Min-Height Fast Hack: http://www.dustindiaz.com/min-height-fast-hack
- IE7 100% min-height: http://www.pmob.co.uk/temp/ie7test6.htm
- Make a div fill the height of the remaining screen space: https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space
- Advanced HTML and CSS -- <DIV> and <SPAN> tags unravelled!: http://www.designplace.org/tutorials.php?page=1&c_id=24
- Dynamically resizing DIVs: http://www.designplace.org/static/divspan2.html
- Syntax Highlight CSS Code Using Regular Expression: http://www.jswidget.com/blog/syntax_highlight_css.html
- Top CSS Best Hacks: http://csshook.com/cssexamples/top-css-best-hacks/
- Context highlighting using CSSonly: http://users.skumleren.net/cers/examples/formhighlight.html
- Rediscovering the Button Element: http://particletree.com/features/rediscovering-the-button-element/
- How To Create An Amazing jQuery CSS/Style Switcher : http://net.tutsplus.com/tutorials/javascript-ajax/jquery-style-switcher/
- CSS "Cascading Style Sheets" Lessons: http://css-lessons.ucoz.com/link-css-examples-2.htm
- Examples on styling a submit button: http://www.cssbuttons.net/examples.php?skin=glass&skinName=Glass&skinClass=glass+b
- Creating a CSS layout from scratch: http://www.subcide.com/articles/creating-a-css-layout-from-scratch/
- Seven CSS Frameworks for Developers: http://developer.practicalecommerce.com/articles/1396-Seven-CSS-Frameworks-for-Developers
- Lessons From Building a Basic Video Player in HTML5: http://www.computedstyle.com/2009/05/lessons-from-building-basic-video.html
- CSS HTML5 Video Effects: http://ajaxian.com/archives/css-video-effects
- Design a breath-taking portfolio layout: http://www.grafpedia.com/tutorials/design-a-breath-taking-portfolio-layout
- Showcase of 30 Super Stylish CSS Footers: http://www.denbagus.net/css-footers/
- CSS Styling Blockquotes: http://www.cssnewbie.com/example/styling-blockquotes/
- CSS Blockquote Styling: http://www.simcomedia.com/css-blockquote-styling
- Can you style a tag?: https://stackoverflow.com/questions/22570130/can-you-style-a-abbr-tag
- Can an abbr tag's title be styled?: https://stackoverflow.com/questions/1682714/can-an-abbr-tags-title-be-styled
- Use CSS "text-overflow" to truncate long texts: https://makandracards.com/makandra/5883-use-css-text-overflow-to-truncate-long-texts
- CSS DropDown Menu Tutorial: http://ago.tanfa.co.uk/css/examples/menu/tutorial-h.html
- Tabbed Navigation Using CSS: http://blixt.org/articles/tabbed-navigation-using-css#section=introduction
- Centered Tabs with CSS: http://24ways.org/examples/centered-tabs-with-css/tabs.html
- Bulletproof Slants: http://www.simplebits.com/bits/bulletproof_slants.html
- CSS Gradient Text effect: http://www.webdesignerwall.com/tutorials/css-gradient-text-effect/
- Text-Shadow Exposed -- Make cool and clever text effects with css text-shadow: http://www.kremalicious.com/2008/04/make-cool-and-clever-text-effects-with-css-text-shadow/
- Top 10 CSS buttons tutorial list: http://www.catswhocode.com/blog/top-10-css-buttons-tutorial-list
- How to Style an Unordered List with CSS: http://www.webreference.com/programming/css_style2/3.html
- Styling your Lists -- 20+ Brilliant How to’s and Best Practices: http://devsnippets.com/article/styling-your-lists.html
- 10+ Slick Smooth Scrolling Portfolios: http://www.tutwow.com/roundups/10-slick-smooth-scrolling-portfolios/
- Using CSS to Do Anything -- 50+ Creative Examples and Tutorials: http://www.noupe.com/css/using-css-to-do-anything-50-creative-examples-and-tutorials.html
- Content Overlay with CSS: http://snook.ca/archives/html_and_css/content_overlay_css/
- CSS and Pop-up Forms: http://ajaxweb.blogspot.com/2005/12/css-and-pop-up-forms.html
- Style Web Forms Using CSS: http://articles.sitepoint.com/article/style-web-forms-css
- Using CSS to style your web buttons and widgets: http://cssbutton.com/forms/
- Removing Dotted Border on Clicked Links: http://haslayout.net/css-tuts/Removing-Dotted-Border-on-Clicked-Links
- Styling fieldset elements with CSS: http://www.456bereastreet.com/lab/styling-form-controls-revisited/fieldset/
- Change the style of selected text: http://anidandesign.com/css/change-the-style-of-selected-text-in-firefox/
- Sexy Ordered Lists with CSS: http://www.sohtanaka.com/web-design/css-ordered-list-enhancement-tutorial/
- Creating CSS Buttons: http://www.cxliv.org/2003/08/31/creating_css_buttons.php
- 30 Pure CSS Alternatives to Javascript: http://speckyboy.com/2010/04/26/30-pure-css-alternatives-to-javascript/
- Create Social Media Icons in Pure CSS: http://blog.insicdesigns.com/2010/03/create-social-media-icons-in-pure-css/
- CSS Sticky Footer: http://www.cssstickyfooter.com/
- 2 Column CSS Layout: http://www.vanseodesign.com/css/2-column-css-layout/
- Multi-Column Layouts Climb Out of the Box: http://www.alistapart.com/articles/multicolumnlayouts
- Styling Your Search Form with CSS: http://www.sohtanaka.com/web-design/styling-input-search-form-css/
- Theming The Search Submit Button - A CSS Cross-Browser Compatible Solution: http://mydrupalblog.lhmdesign.com/theming-search-submit-button-css-cross-browser-compatible-solution
- Setting Fonts In IE6: http://www.designdetector.com/archives/03/06/SettingFontsInIE6.php
- All About Floats: http://css-tricks.com/all-about-floats/
- How To - Resizeable Background Image: http://css-tricks.com/how-to-resizeable-background-image/
- How to style external links with css: http://www.csstemplatesweb.com/css-articles/how-to-style-external-links-with-css/
- Why tables for layout is stupid: http://www.hotdesign.com/seybold/
- Don’t use @import: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
- How can you make a gradient background without images?: http://stackoverflow.com/questions/3074397/how-can-you-make-a-gradient-background-without-images
- css gradients in Firefox 3.6: http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
- Horizontal Menus That Grow on You: http://csshowto.com/menus/horizontal-menus-that-grow-on-you/
- Horizontally Centered Menus with no CSS hacks: http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
- How do I justify text on both sides on Web pages?: http://www.cs.tut.fi/~jkorpela/www/justify.html
- Vertical centering using CSS: http://www.student.oulu.fi/~laurirai/www/css/middle/
- CSS - Center text/image/div in middle of parent div (container): http://css-workshop.com/css-center-textimagediv-in-middle-of-parent-div-container/
- How to Perfectly Center Elements Vertically, Horizontally, or Both: https://www.inflectra.com/Support/KnowledgeBase/KB234.aspx
- Exactly Center an Image/Div Horizontally and Vertically: http://css-tricks.com/snippets/css/exactly-center-an-imagediv-horizontally-and-vertically/
- How To - Resizeable Background Image: http://css-tricks.com/766-how-to-resizeable-background-image/
- CSS border-radius and -moz-border-radius: http://www.the-art-of-web.com/css/border-radius/
- Conditional comments block downloads: http://www.phpied.com/conditional-comments-block-downloads/
- Pure CSS Hide and Display Content: http://www.devinrolsen.com/css-hide-and-display-content/
- CSS - How to select an element that is the first or last child of its parent: http://quirksmode.org/css/firstchild.html
- 30 Fresh CSS Website Designs for Inspiration: http://designmodo.com/css-website-designs/
- 55 High Quality Free and Premium (X)HTML/CSS Templates: http://designmodo.com/xhtml-css-templates/
- Make a div fill the remaining screen space: http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space
- Create a Modal Dialog Using CSS and Javascript: http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/
- What's the difference between display:none and visibility:hidden for hiding content?: http://webdesign.about.com/od/css/f/blfaqhidden.htm
- Preload :hover images in CSS: http://www.maratz.com/blog/archives/2005/06/22/preload-hover-images-in-css/
- Pure CSS - Better Image Preloading without JavaScript: http://perishablepress.com/press/2008/04/15/pure-css-better-image-preloading-without-javascript/
- Easily prevent Flash of Unstyled Content (FOUC) with jQuery: http://www.robertmullaney.com/2011/08/29/prevent-flash-of-unstyled-content-fouc-jquery/
- 1 Way To Avoid the Flash of Unstyled Content: http://www.learningjquery.com/2008/10/1-way-to-avoid-the-flash-of-unstyled-content
- Fixing FOUT (Flash Of Unstyled Type) With FOUT-B-Gone: http://blog.abdulwajid.me/2011/04/25/fixing-fout-flash-of-unstyled-type-with-fout-b-gone/
- Stop CSS Background Flickering in Internet Explorer 6: http://www.thefutureoftheweb.com/blog/stop-background-flashing-in-ie6
- How to add a flash background to an html element: http://css.flepstudio.org/en/css-tutorials/flash-background.html
- Styling <hr> with CSS: http://www.sovavsiti.cz/css/hr.html
- React - Lib for CSS in JS: https://speakerdeck.com/vjeux/react-css-in-js
- Against CSS in JS: http://keithjgrant.com/posts/against-css-in-js.htm
- CSS Tricks That Will Make Your Work Easier: http://dzone.com/articles/css-tricks-that-will-make-your-work-easier
- CSS Hacks: http://hackcss.com/
- Browser Specific Hacks: http://css-tricks.com/snippets/css/browser-specific-hacks/
- Box Model Hack: http://tantek.com/CSS/Examples/boxmodelhack.html
- CSS Hacks: http://reference.sitepoint.com/css/hacks
- In defense of CSS hacks — introducing “safe CSS hacks”: https://mathiasbynens.be/notes/safe-css-hacks
- CSSOM, Vars, Mixins, Nesting, and Modules: http://www.xanthir.com/blog/b49w0
- Z-Index is Weird: https://codepen.io/ahoylemon/post/z-index-is-weird
- Soccer Formations in CSS Grid: http://www.opihana.com/2017/11/08/Soccer-Formations-in-CSS-Grid/
- Useful Tests for JS-powered Styling: https://codepen.io/tomhodgins/post/useful-tests-for-js-powered-styling
- Don’t use @import:https://www.stevesouders.com/blog/2009/04/09/dont-use-import/
- Dark Mode CSS Theme: https://www.javascriptteacher.com/dark-mode-alternate-css-style-sheet.html
[129] [130] [131] [132] [133] [134] [135] [136]
References
- ↑ W3C Release Series of Updated CSS3 Specifications: http://www.css3.info/w3c-release-series-of-updated-css3-specifications/
- ↑ Media Types, Groups and Similarities: http://www.d.umn.edu/~lcarlson/csswork/media/mediagroups.html
- ↑ CSS Styling for Print and Other Media: http://www.digital-web.com/articles/css_styling_for_print_and_other_media/
- ↑ CSS Design - Going to Print: http://www.alistapart.com/articles/goingtoprint/
- ↑ How to get CSS selectors to work in the Developer Tools for Chrome 17?: https://stackoverflow.com/questions/9212797/how-to-get-css-selectors-to-work-in-the-developer-tools-for-chrome-17
- ↑ Evaluate and validate XPath/CSS selectors in Chrome Developer Tools: https://yizeng.me/2014/03/23/evaluate-and-validate-xpath-css-selectors-in-chrome-developer-tools/
- ↑ CSS Selector Selenium WebDriver Tutorial: https://www.softwaretestingmaterial.com/css-selector-selenium-webdriver-tutorial/
- ↑ Selenium Tips -- CSS Selectors: https://saucelabs.com/resources/articles/selenium-tips-css-selectors
- ↑ How to better organize your CSS architecture with OOCSS, BEM, & SMACSS: https://medium.com/free-code-camp/how-to-better-organize-your-css-architecture-with-oocss-bem-smacss-65e8a5c207c0
- ↑ BEM -- A brand new "Front-End Methodology": https://www.smashingmagazine.com/2012/04/a-new-front-end-methodology-bem/
- ↑ MindBEMding – getting your head ’round BEM syntax: https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
- ↑ Introducing BEM -- The popular CSS naming convention: https://assortment.io/posts/introducing-bem-css-naming-convention
- ↑ BEM For Beginners -- Why You Need BEM: https://www.smashingmagazine.com/2018/06/bem-for-beginners/
- ↑ CSS Tricks -- BEM 101: https://css-tricks.com/bem-101/
- ↑ CSS Naming Conventions that Will Save You Hours of Debugging: https://medium.freecodecamp.org/css-naming-conventions-that-will-save-you-hours-of-debugging-35cea737d849
- ↑ BEM by Example: https://sparkbox.com/foundry/bem_by_example
- ↑ Airbnb CSS / Sass Styleguide: https://github.com/airbnb/css (follows BEM with suggestions for SASS)
- ↑ BEM Simple Naming Convention For CSS Classes: https://medium.com/tech-tajawal/bem-simple-naming-convention-for-css-classes-9660438d04a2
- ↑ 5 Reasons To Use BEM (a.k.a. why is BEM G.R.E.A.T.): https://blog.elpassion.com/reasons-to-use-bem-a88738317753
- ↑ Thoughtful CSS Architecture: https://sparkbox.com/foundry/thoughtful_css_architecture
- ↑ The BEM Architecture: https://blog.piyushpawar.dev/the-bem-architecture/
- ↑ CSS Architecture Block-Element-Modifier (BEM): https://www.sitepoint.com/css-architecture-block-element-modifier-bem/
- ↑ How to Organize Your CSS with a Modular Architecture(OOCSS, BEM, SMACSS): https://snipcart.com/blog/organize-css-modular-architecture
- ↑ CSS Architecture -- Block-Element-Modifier (BEM) & Atomic CSS: https://www.sitepoint.com/css-architecture-block-element-modifier-bem-atomic-css/
- ↑ CSS Selector Support in major browsers (table): http://www.evotech.net/blog/2009/02/css-browser-support/
- ↑ Normalize CSS or CSS Reset?!: https://medium.com/@elad/normalize-css-or-css-reset-9d75175c5d1e:
- ↑ Looking At How Browser Zoom Affects CSS Media Queries And Pixel-Density: https://www.bennadel.com/blog/3811-looking-at-how-browser-zoom-affects-css-media-queries-and-pixel-density.htm
- ↑ CSS Tricks -- CSS almanac - Zoom: https://css-tricks.com/almanac/properties/z/zoom/
- ↑ What Does 'zoom' do in CSS?: https://stackoverflow.com/questions/10278783/what-does-zoom-do-in-css
- ↑ Understand CSS Zoom Property with Real World Example: https://www.positronx.io/understand-css-zoom-property-with-real-world-examples/
- ↑ What is difference between .htc and .js file?: http://stackoverflow.com/questions/1617667/what-is-difference-between-htc-and-js-file
- ↑ Browser CSS Hacks: https://www.paulirish.com/2009/browser-specific-css-hacks/
- ↑ How to write a CSS hack for IE 11?: https://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11
- ↑ Detecting IE11 using CSS Capability/Feature Detection: https://stackoverflow.com/questions/18907131/detecting-ie11-using-css-capability-feature-detection
- ↑ CSS Hacks: http://www.webdevout.net/css-hacks
- ↑ Moving IE specific CSS into media blocks: https://keithclark.co.uk/articles/moving-ie-specific-css-into-media-blocks/
- ↑ Detecting browsers -- javascript hacks: http//www.thespanner.co.uk/2009/01/29/detecting-browsers-javascript-hacks/
- ↑ Using IE conditional comments inside a stylesheet: https://stackoverflow.com/questions/11703684/using-ie-conditional-comments-inside-a-stylesheet
- ↑ Need hack for ie9 only: https://stackoverflow.com/questions/12296628/need-hack-for-ie9-only
- ↑ Conditional Comments in CSS for Internet Explorer: https://code.adonline.id.au/conditional-comments-in-css-for-internet-explorer/
- ↑ Browser-Specific CSS Hacks: https://www.wired.com/2010/02/browser-specific_css_hacks/
- ↑ CSS Units: https://www.tutorialbrain.com/css_tutorial/css_units/
- ↑ z-index overview: https://css-tricks.com/almanac/properties/z/z-index/
- ↑ Stacking without the z-index property: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index
- ↑ What No One Told You About Z-Index: https://philipwalton.com/articles/what-no-one-told-you-about-z-index/
- ↑ CSS Always On Top: https://stackoverflow.com/questions/21386306/css-always-on-top
- ↑ Using !important with CSS: https://www.electrictoolbox.com/using-important-css/
- ↑ CSS !important Rule - How to Use It Correctly: https://appendto.com/2016/04/css-important-rule-how-to-use-it-correctly/
- ↑ !important Declarations: https://www.sitepoint.com/important-declarations/
- ↑ !important CSS Declarations: How and When to Use Them: https://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/
- ↑ when to use !important property in css?: https://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css
- ↑ What are the implications of using "!important" in CSS?: https://stackoverflow.com/questions/3706819/what-are-the-implications-of-using-important-in-css
- ↑ Rounded Corners / Border Radius, css3 and IE versions below IE9: http://cookbooks.adobe.com/post_Rounded_Corners___Border_Radius__css3_and_IE_versi-18564.html
- ↑ Better float containment in IE using CSS expressions: http://nicolasgallagher.com/better-float-containment-in-ie/
- ↑ The Clearfix -- Force an Element To Self-Clear its Children: https://css-tricks.com/snippets/css/clear-fix/
- ↑ 50+ “Must see” CSS Tools: http://www.smashingmagazine.com/2008/12/09/50-really-useful-css-tools/
- ↑ CSS Specificity -- Things You Should Know: https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
- ↑ CSS performance optimization: https://developer.mozilla.org/en-US/docs/Learn/Performance/CSS_performance
- ↑ W3Schools - CSS course: http://www.w3schools.com/css/
- ↑ Meet the Pseudo Class Selectors: https://css-tricks.com/pseudo-class-selectors/
- ↑ Styling FORM inputs in CSS with :required, :optional, :valid and :invalid: https://alligator.io/css/styling-form-input-validity/
- ↑ Checking if an input is empty with CSS: https://zellwk.com/blog/check-empty-input-css/
- ↑ CSS selector for empty file input: https://stackoverflow.com/questions/45972483/css-selector-for-empty-file-input
- ↑ Is sizing fonts using “em” still relevant?: http://stackoverflow.com/questions/2058550/is-sizing-fonts-using-em-still-relevant
- ↑ px – em – % – pt – keyword: http://css-tricks.com/css-font-size/
- ↑ Perfect multi-column CSS liquid layouts. iPhone compatible: http://matthewjamestaylor.com/blog/perfect-multi-column-liquid-layouts
- ↑ What’s the Difference Between Sass and SCSS?: http://www.sitepoint.com/whats-difference-sass-scss/
- ↑ What's the (technical) difference between SCSS & Sass?: http://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass
- ↑ Too LESS? Should You Be Using Sass?: https://metaskills.net/2012/02/27/too-less-should-you-be-using-sass/
- ↑ What's the difference between SCSS and Sass?: https://stackoverflow.com/questions/5654447/whats-the-difference-between-scss-and-sass
- ↑ SASS vs. SCSS -- which syntax is better?: http://www.thesassway.com/editorial/sass-vs-scss-which-syntax-is-better (answer: these days almost everyone goes SCSS)
- ↑ Advantages of Using a Preprocessor (Sass) in CSS Development: https://medium.com/swlh/advantages-of-using-a-preprocessor-sass-in-css-eb7310179944
- ↑ Media queries in SASS: https://stackoverflow.com/questions/36957904/media-queries-in-sass
- ↑ Our Experience Switching From Less to Sass: https://sproutsocial.com/insights/less-to-sass/
- ↑ How to configure SCSS modules for Webpack: https://developerhandbook.com/webpack/how-to-configure-scss-modules-for-webpack/
- ↑ CSS tricks -- SASS .vs. LESS (syntax and differences overview): https://css-tricks.com/sass-vs-less/
- ↑ Setting variable to @mixin in Sass?: https://stackoverflow.com/questions/10023136/setting-variable-to-mixin-in-sass
- ↑ SASS official docs -- @mixin and @include: https://sass-lang.com/documentation/at-rules/mixin
- ↑ W3schools -- SASS @mixin and @include: https://www.w3schools.com/sass/sass_mixin_include.asp
- ↑ Helpful SASS Mixins: https://responsivedesign.is/articles/helpful-sass-mixins/
- ↑ Use SASS Mixins in CSS: https://learnopidia.com/use-mixins-in-scss/
- ↑ How to Use SASS - Mixins: https://scotch.io/tutorials/how-to-use-sass-mixins
- ↑ 8 Handy Extends & Mixins for SASS: https://inspirationalpixels.com/extends-and-mixins-for-sass/
- ↑ Handy SASS Mixins: https://web-design-weekly.com/handy-sass-mixins/
- ↑ CSS tricks -- Mixin to Manage Breakpoints: https://css-tricks.com/snippets/sass/mixin-manage-breakpoints/
- ↑ Getting Started with Sass and breakpoint Mixin: https://responsivedesign.is/develop/getting-started-with-sass-and-breakpoint-mixin/
- ↑ Creating a Dead Simple Sass Mixin to Handle Responsive Breakpoints: https://medium.com/developing-with-sass/creating-a-dead-simple-sass-mixin-to-handle-responsive-breakpoints-889927b37740
- ↑ Useful Sass Mixins for Responsive Design, Font Sizing and More: https://divshot.com/blog/tips-and-tricks/useful-sass-mixins-for-responsive-design-font-sizing-and-more/
- ↑ How to Use Sass Mixins: https://scotch.io/tutorials/how-to-use-sass-mixins
- ↑ SASS/SCSS Mixins, Functions & @includes Tutorial: https://www.koderhq.com/tutorial/sass/mixin/
- ↑ LESS CSS - features: https://lesscss.org/features/
- ↑ LESS installation: https://www.tutorialspoint.com/less/less_installation.htm
- ↑ Get Into LESS - the Programmable Stylesheet Language: http://webdesign.tutsplus.com/articles/get-into-less-the-programmable-stylesheet-language--webdesign-5216
- ↑ Less Framework 4 - An adaptive CSS grid system: https://web.archive.org/web/20120112001820/http://lessframework.com/
- ↑ 10 LESS CSS Examples You Should Steal for Your Projects: https://codemyviews.com/blog/10-less-css-examples-you-should-steal-for-your-projects
- ↑ LESS CSS – Beginner’s Guide to the Basics: http://www.hongkiat.com/blog/less-basic/
- ↑ wikipedia: Less (stylesheet language)
- ↑ Less mixin with optional parameters: https://stackoverflow.com/questions/17116082/less-mixin-with-optional-parameters
- ↑ How to install and run lessc on top of node.js and Windows?: https://stackoverflow.com/questions/16492940/how-to-install-and-run-lessc-on-top-of-node-js-and-windows
- ↑ Multiple "&" during nesting of selectors in LESS: http://lesscss.org/features/#parent-selectors-feature-multiple-
- ↑ Nesting in Less and Sass: https://kolosek.com/nesting-in-less-and-sass/
- ↑ LESS CSS nesting classes: https://stackoverflow.com/questions/5117133/less-css-nesting-classes
- ↑ LESS CSS - accessing classes further up the dom tree from within a nested class: https://stackoverflow.com/questions/11519931/less-css-accessing-classes-further-up-the-dom-tree-from-within-a-nested-class
- ↑ LESS CSS -- abusing the & Operator when nesting?: https://stackoverflow.com/questions/11537260/less-css-abusing-the-operator-when-nesting
- ↑ How to compile multiple files at once from command line?: https://stackoverflow.com/questions/28160548/how-to-compile-multiple-files-at-once-from-command-line
- ↑ A Comprehensive Introduction to Less - Mixins: https://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins/
- ↑ Webpack -- How to compile all less files in a project: https://stackoverflow.com/questions/35246119/webpack-how-to-compile-all-less-files-in-a-project
- ↑ Why's my CSS file is empty after the LESS file is compiled?: https://stackoverflow.com/questions/25016504/why-my-css-file-is-empty-after-the-less-file-is-compiled (careful about compiling against global LESS files like a "variables.less", "main.less", "mixins.less", etc... as it will come up empty unless you have an actual selector/rule in the file, so empty is good as it should typically mean no syntax errors)
- ↑ Blueprint CSS - Grid Width calculator: https://web.archive.org/web/20100323143822/http://bluecalc.groupion.com/
- ↑ Impressive "Portfolio" example of CSS collapsible grid: https://web.archive.org/web/20100117143936/http://intereactive.net/portfolio
- ↑ What is behaviour and PIE.htc in a CSS file I am looking at on the web?: https://stackoverflow.com/questions/9749043/what-is-behaviour-and-pie-htc-in-a-css-file-i-am-looking-at-on-the-web
- ↑ What is a .htc File: https://css-tricks.com/forums/topic/what-is-a-htc-file/
- ↑ PIE.htc in layouts folder can't be accessed by other users?: https://sharepoint.stackexchange.com/questions/115605/pie-htc-in-layouts-folder-cant-be-accessed-by-other-users
- ↑ CSS3 Pie .htc file: https://www.sitepoint.com/community/t/css3-pie-htc-file/6455
- ↑ CSS3 PIE.htc Not Working: https://www.generacodice.com/en/articolo/4400098/css3-pie-htc-not-working
- ↑ Taming Your Multiple IE Standalones: http://www.positioniseverything.net/articles/multiIE.html
- ↑ wikipedia: Mixin
- ↑ Mixin CSS spec proposal: http://oocss.org/spec/css-mixins.html
- ↑ Custom User @mixins: https://css-tricks.com/custom-user-mixins/
- ↑ What is a mixin, and why are they useful?: http://stackoverflow.com/questions/533631/what-is-a-mixin-and-why-are-they-useful
- ↑ A Comprehensive Introduction to Less: Mixins: http://www.sitepoint.com/a-comprehensive-introduction-to-less-mixins/
- ↑ CSS - background image on background color: https://stackoverflow.com/questions/8195215/css-background-image-on-background-color
- ↑ How do I detect the inherited background-color of an element using jQuery/JS?: https://stackoverflow.com/questions/4259815/how-do-i-detect-the-inherited-background-color-of-an-element-using-jquery-js
- ↑ Reverse Text Color Based on Background Color Automatically in CSS: https://css-tricks.com/reverse-text-color-mix-blend-mode/
- ↑ How can I generate the opposite color according to current color?: https://stackoverflow.com/questions/35969656/how-can-i-generate-the-opposite-color-according-to-current-color
- ↑ Full-height app layouts -- A CSS trick to make it easier: http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
- ↑ Div height 100% and expands to fit content: https://stackoverflow.com/questions/9537838/div-height-100-and-expands-to-fit-content
- ↑ How to Set the Height of an HTML Element to 100% Using CSS: https://www.thoughtco.com/set-height-html-element-100-percent-3467075
- ↑ HTML & CSS -- Still Relevant for Designers in 2016: http://blog.teamtreehouse.com/html-css-still-relevant-designers-2016
- ↑ Aeon Responsive CSS Grid: http://newaeonweb.com.br/responsiveaeon/
- ↑ 10 Really Outstanding and Useful CSS Grid Systems: http://spyrestudios.com/css-grid-systems/
- ↑ Don’t Overthink It - CSS Grids: https://css-tricks.com/dont-overthink-it-grids/
- ↑ A Complete Guide to Flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
- ↑ Top 10 Lightweight CSS Frameworks for Building Fast Websites in 2018 : https://dzone.com/articles/top-10-lightweight-css-frameworks-for-building-fas
- ↑ The Most Important CSS Concept to Learn: https://medium.freecodecamp.org/the-most-important-css-concept-to-learn-8e929c944a19 (Specifiity then Order)
- ↑ CSS Architecture: http://engineering.appfolio.com/2012/11/16/css-architecture/
See Also
CSS3 | Mobile Web Design | WebApp | RIA | HTML | Typography