SEO report of learncss.info

Domain : www.learncss.info/

Character length : 18

Error! The website does not use the OG (Open Graph) protocol.

• <H1> 
• <H1> CSS
• <H1> What is CSS?
• <H2> As of 2015, Cascading Style Sheets (CSS) is defined by the following specifications.
• <H1> The W3C & the CSS modules
• <H1> The W3C Process
• <H1> CSS Snapshot 2015
• <H1> Selectors
• <H1> A selector is the part of the CSS line that selects what element to target with the property/value pair.
• <H1> Selector sections
• <H1> *
• <H2> any element
• <H1> E
• <H2> an element of type E
• <H1> E[foo]
• <H2> an E element with a "foo" attribute
• <H1> X [foo ~="bar" ]
• <H5> an E element whose "foo" attribute value is a list of whitespace-separated values, one of which is exactly equal to "bar"
• <H1> X [foo ^ ="bar" ]
• <H5> an E element whose "foo" attribute value begins exactly with the string "bar"
• <H1> X [foo $="bar" ]
• <H5> an E element whose "foo" attribute value ends exactly with the string "bar"
• <H1> X [foo *="bar" ]
• <H5> an E element whose "foo" attribute value contains the substring "bar"
• <H1> X [foo |="en" ]
• <H5> an E element whose "foo" attribute has a hyphen-separated list of values beginning (from the left) with "en"
• <H1> E:root
• <H5> an E element, root of the document
• <H1> E:nth-child(n)
• <H5> an E element, the n-th child of its parent
• <H1> E:nth-of-type(n)
• <H5> an E element, the n-th sibling of its type
• <H1> E:nth-last-of-type(n)
• <H5> an E element, the n-th sibling of its type, counting from the last one
• <H1> E:first-child
• <H5> an E element, first child of its parent
• <H1> E:last-child
• <H5> an E element, last child of its parent
• <H1> E:first-of-type
• <H5> an E element, first sibling of its type
• <H1> E:last-of-type
• <H5> an E element, last sibling of its type
• <H1> E:only-child
• <H5> an E element, only child of its parent
• <H1> E:only-of-type
• <H5> an E element, only sibling of its type
• <H1> E:empty
• <H5> an E element that has no children (including text nodes)
• <H1> E:link, E:visited
• <H5> an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
• <H1> E:active, E:hover, E:focus
• <H5> an E element during certain user actions
• <H1> E:target
• <H5> an E element being the target of the referring URI
• <H1> E:lang(eu)
• <H5> an element of type E in language "eu" (the document language specifies how language is determined)
• <H1> E:enabled, E:disabled
• <H5> a user interface element E which is enabled or disabled
• <H1> E:checked
• <H5> a user interface element E which is checked (for instance a radio-button or checkbox)
• <H1> E::first-line
• <H5> the first formatted line of an E element
• <H1> E::first-letter
• <H5> the first formatted letter of an E element
• <H1> E::before
• <H5> generated content before an E element
• <H1> E::after
• <H5> generated content after an E element
• <H1> E.warning
• <H5> an E element whose class is "warning"
• <H1> E#myid
• <H5> an E element with ID equal to "myid".
• <H1> E:not(s)
• <H5> an E element that does not match simple selector s
• <H1> E F
• <H5> an F element descendant of an E element
• <H1> 
• <H1> E > F
• <H5> an F element child of an E element
• <H1> E + F
• <H5> an F element immediately preceded by an E element
• <H1> 
• <H1> E ~ F
• <H5> an F element preceded by an E element
• <H1> 
• <H1> Layout
• <H1> Modules
• <H1> Basic User Interface Module
• <H2> Level 3 (CSS3 UI)
• <H1> box-sizing
• <H1> box-sizing
• <H2> Both elements have the same width (300px)
• <H1> Reset the box sizing
• <H1> resize
• <H1> resize
• <H1> Flexible Box Layout Module
• <H2> Level 1
• <H2> In the flex layout model, the children of a flex container:
• <H1> The axis
• <H1>  Resources
• <H1> Multi-column Layout Module
• <H1> Multi-column Layout
• <H1> Multi-column Layout
• <H1> Style
• <H1> Modules
• <H1> Backgrounds and Borders Module
• <H2> Level 3
• <H1> multiple background
• <H1> multiple background
• <H1> background-size
• <H1> background-size
• <H1> border-radius
• <H1> border-radius
• <H1> box-shadow
• <H2> inset
• <H1> Text Decoration Module
• <H2> Level 3
• <H1> text-shadow
• <H1> Color Module
• <H2> Level 3
• <H1> rgba
• <H1> rgba
• <H1> hsla
• <H1> hsla
• <H1> Extended color keywords
• <H1> opacity
• <H1> opacity
• <H1> CSS Fonts module
• <H2> Level 3
• <H1> @font-face rule
• <H1> @font-face rule
• <H2> Allows for linking to fonts that are automatically fetched and activated when needed.
• <H1> Graphics
• <H1> Modules
• <H1> Image Values and Replaced Content Module
• <H2> Level 3
• <H1> gradients
• <H1> gradients
• <H1> Radial gradient
• <H1> Vendor prefixes
• <H1> Object-fit
• <H1> Object-fit
• <H2> The ‘object-fit’ property specifies how the contents of a replaced element should be fitted to the box established by its used height and width.
• <H2> object-fit: fill
• <H2> object-fit: contain
• <H2> object-fit: cover
• <H2> object-fit: none
• <H2> object-fit: scale-down
• <H1> object-position
• <H1> Filter Effects Module
• <H2> Level 1
• <H1> filter
• <H1> filter
• <H2> Efects:
• <H1> Compositing and Blending
• <H2> Level 1
• <H1> Blending
• <H2> Blending is the aspect of compositing that calculates the mixing of colors where the source element and backdrop overlap.
• <H1> Mix-blend-mode
• <H2> The blend mode defines the formula that must be used to mix the colors with the backdrop.
• <H1> Background-blend-mode
• <H2> Defines the blending mode of each background layer.
• <H1> Shapes
• <H1> Motion
• <H1> Modules
• <H1> Transforms Module
• <H2> Level 1
• <H1> transform
• <H2> scale | rotate | skew | translate
• <H1> transform: scale
• <H1> transform: rotate
• <H1> transform: skew
• <H1> transform: translate
• <H1> Transitions Module
• <H2> Level 1
• <H1> transition
• <H1> transition-property
• <H2> The ‘transition-property’ property specifies the name of the CSS property to which the transition is applied.
• <H1> transition-duration
• <H2> Defines the length of time that a transition takes.
• <H1> transition-timing-function
• <H2> Describes how the intermediate values used during a transition will be calculated. It allows for a transition to change speed over its duration. These effects are commonly called easing functions.
• <H1> transition-timing-function
• <H1> transition-delay
• <H2> Defines when the transition will start.
• <H1> Animations
• <H1> Animation
• <H2> This CSS module describes a way for authors to animate the values of CSS properties over time, using keyframes. The behavior of these keyframe animations can be controlled by specifying their duration, number of repeats, and repeating behavior.
• <H1> Timing functions for keyframes
• <H5> ‘animation-name’ ‘animation-duration’ ‘animation-timing-function’ ‘animation-iteration-count’ ‘animation-direction’ ‘animation-play-state’ ‘animation-delay’ ‘animation-fill-mode’ ‘animation’ Shorthand 
• <H1> Media Queries
• <H1> Modules
• <H1> @media
• <H1> media queries
• <H1> media features
• <H1> How to use
• <H1> Responsive Web Design
• <H1> The content must be accessible from any device
• <H1> Our options
• <H5> Do nothing (the device zooms) Native App Double version Responsive web design Webapp
• <H1> It depends on the project
• <H1> Some advantages of RWD
• <H5> Reduced development costs  Reduced maintenance Unique URL Does not require licenses or bureaucracies
• <H1> The information architecture is very important
• <H5> We have to prioritize content to discriminate the secondary
• <H1> Mobile First
• <H5> Progresive enhacement vs. Graceful degradation
• <H1> RWD is not only mq
• <H1> Layout
• <H1> Relative units
• <H1> target/content=result
• <H5> 
• <H1> 1em = 16px
• <H5> http://pxtoem.com/
• <H1> Patterns
• <H5> http://bradfrostweb.com/blog/web/responsive-nav-patterns/ http://bradfrost.github.io/this-is-responsive/patterns.html
• <H1> Frameworks
• <H1> Multimedia
• <H1> We have to adapt media elements
• <H5> and not only to change the width. XD
• <H1> & srcset attribute
• <H1> Picture
• <H5> 
• <H1> srcset
• <H1> Server side
• <H1> Don´t use .png for icons
• <H5> http://icomoon.io/
• <H1> Video
• <H1> Media solution
• <H1> iframe from youtube
• <H2> embedresponsively.com/
• <H1> What's new
• <H1> CSS Snapshot 2015
• <H1> Support
• <H1> Cross Browser & cross device
• <H1> Progresive enhancement & graceful degradation
• <H1> 1.Follow the standards
• <H1> 2.Use CSSLint
• <H1> 3. Reset, don´t forget it.
• <H1> 4. Can I use?
• <H1> 5.Trust the cascade
• <H1> 6. The vendor prefixes are dead but still we have to use them
• <H1> Modernizr
• <H5> [info]
• <H1> Polyfills
• <H5> [info]
• <H1> CSS processors
• <H1> Preprocessors
• <H1> 
• <H1> sass-lang.com/
• <H1> What is Sass?
• <H2> It's a tool to improve the CSS workflow
• <H1> What for?
• <H2> It allows to use variables, functions, operations... in the CSS
• <H1> Advantages
• <H5> Work faster Create reusable code Create maintainable code
• <H1> Arquitecture for a Sass project
• <H2> The sintax
• <H1> The base
• <H5> 
• <H2> Variables
• <H2> $
• <H2> CSS output
• <H2> Mixins
• <H2> Nesting
• <H2> Inheritance
• <H2> @import
• <H1> Color  functions
• <H6> 
• <H1> Operations
• <H5> $width :960px; $items :6; body { margin: (14px / 2); top: 50px + 100px; right: 100px - 50px; left: 10 * 10; } p {width: $width / 2;} li {    float: left;    width: $width / $items - 10px;    padding:0 5px; }
• <H1> Best practices
• <H2> Sass is only a tool, if your code is bad, the output will be even worse.
• <H1> Dry
• <H1> Traps
• <H1> Postprocessors
• <H1> PostCSS
• <H2> PostCSS is a tool for transforming styles with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
• <H1> Autoprefixer
• <H2> PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.
• <H1> Gulp
• <H1> Gulp
• <H2> Automate and enhance your workflow
• <H1> Best practices
• <H1> CSS Arquitecture
• <H1> DRY (Don´t Repeat Yourself)
• <H1> Avoid extra selectors
• <H1> Beware of specificity
• <H1> The name matters
• <H1> smacss
• <H5> smacss.com/
• <H1> About
• <H2> This is a summary of CSS modules , explaining the syntax, examples and some resources. For further information go to W3C
• <H2> +
• <H2> some CSS tools & techniques
• <H1> About
• <H1> Credits

