About CSS1, CSS2, CSS3

CSS1(Cascading Style Sheets, Level 1), the earliest generation of CSS. In the early DAYS of HTML pages, most of them used tags to show the style of elements. At this time, CSS was mainly used for the presentation of HTML elements, so the main content is text, color, background, box model.

CSS2(Cascading Style Sheets, Level 2), as the first generation of CSS mixes WITH HTML, proposes a separation of presentation and content, where CSS is about presentation and HTML is about content. The selector is richer and more independent than CSS1, with new style attributes and positioning added.

CSS3(Cascading Style Sheets, Level 3), this generation of CSS is moving towards modularity, with richer styles and more cool effects such as transitions, animations, transformations, and flexible boxes for easy layout.

Below is a breakdown of three generations of CSS styles for easy reference and understanding.

CSS1

The selector Selectors

selector The name of the type describe
T Type Selector Element selector Use the document language object type as a selector (such as P)
#myid Id Selector Element selector Take E objects whose unique identifier ID attribute is equal to myID as selectors
.myclass Class Selector Element selector Use E objects with myClass attributes as selectors
E F Include selector Relational selector Select all F elements contained by E elements
E:link Pseudo class selector Sets the style of hyperlink A before it is accessed
E:visited Pseudo class selector Sets the style of hyperlink A when its link address has been accessed
E:hover Pseudo class selector Sets the style of the element when it is hovered over
E:active Pseudo class selector Sets the style of the element when activated by the user (events that occur between mouse click and release)
E:focus Pseudo class selector Sets the style of the element when it becomes the input focus (the element’s onfocus event occurs)
E:first-letter Pseudo element selector Sets the style of the first character in the object
E:first-line Pseudo element selector Sets the style of the first line inside the object

The attribute Properties

Layout of the Layout

attribute inheritance describe
float There is no Defines float placement of elements to the left or right
clear There is no Defines whether an element can be placed next to the floating element that precedes it, or must be moved down to be placed in a new line

Dimensions and padding

attribute inheritance describe
width There is no Defines the width of the element’s Content Area
height There is no Defines the height of the element’s Content Area
margin There is no Sets margins in all four directions (top, right, bottom, and left) for the element
margin-* There is no Sets the margin for the element in a certain direction. * can be top, right, bottom, left
padding There is no Set an inner margin for the element in all four directions (top, right, bottom, and left), the space between the content and the element boundary
padding-* There is no Set the interior margin of the element in a certain direction. * can be top, right, bottom, left

Background

attribute inheritance describe
background There is no Shorthand properties. Defines the background properties of the element
background-color There is no Defines the background color used by the element
background-image There is no Defines the background image used by the element
background-repeat There is no How is the background image of the defining element filled
background-attachment There is no Defines which background image is fixed relative to the scroll
background-position There is no Specifies where the background image appears in the element

Border

attribute inheritance describe
border There is no Shorthand properties. Defines the appearance characteristics of an element’s borders
border-width There is no Shorthand properties. Defines the border thickness of the element, applied to the four edges in the order of top, right, bottom, and left
border-*-width There is no Split properties. Defines the border thickness of an element. * can be top, right, bottom, left
border-style There is no Shorthand properties. Defines the border style of the element, applying it up, right, down, and left
border-*-style There is no Split properties. Defines a border style for an element. * can be top, right, bottom, left
border-color There is no Shorthand properties. Defines the border color of an element, applying it up, right, down, and left
border-*-color There is no Split properties. Defines the border color of an element. * can be top, right, bottom, left

Color

attribute inheritance describe
color There are Specify the color

Font (Font)

attribute inheritance describe
font There are Shorthand properties. Defines the textual properties of the element
font-family There are Defines the sequence of font names for element text
font-size There are Defines the font size of the element
font-weight There are Defines the font size of the element text
font-style There are Specifies whether the text of the element is italic
font-variant There are Defines whether the text of the element is small uppercase

Text

attribute inheritance describe
text-transform There are How does the text that defines an element convert case
text-indent There are Defines the indentation of text content within a block
text-align There are Defines the horizontal alignment of element content
vertical-align There is no Defines the vertical alignment of inline elements within the row box
line-height There are Defines the minimum height of a row box in an element
word-spacing There are Specify additional gaps between words
letter-spacing There are Specifies additional gaps between characters
white-space There are Specifies whether the element preserves Spaces between text lines. Specifies whether to wrap text when it exceeds a boundary

Text Decoration

attribute inheritance describe
text-decoration There is no Text decoration style, underline, delete line

List

