Color Properties
color Sets the color of text
opacity Sets the opacity level for an element
Background and Border Properties
background A shorthand property for setting all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-blend-mode Specifies the blending mode of each background layer (color/image)
background-color Specifies the background color of an element
background-image Specifies one or more background images for an element
background-position Specifies the position of a background image
background-repeat Sets how a background image will be repeated
background-clip Specifies the painting area of the background
background-origin Specifies where the background image(s) is/are positioned
background-size Specifies the size of the background image(s)
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-left-radius Defines the shape of the border of the bottom-left corner
border-bottom-right-radius Defines the shape of the border of the bottom-right corner
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-image A shorthand property for setting all the border-image-* properties
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched
border-image-slice Specifies how to slice the border image
border-image-source Specifies the path to the image to be used as a border
border-image-width Specifies the widths of the image-border
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius A shorthand property for setting all the four border-*-radius properties
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-left-radius Defines the shape of the border of the top-left corner
border-top-right-radius Defines the shape of the border of the top-right corner
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders
box-decoration-break Sets the behaviour of the background and border of an element at page-break, or, for in-line elements, at line-break.
box-shadow Attaches one or more drop-shadows to the box
Basic Box Properties
bottom Specifies the bottom position of a positioned element
clear Specifies which sides of an element where other floating elements are not allowed
clip Clips an absolutely positioned element
display Specifies how a certain HTML element should be displayed
float Specifies whether or not a box should float
height Sets the height of an element
left Specifies the left position of a positioned element
margin Sets all the margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
overflow
Specifies what happens if content overflows an element's box
overflow-x Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area
overflow-y Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area
padding Sets all the padding properties in one declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element
position Specifies the type of positioning method used for an element (static, relative, absolute or fixed)
right Specifies the right position of a positioned element
top Specifies the top position of a positioned element
visibility Specifies whether or not an element is visible
width Sets the width of an element
vertical-align Sets the vertical alignment of an element
z-index Sets the stack order of a positioned element
Flexible Box Layout
align-content Specifies the alignment between the lines inside a flexible container when the items do not use all available space
align-items Specifies the alignment for items inside a flexible container
align-self Specifies the alignment for selected items inside a flexible container
flex Specifies the length of the item, relative to the rest
flex-basis Specifies the initial length of a flexible item
flex-direction Specifies the direction of the flexible items
flex-flow A shorthand property for the flex-direction and the flex-wrap properties
flex-grow Specifies how much the item will grow relative to the rest
flex-shrink Specifies how the item will shrink relative to the rest
flex-wrap Specifies whether the flexible items should wrap or not
justify-content Specifies the alignment between the items inside a flexible container when the items do not use all available space
order Sets the order of the flexible item, relative to the rest
Text Properties
hanging-punctuation Specifies whether a punctuation character may be placed outside the line box
hyphens Sets how to split words to improve the layout of paragraphs
letter-spacing Increases or decreases the space between characters in a text
line-break Specifies how/if to break lines
line-height Sets the line height
overflow-wrap Specifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box)
tab-size Specifies the length of the tab-character
text-align Specifies the horizontal alignment of text
text-align-last Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"
text-combine-upright Specifies the combination of multiple characters into the space of a single character
text-indent Specifies the indentation of the first line in a text-block
text-justify Specifies the justification method used when text-align is "justify"
text-transform Controls the capitalization of text
white-space Specifies how white-space inside an element is handled
word-break Specifies line breaking rules for non-CJK scripts
word-spacing Increases or decreases the space between words in a text
word-wrap Allows long, unbreakable words to be broken and wrap to the next line
Text Decoration Properties
text-decoration Specifies the decoration added to text
text-decoration-color Specifies the color of the text-decoration
text-decoration-line Specifies the type of line in a text-decoration
text-decoration-style Specifies the style of the line in a text decoration
text-shadow Adds shadow to text
text-underline-position Specifies the position of the underline which is set using the text-decoration property
Font Properties
@font-face A rule that allows websites to download and use fonts other than the "web-safe" fonts
@font-feature-values Allows authors to use a common name in font-variant-alternate for feature activated differently in OpenType
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-feature-settings Allows control over advanced typographic features in OpenType fonts
font-kerning Controls the usage of the kerning information (how letters are spaced)
font-language-override Controls the usage of language-specific glyphs in a typeface
font-size Specifies the font size of text
font-size-adjust Preserves the readability of text when font fallback occurs
font-stretch Selects a normal, condensed, or expanded face from a font family
font-style Specifies the font style for text
font-synthesis Controls which missing typefaces (bold or italic) may be synthesized by the browser
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-variant-alternates Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values
font-variant-caps Controls the usage of alternate glyphs for capital letters
font-variant-east-asian Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese)
font-variant-ligatures Controls which ligatures and contextual forms are used in textual content of the elements it applies to
font-variant-numeric Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers
font-variant-position Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font
font-weight Specifies the weight of a font
Writing Modes Properties
direction Specifies the text direction/writing direction
text-orientation Defines the orientation of the text in a line
text-combine-upright Specifies the combination of multiple characters into the space of a single character
unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
writing-mode
Table Properties
border-collapse Specifies whether or not table borders should be collapsed
border-spacing Specifies the distance between the borders of adjacent cells
caption-side Specifies the placement of a table caption
empty-cells Specifies whether or not to display borders and background on empty cells in a table
table-layout Sets the layout algorithm to be used for a table
Lists and Counters Properties
counter-increment Increments one or more counters
counter-reset Creates or resets one or more counters
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies if the list-item markers should appear inside or outside the content flow
list-style-type Specifies the type of list-item marker
Animation Properties
@keyframes Specifies the animation code
animation A shorthand property for all the animation properties (except animation-play-state and animation-fill-mode)
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether or not the animation should play in reverse on alternate cycles
animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of an animation
Transform Properties
backface-visibility Defines whether or not an element should be visible when not facing the screen
perspective Specifies the perspective on how 3D elements are viewed
perspective-origin Specifies the bottom position of 3D elements
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements
transform-style Specifies how nested elements are rendered in 3D space
Transitions Properties
transition A shorthand property for setting the four transition properties
transition-property Specifies the name of the CSS property the transition effect is for
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-timing-function Specifies the speed curve of the transition effect
transition-delay Specifies when the transition effect will start
Basic User Interface Properties
box-sizing Tells the browser what the sizing properties (width and height) should include
content Used with the :before and :after pseudo-elements, to insert generated content
cursor Specifies the type of cursor to be displayed
ime-mode Controls the state of the input method editor for text fields
nav-down Specifies where to navigate when using the arrow-down navigation key
nav-index Specifies the tabbing order for an element
nav-left Specifies where to navigate when using the arrow-left navigation key
nav-right Specifies where to navigate when using the arrow-right navigation key
nav-up Specifies where to navigate when using the arrow-up navigation key
outline Sets all the outline properties in one declaration
outline-color Sets the color of an outline
outline-offset Offsets an outline, and draws it beyond the border edge
outline-style Sets the style of an outline
outline-width Sets the width of an outline
resize Specifies whether or not an element is resizable by the user
text-overflow Specifies what should happen when text overflows the containing element
Multi-column Layout Properties
break-after Specifies the page-, column-, or region-break behavior after the generated box
break-before Specifies the page-, column-, or region-break behavior before the generated box
break-inside Specifies the page-, column-, or region-break behavior inside the generated box
column-count Specifies the number of columns an element should be divided into
column-fill Specifies how to fill columns
column-gap Specifies the gap between the columns
column-rule A shorthand property for setting all the column-rule-* properties
column-rule-color Specifies the color of the rule between columns
column-rule-style Specifies the style of the rule between columns
column-rule-width Specifies the width of the rule between columns
column-span Specifies how many columns an element should span across
column-width Specifies the width of the columns
columns A shorthand property for setting column-width and column-count
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
Paged Media
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
page-break-after Sets the page-breaking behavior after an element
page-break-before Sets the page-breaking behavior before an element
page-break-inside Sets the page-breaking behavior inside an element
Generated Content for Paged Media
marks Adds crop and/or cross marks to the document
quotes Sets the type of quotation marks for embedded quotations
Filter Effects Properties
filter Defines effects (e.g. blurring or color shifting) on an element before the element is displayed
Image Values and Replaced Content
image-orientation Specifies a rotation in the right or clockwise direction that a user agent applies to an image (This property is likely going to be deprecated and its functionality moved to HTML)
image-rendering Gives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled
image-resolution Specifies the intrinsic resolution of all raster images used in/on the element
object-fit Specifies how the contents of a replaced element should be fitted to the box established by its used height and width
object-position Specifies the alignment of the replaced element inside its box
Masking Properties
mask
mask-type
Speech Properties
mark A shorthand property for setting the mark-before and mark-after properties
mark-after Allows named markers to be attached to the audio stream
mark-before Allows named markers to be attached to the audio stream
phonemes Specifies a phonetic pronunciation for the text contained by the corresponding element
rest A shorthand property for setting the rest-before and rest-after properties
rest-after Specifies a rest or prosodic boundary to be observed after speaking an element's content
rest-before Specifies a rest or prosodic boundary to be observed before speaking an element's content
voice-balance Specifies the balance between left and right channels
voice-duration Specifies how long it should take to render the selected element's content
voice-pitch Specifies the average pitch (a frequency) of the speaking voice
voice-pitch-range Specifies variation in average pitch
voice-rate Controls the speaking rate
voice-stress Indicates the strength of emphasis to be applied
voice-volume Refers to the amplitude of the waveform output by the speech synthesises
Marquee Properties
marquee-direction Sets the direction of the moving content
marquee-play-count Sets how many times the content move
marquee-speed Sets how fast the content scrolls
marquee-style Sets the style of the moving content
CSS
Acronym for Cascading Style Sheet (defines how to display HTML elements)
selector
Specify which elements are to be influenced by the style rule
declaration
A style attached to a specific selector (consists of a property and a value)
property
The style attribute you want to change
value
Suggests how the property should be formatted
/.../
CSS comment tag
#
The selector symbol used to specify a style for a single/unique element (the element targeted must be marked with the "id" attribute)
.
The selector symbol used to specify a style for a group of elements (the elements targeted must be marked with the "class" attribute)
background
Sets all the background properties in one declaration (must be in proper order-color-image-repeat-attachment-position-inherit)
background-attachment
Sets whether a background image is fixed or scrolls with the rest of the page (scroll-fixed-inherit)
background-color
Sets the background color of an element (rgb-#hex-name-transparent-inherit)
background-image Sets the background image for an element (url(URL)-none-inherit)
background-position
Sets the starting position of a background image (textpos-x% y%-xpos ypos-inherit)
background-repeat
Sets if/how a background image will repeat (repeat--repeat-x--repeat-y--no-repeat--inherit)
color
Sets the color of a text (name-rgb-#hex)
direction
Sets the text direction (ltr-rtl)
line-height
Sets the distance between lines (normal-number-length-%)
letter-spacing
Increase or decrease the space between characters (normal-length)
text-align
Aligns the text in an element (left-right-center-justify)
text-decoration
Adds or removes decoration to/from text (none--underline--overline--line-through--blink)
text-indent
Indents the first line of text in an element (length-%)
text-transform
Controls the letters in an element (none-capitalize-uppercase-lowercase)
vertical-align
Sets the vertical alignment of an element (baseline--sub--super--top--text-top--middle--bottom-text-bottom--length--%)
white-space
Sets how white space inside of an element is handled (normal-pre-nowrap)
word-spacing
Increase or decrease the space between words (normal-length)
font
Sets all the font properties in one declaration (must be in proper order and the font-size and font-family values are required)
font-family
Specifies the font family for text (family-name--generic-family--inherit)
font-size
Specifies the font size of text (generalsize-length-%-inherit)
font-style
Specifies the font style for text (normal-italic-oblique-inherit)
font-variant
Specifies weather or not a text should be displayed in a small-caps font (normal--small-caps--inherit)
font-weight
Specifies the weight of a font (normal-bold-bolder-lighter-size-inherit)
a:link
The unvisited link selector
a:visited
The visited link selector
a:hover
Mouse over link selector (MUST come AFTER a:link and a:visited)
a:active
Selected link selector (MUST come AFTER a:hover)
list-style
Sets all the properties for a list in one declaration (must be in proper order)
list-style-image
Specifies an image as the list-item marker (url(URL)-none-inherit)
list-style-position
Specifies if the list-item marker should appear inside or outside the content flow (inside-outside-inherit)
list-style-type
Specifies the type of list-item marker
vertical-align
Sets the vertical alignment (top-bottom-middle)
border-style
Specifies what kind of border to display (MUST be included for other border properties to work)
border-color
Sets the color of the four borders
border-width
Sets the width of the four borders
border
Sets all the border properties in one declaration (must be in proper order)
border-bottom
Sets all the bottom border properties in one declaration (must be in proper order)
border-bottom-style
Sets the style of the bottom border
border-bottom-color
Sets the color of the bottom border
border-bottom-width
Sets the width of the bottom border
outline
A line drawn around elements (outside the border edge to make the element "stand out" - sets all outline properties in one decliration)
outline-color
Sets the color of the outline
outline-style
Sets the style of an outline
outline-width
Sets the width of an outline
margin
Clears an area round an element which is also outside of the border and is completely transparant
margin-bottom
Sets the bottom margin of an element (auto-length-%)
padding
Clears an area around the content which is inside of the border of an element (length-%)
padding-bottom
Sets the bottom padding of an element (length-%)
background-color: #b0c4de;
specifies the background color of an element.
background-image: url("image01.jpg");
specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
specifies background-imgage repeat method
background-position: right top;
specifies backgound-image position
background: #ff22ff url("image01.jpg") no-repeat right top;
Background - Shortand property
color: red;
is used to set the color of the text;
If you define the
text-align: center;
text-align: left;
text-align: justify;
is used to set the horizontal alignment of a text.
text-decoration: none;
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
is used to set or remove decorations from text.
is mostly used to remove underlines from links for design purposes.
It is not recommended to underline text that is not a link.
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
is used to specify uppercase and lowercase letters in a text.
text-indent: 50px;
is used to specify the indentation of the first line of a text.
font-family: "Times New Roman", Times, serif;
*two family: generic family, font family
Start with the font you want, emd with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
font-style: normal;
font-style: italic;
is mostly used to specify italic text.
font-size: 40px;
sets the size of the text.
The XXX value can be an absolute, or relative size.
The default size for normal text, like paragraphs, is 16px (16px=1em)
font-size: 2.5em;
font-size: 100%;
The default size of 1 XX is 16px. The XX size unit is recommended by the W3C.
The solution that works in all browsers, is to set a default font-size in percent for the <body> element
font: italic bold 12px/30px Georgia, serif;
shorthand notation. 12px is font-size, 30px is line-height.
a:link {color: blue;}
link state is a normal, unvisited link.
a:visited {color: blue;}
a link the user has visited
a:hover {text-decoration: underline;}
a link when the user mouses over it
XXX MUST come after a:link and a:visited
a:active {text-decoration: underline;}
a link the moment it is clicked
XXX MUST come after a:hover.
ul {list-style-type: circle;}
ul {list-style-type: square;}
The type of list item marker is specified with the XXX property
ol {list-style-type: upper-roman;}
ol {list-style-type: lower-alpha;}
The type of list item marker is specified with the XXX property
ul {list-style-image: url('image01.jpg');}
specifies an image as the list item marker.
ul {list-style: square inside url("image01.jpg");}
shorthand property. is used to set all the list properties in on declaration.
table {border: 1px solid black;}
specifies table borders in CSS.
table {width: 100%;}
th {height: 50px;}
define the width and height properties in a <table>.
td {height: 50px; vertical-align:bottom; text-align: center;}
define height, aligns properties in a <td>.
div {
width: 300px;
padding: 25px;
border: 25px solid naby;
margin: 25px;
}
A: where text and images apear
B: Clears an area around the content
C: goes around the padding and content
D: Clears an area outside the border.
p {border: 2px solid red;}
specifies the style, size, and color of an element's XXX
*style: solid, dotted, dashed, double
p {margin: 25px 50px 75px 100px;}
Clears an area outside the border.
top XXX is 25px,
right XXX is 50px,
bottom margin is 75px,
left margin is 100px
p {
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}
Clears an area around the content.
top XXX is 25px,
right XXX is 50px,
bottom margin is 25px,
left margin is 50px
li {display: inline;}
span {display: block;}
h1.hidden {display: none;}
h1.hidden {visibility: hidden;}
change display value.
visiblility: hidden; is still take up the same space as before.
color Sets the color of text
opacity Sets the opacity level for an element
Background and Border Properties
background A shorthand property for setting all the background properties in one declaration
background-attachment Sets whether a background image is fixed or scrolls with the rest of the page
background-blend-mode Specifies the blending mode of each background layer (color/image)
background-color Specifies the background color of an element
background-image Specifies one or more background images for an element
background-position Specifies the position of a background image
background-repeat Sets how a background image will be repeated
background-clip Specifies the painting area of the background
background-origin Specifies where the background image(s) is/are positioned
background-size Specifies the size of the background image(s)
border Sets all the border properties in one declaration
border-bottom Sets all the bottom border properties in one declaration
border-bottom-color Sets the color of the bottom border
border-bottom-left-radius Defines the shape of the border of the bottom-left corner
border-bottom-right-radius Defines the shape of the border of the bottom-right corner
border-bottom-style Sets the style of the bottom border
border-bottom-width Sets the width of the bottom border
border-color Sets the color of the four borders
border-image A shorthand property for setting all the border-image-* properties
border-image-outset Specifies the amount by which the border image area extends beyond the border box
border-image-repeat Specifies whether the border image should be repeated, rounded or stretched
border-image-slice Specifies how to slice the border image
border-image-source Specifies the path to the image to be used as a border
border-image-width Specifies the widths of the image-border
border-left Sets all the left border properties in one declaration
border-left-color Sets the color of the left border
border-left-style Sets the style of the left border
border-left-width Sets the width of the left border
border-radius A shorthand property for setting all the four border-*-radius properties
border-right Sets all the right border properties in one declaration
border-right-color Sets the color of the right border
border-right-style Sets the style of the right border
border-right-width Sets the width of the right border
border-style Sets the style of the four borders
border-top Sets all the top border properties in one declaration
border-top-color Sets the color of the top border
border-top-left-radius Defines the shape of the border of the top-left corner
border-top-right-radius Defines the shape of the border of the top-right corner
border-top-style Sets the style of the top border
border-top-width Sets the width of the top border
border-width Sets the width of the four borders
box-decoration-break Sets the behaviour of the background and border of an element at page-break, or, for in-line elements, at line-break.
box-shadow Attaches one or more drop-shadows to the box
Basic Box Properties
bottom Specifies the bottom position of a positioned element
clear Specifies which sides of an element where other floating elements are not allowed
clip Clips an absolutely positioned element
display Specifies how a certain HTML element should be displayed
float Specifies whether or not a box should float
height Sets the height of an element
left Specifies the left position of a positioned element
margin Sets all the margin properties in one declaration
margin-bottom Sets the bottom margin of an element
margin-left Sets the left margin of an element
margin-right Sets the right margin of an element
margin-top Sets the top margin of an element
max-height Sets the maximum height of an element
max-width Sets the maximum width of an element
min-height Sets the minimum height of an element
min-width Sets the minimum width of an element
overflow
Specifies what happens if content overflows an element's box
overflow-x Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area
overflow-y Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area
padding Sets all the padding properties in one declaration
padding-bottom Sets the bottom padding of an element
padding-left Sets the left padding of an element
padding-right Sets the right padding of an element
padding-top Sets the top padding of an element
position Specifies the type of positioning method used for an element (static, relative, absolute or fixed)
right Specifies the right position of a positioned element
top Specifies the top position of a positioned element
visibility Specifies whether or not an element is visible
width Sets the width of an element
vertical-align Sets the vertical alignment of an element
z-index Sets the stack order of a positioned element
Flexible Box Layout
align-content Specifies the alignment between the lines inside a flexible container when the items do not use all available space
align-items Specifies the alignment for items inside a flexible container
align-self Specifies the alignment for selected items inside a flexible container
flex Specifies the length of the item, relative to the rest
flex-basis Specifies the initial length of a flexible item
flex-direction Specifies the direction of the flexible items
flex-flow A shorthand property for the flex-direction and the flex-wrap properties
flex-grow Specifies how much the item will grow relative to the rest
flex-shrink Specifies how the item will shrink relative to the rest
flex-wrap Specifies whether the flexible items should wrap or not
justify-content Specifies the alignment between the items inside a flexible container when the items do not use all available space
order Sets the order of the flexible item, relative to the rest
Text Properties
hanging-punctuation Specifies whether a punctuation character may be placed outside the line box
hyphens Sets how to split words to improve the layout of paragraphs
letter-spacing Increases or decreases the space between characters in a text
line-break Specifies how/if to break lines
line-height Sets the line height
overflow-wrap Specifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box)
tab-size Specifies the length of the tab-character
text-align Specifies the horizontal alignment of text
text-align-last Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"
text-combine-upright Specifies the combination of multiple characters into the space of a single character
text-indent Specifies the indentation of the first line in a text-block
text-justify Specifies the justification method used when text-align is "justify"
text-transform Controls the capitalization of text
white-space Specifies how white-space inside an element is handled
word-break Specifies line breaking rules for non-CJK scripts
word-spacing Increases or decreases the space between words in a text
word-wrap Allows long, unbreakable words to be broken and wrap to the next line
Text Decoration Properties
text-decoration Specifies the decoration added to text
text-decoration-color Specifies the color of the text-decoration
text-decoration-line Specifies the type of line in a text-decoration
text-decoration-style Specifies the style of the line in a text decoration
text-shadow Adds shadow to text
text-underline-position Specifies the position of the underline which is set using the text-decoration property
Font Properties
@font-face A rule that allows websites to download and use fonts other than the "web-safe" fonts
@font-feature-values Allows authors to use a common name in font-variant-alternate for feature activated differently in OpenType
font Sets all the font properties in one declaration
font-family Specifies the font family for text
font-feature-settings Allows control over advanced typographic features in OpenType fonts
font-kerning Controls the usage of the kerning information (how letters are spaced)
font-language-override Controls the usage of language-specific glyphs in a typeface
font-size Specifies the font size of text
font-size-adjust Preserves the readability of text when font fallback occurs
font-stretch Selects a normal, condensed, or expanded face from a font family
font-style Specifies the font style for text
font-synthesis Controls which missing typefaces (bold or italic) may be synthesized by the browser
font-variant Specifies whether or not a text should be displayed in a small-caps font
font-variant-alternates Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values
font-variant-caps Controls the usage of alternate glyphs for capital letters
font-variant-east-asian Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese)
font-variant-ligatures Controls which ligatures and contextual forms are used in textual content of the elements it applies to
font-variant-numeric Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers
font-variant-position Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font
font-weight Specifies the weight of a font
Writing Modes Properties
direction Specifies the text direction/writing direction
text-orientation Defines the orientation of the text in a line
text-combine-upright Specifies the combination of multiple characters into the space of a single character
unicode-bidi Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document
writing-mode
Table Properties
border-collapse Specifies whether or not table borders should be collapsed
border-spacing Specifies the distance between the borders of adjacent cells
caption-side Specifies the placement of a table caption
empty-cells Specifies whether or not to display borders and background on empty cells in a table
table-layout Sets the layout algorithm to be used for a table
Lists and Counters Properties
counter-increment Increments one or more counters
counter-reset Creates or resets one or more counters
list-style Sets all the properties for a list in one declaration
list-style-image Specifies an image as the list-item marker
list-style-position Specifies if the list-item markers should appear inside or outside the content flow
list-style-type Specifies the type of list-item marker
Animation Properties
@keyframes Specifies the animation code
animation A shorthand property for all the animation properties (except animation-play-state and animation-fill-mode)
animation-delay Specifies a delay for the start of an animation
animation-direction Specifies whether or not the animation should play in reverse on alternate cycles
animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle
animation-fill-mode Specifies a style for the element when the animation is not playing (when it is finished, or when it has a delay)
animation-iteration-count Specifies the number of times an animation should be played
animation-name Specifies the name of the @keyframes animation
animation-play-state Specifies whether the animation is running or paused
animation-timing-function Specifies the speed curve of an animation
Transform Properties
backface-visibility Defines whether or not an element should be visible when not facing the screen
perspective Specifies the perspective on how 3D elements are viewed
perspective-origin Specifies the bottom position of 3D elements
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements
transform-style Specifies how nested elements are rendered in 3D space
Transitions Properties
transition A shorthand property for setting the four transition properties
transition-property Specifies the name of the CSS property the transition effect is for
transition-duration Specifies how many seconds or milliseconds a transition effect takes to complete
transition-timing-function Specifies the speed curve of the transition effect
transition-delay Specifies when the transition effect will start
Basic User Interface Properties
box-sizing Tells the browser what the sizing properties (width and height) should include
content Used with the :before and :after pseudo-elements, to insert generated content
cursor Specifies the type of cursor to be displayed
ime-mode Controls the state of the input method editor for text fields
nav-down Specifies where to navigate when using the arrow-down navigation key
nav-index Specifies the tabbing order for an element
nav-left Specifies where to navigate when using the arrow-left navigation key
nav-right Specifies where to navigate when using the arrow-right navigation key
nav-up Specifies where to navigate when using the arrow-up navigation key
outline Sets all the outline properties in one declaration
outline-color Sets the color of an outline
outline-offset Offsets an outline, and draws it beyond the border edge
outline-style Sets the style of an outline
outline-width Sets the width of an outline
resize Specifies whether or not an element is resizable by the user
text-overflow Specifies what should happen when text overflows the containing element
Multi-column Layout Properties
break-after Specifies the page-, column-, or region-break behavior after the generated box
break-before Specifies the page-, column-, or region-break behavior before the generated box
break-inside Specifies the page-, column-, or region-break behavior inside the generated box
column-count Specifies the number of columns an element should be divided into
column-fill Specifies how to fill columns
column-gap Specifies the gap between the columns
column-rule A shorthand property for setting all the column-rule-* properties
column-rule-color Specifies the color of the rule between columns
column-rule-style Specifies the style of the rule between columns
column-rule-width Specifies the width of the rule between columns
column-span Specifies how many columns an element should span across
column-width Specifies the width of the columns
columns A shorthand property for setting column-width and column-count
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
Paged Media
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
page-break-after Sets the page-breaking behavior after an element
page-break-before Sets the page-breaking behavior before an element
page-break-inside Sets the page-breaking behavior inside an element
Generated Content for Paged Media
marks Adds crop and/or cross marks to the document
quotes Sets the type of quotation marks for embedded quotations
Filter Effects Properties
filter Defines effects (e.g. blurring or color shifting) on an element before the element is displayed
Image Values and Replaced Content
image-orientation Specifies a rotation in the right or clockwise direction that a user agent applies to an image (This property is likely going to be deprecated and its functionality moved to HTML)
image-rendering Gives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled
image-resolution Specifies the intrinsic resolution of all raster images used in/on the element
object-fit Specifies how the contents of a replaced element should be fitted to the box established by its used height and width
object-position Specifies the alignment of the replaced element inside its box
Masking Properties
mask
mask-type
Speech Properties
mark A shorthand property for setting the mark-before and mark-after properties
mark-after Allows named markers to be attached to the audio stream
mark-before Allows named markers to be attached to the audio stream
phonemes Specifies a phonetic pronunciation for the text contained by the corresponding element
rest A shorthand property for setting the rest-before and rest-after properties
rest-after Specifies a rest or prosodic boundary to be observed after speaking an element's content
rest-before Specifies a rest or prosodic boundary to be observed before speaking an element's content
voice-balance Specifies the balance between left and right channels
voice-duration Specifies how long it should take to render the selected element's content
voice-pitch Specifies the average pitch (a frequency) of the speaking voice
voice-pitch-range Specifies variation in average pitch
voice-rate Controls the speaking rate
voice-stress Indicates the strength of emphasis to be applied
voice-volume Refers to the amplitude of the waveform output by the speech synthesises
Marquee Properties
marquee-direction Sets the direction of the moving content
marquee-play-count Sets how many times the content move
marquee-speed Sets how fast the content scrolls
marquee-style Sets the style of the moving content
CSS
Acronym for Cascading Style Sheet (defines how to display HTML elements)
selector
Specify which elements are to be influenced by the style rule
declaration
A style attached to a specific selector (consists of a property and a value)
property
The style attribute you want to change
value
Suggests how the property should be formatted
/.../
CSS comment tag
#
The selector symbol used to specify a style for a single/unique element (the element targeted must be marked with the "id" attribute)
.
The selector symbol used to specify a style for a group of elements (the elements targeted must be marked with the "class" attribute)
background
Sets all the background properties in one declaration (must be in proper order-color-image-repeat-attachment-position-inherit)
background-attachment
Sets whether a background image is fixed or scrolls with the rest of the page (scroll-fixed-inherit)
background-color
Sets the background color of an element (rgb-#hex-name-transparent-inherit)
background-image Sets the background image for an element (url(URL)-none-inherit)
background-position
Sets the starting position of a background image (textpos-x% y%-xpos ypos-inherit)
background-repeat
Sets if/how a background image will repeat (repeat--repeat-x--repeat-y--no-repeat--inherit)
color
Sets the color of a text (name-rgb-#hex)
direction
Sets the text direction (ltr-rtl)
line-height
Sets the distance between lines (normal-number-length-%)
letter-spacing
Increase or decrease the space between characters (normal-length)
text-align
Aligns the text in an element (left-right-center-justify)
text-decoration
Adds or removes decoration to/from text (none--underline--overline--line-through--blink)
text-indent
Indents the first line of text in an element (length-%)
text-transform
Controls the letters in an element (none-capitalize-uppercase-lowercase)
vertical-align
Sets the vertical alignment of an element (baseline--sub--super--top--text-top--middle--bottom-text-bottom--length--%)
white-space
Sets how white space inside of an element is handled (normal-pre-nowrap)
word-spacing
Increase or decrease the space between words (normal-length)
font
Sets all the font properties in one declaration (must be in proper order and the font-size and font-family values are required)
font-family
Specifies the font family for text (family-name--generic-family--inherit)
font-size
Specifies the font size of text (generalsize-length-%-inherit)
font-style
Specifies the font style for text (normal-italic-oblique-inherit)
font-variant
Specifies weather or not a text should be displayed in a small-caps font (normal--small-caps--inherit)
font-weight
Specifies the weight of a font (normal-bold-bolder-lighter-size-inherit)
a:link
The unvisited link selector
a:visited
The visited link selector
a:hover
Mouse over link selector (MUST come AFTER a:link and a:visited)
a:active
Selected link selector (MUST come AFTER a:hover)
list-style
Sets all the properties for a list in one declaration (must be in proper order)
list-style-image
Specifies an image as the list-item marker (url(URL)-none-inherit)
list-style-position
Specifies if the list-item marker should appear inside or outside the content flow (inside-outside-inherit)
list-style-type
Specifies the type of list-item marker
vertical-align
Sets the vertical alignment (top-bottom-middle)
border-style
Specifies what kind of border to display (MUST be included for other border properties to work)
border-color
Sets the color of the four borders
border-width
Sets the width of the four borders
border
Sets all the border properties in one declaration (must be in proper order)
border-bottom
Sets all the bottom border properties in one declaration (must be in proper order)
border-bottom-style
Sets the style of the bottom border
border-bottom-color
Sets the color of the bottom border
border-bottom-width
Sets the width of the bottom border
outline
A line drawn around elements (outside the border edge to make the element "stand out" - sets all outline properties in one decliration)
outline-color
Sets the color of the outline
outline-style
Sets the style of an outline
outline-width
Sets the width of an outline
margin
Clears an area round an element which is also outside of the border and is completely transparant
margin-bottom
Sets the bottom margin of an element (auto-length-%)
padding
Clears an area around the content which is inside of the border of an element (length-%)
padding-bottom
Sets the bottom padding of an element (length-%)
background-color: #b0c4de;
specifies the background color of an element.
background-image: url("image01.jpg");
specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.
background-repeat: no-repeat;
background-repeat: repeat-x;
background-repeat: repeat-y;
specifies background-imgage repeat method
background-position: right top;
specifies backgound-image position
background: #ff22ff url("image01.jpg") no-repeat right top;
Background - Shortand property
color: red;
is used to set the color of the text;
If you define the
text-align: center;
text-align: left;
text-align: justify;
is used to set the horizontal alignment of a text.
text-decoration: none;
text-decoration: overline;
text-decoration: line-through;
text-decoration: underline;
is used to set or remove decorations from text.
is mostly used to remove underlines from links for design purposes.
It is not recommended to underline text that is not a link.
text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;
is used to specify uppercase and lowercase letters in a text.
text-indent: 50px;
is used to specify the indentation of the first line of a text.
font-family: "Times New Roman", Times, serif;
*two family: generic family, font family
Start with the font you want, emd with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
font-style: normal;
font-style: italic;
is mostly used to specify italic text.
font-size: 40px;
sets the size of the text.
The XXX value can be an absolute, or relative size.
The default size for normal text, like paragraphs, is 16px (16px=1em)
font-size: 2.5em;
font-size: 100%;
The default size of 1 XX is 16px. The XX size unit is recommended by the W3C.
The solution that works in all browsers, is to set a default font-size in percent for the <body> element
font: italic bold 12px/30px Georgia, serif;
shorthand notation. 12px is font-size, 30px is line-height.
a:link {color: blue;}
link state is a normal, unvisited link.
a:visited {color: blue;}
a link the user has visited
a:hover {text-decoration: underline;}
a link when the user mouses over it
XXX MUST come after a:link and a:visited
a:active {text-decoration: underline;}
a link the moment it is clicked
XXX MUST come after a:hover.
ul {list-style-type: circle;}
ul {list-style-type: square;}
The type of list item marker is specified with the XXX property
ol {list-style-type: upper-roman;}
ol {list-style-type: lower-alpha;}
The type of list item marker is specified with the XXX property
ul {list-style-image: url('image01.jpg');}
specifies an image as the list item marker.
ul {list-style: square inside url("image01.jpg");}
shorthand property. is used to set all the list properties in on declaration.
table {border: 1px solid black;}
specifies table borders in CSS.
table {width: 100%;}
th {height: 50px;}
define the width and height properties in a <table>.
td {height: 50px; vertical-align:bottom; text-align: center;}
define height, aligns properties in a <td>.
div {
width: 300px;
padding: 25px;
border: 25px solid naby;
margin: 25px;
}
A: where text and images apear
B: Clears an area around the content
C: goes around the padding and content
D: Clears an area outside the border.
p {border: 2px solid red;}
specifies the style, size, and color of an element's XXX
*style: solid, dotted, dashed, double
p {margin: 25px 50px 75px 100px;}
Clears an area outside the border.
top XXX is 25px,
right XXX is 50px,
bottom margin is 75px,
left margin is 100px
p {
padding-top: 25px;
padding-right: 50px;
padding-bottom: 25px;
padding-left: 50px;
}
Clears an area around the content.
top XXX is 25px,
right XXX is 50px,
bottom margin is 25px,
left margin is 50px
li {display: inline;}
span {display: block;}
h1.hidden {display: none;}
h1.hidden {visibility: hidden;}
change display value.
visiblility: hidden; is still take up the same space as before.
Great post.Thanks for one marvelous posting!The information was very useful, all these software are really helpful. look this article for top Programming Languages for Development of the year
ОдговориИзбриши