• level58
• color55
• element47
• background38
• css30
• scss25
• module23
• width22
• border17
• filter17
• foo17
• left17
• pseudo-classes16
• margin15
• http15
• rgba15
• height15
• attribute14
• value14
• padding14
• transition14
• selectors14
• solid13
• media13
• layout12
• values12
• transform11
• structural11
• target10
• content10
• type9
• blue9
• max-width9
• before9
• flex9
• used9
• eta8
• sass8
• axis8
• block8
• main8
• linear8
• object-fit8
• functions8
• cross8
• div8
• source8
• top8
• body8
• none7
• darken7
• red7
• first7
• modules7
• code7
• sibling7
• etc…7
• url7
• selector7
• transparent6

• module level13
• structural pseudo-classes8
• solid black6
• pseudo-classes level6
• element whose5
• pseudo-element level4

• structural pseudo-classes level10
• foo attribute value3
• user interface element2
• with the string bar2
• borders module level2
• enough comma-separated values2

• http://news.css3.info/.. /border-radius-diagram-12.png
• http://naknak.me/images/kaka.png (4 occurrences)
• http://www.learncss.info/assets/sankarromel.jpg (9 occurrences)
• http://naknak.me/images/aralett.jpg (11 occurrences)
• http://www.learncss.info/assets/arale.png (15 occurrences)
• http://naknak.me/images/rwdnak.jpg
• http://www.webdesign.org/img_articles/21388/04_550.png
• http://www.learncss.info/assets/especificidadCSS.png

