CSS - riptutorial.com

1 CSS#cssTable of ContentsAbout1 Chapter 1: Getting started with CSS2 Remarks2 Versions2 Examples2 External Stylesheet2 Example2 Internal Styles4 Inline Styles4 CSS @import rule (one of CSS at-rule)4 How to use @import5 Changing CSS with JavaScript5 Pure JavaScript5jQuery5 See also6 Styling Lists with CSS6 Chapter 2: 2D Transforms8 Syntax8 Parameters8 Remarks92D Coordiante system9 Browser support and prefixes10 Example of prefixed transform:10 Examples10 Rotate10 Scale10 Translate11 Skew11 Multiple transforms12 Transform Origin13 Chapter 3: 3D Transforms15 Remarks15 Coordinate system15 Examples153D cube16backface-visibility17 Compass pointer or needle shape using 3D transforms18 CSS18 HTML183D text effect with shadow19 Chapter 4: Animations22 Syntax22 Parameters22 Examples22 Animations with the transition property22 Example22 Cross-Browser Compatibility23 Increasing Animation Performance Using the `will-change` Attribute24 Animations with keyframes24 Basic Example24 Cross-browser compatibility26 Syntax Examples26 Chapter 5.

2 Backgrounds27 Introduction27 Syntax27 Remarks27 Examples27 Background Color27 Color names28 Hex color codes28 RGB / RGBa28 HSL / HSLa29 Interaction with background-image29 Background Image30 Background Gradients31linear-gradient()31radial-gra dient()31 Repeating gradients32 Background Shorthand33 Syntax33 Examples33 Background Position34 Longhand Background Position Properties35 Background Attachment35 Examples35background-attachment: scroll35background-attachment: fixed36background-attachment: local36 Background Repeat36 Background Color with Opacity37 Multiple Background Image37 The background-origin property38 Background Clip40 Background Size41 General overview41 Keeping the aspect ratio43 Eggsplanation for contain and cover43contain44cover44 Demonstration with actual code45background-blend-mode Property46 Chapter 6: Block Formatting Contexts47 Remarks47 Examples47 Using the overflow property with a value different to visible47 Chapter 7: Border49 Syntax49 Remarks49 Examples51border-radius51border-style52b order (shorthands)53border-image53border-[left |right|top|bottom]54border-collapse54 Multiple Borders54 Creating a multi-colored border using border-image55 CSS55 HTML56 Chapter 8.

3 Box-shadow58 Syntax58 Parameters58 Remarks58 Examples58drop shadow58inner drop shadow59bottom-only drop shadow using a pseudo-element59multiple shadows60 Chapter 9: Browser Support & Prefixes62 Parameters62 Remarks62 Examples62 Transitions62 Transform63 Chapter 10: Cascading and Specificity64 Remarks64 Examples64 Cascading64 CSS Loading order64 How are conflicts resolved?64 Example 1 - Specificity rules64 Example 2 - Cascade rules with identical selectors65 Example 3 - Cascade rules after Specificity rules65A final note65 The !important declaration66 Calculating Selector Specificity66 Example 1: Specificity of various selector sequences67 Example 2: How specificity is used by the browser67 Example 3: How to manipulate specificity68!

