CSS Notes for Professionals (GoalKicker.com) (Z-Library)

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

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: Selectors 8 .................................................................................................................................................... Section 3.1: Basic selectors 8 ........................................................................................................................................... Section 3.2: Attribute Selectors 8 .................................................................................................................................... Section 3.3: Combinators 11 ............................................................................................................................................ Section 3.4: Pseudo-classes 12 ....................................................................................................................................... Section 3.5: Child Pseudo Class 14 .................................................................................................................................. Section 3.6: Class Name Selectors 15 ............................................................................................................................. Section 3.7: Select element using its ID without the high specificity of the ID selector 16 ........................................ Section 3.8: The :last-of-type selector 16 ....................................................................................................................... Section 3.9: CSS3 :in-range selector example 16 .......................................................................................................... Section 3.10: A. The :not pseudo-class example & B. :focus-within CSS pseudo-class 17 ......................................... Section 3.11: Global boolean with checkbox:checked and ~ (general sibling combinator) 18 .................................. Section 3.12: ID selectors 19 ............................................................................................................................................. Section 3.13: How to style a Range input 20 .................................................................................................................. Section 3.14: The :only-child pseudo-class selector example 20 ................................................................................. Chapter 4: Backgrounds 21 ......................................................................................................................................... Section 4.1: Background Color 21 ................................................................................................................................... Section 4.2: Background Gradients 23 ........................................................................................................................... Section 4.3: Background Image 24 ................................................................................................................................. Section 4.4: Background Shorthand 25 .......................................................................................................................... Section 4.5: Background Size 26 ..................................................................................................................................... Section 4.6: Background Position 30 .............................................................................................................................. Section 4.7: The background-origin property 31 .......................................................................................................... Section 4.8: Multiple Background Image 33 .................................................................................................................. Section 4.9: Background Attachment 34 ....................................................................................................................... Section 4.10: Background Clip 35 .................................................................................................................................... Section 4.11: Background Repeat 36 ............................................................................................................................... Section 4.12: background-blend-mode Property 36 ..................................................................................................... Section 4.13: Background Color with Opacity 37 ........................................................................................................... Chapter 5: Centering 38 ................................................................................................................................................. Section 5.1: Using Flexbox 38 ........................................................................................................................................... Section 5.2: Using CSS transform 39 .............................................................................................................................. Section 5.3: Using margin: 0 auto; 40 ............................................................................................................................. Section 5.4: Using text-align 41 ....................................................................................................................................... Section 5.5: Using position: absolute 41 .........................................................................................................................