• http://www.learncss.info/js/jquery-2.1.4.min.js
• http://www.learncss.info/lib/js/head.min.js
• http://www.learncss.info/js/reveal.js
• http://www.learncss.info/js/main.js
• http://www.learncss.info/js/jquery-2.1.4.min.js
• http://www.learncss.info/lib/js/head.min.js
• http://www.learncss.info/js/reveal.js
• http://www.learncss.info/js/main.js

• http://www.learncss.info/css/reveal.css
• http://www.learncss.info/lib/css/zenburn.css
• http://www.learncss.info/css/print/paper.css
• http://www.learncss.info/css/reveal.css
• http://www.learncss.info/lib/css/zenburn.css
• http://www.learncss.info/css/print/paper.css

• http://www.learncss.info/js/jquery-2.1.4.min.js
• http://www.learncss.info/lib/js/head.min.js
• http://www.learncss.info/js/reveal.js
• http://www.learncss.info/js/main.js
• http://www.learncss.info/js/main.js

• http://www.learncss.info/css/reveal.css
• http://www.learncss.info/lib/css/zenburn.css

• By minifying http://www.learncss.info/css/reveal.css you can save 17.8KB (20% compression rate)
• By minifying http://www.learncss.info/css/print/paper.css you can save 1.8KB (38% compression rate)
• By minifying http://bradfrost.github.io/this-is-responsive/styles.css you can save 432B (17% compression rate)
• By minifying http://www.learncss.info/lib/css/zenburn.css you can save 214B (12% compression rate)
• By minifying http://lea.verou.me/css3patterns/style.css you can save 180B (14% compression rate)