attribute inheritance describe
list-style There are Compound properties. Set the items related to the list
list-style-image There are Sets or retrieves an image marked as a list item for an object
list-style-position There are Set or retrieve how list item tags as objects are arranged according to text
list-style-type There are Sets or retrieves the default tag used by a list item of an object

Only IE

attribute inheritance describe
scrollbar-3dlight-color There are Retrieves or sets the appearance color of the object’s scrollbar 3D ThreedlightShadow
scrollbar-darkshadow-color There are Retrieves or sets the appearance color of the object’s scrollbar 3D ThreedDarkShadow
scrollbar-highlight-color There are Retrieves or sets the appearance color of the object’s scrollbar 3D highlight border
scrollbar-shadow-color There are Retrieves or sets the appearance color of the object’s scrollbar 3D ThreedShadow
scrollbar-arrow-color There are Retrieves or sets the color of the object scroll bar direction arrow. This property becomes invalid when the scrollbar is present but not available
scrollbar-face-color There are Retrieves or sets the look and feel color of the object’s scrollbar 3D surface
scrollbar-track-color There are Retrieves or sets the appearance color of the object’s scrollbar drag area
scrollbar-base-color There are Retrieves or sets the base color of the object’s scrollbar, and other interface colors are automatically adjusted accordingly
filter There are Sets or retrieves the effect of the filter applied to the object
behavior There are Sets or retrieves the DHTML behavior of an object

CSS2

Only the new content in CSS2 is listed here, including selectors and properties (new property values are not listed).

Selectors

selector The name of the type describe
* Universal Selector Element selector All element objects
E>F Child Combinator Relational selector Select all F elements that are direct children of E
E+F Adjacent Sibling Combinator Relational selector Select the F element right after the E element
E[attr] Property selector Select the E element with the ATT attribute
E[attr=”val”] Property selector Select the E element with the ATT attribute
E[attr~=”val”] Property selector Select the E element of a whitespace delimited list of words that has the att attribute and whose attribute value is equal to val
E[attr|=”val] Property selector The E element with the att attribute whose value is a string beginning with val and delimited by the hyphen “-” is selected if the attribute value is only val
E:lang(fr) Pseudo class selector Matches E elements that use a special language
E:first-child Pseudo class selector Matches E, the first child of the parent element
E:before Pseudo element selector Sets what happens in front of the object (according to the logical structure of the object tree). Used with the Content property
E:after Pseudo element selector Sets what happens after the object (according to the logical structure of the object tree). Used with the Content property

Properties

Positioning

attribute inheritance describe
position There is no Used to specify how an element is positioned in a document
top There is no Defines the offset between the upper margin of an element and the upper margin of its containing block
right There is no Defines the offset between the right margin of an element and the right margin of its containing block
bottom There is no Defines the offset between the bottom margin of an element and the bottom margin of its containing block
left There is no Defines the offset between the left margin of an element and the left margin of its containing block
clip There is no Defines which parts of an element are visible. The part outside the region is transparent
z-index There is no Defines the order in which an element is stacked in a document

Layout (Layout)

attribute inheritance describe
display There is no Defines whether elements are displayed and which boxes are generated for display
visibility There are Defines whether an element is visible. Unlike the display property, this property reserves the physical space occupied by the hidden object
overflow There is no Shorthand properties. Defines how elements handle overflow content
overflow-* There is no Split properties. Defines how elements handle overflow content. The star could be x, y

Dimensions and padding

attribute inheritance describe
min-width There is no Defines the minimum width of the element’s Content Area
max-width There is no Defines the maximum width of the element’s Content Area
min-height There is no Defines the minimum height of the element’s Content Area
max-height There is no Defines the maximum height of an element’s Content Area

Writing Modes

attribute inheritance describe
direction There are Retrieves or sets the direction of the text stream
unicode-bidi There is no Used to display text that has been read from different directions on the same page. Used with the <‘ direction ‘> attribute

Table 1.

attribute inheritance describe
table-layout There is no Sets or retrieves the layout algorithm for the table
border-collapse There are Sets or retrieves whether the rows and cell edges of the table are combined or separated according to standard HTML styles
border-spacing There are Sets or retrieves the horizontal and vertical spacing of the row and cell borders when the table borders are independent
caption-side There are The Caption object that sets or retrieves the table is on that side of the table
epmty-cells There are Sets or retrieves whether the border of a table cell is displayed when the cell has no content

Content

attribute inheritance describe
content There is no Used with :after and :before pseudo-elements to display content before or after an object
counter-increment There is no Sets the value to be incremented when a selector occurs
counter-reset There is no Resets the specified selector counter
quotes There are Sets or retrieves the nested tags used within the object

