CSS Notes For Professionals. 200+ pages of professional hints and tricks

Description

Content list About Chapter 1: Getting started with CSS Section 1.1: External Stylesheet Section 1.2: Internal Styles Section 1.3: CSS @import rule (one of CSS at-rule) Section 1.4: Inline Styles Section 1.5: Changing CSS with JavaScript Section 1.6: Styling Lists with CSS Chapter 2: Structure and Formatting of a CSS Rule Section 2.1: Property Lists Section 2.2: Multiple Selectors Section 2.3: Rules, Selectors, and Declaration Blocks Chapter 3: Comments Section 3.1: Single Line Section 3.2: Multiple Line Chapter 4: Selectors Section 4.1: Basic selectors Section 4.2: Attribute Selectors Section 4.3: Combinators Section 4.4: Pseudo-classes Section 4.5: Child Pseudo Class Section 4.6: Class Name Selectors Section 4.7: Select element using its ID without the high specificity of the ID selector Section 4.8: The :last-of-type selector Section 4.9: CSS3 :in-range selector example Section 4.10: A. The :not pseudo-class example & B. :focus-within CSS pseudo-class Section 4.11: Global boolean with checkbox:checked and ~ (general sibling combinator) Section 4.12: ID selectors Section 4.13: How to style a Range input Section 4.14: The :only-child pseudo-class selector example Chapter 5: Backgrounds Section 5.1: Background Color Section 5.2: Background Gradients Section 5.3: Background Image Section 5.4: Background Shorthand Section 5.5: Background Size Section 5.6: Background Position Section 5.7: The background-origin property Section 5.8: Multiple Background Image Section 5.9: Background Attachment Section 5.10: Background Clip Section 5.11: Background Repeat Section 5.12: background-blend-mode Property Section 5.13: Background Color with Opacity Chapter 6: Centering Section 6.1: Using Flexbox Section 6.2: Using CSS transform Section 6.3: Using margin: 0 auto; Section 6.4: Using text-align Section 6.5: Using position: absolute Section 6.6: Using calc() Section 6.7: Using line-height Section 6.8: Vertical align anything with 3 lines of code Section 6.9: Centering in relation to another item Section 6.10: Ghost element technique (Michał Czernow's hack) Section 6.11: Centering vertically and horizontally without worrying about height or width Section 6.12: Vertically align an image inside div Section 6.13: Centering with fixed size Section 6.14: Vertically align dynamic height elements Section 6.15: Horizontal and Vertical centering using table layout Chapter 7: The Box Model Section 7.1: What is the Box Model? Section 7.2: box-sizing Chapter 8: Margins Section 8.1: Margin Collapsing Section 8.2: Apply Margin on a Given Side Section 8.3: Margin property simplification Section 8.4: Horizontally center elements on a page using margin Section 8.5: Example 1: Section 8.6: Negative margins Chapter 9: Padding Section 9.1: Padding Shorthand Section 9.2: Padding on a given side Chapter 10: Border Section 10.1: border-radius Section 10.2: border-style Section 10.3: Multiple Borders Section 10.4: border (shorthands) Section 10.5: border-collapse Section 10.6: border-image Section 10.7: Creating a multi-colored border using border-image Section 10.8: border-[left|right|top|bottom] Chapter 11: Outlines Section 11.1: Overview Section 11.2: outline-style Chapter 12: Overflow Section 12.1: overflow-wrap Section 12.2: overflow-x and overflow-y Section 12.3: overflow: scroll Section 12.4: overflow: visible Section 12.5: Block Formatting Context Created with Overflow Chapter 13: Media Queries Section 13.1: Terminology and Structure Section 13.2: Basic Example Section 13.3: mediatype Section 13.4: Media Queries for Retina and Non Retina Screens Section 13.5: Width vs Viewport Section 13.6: Using Media Queries to Target Dierent Screen Sizes Section 13.7: Use on link tag Section 13.8: Media queries and IE8 Chapter 14: Floats Section 14.1: Float an Image Within Text Section 14.2: clear property Section 14.3: Clearfix Section 14.4: In-line DIV using float Section 14.5: Use of overflow property to clear floats Section 14.6: Simple Two Fixed-Width Column Layout Section 14.7: Simple Three Fixed-Width Column Layout Section 14.8: Two-Column Lazy/Greedy Layout Chapter 15: Typography Section 15.1: The Font Shorthand Section 15.2: Quotes Section 15.3: Font Size Section 15.4: Text Direction Section 15.5: Font Stacks Section 15.6: Text Overflow Section 15.7: Text Shadow Section 15.8: Text Transform Section 15.9: Letter Spacing Section 15.10: Text Indent Section 15.11: Text Decoration Section 15.12: Word Spacing Section 15.13: Font Variant Chapter 16: Flexible Box Layout (Flexbox) Section 16.1: Dynamic Vertical and Horizontal Centering (align-items, justify-content) Section 16.2: Sticky Variable-Height Footer Section 16.3: Optimally fit elements to their container Section 16.4: Holy Grail Layout using Flexbox Section 16.5: Perfectly aligned buttons inside cards with flexbox Section 16.6: Same height on nested containers Chapter 17: Cascading and Specificity Section 17.1: Calculating Selector Specificity Section 17.2: The !important declaration Section 17.3: Cascading Section 17.4: More complex specificity example Chapter 18: Colors Section 18.1: currentColor Section 18.2: Color Keywords Section 18.3: Hexadecimal Value Section 18.4: rgb() Notation Section 18.5: rgba() Notation Section 18.6: hsl() Notation Section 18.7: hsla() Notation Chapter 19: Opacity Section 19.1: Opacity Property Section 19.2: IE Compatibility for `opacity` Chapter 20: Length Units Section 20.1: Creating scalable elements using rems and ems Section 20.2: Font size with rem Section 20.3: vmin and vmax Section 20.4: vh and vw Section 20.5: using percent % Chapter 21: Pseudo-Elements Section 21.1: Pseudo-Elements Section 21.2: Pseudo-Elements in Lists Chapter 22: Positioning Section 22.1: Overlapping Elements with z-index Section 22.2: Absolute Position Section 22.3: Fixed position Section 22.4: Relative Position Section 22.5: Static positioning Chapter 23: Layout Control Section 23.1: The display property Section 23.2: To get old table structure using div Chapter 24: Grid Section 24.1: Basic Example Chapter 25: Tables Section 25.1: table-layout Section 25.2: empty-cells Section 25.3: border-collapse Section 25.4: border-spacing Section 25.5: caption-side Chapter 26: Transitions Section 26.1: Transition shorthand Section 26.2: cubic-bezier Section 26.3: Transition (longhand) Chapter 27: Animations Section 27.1: Animations with keyframes Section 27.2: Animations with the transition property Section 27.3: Syntax Examples Section 27.4: Increasing Animation Performance Using the `will-change` Attribute Chapter 28: 2D Transforms Section 28.1: Rotate Section 28.2: Scale Section 28.3: Skew Section 28.4: Multiple transforms Section 28.5: Translate Section 28.6: Transform Origin Chapter 29: 3D Transforms Section 29.1: Compass pointer or needle shape using 3D transforms Section 29.2: 3D text eect with shadow Section 29.3: backface-visibility Section 29.4: 3D cube Chapter 30: Filter Property Section 30.1: Blur Section 30.2: Drop Shadow (use box-shadow instead if possible) Section 30.3: Hue Rotate Section 30.4: Multiple Filter Values Section 30.5: Invert Color Chapter 31: Cursor Styling Section 31.1: Changing cursor type Section 31.2: pointer-events Section 31.3: caret-color Chapter 32: box-shadow Section 32.1: bottom-only drop shadow using a pseudo-element Section 32.2: drop shadow Section 32.3: inner drop shadow Section 32.4: multiple shadows Chapter 33: Shapes for Floats Section 33.1: Shape Outside with Basic Shape – circle() Section 33.2: Shape margin Chapter 34: List Styles Section 34.1: Bullet Position Section 34.2: Removing Bullets / Numbers Section 34.3: Type of Bullet or Numbering Chapter 35: Counters Section 35.1: Applying roman numerals styling to the counter output Section 35.2: Number each item using CSS Counter Section 35.3: Implementing multi-level numbering using CSS counters Chapter 36: Functions Section 36.1: calc() function Section 36.2: attr() function Section 36.3: var() function Section 36.4: radial-gradient() function Section 36.5: linear-gradient() function Chapter 37: Custom Properties (Variables) Section 37.1: Variable Color Section 37.2: Variable Dimensions Section 37.3: Variable Cascading Section 37.4: Valid/Invalids Section 37.5: With media queries Chapter 38: Single Element Shapes Section 38.1: Trapezoid Section 38.2: Triangles Section 38.3: Circles and Ellipses Section 38.4: Bursts Section 38.5: Square Section 38.6: Cube Section 38.7: Pyramid Chapter 39: Columns Section 39.1: Simple Example (column-count) Section 39.2: Column Width Chapter 40: Multiple columns Section 40.1: Create Multiple Columns Section 40.2: Basic example Chapter 41: Inline-Block Layout Section 41.1: Justified navigation bar Chapter 42: Inheritance Section 42.1: Automatic inheritance Section 42.2: Enforced inheritance Chapter 43: CSS Image Sprites Section 43.1: A Basic Implementation Chapter 44: Clipping and Masking Section 44.1: Clipping and Masking: Overview and Dierence Section 44.2: Simple mask that fades an image from solid to transparent Section 44.3: Clipping (Circle) Section 44.4: Clipping (Polygon) Section 44.5: Using masks to cut a hole in the middle of an image Section 44.6: Using masks to create images with irregular shapes Chapter 45: Fragmentation Section 45.1: Media print page-break Chapter 46: CSS Object Model (CSSOM) Section 46.1: Adding a background-image rule via the CSSOM Section 46.2: Introduction Chapter 47: Feature Queries Section 47.1: Basic @supports usage Section 47.2: Chaining feature detections Chapter 48: Stacking Context Section 48.1: Stacking Context Chapter 49: Block Formatting Contexts Section 49.1: Using the overflow property with a value dierent to visible Chapter 50: Vertical Centering Section 50.1: Centering with display: table Section 50.2: Centering with Flexbox Section 50.3: Centering with Transform Section 50.4: Centering Text with Line Height Section 50.5: Centering with Position: absolute Section 50.6: Centering with pseudo element Chapter 51: Object Fit and Placement Section 51.1: object-fit Chapter 52: CSS design patterns Section 52.1: BEM Chapter 53: Browser Support & Prefixes Section 53.1: Transitions Section 53.2: Transform Chapter 54: Normalizing Browser Styles Section 54.1: normalize.css Section 54.2: Approaches and Examples Chapter 55: Internet Explorer Hacks Section 55.1: Adding Inline Block support to IE6 and IE7 Section 55.2: High Contrast Mode in Internet Explorer 10 and greater Section 55.3: Internet Explorer 6 & Internet Explorer 7 only Section 55.4: Internet Explorer 8 only Chapter 56: Performance Section 56.1: Use transform and opacity to avoid trigger layout Credits You may also like