• By compressing http://www.learncss.info you can save 189.7KB (88% compression rate)
• By compressing http://www.learncss.info/index.html you can save 189.7KB (88% compression rate)
• By compressing http://www.learncss.info/js/reveal.js you can save 91KB (74% compression rate)
• By compressing http://www.learncss.info/css/reveal.css you can save 72.8KB (80% compression rate)
• By compressing https://color.hailpixel.com/static/app/vendor/jquery.min.js you can save 58.7KB (64% compression rate)
• By compressing http://www.learncss.info/js/jquery-2.1.4.min.js you can save 53.5KB (64% compression rate)
• By compressing https://color.hailpixel.com/static/css/main.css you can save 17.1KB (76% compression rate)
• By compressing https://color.hailpixel.com/static/app/vendor/hammer.min.js you can save 13.1KB (64% compression rate)
• By compressing https://color.hailpixel.com/static/app/vendor/backbone-min.js you can save 11.7KB (65% compression rate)
• By compressing https://color.hailpixel.com/static/app/vendor/color.min.js you can save 11.1KB (67% compression rate)
• By compressing http://www.learncss.info/assets/CSS_text_shadow.svg you can save 10.2KB (28% compression rate)
• By compressing http://www.learncss.info/assets/CSSmultiColumn.svg you can save 9.5KB (71% compression rate)
• By compressing http://www.learncss.info/assets/CSStimeline.svg you can save 9.2KB (73% compression rate)
• By compressing https://color.hailpixel.com/static/app/vendor/underscore-min.js you can save 8.7KB (65% compression rate)
• By compressing http://www.learncss.info/assets/CSSbox-sizing.svg you can save 7.9KB (63% compression rate)
• By compressing http://www.learncss.info/assets/CSSterms.svg you can save 7.2KB (65% compression rate)
• By compressing http://www.learncss.info/plugin/zoom-js/zoom.js you can save 5.4KB (69% compression rate)
• By compressing http://www.learncss.info/assets/CSSflexbox.svg you can save 4.8KB (68% compression rate)
• By compressing http://www.learncss.info/assets/CSS_border_radius.svg you can save 4.7KB (60% compression rate)
• By compressing http://www.learncss.info/assets/CSSlayout.svg you can save 4.4KB (56% compression rate)
• By compressing http://www.learncss.info/assets/CSS_box_shadow.svg you can save 4.1KB (37% compression rate)
• By compressing https://color.hailpixel.com you can save 4KB (66% compression rate)
• By compressing http://www.learncss.info/css/print/paper.css you can save 3.2KB (68% compression rate)
• By compressing https://color.hailpixel.com/static/app/views/app.js you can save 3.1KB (70% compression rate)
• By compressing http://www.learncss.info/assets/CSS_blending_backdrop.svg you can save 2.8KB (58% compression rate)
• By compressing http://www.learncss.info/plugin/notes/notes.js you can save 2.2KB (60% compression rate)
• By compressing https://color.hailpixel.com/static/app/views/color.js you can save 2KB (68% compression rate)
• By compressing http://www.learncss.info/lib/js/head.min.js you can save 1.7KB (55% compression rate)
• By compressing http://www.learncss.info/assets/CSSselector.svg you can save 1.6KB (54% compression rate)
• By compressing http://www.learncss.info/js/main.js you can save 1.5KB (78% compression rate)
• By compressing http://www.learncss.info/lib/css/zenburn.css you can save 1.1KB (59% compression rate)
• By compressing https://color.hailpixel.com/static/app/routes/router.js you can save 530B (53% compression rate)
• By compressing http://www.learncss.info/assets/learncss.svg you can save 432B (45% compression rate)
• By compressing https://color.hailpixel.com/static/app/models/color.js you can save 298B (52% compression rate)
• By compressing http://error.hostinger.eu/? you can save 216B (33% compression rate)