User Interface

attribute inheritance describe
outline There is no Compound properties. Sets or retrieves a line outline outside the object
outline-width There is no Sets or retrieves the width of a line outline outside the object
outline-style There is no Sets or retrieves the style of a line outline outside the object
outline-color There is no Sets or retrieves the color of a line outline outside the object
cursor There are Sets or retrieves what system-predefined cursor shape a mouse pointer moves over an object

Printing

attribute inheritance describe
page-break-before There is no Retrieves or sets the page divider that precedes the object
page-break-after There is no Retrieves or sets the page divider that appears after the object
page-break-inside There is no Retrieves or sets the page divider that appears inside the object container

CSS3

Only the new content in CSS3 is listed here, including selectors and properties (new property values are not listed).

Selectors

selector The name of the type describe
* Universal Selector Element selector All element objects
E~F Adjacent Sibling Combinator Relational selector Select all the siblings of E, F
E[att^=”val”] Property selector Select the E element that has the att attribute and whose value is a string beginning with val
E[att$=”val”] Property selector Select the E element that has the att attribute and the attribute value is a string ending in val
E[att*=”val”] Property selector Select the E element that has the att attribute and the attribute value is a string containing val
E:not(s) Pseudo class selector Matches the element E that does not contain the s selector
E:root Pseudo class selector Matches the E element at the root of the document
E:last-child Pseudo class selector Matches E, the last child of the parent element.
E:only-child Pseudo class selector Matches the parent element’s only child, E.
E:nth-child(n) Pseudo class selector Matches the NTH child E of the parent element.
E:nth-last-child(n) Pseudo class selector Matches the penultimate NTH child E of the parent element.
E:first-of-type Pseudo class selector Matches the first child of type E of the parent element.
E:last-of-type Pseudo class selector Matches the penultimate of all E children under the parent element.
E:only-of-type Pseudo class selector Matches the unique child element E of all the children of the parent element.
E:nth-of-type(n) Pseudo class selector Matches the NTH child E of the parent element.
E:nth-last-of-type(n) Pseudo class selector Matches the penultimate NTH child E of the parent element.
E:empty Pseudo class selector Matches element E that does not have any children, including the text node.
E:checked Pseudo class selector Matches the selected element E on the user interface. (used when input type is radio and checkbox)
E:enabled Pseudo class selector Matches the element E in the available state on the user interface.
E:disabled Pseudo class selector Matches the disabled element E on the user interface.
E:target Pseudo class selector Matches the E element pointed to by the relevant URL.
E::placeholder Pseudo element selector Sets the style of object text placeholders.
E::selection Pseudo element selector Sets the color of the selected object.

Properties

Border

attribute inheritance describe
box-shadow There is no Defines the shadow of an element
border-radius There is no Shorthand properties. Define the rounded corners of the element
border-image There is no Shorthand properties. Defines the application of an image to the border of an element
border-image-source There is no The image used to define the element’s border style.
border-image-slice There is no Used to specify which 4 positions to split the image from (following the order of top, right, bottom, left)
border-image-width There is no Defines the thickness of the element border image
border-image-outset There is no Defines how far the border image is offset outward from the border
border-image-repeat There is no Define how the split image fills the border image region

Color (Color)

attribute inheritance describe
opacity There is no Defines the opacity of the element

Font (Font)

attribute inheritance describe
font-stretch There are Defines whether the text of an element is stretched horizontally
font-size-adjust There are Defines the ratio of the height of the lowercase letter X to the font size of the object.

Text

attribute inheritance describe
tab-size There are Defines the length of tabs in element content
word-break There are Defines line breaks between words and characters of element content text
word-wrap/overflow-wrap There are Define element content how does the text wrap when it encounters a boundary
text-align-last There are Defines the alignment of the last line of text content in the block (including the first and last line if there is only one line of text in the block) or the line that is forced to break
text-justify There are Define how to align the two ends of text content
text-size-adjust There are Define how to resize element text in mobile pages

Text Decoration

attribute inheritance describe
text-decoration-line There is no Defines where the element text trim line is located in the text
text-decoration-color There is no Specifies the color of the element text trim line
text-decoration-style There is no Defines the shape of the element text decorative line
text-decoration-skip There are Defines which parts of the content the element text trim must skip
text-underline-position There are Defines the location of element trim lines
text-shadow There are Defines whether text has shadow and blur effects

Writing Modes

attribute inheritance describe
writing-mode There are Sets or retrieves the inherent writing direction of the object’s content block

