CSS Notes For Professionals. 200+ pages of professional hints and tricks (GoalKicker.com) (Z-Library)

📄 File Format: PDF

💾 File Size: 3.3 MB

📖 Read Online ⬇️ Download

Registered users can read the full content for free

Register as a Gaohf Library member to read the complete e-book online for free and enjoy a better reading experience.

📄 Page 1

CSS Notes for ProfessionalsCSS Notes for Professionals GoalKicker.com Free Programming Books Disclaimer This is an unocial free book created for educational purposes and is not aliated with ocial CSS group(s) or company(s). All trademarks and registered trademarks are the property of their respective owners 200+ pages of professional hints and tricks

📄 Page 2

Contents About 1 ................................................................................................................................................................................... Chapter 1: Getting started with CSS 2 .................................................................................................................... Section 1.1: External Stylesheet 2 ..................................................................................................................................... Section 1.2: Internal Styles 3 ............................................................................................................................................ Section 1.3: CSS @import rule (one of CSS at-rule) 4 ................................................................................................... Section 1.4: Inline Styles 4 ................................................................................................................................................. Section 1.5: Changing CSS with JavaScript 4 ................................................................................................................. Section 1.6: Styling Lists with CSS 5 ................................................................................................................................. Chapter 2: Structure and Formatting of a CSS Rule 7 .................................................................................. Section 2.1: Property Lists 7 ............................................................................................................................................. Section 2.2: Multiple Selectors 7 ...................................................................................................................................... Section 2.3: Rules, Selectors, and Declaration Blocks 7 ............................................................................................... Chapter 3: Comments 8 ................................................................................................................................................. Section 3.1: Single Line 8 ................................................................................................................................................... Section 3.2: Multiple Line 8 ............................................................................................................................................... Chapter 4: Selectors 9 ................................................................................................................................................... Section 4.1: Basic selectors 9 ........................................................................................................................................... Section 4.2: Attribute Selectors 9 .................................................................................................................................... Section 4.3: Combinators 12 ............................................................................................................................................ Section 4.4: Pseudo-classes 13 ....................................................................................................................................... Section 4.5: Child Pseudo Class 15 ................................................................................................................................. Section 4.6: Class Name Selectors 16 ............................................................................................................................ Section 4.7: Select element using its ID without the high specificity of the ID selector 17 ....................................... Section 4.8: The :last-of-type selector 17 ...................................................................................................................... Section 4.9: CSS3 :in-range selector example 17 .......................................................................................................... Section 4.10: A. The :not pseudo-class example & B. :focus-within CSS pseudo-class 18 ......................................... Section 4.11: Global boolean with checkbox:checked and ~ (general sibling combinator) 19 .................................. Section 4.12: ID selectors 20 ............................................................................................................................................ Section 4.13: How to style a Range input 21 .................................................................................................................. Section 4.14: The :only-child pseudo-class selector example 21 ................................................................................. Chapter 5: Backgrounds 22 ......................................................................................................................................... Section 5.1: Background Color 22 ................................................................................................................................... Section 5.2: Background Gradients 24 ........................................................................................................................... Section 5.3: Background Image 25 ................................................................................................................................. Section 5.4: Background Shorthand 26 .......................................................................................................................... Section 5.5: Background Size 27 ..................................................................................................................................... Section 5.6: Background Position 31 .............................................................................................................................. Section 5.7: The background-origin property 32 .......................................................................................................... Section 5.8: Multiple Background Image 34 .................................................................................................................. Section 5.9: Background Attachment 35 ....................................................................................................................... Section 5.10: Background Clip 36 .................................................................................................................................... Section 5.11: Background Repeat 37 ............................................................................................................................... Section 5.12: background-blend-mode Property 37 ..................................................................................................... Section 5.13: Background Color with Opacity 38 ........................................................................................................... Chapter 6: Centering 39 ................................................................................................................................................. Section 6.1: Using Flexbox 39 ........................................................................................................................................... Section 6.2: Using CSS transform 40 ..............................................................................................................................

📄 Page 3