4 Important and inline style declarations69A final note69 More complex specificity example69 Chapter 11: Centering71 Examples71 Using CSS transform71 CROSS BROWSER COMPATIBILITY71 MORE INFORMATION72 Using Flexbox72 Using position: absolute73 Ghost element technique (Micha Czernow's hack)74 Using text-align74 Centering in relation to another item75 Vertical align anything with 3 lines of code76 Vertically align an image inside div76 Horizontal and Vertical centering using table layout77 Using calc()77 Vertically align dynamic height elements78 Using line-height79 Centering vertically and horizontally without worrying about height or width79 The outer container79 The inner container79 The content box79 Demo80 Centering with fixed size80 Horizontal centering with only fixed width81 Vertical centering with fixed height81 Using margin: 0 auto.

5 82 Chapter 12: Clipping and Masking84 Syntax84 Parameters84 Remarks85 Masks:85 Clip-path:85 Examples86 Clipping (Polygon)86 CSS:86 HTML:86 Clipping (Circle)87 CSS:87 HTML87 Clipping and Masking: Overview and Difference88 Clipping88 Masking88 Simple mask that fades an image from solid to transparent89 CSS89 HTML89 Using masks to cut a hole in the middle of an image90 CSS90 HTML90 Using masks to create images with irregular shapes91 CSS91 HTML91 Chapter 13: Colors93 Syntax93 Examples93 Color Keywords93 Color Keywords93 Hexadecimal Value100 Background100 Syntax101rgb() Notation101 Syntax102hsl() Notation102 Syntax102 Notes102currentColor103 Use in same element103 Inherited from parent element103rgba() Notation104 Syntax104hsla() Notation105 Syntax105 Chapter 14: Columns106 Syntax106 Examples106 Simple Example (column-count)106 Column Width107 Chapter 15: Comments109 Syntax109 Remarks109 Examples109 Single Line109 Multiple Line109 Chapter 16.

6 Counters110 Syntax110 Parameters110 Remarks110 Examples110 Applying roman numerals styling to the counter output111 CSS111 HTML111 Number each item using CSS Counter111 CSS111 HTML112 Implementing multi-level numbering using CSS counters112 CSS112 HTML112 Chapter 17: CSS design patterns114 Introduction114 Remarks114 Examples114 BEM114 Code example115 Chapter 18: CSS Image Sprites116 Syntax116 Remarks116 Examples116A Basic Implementation116 Chapter 19: CSS Object Model (CSSOM)118 Remarks118 Examples118 Introduction118 Adding a background-image rule via the CSSOM118 Chapter 20: Cursor Styling120 Syntax120 Examples120 Changing cursor type120pointer-events121caret-color121 Chapter 21: Custom Properties (Variables)122 Introduction122 Syntax122 Remarks122 BROWSER SUPPORT / COMPATIBILITY122 Examples122 Variable Color122 Variable Dimensions123 Variable Cascading123 Valid/Invalids124 With media queries125 Chapter 22: Feature Queries127 Syntax127 Parameters127 Remarks127 Examples127 Basic @supports usage127 Chaining feature detections127 Chapter 23: Filter Property129 Syntax129 Parameters129 Remarks130 Examples130 Drop Shadow (use box-shadow instead if possible)130 Multiple Filter Values130 Hue Rotate131 Invert Color132 Blur132 Chapter 24.

7 Flexible Box Layout (Flexbox)134 Introduction134 Syntax134 Remarks134 Vender Prefixes134 Resources134 Examples135 Sticky Variable-Height Footer135 Holy Grail Layout using Flexbox135 Perfectly aligned buttons inside cards with flexbox137 Dynamic Vertical and Horizontal Centering (align-items, justify-content)139 Simple Example (centering a single element)139 HTML139 CSS139 Reasoning139 Individual Property Examples140 Example: justify-content: center on a horizontal flexbox140 Example: justify-content: center on a vertical flexbox141 Example: align-content: center on a horizontal flexbox142 Example: align-content: center on a vertical flexbox143 Example: Combination for centering both on horizontal flexbox144 Example: Combination for centering both on vertical flexbox145 Same height on nested containers146 Optimally fit elements to their container147 Chapter 25: Floats149 Syntax149 Remarks149 Examples149 Float an Image Within Text149 Simple Two Fixed-Width Column Layout150 Simple Three Fixed-Width Column Layout151 Two-Column Lazy/Greedy Layout152clear property153 Clearfix154 Clearfix (with top margin collapsing of contained floats still occurring)154 Clearfix also preventing top margin collapsing of contained floats154 Clearfix with support of outdated browsers IE6 and IE7155In-line DIV using float155 Use of overflow property to clear floats157 Chapter 26.

8 Fragmentation158 Syntax158 Parameters158 Remarks158 Examples158 Media print page-break158 Chapter 27: Functions160 Syntax160 Remarks160 Examples160calc() function160attr() function161linear-gradient() function161radial-gradient() function161var() function161 Chapter 28: Grid163 Introduction163 Remarks163 Examples163 Basic Example163 Chapter 29: Inheritance165 Syntax165 Examples165 Automatic inheritance165 Enforced inheritance165 Chapter 30: Inline-Block Layout167 Examples167 Justified navigation bar167 HTML167 CSS167 Notes167 Chapter 31: Internet Explorer Hacks169 Remarks169 Examples169 High Contrast Mode in Internet Explorer 10 and greater169 Examples169 More Information:169 Internet Explorer 6 & Internet Explorer 7 only169 Internet Explorer 8 only170 Adding Inline Block support to IE6 and IE7170 Chapter 32: Layout Control171 Syntax171 Parameters171 Examples172 The display property172 Inline172 Block172 Inline Block172none174To get old table structure using div174 Chapter 33: Length Units176 Introduction176 Syntax176 Parameters176 Remarks177 Examples177 Font size with rem177 Creating scalable elements using rems and ems178vh and vw179vmin and vmax179using percent %179 Chapter 34: List Styles181 Syntax181 Parameters181 Remarks181 Examples181 Type of Bullet or Numbering181 Bullet Position182 Removing Bullets / Numbers182 Chapter 35.

9 Margins184 Syntax184 Parameters184 Remarks184 Examples184 Apply Margin on a Given Side184 Direction-Specific Properties184 Specifying Direction Using Shorthand Property185 Margin Collapsing186 Horizontally center elements on a page using margin188 Margin property simplification188 Negative margins189 Example 1:189 Chapter 36: Media Queries191 Syntax191 Parameters191 Remarks192 Examples193 Basic Example193 Use on link tag193mediatype193 Using Media Queries to Target Different Screen Sizes194 Width vs Viewport195 Media Queries for Retina and Non Retina Screens196 Terminology and Structure196 General Structure of a Media Query196A Media Query containing a Media Type196A Media Query containing a Media Type and a Media Feature197A Media Query containing a Media Feature (and an implicit Media Type of "all")197 Media queries and IE8197A Javascript based workaround197 The alternative198 Chapter 37: Multiple columns199 Introduction199 Remarks199 Examples199 Basic example199 Create Multiple Columns200 Chapter 38.

10 Normalizing Browser does it do201 Difference to and Examples202 Chapter 39: Object Fit and Placement204 Remarks204 Examples204object-fit204 Chapter 40: Opacity207 Syntax207 Remarks207 Examples207 Opacity Property207IE Compatibility for `opacity`207 Chapter 41: Outlines209 Syntax209 Parameters209 Remarks209 Examples210 Overview210outline-style210 Chapter 42: Overflow212 Syntax212 Parameters212 Remarks212 Examples212overflow: scroll212overflow-wrap213overflow: visible214 Block Formatting Context Created with Overflow215overflow-x and overflow-y216 Chapter 43: Padding218 Syntax218 Remarks218 Examples218 Padding on a given side218 Padding Shorthand219 Chapter 44: Performance221 Examples221 Use transform and opacity to avoid trigger layout221 DON'T221DO222 Chapter 45: Positioning223 Syntax223 Parameters223 Remarks223 Examples223 Fixed position223 Overlapping Elements with z-index224 Example224 HTML224 CSS224 Syntax225 Remarks225 Relative Position226 Absolute Position226 Static positioning226 Chapter 46: Pseudo-Elem