Short Story

CSS Reference

| Edit Entri

Background Properties

Property Description CSS
background Sets all the background properties in one declaration 1
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page 1
background-color Sets the background color of an element 1
background-image Sets the background image for an element 1
background-position Sets the starting position of a background image 1
background-repeat Sets how a background image will be repeated 1

Border and Outline Properties

Property Description CSS
border Sets all the border properties in one declaration 1
border-bottom Sets all the bottom border properties in one declaration 1
border-bottom-color Sets the color of the bottom border 2
border-bottom-style Sets the style of the bottom border 2
border-bottom-width Sets the width of the bottom border 1
border-color Sets the color of the four borders 1
border-left Sets all the left border properties in one declaration 1
border-left-color Sets the color of the left border 2
border-left-style Sets the style of the left border 2
border-left-width Sets the width of the left border 1
border-right Sets all the right border properties in one declaration 1
border-right-color Sets the color of the right border 2
border-right-style Sets the style of the right border 2
border-right-width Sets the width of the right border 1
border-style Sets the style of the four borders 1
border-top Sets all the top border properties in one declaration 1
border-top-color Sets the color of the top border 2
border-top-style Sets the style of the top border 2
border-top-width Sets the width of the top border 1
border-width Sets the width of the four borders 1
outline Sets all the outline properties in one declaration 2
outline-color Sets the color of an outline 2
outline-style Sets the style of an outline 2
outline-width Sets the width of an outline 2

Dimension Properties

Property Description CSS
height Sets the height of an element 1
max-height Sets the maximum height of an element 2
max-width Sets the maximum width of an element 2
min-height Sets the minimum height of an element 2
min-width Sets the minimum width of an element 2
width Sets the width of an element 1

Font Properties

Property Description CSS
font
 Sets all the font properties in one declaration 1
font-family
 Specifies the font family for text 1
font-size
 Specifies the font size of text 1
font-style
 Specifies the font style for text 1
font-variant
 Specifies whether or not a text should be displayed in a small-caps font 1
font-weight
 Specifies the weight of a font 1

Generated Content Properties

Property Description CSS
content Used with the :before and :after pseudo-elements, to insert generated content 2
counter-increment Increments one or more counters 2
counter-reset Creates or resets one or more counters 2
quotes Sets the type of quotation marks for embedded quotations 2

List Properties

Property Description CSS
list-style Sets all the properties for a list in one declaration 1
list-style-image Specifies an image as the list-item marker 1
list-style-position Specifies where to place the list-item marker 1
list-style-type Specifies the type of list-item marker 1

Margin Properties

Property Description CSS
margin Sets all the margin properties in one declaration 1
margin-bottom Sets the bottom margin of an element 1
margin-left Sets the left margin of an element 1
margin-right Sets the right margin of an element 1
margin-top Sets the top margin of an element 1

Padding Properties

Property Description CSS
padding Sets all the padding properties in one declaration 1
padding-bottom Sets the bottom padding of an element 1
padding-left Sets the left padding of an element 1
padding-right Sets the right padding of an element 1
padding-top Sets the top padding of an element 1

Positioning Properties

Property Description CSS
bottom Sets the bottom margin edge for a positioned box 2
clear Specifies which sides of an element where other floating elements are not allowed 1
clip Clips an absolutely positioned element 2
cursor Specifies the type of cursor to be displayed 2
display Specifies the type of box an element should generate 1
float Specifies whether or not a box should float 1
left Sets the left margin edge for a positioned box 2
overflow
 Specifies what happens if content overflows an element's box 2
position Specifies the type of positioning for an element 2
right Sets the right margin edge for a positioned box 2
top Sets the top margin edge for a positioned box 2
visibility Specifies whether or not an element is visible 2
z-index Sets the stack order of an element 2

Print Properties

Property Description CSS
orphans Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element 2
page-break-after Sets the page-breaking behavior after an element 2
page-break-before Sets the page-breaking behavior before an element 2
page-break-inside Sets the page-breaking behavior inside an element 2
widows Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element 2

Table Properties

