The Ultimate Guide to CSS + Cheat Sheets
by Bradley Nice, Content Manager at ClickHelp.co — professional technical writing tool
CSS is a language that describes the style of an HTML document and its elements. Learn how to use CSS to create beautiful web pages. For those of you still learning CSS, or wanting to go a little deeper into specific CSS subjects, I’d put together a list of learning resources that I’ve come across in recent months.
I might have missed something important, so please suggest your categories and resources in the comments and I’ll make the edits in the following list!
CSS Selectors
CSS selectors define the elements to which a set of CSS rules apply. From there you can move into advanced selectors and pseudoselectors. This is a starting point of CSS learning.
- Beginner Concepts: How CSS Selectors Work
- Level up your CSS selector skills
- CSS selectors | MDN Web Docs
CSS Box Model
CSS box model explains how to manipulate elements on your page. It is essential knowledge for CSS newbies.
CSS Layout
Layout involves manipulating how elements lay out on the page. Learn how to manipulate this to create exactly the design you desire.
- Getting Started With CSS Layout | Smashing Magazine
- The Ultimate Guide to Flexbox — Learning Through Examples by Ohans Emmanuel
- A Complete Guide to Grid | CSS-Tricks
- Grid Layout Cheat Sheet (PDF)
Styling Text with CSS
Text is a fundamental block of any web site. Learn how to apply some design to it via CSS.
CSS Units
Units are used to define the positioning, size and other parameters.
- CSS values and units | MDN web docs
- A Look at CSS Viewport Units | Alligator.io
- Calc() function with Use Cases | Pineco
CSS Colors and Gradients
CSS Transitions and Animations
CSS Pseudo-classes and Pseudo-elements
- Learning To Use The :after And :before Pseudo-Elements In CSS | Smashing Magazine
- A Whole Bunch of Amazing Stuff Pseudo Elements Can Do | CSS-Tricks
- How CSS pseudo-classes work, explained with code and lots of diagramsby Nash Vail
- A Whole Bunch of Amazing Stuff Pseudo Elements Can Do | CSS-Tricks
CSS Preprocessors
CSS Naming Systems and Architecture
CSS Cheat Sheets
SOURCE: https://medium.com/level-up-web/the-ultimate-guide-to-css-103b0f883de3
Comentarios recientes