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. |
Opening Hours
Useful links
© Copyrights www.arianet.ca
2007 -