Transcription
Beginner’s EssentialCSS CHEAT SHEETWhat makes a website unique is its styling. A must-haveskill for every web developer.
Table of ContentsBackgrounds3Border4Box st & 20Pseudo-Element21Absolute Measurement21Relative ctor Types23Outline25WebsiteSetup.org - Beginner’s CSS Cheat Sheet 1
3D / 2D Transform25Generated Content26Line Box28Hyperlink31Positioning31Ruby32Paged Media32WebsiteSetup.org - Beginner’s CSS Cheat Sheet 2
positiontop left top center top right center left center center center right bottom left bottom center bottom rightx-% y-%x-pos y-posbackground-sizelength%auto cover containbackground-repeatrepeat repeat-x repeat-y no-repeatWebsiteSetup.org - Beginner’s CSS Cheat Sheet 3
background-attachmentscroll fixed localbackground-originborder-box padding-box content-boxbackground-clipborder-box padding-box dththin medium thick lengthborder-stylenone hidden dotted dashed solid double groove ridge inset t-widthWebsiteSetup.org - Beginner’s CSS Cheat Sheet 4
hthin medium thick lengthborder-top-widththin medium thick left-widththin medium thick rg - Beginner’s CSS Cheat Sheet 5
-stylebox-shadowinset [ length, length, length, length color ]noneborder-collapsecollapse separateborder-imageimage[ number / % border-width stretch repeat round ottom-left-radiuslengthWebsiteSetup.org - Beginner’s CSS Cheat Sheet 6
Box Modelfloatleft right tmargin-bottomWebsiteSetup.org - Beginner’s CSS Cheat Sheet 7
eSetup.org - Beginner’s CSS Cheat Sheet 8
padding-toplength%displaynone inline block inline-block flex inline-flex grid inline-grid contents list-item run-in compact table inline-table table-row-group table-header-group table-footer-group table-row table-column-group table-column table-cell table-caption ruby ruby-base ruby-text ruby-base-group ruby-text-groupoverflowvisible hidden scroll auto no-display no-contentoverflow-xoverflow-yoverflow-styleauto marquee-line marqueeblockoverflow-xvisible hidden scroll auto no-display no-contentvisibilityvisible hidden collapseclearleft right both size/line-heightWebsiteSetup.org - Beginner’s CSS Cheat Sheet 9
font-familycaption icon menu messagebox small-caption status-barfont-size-adjustnone inheritnumberfont-familyserif sans-serif Font Namefont-stylenormal italic oblique inheritfont-variantnormal small-caps inheritfont-sizexx-small x-small small medium large x-large xxlarge smaller larger inheritlength%font-weightnormal bold bolder lighter 100 200 300 400 500 600 700 800 900 inheritTextdirectionltr rtl inherithanging-punctuationnone [ start end endedge ]letter-spacingnormallength%WebsiteSetup.org - Beginner’s CSS Cheat Sheet 10
text-outlinenonecolorlengthunicode-bidinormal embed bidi-overridewhite-spacenormal pre nowrap pre-wrap pre-linewhite-space-collapseperserve collapse pre-servebreaks discardpunctuation-trimnone [ start end adjacent ]text-alignstart end left right center justifytext-align-laststart end left right center justifytext-decorationnone underline overline line-thorugh blinktext-shadownonecolorlengthword-breaknormal keep-all loose break-strict break-allword-wrapnormalnowraptext-emphasisnone [ [ accent dot circle disc [ before after ]?]WebsiteSetup.org - Beginner’s CSS Cheat Sheet 11
text-indentlength%text-justifyauto inter-word interideograph inter-cluster distribute kashida tibetantext-transformnone capitalize uppercase lowercasetext-wrapnormal unresrricted none tautonumbercolumn-fillauto le-styleWebsiteSetup.org - Beginner’s CSS Cheat Sheet 12
rule-widththin medium thicklengthcolumn-span1 acityinheritnumberTableborder-collapsecollapse separateempty-cellsshow hideborder-spacinglength lengthtable-layoutWebsiteSetup.org - Beginner’s CSS Cheat Sheet 13
auto fixedcaption-sidetop bottom left rightSpeechcuecue-beforecue-aftercue-beforeurl [ silent x-soft soft medium loud x-loud none estringmark-afterstringvoice-pitch-rangex-low low medium high xhigh inheritnumbervoice-stressstrong moderate none reduced inheritvoice-volumesilent x-soft soft medium loud x-loud inheritnumber%WebsiteSetup.org - Beginner’s CSS Cheat Sheet 14
cue-afterurl [ silent x-soft soft medium loud x-loud none eforenone x-weak weak medium strong x-strong amilyinherit [ specific-voice, age, generic-voice, number ]voice-ratex-slow slow medium fast x-fast inherit%voice-pitchx-low low medium high xhigh inheritnumber%caption-sidetop bottom left tup.org - Beginner’s CSS Cheat Sheet 15
none x-weak weak medium strong x-strong inherittimerest-afternone x-weak weak medium strong x-strong inherittimespeaknone normal spell-out digits literal-punctuation no-punctuation inherit-numberList & -typenone asterisks box check circle diamond disc hyphen square decimal decimalleading-zero lower-roman upper-roman lower-alpha upper-alpha lower-greek lower-latin upper-latin hebrew armenian georgian cjk-ideographic hiragana katakana hiragana-iroha katakana-iroha footnotesmarker-offsetautolengthWebsiteSetup.org - Beginner’s CSS Cheat Sheet 16
none onease linear ease-in easeout ease-in-out cubic-Bezier(number, number, number, tinheritnumberanimation-directionnormal alternateanimation-play-staterunning pausedrotationanglerotation-pointposition (paired value off-set)WebsiteSetup.org - Beginner’s CSS Cheat Sheet 17
etransitions-propertynone alltransition-timing-functionease linear ease-in ease-out ease-in-out cubicBezier(number, number, number, number)UIappearancenormal inherit [icon window desktop work-space document tooltip dialog button push-button hyperlink radio-button checkbox menu-item tab menu menubar pull-down-menu pop-up-menu list-menu radio-group checkbox-group outline-tree range field combo-box signature password]cursorauto crosshair default pointer move e-resize neresize nw-resize n-resize se-resize sw-resize swresize s-resize w-resize text wait helpurliconauto inheriturlWebsiteSetup.org - Beginner’s CSS Cheat Sheet 18
nav-indexauto inheritnumbernav-upauto inherit id [current root target-name nav-rightauto inherit id [current root target-name nav-downauto inherit id [current root target-name nav-leftauto inherit id [current root target-name resizenone both horizontal vertical inheritWebsiteSetup.org - Beginner’s CSS Cheat Sheet 19
Pseudo-Class:activean activated element:focusan element while the element has focus:hoveran element when you mouse over it:linkan unvisited link:disabledan element while the element is disabled:enabledan element while the element is enabled:checkedan element that is checked:selectionan element that is currently selected or highlighted by the user:langallows the author to specify a language to use in a specified element:nth-child(n)an element that is the n-th sibling:nth-last-child(n)an element that is the n-th sibling counting from the last sibling:first-childan element that is the first sibling:last-childan element that is the last sibling:only-childan element that is the only child:nth-of-type(n)an element that is the n-th sibling of its type:nth-last-of-type(n)an element that is the n-th sibling of its type counting from the lastsibling:last-of-typean element that is the last sibling of its type:first-of-typean element that is the first sibling of its type:only-of-typean element that is the only child of its type:emptyan element that has no children:rootroot element within the document:not(x)an element not represented by the argument ‘x’:targeta target element as specified by a target in a URWebsiteSetup.org - Beginner’s CSS Cheat Sheet 20
Pseudo-Element::first-letterAdds special style to the first letter of a text::first-lineAdds special style to the first line of a text::beforeInserts some content before the content of an element::afterInserts some content after the content of an elementAbsolute rpcpica (1p 12 points)ptpoint (1pt 1/72 inch)pxpixel (1px 1/96 inch)Relative Measurementchwidth of the “0” glyph found in the font for the font size used to renderem1em current font size of current elementexx-height of the element’s fontgdthe grid defined by ‘layout-grid’remthe font size of the root elementWebsiteSetup.org - Beginner’s CSS Cheat Sheet 21
vhthe viewport’s heightvwthe viewport's widthvmviewport’s height or width, whichever is smaller of the tzWebsiteSetup.org - Beginner’s CSS Cheat Sheet 22
Colorscolor namered, blue, green, dark greenrgb(x,y,z)red rgb(255,0,0)rgb(x%,y%,z%)red rgb(100%,0,0)rgba(x,y,z,alpha)red rgba(255,0,0,0)#rrggbbred #ff0000 (or shorthand - #f00)hsl(hue, saturation,lightness)red hsl (0, 100%, 50%)flavorAn accent color (typically chosen by the user) to customizethe user interface of the user agent itself.currentColorcomputer value of the ‘currentColor’ keyword is thecomputed value of the ‘color’ propertySelector TypesNameInfoExampleUniversalAny element* { font: 10px Arial; }TypeAny element of that typeh1 { text-decoration:underline; }GroupingMultiple elements of differenttypesh1, h2, h3 { font-family:Verdana; }ClassMultiple elements of differenttypes when you don’t want toaffect all instances of that type.sampleClass {text-decoration:underline; }IdA single element type when youdon’t want to affect all instancesof that type#sampleID {text-decoration:underline; }DescendantAn element that is below (in thedocument tree) another element- no matter how many levels#gallery h1 {text-decoration:underline; }WebsiteSetup.org - Beginner’s CSS Cheat Sheet 23
belowChildAn element that is directly below(in the document tree) anotherelement#title p { font-weight:bold; }Adjacent SiblingAll elements that share thesame parent and elements arein the same immediatesequenceh1 p { font-style:italic; }General SiblingAll elements that share thesame parent and elements arein the same sequence (notnecessarily immediate)h1 p { font-style:italic; }AttributeAn element that matches theattribute listedE[selected] - att whateverthe value E[att "val"] att with a specific valueE[rel "next"] - att witha value is a whitespaceseparated list*[lang "en"] - att valueeither being exactly "val"or beginning with "val"immediately followed by"-" E[att "val"] - attvalue that begins with theprefix "val"WebsiteSetup.org - Beginner’s CSS Cheat Sheet 24
dthoutline-offsetinheritlengthoutline-stylenone dotted dashed solid double groove ridge inset outsetoutline-widththin medium thicklength3D / 2D Transformbackface-visibilityvisible hiddenperspectivenonenumberperspective-origin[ [ percentage length left center right ] [ percentage length top center bottom ]? ] lengt
Backgrounds 3 Border 4 Box Model 7 Font 9 Text 10 Column 12 Colors 13 Table 13 Speech 14 List & Markers 16 Animations 17 Transitions 18 UI 18 Pseudo-Class 20 Pseudo-Element 21 Absolute Measurement 21 Relative Measurement 21 Angles 22 Time
