514 825-6031
What is Css

HTML (the Hypertext Markup Language) and CSS (Cascading Style Sheets) are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices.

Keyword
1 @charset
Set the encoding of the style sheet to Unicode UTF-8
2 @font-face
Specify a font named "myFirstFont", and specify the URL where it can be found
3 @import Rule
Import the "navigation.css" style sheet into the current style sheet
4 @keyframes
Make an element move gradually 200px down
5 @media
Rule is used in media queries to apply different styles for different media types/devices.
6 accent-color
Set the accent color for different user-interface controls
7 align-content
Modifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines.
8 align-items
Center the alignments for all the items of the flexible <div> element
9 align-self
Center the alignments for one of the items inside a flexible element:
10 all
Change all the properties applied to the element or the element's parent to their initial value
11 animation
Binding an animation to a <div> element, using the shorthand property
12 animation-delay
Start the animation after 2 seconds
13 animation-direction
Play the animation forwards first, then backwards
14 animation-duration
Specify that the animation should complete one cycle in 3 seconds
15 animation-fill-mode
Let the <div> element retain the style values from the last keyframe when the animation ends
16 animation-iteration-count
Play the animation two times
17 animation-name
Specify a name for the @keyframes animation
18 animation-play-state
Pause an animation
19 animation-timing-function
Play an animation with the same speed from beginning to end
20 backdrop-filter
Add a graphical effect to the area behind an element
21 backface-visibility
Hide and show the back face of two rotated <div> elements
22 background
Set different background properties in one declaration
23 background-attachment
A background-image that will not scroll with the page (fixed)
24 background-blend-mode
Specify the blending mode of a background-image to be "lighten"
25 background-clip
Specify how far the background should extend within an element
26 background-color
Set the background color for a page
27 background-image
Set a background-image for the <body> element
28 background-origin
Let the background-image start from the upper left corner of the content
29 background-position
How to position a background-image
30 background-repeat
Repeat a background-image only vertically
31 background-size
Specify the size of a background-image with "auto" and in pixels
32 border
Set the style of the borders for different elements
33 border-bottom
Set the style of the bottom border for different elements
34 border-bottom-color
Set a color for the bottom border:
35 border-bottom-left-radius
Add rounded borders to the bottom-left corner of two <div> elements
36 border-bottom-right-radius
Add rounded borders to the bottom-right corner of two <div> elements
37 border-bottom-style
Set a style for the bottom border
38 border-bottom-width
Set a width for the bottom border
39 border-collapse
Set the collapsing borders model for two tables
40 border-color
Set a color for the border
41 border-image
Specify an image as the border around an element
42 border-image-outset
Place the border image 10 pixels outside the border edges of an element
43 border-image-repeat
Specify how to repeat the border image
44 border-image-slice
Specify how to slice the border image
45 border-image-source
Specify an image as the border around an element:
46 border-image-width
Specify the width of the border image
47 border-left
Set the style of the left border for different elements
48 border-left-color
Set a color for the left border
49 border-left-style
Set a style for the left border
50 border-left-width
Set a width for the left border
51 border-radius
Add rounded corners to two <div> elements
52 border-right
Set the style of the right border for different elements
53 border-right-color
Set a color for the right border
54 border-right-style
Set a style for the right border
55 border-right-width
Set a width for the right border
56 border-spacing
Set the border-spacing for a table
57 border-style
Set a style for the border
58 border-top
Set the style of the top border for different elements
59 border-top-color
Set a color for the top border
60 border-top-left-radius
Add rounded borders to the top-left corner of two <div> elements:
61 border-top-right-radius
Add rounded borders to the top-right corner of two <div> elements
62 border-top-style
Set a style for the top border
63 border-top-width
Set a width for the top border
64 border-width
Set a width for the borders
65 bottom
Set the bottom edge of the <div> element to 10px above the bottom edge of its nearest parent element with some positioning
66 box-decoration-break
Specify the box-decoration-break property
67 box-shadow
Add shadows to different <div> elements
68 box-sizing
Include padding and border in the element's total width and height
69 break-after
Always insert a page-break after a <footer> element
70 break-before
Always insert a page-break before a <h1> element
71 break-inside
Avoid a page-break inside an <img> element
72 caption-side
Specify the placement of table captions
73 caret-color
Set the color of the cursor in input elements
74 clear
The <p> element is pushed below left floated elements (the <p> element do not allow floating elements on the left side)
75 clip
Clip an image
76 clip-path
Clip an image to a 50% circle
77 color
Set the text-color for different elements
78 column-count
Divide the text in the <div> element into three columns
79 column-fill
Specify how to fill columns
80 column-gap
Specify a 40 pixels gap between the columns
81 column-rule
Specify the width, style, and color of the rule between columns
82 column-rule-color
Specify the color of the rule between columns
83 column-rule-style
Specify the style of the rule between columns
84 column-rule-width
Specify the width of the rule between columns
85 column-span
Let the <h2> element span across all columns
86 column-width
Specify that the column width should be 100px
87 columns
Specify the minimum width for each column, and the maximum number of columns
88 content
The following example inserts the value of the href attribute in parenthesis after each <a> element
89 counter-increment
Create a counter ("my-sec-counter") and increase it by one for each occurrence of the <h2> selector
90 counter-reset
Create a counter ("my-sec-counter") and increase it by one for each occurrence of the <h2> selector
91 cursor
CSS can generate a bunch of different mouse cursors
92 direction
Set the text direction to "right-to-left"
93 display
Use of some different display values
94 empty-cells
Display no borders on empty cells in a table
95 flex
Let all the flexible items be the same length, regardless of its content
96 flex-basis
Set the initial length of the second flex-item to 100 pixels
97 flex-direction
Set the direction of the flexible items inside the <div> element in reverse order
98 flex-flow
Make the flexible items display in reverse order, and wrap if necessary
99 flex-grow
Let the second flex-item grow three times wider than the rest
100 flex-shrink
Let the second flex-item shrink three times more than the rest
101 flex-wrap
Make the flexible items wrap if necessary
102 float
Let an image float
103 font
Set some font properties with the shorthand declaration
104 font-family
Specify the font for two paragraphs
105 font-feature-settings
Specify font-feature-settings
106 font-kerning
Specify that font kerning is applied
107 font-size
Set the font size for different elements
108 font-size-adjust
By specifying the font-size-adjust property, the browser will adjust the font size to be the same
109 font-stretch
Make the text in <div> elements wider
110 font-style
Set different font styles for three paragraphs
111 font-variant
Set a paragraph to a small-caps font
112 font-variant-caps
Set a paragraph to a small-caps font
113 font-weight
Set different font weight for three paragraphs
114 gap
Set the gap between rows and columns
115 grid
Make a three columns grid layout
116 grid-area
Make space between elements
117 grid-auto-columns
Set a default size for the columns in a grid:
118 grid-auto-flow
Insert auto-placed items column by column
119 grid-auto-rows
Set a default size for the rows in a grid
120 grid-column
Make "item1" start on column 1 and span 2 columns
121 grid-column-end
Make "item1" span 3 columns
122 grid-column-gap
Set the gap between columns to 50px
123 grid-column-start
Make "item1" start on column 2
124 grid-gap
Set the gap between rows and columns to 50px
125 grid-row
Make "item1" start on row 1 and span 2 rows
126 grid-row-end
Make "item1" span 3 rows
127 grid-row-gap
Set the gap between rows to 50px
128 grid-row-start
Make "item1" start on row 2
129 grid-template
Make a three columns grid layout where the first row is 150px high
130 grid-template-areas
Make the named item "myArea" span two columns in a five columns grid layout
131 grid-template-columns
Make a 4 columns grid containet
132 grid-template-rows
Specify the row-size (height)
133 hanging-punctuation
Place a punctuation mark (if any) outside the start edge of the first line in the <p> element
134 height
Set the height of two <div> elements
135 hyphens
Set different hyphenations
136 image-rendering
Show the different algorithms that can be used for image scaling
137 isolation
Create a new stacking context for the element with id="e"
138 justify-content
Align the flex items at the center of the container
139 left
Set the left edge of a positioned <div> element to 150px from the left edge of its nearest positioned ancestor
140 letter-spacing
Set the letter spacing for <h1>, <h2>, and <h3> elements
141 line-height
Set the line height for different <div> elements
142 list-style
Specify all the list properties in one declaration
143 list-style-image
Specify an image as the list-item marker in a list
144 list-style-position
Specify the position of the list-item markers
145 list-style-type
Set some different list styles
146 margin
Set the margin
147 margin-bottom
Set the bottom margin
148 margin-left
Set the left margin
149 margin-right
Set the right margin
150 margin-top
Set the top margin
151 mask-image
Create a mask layer for an image
152 mask-mode
Let the mask layer image be treated as a luminance mask
153 mask-origin
Sspecifies the origin position (the mask position area) of a mask layer image
154 mask-position
Sets the starting position of a mask image (relative to the mask position area)
155 mask-repeat
Sets if/how a mask image will be repeated.
156 mask-size
Specifies the size of the mask layer image.
157 max-height
Defines the maximum height of an element.
158 max-width
Defines the maximum width of an element.
159 min-height
Defines the minimum height of an element.
160 min-width
Defines the minimum width of an element.
161 mix-blend-mode
Specifies how an element's content should blend with its direct parent background.
162 object-fit
Used to specify how an <img> or <video> should be resized to fit its container.
163 object-position
Used together with object-fit to specify how an <img> or <video> should be positioned with x/y coordinates inside its "own content box".
164 opacity
Sets the opacity level for an element.
165 order
Specifies the order of a flexible item relative to the rest of the flexible items inside the same container.
166 orphans
Specifies the minimum number of lines that must be left at the bottom of a page or column.
167 outline
An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".
168 outline-color
An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".
169 outline-offset
The outline-offset property adds space between the outline and the edge or border of an element.
170 outline-style
An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".
171 outline-width
An outline is a line that is drawn around elements, outside the borders, to make the element "stand out".
172 overflow
Specifies what should happen if content overflows an element's box.
173 overflow-wrap
The overflow-wrap property specifies whether or not the browser can break lines with long words, if they overflow the container.
174 overflow-x
Specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the left and right edges.
175 overflow-y
Specifies whether to clip the content, add a scroll bar, or display overflow content of a block-level element, when it overflows at the top and bottom edges.
176 padding
An element's padding is the space between its content and its border.
177 padding-bottom
An element's padding is the space between its content and its border.
178 padding-left
An element's padding is the space between its content and its border.
179 padding-right
An element's padding is the space between its content and its border.
180 padding-top
An element's padding is the space between its content and its border.
181 page-break-after
Adds a page-break after a specified element.
182 page-break-before
Adds a page-break before a specified element..
183 page-break-inside
Sets whether a page-break should be avoided inside a specified element.
184 perspective
Used to give a 3D-positioned element some perspective.
185 perspective-origin
Defines at from which position the user is looking at the 3D-positioned element.
186 pointer-events
Defines whether or not an element reacts to pointer events.
187 position
Specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky).
188 quotes
Sets the type of quotation marks for quotations.
189 resize
Defines if (and how) an element is resizable by the user.
190 right
Affects the horizontal position of a positioned element. This property has no effect on non-positioned elements.
191 row-gap
Specifies the gap between the grid rows.
192 scroll-behavior
Specifies whether to smoothly animate the scroll position, instead of a straight jump, when the user clicks on a link within a scrollable box.
193 tab-size
Specifies the width of a tab character.
194 table-layout
Defines the algorithm used to lay out table cells, rows, and columns.
195 text-align
Specifies the horizontal alignment of text in an element.
196 text-align-last
Specifies how to align the last line of a text.
197 text-decoration
Specifies the decoration added to text, and is a shorthand property for:
198 text-decoration-color
Specifies the color of the text-decoration (underlines, overlines, linethroughs).
199 text-decoration-line
Sets the kind of text decoration to use (like underline, overline, line-through).
200 text-decoration-style
Sets the style of the text decoration (like solid, wavy, dotted, dashed, double).
201 text-decoration-thickness
Specifies the thickness of the decoration line.
202 text-emphasis
Used to apply emphasis marks to text.
203 text-indent
Specifies the indentation of the first line in a text-block.
204 text-justify
Specifies the justification method of text when text-align is set to "justify".
205 text-overflow
Specifies how overflowed content that is not displayed should be signaled to the user. It can be clipped, display an ellipsis (...), or display a custom string.
206 text-shadow
Adds shadow to text.
207 text-transform
Controls the capitalization of text.
208 top
Affects the vertical position of a positioned element. This property has no effect on non-positioned elements.
209 transform
Applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
210 transform-origin
Allows you to change the position of transformed elements.
211 transform-style
Specifies how nested elements are rendered in 3D space.
212 transition
Hover over a <div> element to gradually change the width
213 transition-delay
Specifies when the transition effect will start.
214 transition-duration
Specifies how many seconds (s) or milliseconds (ms) a transition effect takes to complete.
215 transition-property
Specifies the name of the CSS property the transition effect is for (the transition effect will start when the specified CSS property changes).
216 transition-timing-function
Specifies the speed curve of the transition effect.
217 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.
218 user-select
Specifies whether the text of an element can be selected.
219 vertical-align
Sets the vertical alignment of an element.
220 visibility
Specifies whether or not an element is visible.
221 white-space
Specifies how white-space inside an element is handled.
222 width
Sets the width of an element.
223 word-break
Specifies how words should break when reaching the end of a line.
224 word-spacing
Increases or decreases the white space between words.
225 word-wrap
Allows long words to be able to be broken and wrap onto the next line.
226 writing-mode
Specifies whether lines of text are laid out horizontally or vertically.
227 z-index
Specifies the stack order of an element.