• By lossless compressing the https://color.hailpixel.com/static/ios/media/colordot-icon@2x.png you can save 453KB (98%) data.
• By lossless compressing the http://www.learncss.info/assets/arale.png you can save 33.9KB (53%) data.
• By lossless compressing the https://www.webdesign.org/img_articles/21388/04_550.png you can save 15.4KB (23%) data.
• By lossless compressing the http://www.learncss.info/assets/sankarromel.jpg you can save 14.4KB (25%) data.
• By lossless compressing the http://html5-demos.appspot.com/.. /chrome_logo_new_256.png you can save 12.2KB (26%) data.
• By lossless compressing the https://cdn.css-tricks.com/.. /get-the-newsletter.png you can save 11.8KB (43%) data.
• By lossless compressing the https://farm2.staticflickr.com/1166/1422959119_899d18c3be_q.jpg you can save 6.5KB (42%) data.
• By lossless compressing the https://farm9.staticflickr.com/8283/7770921770_c865dbdae0_q.jpg you can save 6.3KB (38%) data.
• By lossless compressing the https://farm9.staticflickr.com/8184/8423629320_4bdd64c73c_q.jpg you can save 5.8KB (42%) data.
• By lossless compressing the https://farm9.staticflickr.com/8467/8079487857_87aaa34d6b_q.jpg you can save 5.6KB (46%) data.
• By lossless compressing the https://farm3.staticflickr.com/2030/2098005620_08fbc724e2_q.jpg you can save 5.4KB (31%) data.
• By lossless compressing the https://farm3.staticflickr.com/2704/4471797472_b211a105b8_q.jpg you can save 5.3KB (47%) data.
• By lossless compressing the http://farm1.staticflickr.com/864/26904720327_3e8121b462_m.jpg you can save 4.7KB (28%) data.
• By lossless compressing the http://www.learncss.info/assets/sass.jpg you can save 4KB (33%) data.
• By lossless compressing the https://farm4.staticflickr.com/3051/3054324376_97beba3e28_q.jpg you can save 3.5KB (30%) data.
• By lossless compressing the https://licensebuttons.net/l/by-sa/4.0/88x31.png you can save 3.3KB (67%) data.
• By lossless compressing the https://farm4.staticflickr.com/3319/4583707163_23e0a34a2e_q.jpg you can save 3.1KB (29%) data.
• By lossless compressing the http://naknak.me/images/creativecommons.png you can save 2.3KB (18%) data.
• By lossless compressing the https://farm1.staticflickr.com/11/12191780_9886e9bd5f_q.jpg you can save 1.7KB (21%) data.
• By lossless compressing the http://news.css3.info/.. /border-radius-diagram-12.png you can save 773B (14%) data.
• By lossless compressing the https://i.vimeocdn.com/video/579082770.jpg?mw=80&amp;q=70 you can save 121B (16%) data.