Section 6.3: Using margin: 0 auto; 41 ............................................................................................................................. Section 6.4: Using text-align 42 ....................................................................................................................................... Section 6.5: Using position: absolute 42 ......................................................................................................................... Section 6.6: Using calc() 43 ............................................................................................................................................. Section 6.7: Using line-height 43 ..................................................................................................................................... Section 6.8: Vertical align anything with 3 lines of code 44 ......................................................................................... Section 6.9: Centering in relation to another item 44 ................................................................................................... Section 6.10: Ghost element technique (Michał Czernow's hack) 45 ........................................................................... Section 6.11: Centering vertically and horizontally without worrying about height or width 46 ............................... Section 6.12: Vertically align an image inside div 47 ..................................................................................................... Section 6.13: Centering with fixed size 47 ....................................................................................................................... Section 6.14: Vertically align dynamic height elements 49 .......................................................................................... Section 6.15: Horizontal and Vertical centering using table layout 49 ........................................................................ Chapter 7: The Box Model 51 ...................................................................................................................................... Section 7.1: What is the Box Model? 51 .......................................................................................................................... Section 7.2: box-sizing 52 ................................................................................................................................................. Chapter 8: Margins 55 .................................................................................................................................................... Section 8.1: Margin Collapsing 55 .................................................................................................................................... Section 8.2: Apply Margin on a Given Side 57 ............................................................................................................... Section 8.3: Margin property simplification 58 .............................................................................................................. Section 8.4: Horizontally center elements on a page using margin 58 ...................................................................... Section 8.5: Example 1: 59 ................................................................................................................................................ Section 8.6: Negative margins 59 ................................................................................................................................... Chapter 9: Padding 61 .................................................................................................................................................... Section 9.1: Padding Shorthand 61 ................................................................................................................................. Section 9.2: Padding on a given side 62 ........................................................................................................................ Chapter 10: Border 63 ..................................................................................................................................................... Section 10.1: border-radius 63 ......................................................................................................................................... Section 10.2: border-style 64 ........................................................................................................................................... Section 10.3: Multiple Borders 65 .................................................................................................................................... Section 10.4: border (shorthands) 66 ............................................................................................................................. Section 10.5: border-collapse 66 ..................................................................................................................................... Section 10.6: border-image 67 ........................................................................................................................................ Section 10.7: Creating a multi-colored border using border-image 67 ...................................................................... Section 10.8: border-[left|right|top|bottom] 68 .............................................................................................................. Chapter 11: Outlines 69 ................................................................................................................................................... Section 11.1: Overview 69 .................................................................................................................................................. Section 11.2: outline-style 69 ............................................................................................................................................ Chapter 12: Overflow 71 ................................................................................................................................................ Section 12.1: overflow-wrap 71 ........................................................................................................................................ Section 12.2: overflow-x and overflow-y 72 ................................................................................................................... Section 12.3: overflow: scroll 73 ....................................................................................................................................... Section 12.4: overflow: visible 73 ..................................................................................................................................... Section 12.5: Block Formatting Context Created with Overflow 74 ............................................................................. Chapter 13: Media Queries 76 ...................................................................................................................................... Section 13.1: Terminology and Structure 76 ................................................................................................................... Section 13.2: Basic Example 77 ........................................................................................................................................ Section 13.3: mediatype 77 .............................................................................................................................................. Section 13.4: Media Queries for Retina and Non Retina Screens 78 ...........................................................................

📄 Page 4

Section 13.5: Width vs Viewport 79 ................................................................................................................................. Section 13.6: Using Media Queries to Target Dierent Screen Sizes 79 ..................................................................... Section 13.7: Use on link tag 80 ....................................................................................................................................... Section 13.8: Media queries and IE8 80 ........................................................................................................................... Chapter 14: Floats 81 ...................................................................................................................................................... Section 14.1: Float an Image Within Text 81 ................................................................................................................... Section 14.2: clear property 82 ........................................................................................................................................ Section 14.3: Clearfix 83 .................................................................................................................................................... Section 14.4: In-line DIV using float 84 ............................................................................................................................ Section 14.5: Use of overflow property to clear floats 86 ............................................................................................ Section 14.6: Simple Two Fixed-Width Column Layout 86 ............................................................................................ Section 14.7: Simple Three Fixed-Width Column Layout 87 ......................................................................................... Section 14.8: Two-Column Lazy/Greedy Layout 88 ...................................................................................................... Chapter 15: Typography 89 ......................................................................................................................................... Section 15.1: The Font Shorthand 89 ............................................................................................................................... Section 15.2: Quotes 90 .................................................................................................................................................... Section 15.3: Font Size 90 ................................................................................................................................................. Section 15.4: Text Direction 90 ......................................................................................................................................... Section 15.5: Font Stacks 91 ............................................................................................................................................ Section 15.6: Text Overflow 91 ......................................................................................................................................... Section 15.7: Text Shadow 91 .......................................................................................................................................... Section 15.8: Text Transform 92 ...................................................................................................................................... Section 15.9: Letter Spacing 92 ........................................................................................................................................ Section 15.10: Text Indent 93 ............................................................................................................................................ Section 15.11: Text Decoration 93 ..................................................................................................................................... Section 15.12: Word Spacing 94 ....................................................................................................................................... Section 15.13: Font Variant 94 .......................................................................................................................................... Chapter 16: Flexible Box Layout (Flexbox) 96 ..................................................................................................... Section 16.1: Dynamic Vertical and Horizontal Centering (align-items, justify-content) 96 ...................................... Section 16.2: Sticky Variable-Height Footer 102 ........................................................................................................... Section 16.3: Optimally fit elements to their container 103 .......................................................................................... Section 16.4: Holy Grail Layout using Flexbox 104 ........................................................................................................ Section 16.5: Perfectly aligned buttons inside cards with flexbox 105 ........................................................................ Section 16.6: Same height on nested containers 107 .................................................................................................... Chapter 17: Cascading and Specificity 109 .......................................................................................................... Section 17.1: Calculating Selector Specificity 109 ........................................................................................................... Section 17.2: The !important declaration 111 ................................................................................................................. Section 17.3: Cascading 112 ............................................................................................................................................. Section 17.4: More complex specificity example 113 .................................................................................................... Chapter 18: Colors 115 .................................................................................................................................................... Section 18.1: currentColor 115 .......................................................................................................................................... Section 18.2: Color Keywords 116 ................................................................................................................................... Section 18.3: Hexadecimal Value 122 ............................................................................................................................. Section 18.4: rgb() Notation 122 ...................................................................................................................................... Section 18.5: rgba() Notation 123 ................................................................................................................................... Section 18.6: hsl() Notation 123 ....................................................................................................................................... Section 18.7: hsla() Notation 124 ..................................................................................................................................... Chapter 19: Opacity 126 ................................................................................................................................................. Section 19.1: Opacity Property 126 .................................................................................................................................. Section 19.2: IE Compatibility for `opacity` 126 ..............................................................................................................

📄 Page 5

Chapter 20: Length Units 127 ...................................................................................................................................... Section 20.1: Creating scalable elements using rems and ems 127 ........................................................................... Section 20.2: Font size with rem 128 .............................................................................................................................. Section 20.3: vmin and vmax 129 ................................................................................................................................... Section 20.4: vh and vw 129 ............................................................................................................................................ Section 20.5: using percent % 129 .................................................................................................................................. Chapter 21: Pseudo-Elements 131 ............................................................................................................................. Section 21.1: Pseudo-Elements 131 ................................................................................................................................. Section 21.2: Pseudo-Elements in Lists 131 .................................................................................................................... Chapter 22: Positioning 133 .......................................................................................................................................... Section 22.1: Overlapping Elements with z-index 133 ................................................................................................... Section 22.2: Absolute Position 134 ................................................................................................................................ Section 22.3: Fixed position 135 ...................................................................................................................................... Section 22.4: Relative Position 135 ................................................................................................................................. Section 22.5: Static positioning 135 ................................................................................................................................ Chapter 23: Layout Control 137 ................................................................................................................................. Section 23.1: The display property 137 ........................................................................................................................... Section 23.2: To get old table structure using div 139 ................................................................................................. Chapter 24: Grid 141 ........................................................................................................................................................ Section 24.1: Basic Example 141 ..................................................................................................................................... Chapter 25: Tables 143 ................................................................................................................................................... Section 25.1: table-layout 143 ......................................................................................................................................... Section 25.2: empty-cells 143 ......................................................................................................................................... Section 25.3: border-collapse 143 .................................................................................................................................. Section 25.4: border-spacing 144 ................................................................................................................................... Section 25.5: caption-side 144 ........................................................................................................................................ Chapter 26: Transitions 145 ......................................................................................................................................... Section 26.1: Transition shorthand 145 ........................................................................................................................... Section 26.2: cubic-bezier 145 ......................................................................................................................................... Section 26.3: Transition (longhand) 147 ........................................................................................................................ Chapter 27: Animations 148 ......................................................................................................................................... Section 27.1: Animations with keyframes 148 ................................................................................................................ Section 27.2: Animations with the transition property 149 .......................................................................................... Section 27.3: Syntax Examples 150 ................................................................................................................................ Section 27.4: Increasing Animation Performance Using the `will-change` Attribute 151 .......................................... Chapter 28: 2D Transforms 152 ................................................................................................................................. Section 28.1: Rotate 152 ................................................................................................................................................... Section 28.2: Scale 153 .................................................................................................................................................... Section 28.3: Skew 153 ..................................................................................................................................................... Section 28.4: Multiple transforms 153 ............................................................................................................................ Section 28.5: Translate 154 ............................................................................................................................................. Section 28.6: Transform Origin 155 ................................................................................................................................ Chapter 29: 3D Transforms 156 ................................................................................................................................. Section 29.1: Compass pointer or needle shape using 3D transforms 156 ................................................................ Section 29.2: 3D text eect with shadow 157 ................................................................................................................ Section 29.3: backface-visibility 158 ............................................................................................................................... Section 29.4: 3D cube 159 ............................................................................................................................................... Chapter 30: Filter Property 161 ................................................................................................................................. Section 30.1: Blur 161 ........................................................................................................................................................

📄 Page 6

Section 30.2: Drop Shadow (use box-shadow instead if possible) 161 ...................................................................... Section 30.3: Hue Rotate 162 .......................................................................................................................................... Section 30.4: Multiple Filter Values 162 .......................................................................................................................... Section 30.5: Invert Color 163 ......................................................................................................................................... Chapter 31: Cursor Styling 164 .................................................................................................................................... Section 31.1: Changing cursor type 164 .......................................................................................................................... Section 31.2: pointer-events 164 ..................................................................................................................................... Section 31.3: caret-color 165 ............................................................................................................................................ Chapter 32: box-shadow 166 ....................................................................................................................................... Section 32.1: bottom-only drop shadow using a pseudo-element 166 ...................................................................... Section 32.2: drop shadow 167 ....................................................................................................................................... Section 32.3: inner drop shadow 167 ............................................................................................................................. Section 32.4: multiple shadows 168 ................................................................................................................................ Chapter 33: Shapes for Floats 170 ........................................................................................................................... Section 33.1: Shape Outside with Basic Shape – circle() 170 ........................................................................................ Section 33.2: Shape margin 171 ...................................................................................................................................... Chapter 34: List Styles 173 ........................................................................................................................................... Section 34.1: Bullet Position 173 ...................................................................................................................................... Section 34.2: Removing Bullets / Numbers 173 ............................................................................................................ Section 34.3: Type of Bullet or Numbering 173 ............................................................................................................. Chapter 35: Counters 175 .............................................................................................................................................. Section 35.1: Applying roman numerals styling to the counter output 175 ............................................................... Section 35.2: Number each item using CSS Counter 175 ............................................................................................. Section 35.3: Implementing multi-level numbering using CSS counters 176 ............................................................. Chapter 36: Functions 178 ............................................................................................................................................. Section 36.1: calc() function 178 ...................................................................................................................................... Section 36.2: attr() function 178 ...................................................................................................................................... Section 36.3: var() function 178 ...................................................................................................................................... Section 36.4: radial-gradient() function 179 .................................................................................................................. Section 36.5: linear-gradient() function 179 .................................................................................................................. Chapter 37: Custom Properties (Variables) 180 ................................................................................................ Section 37.1: Variable Color 180 ...................................................................................................................................... Section 37.2: Variable Dimensions 180 .......................................................................................................................... Section 37.3: Variable Cascading 180 ............................................................................................................................ Section 37.4: Valid/Invalids 181 ...................................................................................................................................... Section 37.5: With media queries 182 ............................................................................................................................. Chapter 38: Single Element Shapes 184 ................................................................................................................ Section 38.1: Trapezoid 184 ............................................................................................................................................. Section 38.2: Triangles 184 .............................................................................................................................................. Section 38.3: Circles and Ellipses 187 ............................................................................................................................. Section 38.4: Bursts 188 ................................................................................................................................................... Section 38.5: Square 190 ................................................................................................................................................. Section 38.6: Cube 190 ..................................................................................................................................................... Section 38.7: Pyramid 191 ............................................................................................................................................... Chapter 39: Columns 193 ............................................................................................................................................... Section 39.1: Simple Example (column-count) 193 ....................................................................................................... Section 39.2: Column Width 193 ..................................................................................................................................... Chapter 40: Multiple columns 195 ............................................................................................................................ Section 40.1: Create Multiple Columns 195 ....................................................................................................................

📄 Page 7

Section 40.2: Basic example 195 .................................................................................................................................... Chapter 41: Inline-Block Layout 196 ........................................................................................................................ Section 41.1: Justified navigation bar 196 ...................................................................................................................... Chapter 42: Inheritance 197 ........................................................................................................................................ Section 42.1: Automatic inheritance 197 ........................................................................................................................ Section 42.2: Enforced inheritance 197 .......................................................................................................................... Chapter 43: CSS Image Sprites 198 ......................................................................................................................... Section 43.1: A Basic Implementation 198 ...................................................................................................................... Chapter 44: Clipping and Masking 199 .................................................................................................................. Section 44.1: Clipping and Masking: Overview and Dierence 199 ............................................................................. Section 44.2: Simple mask that fades an image from solid to transparent 201 ....................................................... Section 44.3: Clipping (Circle) 201 .................................................................................................................................. Section 44.4: Clipping (Polygon) 202 .............................................................................................................................. Section 44.5: Using masks to cut a hole in the middle of an image 203 .................................................................... Section 44.6: Using masks to create images with irregular shapes 204 .................................................................... Chapter 45: Fragmentation 206 ................................................................................................................................ Section 45.1: Media print page-break 206 ..................................................................................................................... Chapter 46: CSS Object Model (CSSOM) 207 ....................................................................................................... Section 46.1: Adding a background-image rule via the CSSOM 207 ........................................................................... Section 46.2: Introduction 207 ......................................................................................................................................... Chapter 47: Feature Queries 208 .............................................................................................................................. Section 47.1: Basic @supports usage 208 ...................................................................................................................... Section 47.2: Chaining feature detections 208 .............................................................................................................. Chapter 48: Stacking Context 209 ........................................................................................................................... Section 48.1: Stacking Context 209 ................................................................................................................................. Chapter 49: Block Formatting Contexts 212 ....................................................................................................... Section 49.1: Using the overflow property with a value dierent to visible 212 ........................................................ Chapter 50: Vertical Centering 213 .......................................................................................................................... Section 50.1: Centering with display: table 213 .............................................................................................................. Section 50.2: Centering with Flexbox 213 ...................................................................................................................... Section 50.3: Centering with Transform 214 ................................................................................................................. Section 50.4: Centering Text with Line Height 214 ........................................................................................................ Section 50.5: Centering with Position: absolute 214 ..................................................................................................... Section 50.6: Centering with pseudo element 215 ........................................................................................................ Chapter 51: Object Fit and Placement 217 ........................................................................................................... Section 51.1: object-fit 217 ................................................................................................................................................ Chapter 52: CSS design patterns 220 ..................................................................................................................... Section 52.1: BEM 220 ....................................................................................................................................................... Chapter 53: Browser Support & Prefixes 222 ...................................................................................................... Section 53.1: Transitions 222 ............................................................................................................................................ Section 53.2: Transform 222 ........................................................................................................................................... Chapter 54: Normalizing Browser Styles 223 ..................................................................................................... Section 54.1: normalize.css 223 ....................................................................................................................................... Section 54.2: Approaches and Examples 223 ............................................................................................................... Chapter 55: Internet Explorer Hacks 226 .............................................................................................................. Section 55.1: Adding Inline Block support to IE6 and IE7 226 ....................................................................................... Section 55.2: High Contrast Mode in Internet Explorer 10 and greater 226 ............................................................... Section 55.3: Internet Explorer 6 & Internet Explorer 7 only 227 .................................................................................

📄 Page 8

Section 55.4: Internet Explorer 8 only 227 ..................................................................................................................... Chapter 56: Performance 228 ..................................................................................................................................... Section 56.1: Use transform and opacity to avoid trigger layout 228 ........................................................................ Credits 231 ............................................................................................................................................................................ You may also like 236 ......................................................................................................................................................

📄 Page 9

GoalKicker.com – CSS Notes for Professionals 1 About Please feel free to share this PDF with anyone for free, latest version of this book can be downloaded from: https://goalkicker.com/CSSBook This CSS Notes for Professionals book is compiled from Stack Overflow Documentation, the content is written by the beautiful people at Stack Overflow. Text content is released under Creative Commons BY-SA, see credits at the end of this book whom contributed to the various chapters. Images may be copyright of their respective owners unless otherwise specified This is an unofficial free book created for educational purposes and is not affiliated with official CSS group(s) or company(s) nor Stack Overflow. All trademarks and registered trademarks are the property of their respective company owners The information presented in this book is not guaranteed to be correct nor accurate, use at your own risk Please send feedback and corrections to web@petercv.com

📄 Page 10

GoalKicker.com – CSS Notes for Professionals 2 Chapter 1: Getting started with CSS Version Release Date 1 1996-12-17 2 1998-05-12 3 2015-10-13 Section 1.1: External Stylesheet An external CSS stylesheet can be applied to any number of HTML documents by placing a <link> element in each HTML document. The attribute rel of the <link> tag has to be set to "stylesheet", and the href attribute to the relative or absolute path to the stylesheet. While using relative URL paths is generally considered good practice, absolute paths can be used, too. In HTML5 the type attribute can be omitted. It is recommended that the <link> tag be placed in the HTML file's <head> tag so that the styles are loaded before the elements they style. Otherwise, users will see a flash of unstyled content. Example hello-world.html <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Hello world!</h1> <p>I ♥ CSS</p> </body> </html> style.css h1 { color: green; text-decoration: underline; } p { font-size: 25px; font-family: 'Trebuchet MS', sans-serif; } Make sure you include the correct path to your CSS file in the href. If the CSS file is in the same folder as your HTML file then no path is required (like the example above) but if it's saved in a folder, then specify it like this href="foldername/style.css". <link rel="stylesheet" type="text/css" href="foldername/style.css"> External stylesheets are considered the best way to handle your CSS. There's a very simple reason for this: when you're managing a site of, say, 100 pages, all controlled by a single stylesheet, and you want to change your link

📄 Page 11

GoalKicker.com – CSS Notes for Professionals 3 colors from blue to green, it's a lot easier to make the change in your CSS file and let the changes "cascade" throughout all 100 pages than it is to go into 100 separate pages and make the same change 100 times. Again, if you want to completely change the look of your website, you only need to update this one file. You can load as many CSS files in your HTML page as needed. <link rel="stylesheet" type="text/css" href="main.css"> <link rel="stylesheet" type="text/css" href="override.css"> CSS rules are applied with some basic rules, and order does matter. For example, if you have a main.css file with some code in it: p.green { color: #00FF00; } All your paragraphs with the 'green' class will be written in light green, but you can override this with another .css file just by including it after main.css. You can have override.css with the following code follow main.css, for example: p.green { color: #006600; } Now all your paragraphs with the 'green' class will be written in darker green rather than light green. Other principles apply, such as the '!important' rule, specificity, and inheritance. When someone first visits your website, their browser downloads the HTML of the current page plus the linked CSS file. Then when they navigate to another page, their browser only needs to download the HTML of that page; the CSS file is cached, so it does not need to be downloaded again. Since browsers cache the external stylesheet, your pages load faster. Section 1.2: Internal Styles CSS enclosed in <style></style> tags within an HTML document functions like an external stylesheet, except that it lives in the HTML document it styles instead of in a separate file, and therefore can only be applied to the document in which it lives. Note that this element must be inside the <head> element for HTML validation (though it will work in all current browsers if placed in body). <head> <style> h1 { color: green; text-decoration: underline; } p { font-size: 25px; font-family: 'Trebuchet MS', sans-serif; } </style> </head> <body> <h1>Hello world!</h1> <p>I ♥ CSS</p> </body>

📄 Page 12

GoalKicker.com – CSS Notes for Professionals 4 Section 1.3: CSS @import rule (one of CSS at-rule) The @import CSS at-rule is used to import style rules from other style sheets. These rules must precede all other types of rules, except @charset rules; as it is not a nested statement, @import cannot be used inside conditional group at-rules. @import. How to use @import You can use @import rule in following ways: A. With internal style tag <style> @import url('/css/styles.css'); </style> B. With external stylesheet The following line imports a CSS file named additional-styles.css in the root directory into the CSS file in which it appears: @import '/additional-styles.css'; Importing external CSS is also possible. A common use case are font files. @import 'https://fonts.googleapis.com/css?family=Lato'; An optional second argument to @import rule is a list of media queries: @import '/print-styles.css' print; @import url('landscape.css') screen and (orientation:landscape); Section 1.4: Inline Styles Use inline styles to apply styling to a specific element. Note that this is not optimal. Placing style rules in a <style> tag or external CSS file is encouraged in order to maintain a distinction between content and presentation. Inline styles override any CSS in a <style> tag or external style sheet. While this can be useful in some circumstances, this fact more often than not reduces a project's maintainability. The styles in the following example apply directly to the elements to which they are attached. <h1 style="color: green; text-decoration: underline;">Hello world!</h1> <p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p> Inline styles are generally the safest way to ensure rendering compatibility across various email clients, programs and devices, but can be time-consuming to write and a bit challenging to manage. Section 1.5: Changing CSS with JavaScript Pure JavaScript It's possible to add, remove or change CSS property values with JavaScript through an element's style property.

📄 Page 13

GoalKicker.com – CSS Notes for Professionals 5 var el = document.getElementById("element"); el.style.opacity = 0.5; el.style.fontFamily = 'sans-serif'; Note that style properties are named in lower camel case style. In the example you see that the css property font- family becomes fontFamily in javascript. As an alternative to working directly on elements, you can create a <style> or <link> element in JavaScript and append it to the <body> or <head> of the HTML document. jQuery Modifying CSS properties with jQuery is even simpler. $('#element').css('margin', '5px'); If you need to change more than one style rule: $('#element').css({ margin: "5px", padding: "10px", color: "black" }); jQuery includes two ways to change css rules that have hyphens in them (i.e. font-size). You can put them in quotes or camel-case the style rule name. $('.example-class').css({ "background-color": "blue", fontSize: "10px" }); See also JavaScript documentation – Reading and Changing CSS Style. jQuery documentation – CSS Manipulation Section 1.6: Styling Lists with CSS There are three different properties for styling list-items: list-style-type, list-style-image, and list-style- position, which should be declared in that order. The default values are disc, outside, and none, respectively. Each property can be declared separately, or using the list-style shorthand property. list-style-type defines the shape or type of bullet point used for each list-item. Some of the acceptable values for list-style-type: disc circle square decimal lower-roman upper-roman none (For an exhaustive list, see the W3C specification wiki)

📄 Page 14

GoalKicker.com – CSS Notes for Professionals 6 To use square bullet points for each list-item, for example, you would use the following property-value pair: li { list-style-type: square; } The list-style-image property determines whether the list-item icon is set with an image, and accepts a value of none or a URL that points to an image. li { list-style-image: url(images/bullet.png); } The list-style-position property defines where to position the list-item marker, and it accepts one of two values: "inside" or "outside". li { list-style-position: inside; }

📄 Page 15

GoalKicker.com – CSS Notes for Professionals 7 Chapter 2: Structure and Formatting of a CSS Rule Section 2.1: Property Lists Some properties can take multiple values, collectively known as a property list. /* Two values in this property list */ span { text-shadow: yellow 0 0 3px, green 4px 4px 10px; } /* Alternate Formatting */ span { text-shadow: yellow 0 0 3px, green 4px 4px 10px; } Section 2.2: Multiple Selectors When you group CSS selectors, you apply the same styles to several different elements without repeating the styles in your style sheet. Use a comma to separate multiple grouped selectors. div, p { color: blue } So the blue color applies to all <div> elements and all <p> elements. Without the comma only <p> elements that are a child of a <div> would be red. This also applies to all types of selectors. p, .blue, #first, div span{ color : blue } This rule applies to: <p> elements of the blue class element with the ID first every <span> inside of a <div> Section 2.3: Rules, Selectors, and Declaration Blocks A CSS rule consists of a selector (e.g. h1) and declaration block ({}). h1 {}

📄 Page 16

GoalKicker.com – CSS Notes for Professionals 8 Chapter 3: Comments Section 3.1: Single Line /* This is a CSS comment */ div { color: red; /* This is a CSS comment */ } Section 3.2: Multiple Line /* This is a CSS comment */ div { color: red; }

📄 Page 17

GoalKicker.com – CSS Notes for Professionals 9 Chapter 4: Selectors CSS selectors identify specific HTML elements as targets for CSS styles. This topic covers how CSS selectors target HTML elements. Selectors use a wide range of over 50 selection methods offered by the CSS language, including elements, classes, IDs, pseudo-elements and pseudo-classes, and patterns. Section 4.1: Basic selectors Selector Description * Universal selector (all elements) div Tag selector (all <div> elements) .blue Class selector (all elements with class blue) .blue.red All elements with class blue and red (a type of Compound selector) #headline ID selector (the element with "id" attribute set to headline) :pseudo-class All elements with pseudo-class ::pseudo-element Element that matches pseudo-element :lang(en) Element that matches :lang declaration, for example <span lang="en"> div > p child selector Note: The value of an ID must be unique in a web page. It is a violation of the HTML standard to use the value of an ID more than once in the same document tree. A complete list of selectors can be found in the CSS Selectors Level 3 specification. Section 4.2: Attribute Selectors Overview Attribute selectors can be used with various types of operators that change the selection criteria accordingly. They select an element using the presence of a given attribute or attribute value. Selector(1) Matched element Selects elements... CSS Version [attr] <div attr> With attribute attr 2 [attr='val'] <div attr="val"> Where attribute attr has value val 2 [attr~='val'] <div attr="val val2 val3"> Where val appears in the whitespace-separated list of attr 2 [attr^='val'] <div attr="val1 val2"> Where attr's value begins with val 3 [attr$='val'] <div attr="sth aval"> Where the attr's value ends with val 3 [attr*='val'] <div attr="somevalhere"> Where attr contains val anywhere 3 [attr|='val'] <div attr="val-sth etc"> Where attr's value is exactly val, or starts with val and immediately followed by - (U+002D) 2 [attr='val' i] <div attr="val"> Where attr has value val, ignoring val's letter casing. 4(2) Notes: The attribute value can be surrounded by either single-quotes or double-quotes. No quotes at all may also1. work, but it's not valid according to the CSS standard, and is discouraged.

📄 Page 18

GoalKicker.com – CSS Notes for Professionals 10 There is no single, integrated CSS4 specification, because it is split into separate modules. However, there are2. "level 4" modules. See browser support. Details [attribute] Selects elements with the given attribute. div[data-color] { color: red; } <div data-color="red">This will be red</div> <div data-color="green">This will be red</div> <div data-background="red">This will NOT be red</div> Live Demo on JSBin [attribute="value"] Selects elements with the given attribute and value. div[data-color="red"] { color: red; } <div data-color="red">This will be red</div> <div data-color="green">This will NOT be red</div> <div data-color="blue">This will NOT be red</div> Live Demo on JSBin [attribute*="value"] Selects elements with the given attribute and value where the given attribute contains the given value anywhere (as a substring). [class*="foo"] { color: red; } <div class="foo-123">This will be red</div> <div class="foo123">This will be red</div> <div class="bar123foo">This will be red</div> <div class="barfooo123">This will be red</div> <div class="barfo0">This will NOT be red</div> Live Demo on JSBin [attribute~="value"] Selects elements with the given attribute and value where the given value appears in a whitespace-separated list. [class~="color-red"] { color: red; } <div class="color-red foo-bar the-div">This will be red</div> <div class="color-blue foo-bar the-div">This will NOT be red</div>

📄 Page 19

GoalKicker.com – CSS Notes for Professionals 11 Live Demo on JSBin [attribute^="value"] Selects elements with the given attribute and value where the given attribute begins with the value. [class^="foo-"] { color: red; } <div class="foo-123">This will be red</div> <div class="foo-234">This will be red</div> <div class="bar-123">This will NOT be red</div> Live Demo on JSBin [attribute$="value"] Selects elements with the given attribute and value where the given attribute ends with the given value. [class$="file"] { color: red; } <div class="foobar-file">This will be red</div> <div class="foobar-file">This will be red</div> <div class="foobar-input">This will NOT be red</div> Live Demo on JSBin [attribute|="value"] Selects elements with a given attribute and value where the attribute's value is exactly the given value or is exactly the given value followed by - (U+002D) [lang|="EN"] { color: red; } <div lang="EN-us">This will be red</div> <div lang="EN-gb">This will be red</div> <div lang="PT-pt">This will NOT be red</div> Live Demo on JSBin [attribute="value" i] Selects elements with a given attribute and value where the attribute's value can be represented as Value, VALUE, vAlUe or any other case-insensitive possibility. [lang="EN" i] { color: red; } <div lang="EN">This will be red</div> <div lang="en">This will be red</div> <div lang="PT">This will NOT be red</div> Live Demo on JSBin

📄 Page 20

GoalKicker.com – CSS Notes for Professionals 12 Specificity of attribute selectors 0-1-0 Same as class selector and pseudoclass. *[type=checkbox] // 0-1-0 Note that this means an attribute selector can be used to select an element by its ID at a lower level of specificity than if it was selected with an ID selector: [id="my-ID"] targets the same element as #my-ID but with lower specificity. See the Syntax Section for more details. Section 4.3: Combinators Overview Selector Description div span Descendant selector (all <span>s that are descendants of a <div>) div > span Child selector (all <span>s that are a direct child of a <div>) a ~ span General Sibling selector (all <span>s that are siblings after an <a>) a + span Adjacent Sibling selector (all <span>s that are immediately after an <a>) Note: Sibling selectors target elements that come after them in the source document. CSS, by its nature (it cascades), cannot target previous or parent elements. However, using the flex order property, a previous sibling selector can be simulated on visual media. Descendant Combinator: selector selector A descendant combinator, represented by at least one space character (), selects elements that are a descendant of the defined element. This combinator selects all descendants of the element (from child elements on down). div p { color:red; } <div> <p>My text is red</p> <section> <p>My text is red</p> </section> </div> <p>My text is not red</p> Live Demo on JSBin In the above example, the first two <p> elements are selected since they are both descendants of the <div>. Child Combinator: selector > selector The child (>) combinator is used to select elements that are children, or direct descendants, of the specified element.