User Interface

attribute inheritance describe
appearance There is no Set or retrieve the appearance to the native default style
text-overflow There is no When block container overflow is non-visible, define whether the block container for inline overflow is truncated or added (…). And custom characters
outline-offset There is no Sets or retrieves the value of the offset position of the line outline outside the object
nav-index There is no Sets or retrieves the navigation order of objects.
nav-up There is no Sets or retrieves the navigation direction of an object.
nav-right There is no Sets or retrieves the navigation direction of an object.
nav-down There is no Sets or retrieves the navigation direction of an object.
nav-left There is no Sets or retrieves the navigation direction of an object.
zoom There are Sets or retrieves the scale of an object.
box-sizing There is no Sets or retrieves the box model composition pattern of an object.
resize There is no Sets or retrieves whether the area of the object allows the user to scale and adjust the element size.

Multi-column

attribute inheritance describe
columns There is no Sets or retrieves the number of columns of the object and the width of each column. The composite properties
column-width There is no Sets or retrieves the width of each column of the object
column-count There is no Sets or retrieves the number of columns for an object
column-gap There is no Sets or retrieves the gaps between columns of an object
column-rule There is no Sets or retrieves the border between columns of an object. The composite properties
column-rule-width There is no Sets or retrieves the thickness of the border between columns of an object.
column-rule-style There is no Sets or retrieves the border style between columns of an object.
column-rule-color There is no Sets or retrieves the color of the border between columns of an object.
column-span There is no Sets or retrieves whether an object element spans all columns.
column-fill There is no Sets or retrieves whether the heights of all columns of an object are uniform.
column-break-before There is no Whether to break lines before setting or retrieving an object.
column-break-after There is no Whether to break a line after setting or retrieving an object.
column-break-inside There is no Sets or retrieves whether an object is internally line broken.

Flexible Box

attribute inheritance describe
flex There is no Compound properties. Sets or retrieves how a child element of a scaling box object allocates space.
flex-grow There is no Sets or retrieves the expansion ratio of the elastic box.
flex-shrink There is no Sets or retrieves the shrinkage ratio of the elastic box
flex-basis There is no Sets or retrieves the elastic box expansion reference value.
flex-flow There is no Compound properties. Sets or retrieves the arrangement of child elements of a scaling box object.
flex-direction There is no Sets or retrieves the position of the child elements of a flex box object in the parent container.
flex-wrap There is no Sets or retrieves whether a child element of a flex box object wraps when it exceeds the parent container.
align-content There is no Sets or retrieves the alignment of flex rows for elastic box stacks.
align-items There is no Sets or retrieves the alignment of elastic box elements in the lateral (vertical) direction.
align-self There is no Sets or retrieves the alignment of the elastic box element itself in the lateral (vertical) direction.
justify-content There is no Sets or retrieves the alignment of elastic box elements along the main (horizontal) axis.
order There is no Sets or retrieves the order in which the children of a flex box object appear.

Transform

attribute inheritance describe
transform There is no Retrieves or sets the transformation of an object
transform-origin There is no Retrieves or sets the origin to which the transformation in the object is referenced
transform-style There is no Specifies whether children of an element are in three dimensions
perspective There is no Specifies the distance of the observer from the plane “z=0”
perspective-origin There is no Specifies the position of perspective points
backface-visibility There is no Specifies whether the back of an element is visible to the user

Transition

attribute inheritance describe
transition There is no Compound properties. Retrieves or sets the transition effect when an object is transformed
transition-property There is no Retrieves or sets the attributes in the object that participate in the transition
transition-duration There is no Retrieves or sets the duration of an object transition
transition-timing-function There is no Retrieves or sets the type of transition in an object
transition-delay There is no Retrieves or sets the time for an object to delay the transition

Animation

attribute inheritance describe
animation There is no Compound properties. Retrieves or sets the animation effect applied to the object
animation-name There is no Retrieves or sets the name of the animation to which the object is applied
animation-duration There is no Retrieves or sets the duration of an object’s animation
animation-timing-function There is no Retrieves or sets the transition type of the object animation
animation-delay There is no Retrieves or sets the time of the object animation delay
animation-iteration-count There is no Retrieves or sets the number of cycles to animate an object
animation-direction There is no Retrieves or sets whether the object animation moves backward in the loop
animation-play-state There is no Retrieves or sets the state of the object animation
animation-fill-mode There is no Retrieves or sets the state of the object outside of the animation time

Printing

attribute inheritance describe
page There is no Retrieves or specifies the type of page to use when displaying the object container

Source: css.doyoe.com/