Property Description CSS
border-collapse Specifies whether or not table borders should be collapsed 2
border-spacing Specifies the distance between the borders of adjacent cells 2
caption-side Specifies the placement of a table caption 2
empty-cells Specifies whether or not to display borders and background on empty cells in a table 2
table-layout Sets the layout algorithm to be used for a table 2

Text Properties

Property Description CSS
color Sets the color of text 1
direction Specifies the text direction/writing direction 2
letter-spacing Increases or decreases the space between characters in a text 1
line-height Sets the line height 1
text-align Specifies the horizontal alignment of text 1
text-decoration Specifies the decoration added to text 1
text-indent Specifies the indentation of the first line in a text-block 1
text-shadow Specifies the shadow effect added to text 2
text-transform Controls the capitalization of text 1
unicode-bidi
2
vertical-align Sets the vertical alignment of an element 1
white-space Specifies how white-space inside an element is handled 1
word-spacing Increases or decreases the space between words in a text 1

CSS Pseudo-classes/elements

Property Description CSS
:active Adds a style to an element that is activated 1
:after Adds content after an element 2
:before Adds content before an element 2
:first-child Adds a style to an element that is the first child of another element 2
:first-letter Adds a style to the first character of a text 1
:first-line Adds a style to the first line of a text 1
:focus Adds a style to an element that has keyboard input focus 2
:hover Adds a style to an element when you mouse over it 1
:lang Adds a style to an element with a specific lang attribute 2
:link Adds a style to an unvisited link 1
:visited Adds a style to a visited link

CSS Aural Reference

The "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2).

Property Description Values CSS
azimuth Sets where the sound should come from angle
left-side
far-left
left
center-left
center
center-right
right
far-right
right-side
behind
leftwards
rightwards		 2
cue Sets the cue properties in one declaration cue-before
cue-after		 2
cue-after Specifies a sound to be played after speaking an element's content none
url		 2
cue-before Specifies a sound to be played before speaking an element's content none
url		 2
elevation Sets where the sound should come from angle
below
level
above
higher
lower 		2
pause Sets the pause properties in one declaration pause-before
pause-after		 2
pause-after Specifies a pause after speaking an element's content time
%		 2
pause-before Specifies a pause before speaking an element's content time
%		 2
pitch Specifies the speaking voice frequency
x-low
low
medium
high
x-high 		2
pitch-range Specifies the variation in the speaking voice. (Monotone voice or animated voice?) number 2
play-during Specifies a sound to be played while speaking an element's content auto
none
url
mix
repeat		 2
richness Specifies the richness of the speaking voice. (Rich voice or thin voice?) number 2
speak Specifies whether content will render aurally normal
none
spell-out		 2
speak-header Specifies how to handle table headers. Should the headers be spoken before every cell, or only before a cell with a different header than the previous cell always
once
 2
speak-numeral Specifies how to speak numbers digits
continuous		 2
speak-punctuation Specifies how to speak punctuation characters none
code		 2
speech-rate Specifies the speed of the speaking number
x-slow
slow
medium
fast
x-fast
faster
slower 		2
stress Specifies the "stress" in the speaking voice number 2
voice-family Specifies the voice family of the speaking specific-voice
generic-voice		 2
volume Specifies the volume of the speaking number
%
silent
x-soft
soft
medium
loud
x-loud 		2

Measurements

Unit Description
% percentage
in inch
cm centimeter
mm millimeter
em 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses
ex one ex is the x-height of a font (x-height is usually about half the font-size)
pt point (1 pt is the same as 1/72 inch)
pc pica (1 pc is the same as 12 points)
px pixels (a dot on the computer screen)

Color Examples

Color Color HEX Color RGB

#000000 rgb(0,0,0)

#FF0000 rgb(255,0,0)

#00FF00 rgb(0,255,0)

#0000FF rgb(0,0,255)

#FFFF00 rgb(255,255,0)

#00FFFF rgb(0,255,255)

#FF00FF rgb(255,0,255)

#C0C0C0 rgb(192,192,192)

#FFFFFF rgb(255,255,255)
@

0 komentar:

Posting Komentar

Langganan: Posting Komentar (Atom)

Design by Luxon Alex.