CSS Master

01-selectors/pseudo-class-first-of-type-first-letter.html (excerpt) p:first-of-type::first-letter { font: bold italic 3em / .5 s ...

p:nth-of-type(odd) { background: #cddc39; color: #121212; } AsyoucanseefromFigure1.44,thisonlymatchesodd-numberedpelements,rathe ...

Figure 1.45. Selecting even-indexed p elements with :nth-last-of-type(even) Ifthisstillseemsfuzzy,playwithPaulMaloney’sNth-Testt ...

<button type="submit" disabled>Save draft</button> Formelementsareenabledbydefault;thatis,theyonlybecomedisabledifth ...

quiredbeforesubmission.Forexample,thefollowingCSSwilladdayellowborder toouremailfieldfromabove,andisshowninFigure1.47: css/chapt ...

yetsupported.WebKit/Blink-basedbrowsersandFirefoxdo,however,support nonstandard,vendor-prefixedversionsofit. Inordertocreatecust ...

Figure 1.49. Using the adjacent sibling combinator and ::before pseudo-class to create custom radio controls Inorderforthistechn ...

css/chapter1/selectors-input.css (excerpt) :out-of-range { background: #ffeb3b; } :in-range { background: #fff; } Shouldtheusere ...

Optionalfieldswithemptyvaluesarevalidbydefault.Obviously,ifuserinput satisfiestheconstraintsofthefield,itexistsinavalidstate. Fo ...

aspecificityof0,2,0.Butusingasimpletypeorelementselectorsuchash1orp onlygivesusaspecificityof0,0,1. Calculating Specificity Keeg ...

a:link { color: #369; } a.external { color: #f60; } IfweappliedthisCSS,everylinkwouldbeslateblueexceptforthosewith class="extern ...

Chapter 2. CSS Architecture and Organization Ifyou’veeverworkedonaCSScodebaseofanysize—orevenasmallcodebase withmultipledevelope ...

CSS File Organization PartofagoodCSSarchitectureisfileorganization.Amonolithicfileisfineforsolo developersorverysmallprojects.Fo ...

CSSframeworkssuchasFoundation^1 andBootstrap^2 usethisapproach.Bothbecome quitegranularwithseparatefilesforprogressbars,rangeinp ...

cat file1.css file2.css > combined-output-file.css UsingWindows?Trythetypeutility: type file1.css file2.css > combined-out ...

formanceoptimizationmethods,theSitePointbookLeanWebsites^7 isausefulre- source. Managing Styles for Legacy Browsers Cross-browse ...

<!--[if IE 9]> <link rel="stylesheet" href="ie9.css" type="text/css"> <![endif]--> Abetterapproach,however—par ...

Golden Guidelines for Writing Clean CSS Asmentioned,therearesomerulesforwritingcleanCSSthatyoushouldtryyour besttoavoidbreaking. ...

<section class="dialog"> <button type="button" class="close">Close</button> </section> Why not use dialo ...

.close { background: #e00; border: 2px solid #fff; color: #fff; font-size: 12px; padding: 5px; border-radius: 100px; } Justasimp ...