Section 5.6: Using calc() 42 ............................................................................................................................................. Section 5.7: Using line-height 42 ..................................................................................................................................... Section 5.8: Vertical align anything with 3 lines of code 43 ......................................................................................... Section 5.9: Centering in relation to another item 43 ................................................................................................... Section 5.10: Ghost element technique (Michał Czernow's hack) 44 ........................................................................... Section 5.11: Centering vertically and horizontally without worrying about height or width 45 ............................... Section 5.12: Vertically align an image inside div 46 ..................................................................................................... Section 5.13: Centering with fixed size 46 ....................................................................................................................... Section 5.14: Vertically align dynamic height elements 48 .......................................................................................... Section 5.15: Horizontal and Vertical centering using table layout 48 ........................................................................ Chapter 6: The Box Model 50 ...................................................................................................................................... Section 6.1: What is the Box Model? 50 .......................................................................................................................... Section 6.2: box-sizing 51 ................................................................................................................................................ Chapter 7: Margins 54 ..................................................................................................................................................... Section 7.1: Margin Collapsing 54 .................................................................................................................................... Section 7.2: Apply Margin on a Given Side 56 ............................................................................................................... Section 7.3: Margin property simplification 57 .............................................................................................................. Section 7.4: Horizontally center elements on a page using margin 57 ...................................................................... Section 7.5: Example 1: 58 ................................................................................................................................................ Section 7.6: Negative margins 58 ................................................................................................................................... Chapter 8: Padding 60 .................................................................................................................................................... Section 8.1: Padding Shorthand 60 ................................................................................................................................. Section 8.2: Padding on a given side 61 ........................................................................................................................ Chapter 9: Border 62 ....................................................................................................................................................... Section 9.1: border-radius 62 ........................................................................................................................................... Section 9.2: border-style 63 ............................................................................................................................................. Section 9.3: Multiple Borders 64 ...................................................................................................................................... Section 9.4: border (shorthands) 65 ............................................................................................................................... Section 9.5: border-collapse 65 ...................................................................................................................................... Section 9.6: border-image 66 .......................................................................................................................................... Section 9.7: Creating a multi-colored border using border-image 66 ........................................................................ Section 9.8: border-[left|right|top|bottom] 67 ............................................................................................................... Chapter 10: Outlines 68 .................................................................................................................................................. Section 10.1: Overview 68 ................................................................................................................................................. Section 10.2: outline-style 68 ........................................................................................................................................... Chapter 11: Overflow 70 ................................................................................................................................................. Section 11.1: overflow-wrap 70 ......................................................................................................................................... Section 11.2: overflow-x and overflow-y 71 .................................................................................................................... Section 11.3: overflow: scroll 72 ........................................................................................................................................ Section 11.4: overflow: visible 72 ...................................................................................................................................... Section 11.5: Block Formatting Context Created with Overflow 73 .............................................................................. Chapter 12: Media Queries 75 ...................................................................................................................................... Section 12.1: Terminology and Structure 75 ................................................................................................................... Section 12.2: Basic Example 76 ....................................................................................................................................... Section 12.3: mediatype 76 .............................................................................................................................................. Section 12.4: Media Queries for Retina and Non Retina Screens 77 ........................................................................... Section 12.5: Width vs Viewport 78 ................................................................................................................................. Section 12.6: Using Media Queries to Target Dierent Screen Sizes 78 ..................................................................... Section 12.7: Use on link tag 79 .......................................................................................................................................

Section 12.8: Media queries and IE8 79 .......................................................................................................................... Chapter 13: Floats 80 ....................................................................................................................................................... Section 13.1: Float an Image Within Text 80 ................................................................................................................... Section 13.2: clear property 81 ........................................................................................................................................ Section 13.3: Clearfix 82 .................................................................................................................................................... Section 13.4: In-line DIV using float 83 ............................................................................................................................ Section 13.5: Use of overflow property to clear floats 85 ............................................................................................. Section 13.6: Simple Two Fixed-Width Column Layout 85 ............................................................................................ Section 13.7: Simple Three Fixed-Width Column Layout 86 ......................................................................................... Section 13.8: Two-Column Lazy/Greedy Layout 87 ...................................................................................................... Chapter 14: Typography 88 ......................................................................................................................................... Section 14.1: The Font Shorthand 88 ............................................................................................................................... Section 14.2: Quotes 89 .................................................................................................................................................... Section 14.3: Font Size 89 ................................................................................................................................................. Section 14.4: Text Direction 89 ......................................................................................................................................... Section 14.5: Font Stacks 90 ............................................................................................................................................ Section 14.6: Text Overflow 90 ......................................................................................................................................... Section 14.7: Text Shadow 90 .......................................................................................................................................... Section 14.8: Text Transform 91 ...................................................................................................................................... Section 14.9: Letter Spacing 91 ........................................................................................................................................ Section 14.10: Text Indent 92 ............................................................................................................................................ Section 14.11: Text Decoration 92 ..................................................................................................................................... Section 14.12: Word Spacing 93 ....................................................................................................................................... Section 14.13: Font Variant 93 .......................................................................................................................................... Chapter 15: Flexible Box Layout (Flexbox) 95 ..................................................................................................... Section 15.1: Dynamic Vertical and Horizontal Centering (align-items, justify-content) 95 ...................................... Section 15.2: Sticky Variable-Height Footer 101 ........................................................................................................... Section 15.3: Optimally fit elements to their container 102 .......................................................................................... Section 15.4: Holy Grail Layout using Flexbox 103 ........................................................................................................ Section 15.5: Perfectly aligned buttons inside cards with flexbox 104 ........................................................................ Section 15.6: Same height on nested containers 106 .................................................................................................... Chapter 16: Cascading and Specificity 108 ........................................................................................................... Section 16.1: Calculating Selector Specificity 108 .......................................................................................................... Section 16.2: The !important declaration 110 ................................................................................................................ Section 16.3: Cascading 111 ............................................................................................................................................ Section 16.4: More complex specificity example 112 .................................................................................................... Chapter 17: Colors 114 .................................................................................................................................................... Section 17.1: currentColor 114 .......................................................................................................................................... Section 17.2: Color Keywords 115 ................................................................................................................................... Section 17.3: Hexadecimal Value 121 ............................................................................................................................. Section 17.4: rgb() Notation 121 ...................................................................................................................................... Section 17.5: rgba() Notation 122 .................................................................................................................................... Section 17.6: hsl() Notation 122 ....................................................................................................................................... Section 17.7: hsla() Notation 123 ..................................................................................................................................... Chapter 18: Opacity 125 ................................................................................................................................................. Section 18.1: Opacity Property 125 .................................................................................................................................. Section 18.2: IE Compatibility for `opacity` 125 .............................................................................................................. Chapter 19: Length Units 126 ....................................................................................................................................... Section 19.1: Creating scalable elements using rems and ems 126 ............................................................................

Section 19.2: Font size with rem 127 ............................................................................................................................... Section 19.3: vmin and vmax 128 .................................................................................................................................... Section 19.4: vh and vw 128 ............................................................................................................................................. Section 19.5: using percent % 128 ................................................................................................................................... Chapter 20: Pseudo-Elements 130 ............................................................................................................................ Section 20.1: Pseudo-Elements 130 ................................................................................................................................ Section 20.2: Pseudo-Elements in Lists 130 ................................................................................................................... Chapter 21: Positioning 132 .......................................................................................................................................... Section 21.1: Overlapping Elements with z-index 132 .................................................................................................... Section 21.2: Absolute Position 133 ................................................................................................................................. Section 21.3: Fixed position 134 ....................................................................................................................................... Section 21.4: Relative Position 134 .................................................................................................................................. Section 21.5: Static positioning 134 ................................................................................................................................. Chapter 22: Layout Control 136 ................................................................................................................................. Section 22.1: The display property 136 .......................................................................................................................... Section 22.2: To get old table structure using div 138 ................................................................................................. Chapter 23: Grid 140 ........................................................................................................................................................ Section 23.1: Basic Example 140 ..................................................................................................................................... Chapter 24: Tables 142 .................................................................................................................................................. Section 24.1: table-layout 142 ......................................................................................................................................... Section 24.2: empty-cells 142 ......................................................................................................................................... Section 24.3: border-collapse 142 .................................................................................................................................. Section 24.4: border-spacing 143 ................................................................................................................................... Section 24.5: caption-side 143 ........................................................................................................................................ Chapter 25: Transitions 144 ......................................................................................................................................... Section 25.1: Transition shorthand 144 ........................................................................................................................... Section 25.2: cubic-bezier 144 ......................................................................................................................................... Section 25.3: Transition (longhand) 146 ........................................................................................................................ Chapter 26: Animations 147 ......................................................................................................................................... Section 26.1: Animations with keyframes 147 ................................................................................................................ Section 26.2: Animations with the transition property 148 .......................................................................................... Section 26.3: Syntax Examples 149 ................................................................................................................................ Section 26.4: Increasing Animation Performance Using the `will-change` Attribute 150 .......................................... Chapter 27: 2D Transforms 151 ................................................................................................................................. Section 27.1: Rotate 151 ................................................................................................................................................... Section 27.2: Scale 152 .................................................................................................................................................... Section 27.3: Skew 152 ..................................................................................................................................................... Section 27.4: Multiple transforms 152 ............................................................................................................................ Section 27.5: Translate 153 ............................................................................................................................................. Section 27.6: Transform Origin 154 ................................................................................................................................ Chapter 28: 3D Transforms 155 ................................................................................................................................. Section 28.1: Compass pointer or needle shape using 3D transforms 155 ................................................................ Section 28.2: 3D text eect with shadow 156 ................................................................................................................ Section 28.3: backface-visibility 157 ............................................................................................................................... Section 28.4: 3D cube 158 ............................................................................................................................................... Chapter 29: Browser Support & Prefixes 160 ...................................................................................................... Section 29.1: Transitions 160 ........................................................................................................................................... Section 29.2: Transform 160 ........................................................................................................................................... Chapter 30: Normalizing Browser Styles 161 .....................................................................................................

Section 30.1: normalize.css 161 ....................................................................................................................................... Section 30.2: Approaches and Examples 161 ............................................................................................................... Chapter 31: Filter Property 164 .................................................................................................................................. Section 31.1: Blur 164 ......................................................................................................................................................... Section 31.2: Drop Shadow (use box-shadow instead if possible) 164 ....................................................................... Section 31.3: Hue Rotate 165 ........................................................................................................................................... Section 31.4: Multiple Filter Values 165 ........................................................................................................................... Section 31.5: Invert Color 166 .......................................................................................................................................... Chapter 32: Comments 167 .......................................................................................................................................... Section 32.1: Single Line 167 ............................................................................................................................................ Section 32.2: Multiple Line 167 ........................................................................................................................................ Chapter 33: Cursor Styling 168 ................................................................................................................................... Section 33.1: Changing cursor type 168 ......................................................................................................................... Section 33.2: pointer-events 168 ..................................................................................................................................... Section 33.3: caret-color 169 ........................................................................................................................................... Chapter 34: box-shadow 170 ...................................................................................................................................... Section 34.1: bottom-only drop shadow using a pseudo-element 170 ...................................................................... Section 34.2: drop shadow 171 ....................................................................................................................................... Section 34.3: inner drop shadow 171 ............................................................................................................................. Section 34.4: multiple shadows 172 ................................................................................................................................ Chapter 35: Shapes for Floats 174 ........................................................................................................................... Section 35.1: Shape Outside with Basic Shape – circle() 174 ....................................................................................... Section 35.2: Shape margin 175 ..................................................................................................................................... Chapter 36: List Styles 177 ........................................................................................................................................... Section 36.1: Bullet Position 177 ...................................................................................................................................... Section 36.2: Removing Bullets / Numbers 177 ............................................................................................................ Section 36.3: Type of Bullet or Numbering 177 ............................................................................................................. Chapter 37: Counters 179 .............................................................................................................................................. Section 37.1: Applying roman numerals styling to the counter output 179 ................................................................ Section 37.2: Number each item using CSS Counter 179 ............................................................................................. Section 37.3: Implementing multi-level numbering using CSS counters 180 ............................................................. Chapter 38: Functions 182 ............................................................................................................................................ Section 38.1: calc() function 182 ...................................................................................................................................... Section 38.2: attr() function 182 ...................................................................................................................................... Section 38.3: var() function 182 ...................................................................................................................................... Section 38.4: radial-gradient() function 183 .................................................................................................................. Section 38.5: linear-gradient() function 183 .................................................................................................................. Chapter 39: Custom Properties (Variables) 184 ................................................................................................ Section 39.1: Variable Color 184 ...................................................................................................................................... Section 39.2: Variable Dimensions 184 .......................................................................................................................... Section 39.3: Variable Cascading 184 ............................................................................................................................ Section 39.4: Valid/Invalids 185 ...................................................................................................................................... Section 39.5: With media queries 186 ............................................................................................................................ Chapter 40: Single Element Shapes 188 ............................................................................................................... Section 40.1: Trapezoid 188 ............................................................................................................................................. Section 40.2: Triangles 188 ............................................................................................................................................. Section 40.3: Circles and Ellipses 191 ............................................................................................................................. Section 40.4: Bursts 192 ................................................................................................................................................... Section 40.5: Square 194 .................................................................................................................................................

Section 40.6: Cube 194 ..................................................................................................................................................... Section 40.7: Pyramid 195 ............................................................................................................................................... Chapter 41: Columns 197 ............................................................................................................................................... Section 41.1: Simple Example (column-count) 197 ........................................................................................................ Section 41.2: Column Width 197 ...................................................................................................................................... Chapter 42: Multiple columns 199 ............................................................................................................................ Section 42.1: Create Multiple Columns 199 .................................................................................................................... Section 42.2: Basic example 199 .................................................................................................................................... Chapter 43: Inline-Block Layout 200 ....................................................................................................................... Section 43.1: Justified navigation bar 200 ...................................................................................................................... Chapter 44: Inheritance 201 ....................................................................................................................................... Section 44.1: Automatic inheritance 201 ........................................................................................................................ Section 44.2: Enforced inheritance 201 .......................................................................................................................... Chapter 45: CSS Image Sprites 202 ......................................................................................................................... Section 45.1: A Basic Implementation 202 ...................................................................................................................... Chapter 46: Clipping and Masking 203 ................................................................................................................... Section 46.1: Clipping and Masking: Overview and Dierence 203 ............................................................................. Section 46.2: Simple mask that fades an image from solid to transparent 205 ....................................................... Section 46.3: Clipping (Circle) 205 .................................................................................................................................. Section 46.4: Clipping (Polygon) 206 .............................................................................................................................. Section 46.5: Using masks to cut a hole in the middle of an image 207 .................................................................... Section 46.6: Using masks to create images with irregular shapes 208 .................................................................... Chapter 47: Fragmentation 210 ................................................................................................................................ Section 47.1: Media print page-break 210 ...................................................................................................................... Chapter 48: CSS Object Model (CSSOM) 211 ...................................................................................................... Section 48.1: Adding a background-image rule via the CSSOM 211 ........................................................................... Section 48.2: Introduction 211 ......................................................................................................................................... Chapter 49: Feature Queries 212 .............................................................................................................................. Section 49.1: Basic @supports usage 212 ...................................................................................................................... Section 49.2: Chaining feature detections 212 .............................................................................................................. Chapter 50: Stacking Context 213 ............................................................................................................................ Section 50.1: Stacking Context 213 ................................................................................................................................. Chapter 51: Block Formatting Contexts 216 ........................................................................................................ Section 51.1: Using the overflow property with a value dierent to visible 216 ......................................................... Chapter 52: Vertical Centering 217 .......................................................................................................................... Section 52.1: Centering with display: table 217 .............................................................................................................. Section 52.2: Centering with Flexbox 217 ...................................................................................................................... Section 52.3: Centering with Transform 218 ................................................................................................................. Section 52.4: Centering Text with Line Height 218 ........................................................................................................ Section 52.5: Centering with Position: absolute 218 ...................................................................................................... Section 52.6: Centering with pseudo element 219 ........................................................................................................ Chapter 53: Object Fit and Placement 221 .......................................................................................................... Section 53.1: object-fit 221 ............................................................................................................................................... Chapter 54: CSS design patterns 224 ..................................................................................................................... Section 54.1: BEM 224 ....................................................................................................................................................... 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 ................................................................................. 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 ......................................................................................................................................................

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

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

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>

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.

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)

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; }

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 {}

GoalKicker.com – CSS Notes for Professionals 8 Chapter 3: 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 3.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 3.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.

GoalKicker.com – CSS Notes for Professionals 9 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>

GoalKicker.com – CSS Notes for Professionals 10 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

GoalKicker.com – CSS Notes for Professionals 11 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 3.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.

GoalKicker.com – CSS Notes for Professionals 12 div > p { color:red; } <div> <p>My text is red</p> <section> <p>My text is not red</p> </section> </div> Live Demo on JSBin The above CSS selects only the first <p> element, as it is the only paragraph directly descended from a <div>. The second <p> element is not selected because it is not a direct child of the <div>. Adjacent Sibling Combinator: selector + selector The adjacent sibling (+) combinator selects a sibling element that immediate follows a specified element. p + p { color:red; } <p>My text is not red</p> <p>My text is red</p> <p>My text is red</p> <hr> <p>My text is not red</p> Live Demo on JSBin The above example selects only those <p> elements which are directly preceded by another <p> element. General Sibling Combinator: selector ~ selector The general sibling (~) combinator selects all siblings that follow the specified element. p ~ p { color:red; } <p>My text is not red</p> <p>My text is red</p> <hr> <h1>And now a title</h1> <p>My text is red</p> Live Demo on JSBin The above example selects all <p> elements that are preceded by another <p> element, whether or not they are immediately adjacent. Section 3.4: Pseudo-classes Pseudo-classes are keywords which allow selection based on information that lies outside of the document tree or