CSS

CSS Intro

CSS Intro Quiz

CSS Intro Exercise

CSS Basic

CSS Basic Quiz

CSS Basic Exercise

CSS Advance

CSS Advance Quiz

CSS Advance Exercise

CSS3

CSS3 Quiz

CSS3 Exercise

CSS Properties

CSS Functions

CSS Selectors

CSS

All CSS Tutorials, Quizzes & Exercises

CSS Intro
Welcome
CSS stands for Cascading Style Sheets. CSS allows you to apply specific styles to specific HTML elements. It actually control the look and feel of web pages.
Inline CSS
Using an inline style is one of the ways to insert a style sheet. With an inline style, a unique style is applied to a single element. In order to use an inline style, add the style attribute to the relevant tag.
Internal CSS
Internal styles are defined within the style element, inside the head section of an HTML page.
External CSS
With this method, all styling rules are contained in a single text file, which is saved with the .css extension. This CSS file is then referenced in the HTML using the link tag. The link element goes inside the head section.
CSS Intro Quiz
INTRO QUIZ
CSS INTRODUCTION QUIZ
CSS Intro Exercise
INTRO EXERCISE
CSS INTRODUCTION EXERCISE PRHOCODING
CSS Basic
CSS Syntax
CSS is composed of style rules that the browser interprets and then applies to the corresponding elements in your document. A style rule has three parts: selector, property, and value.
ID and CLASS Selectors
id selectors allow you to style an HTML element that has an id attribute, regardless of their position in the document tree. Class selectors work in a similar way.
Descendant Selectors
Descendant Selectors are used to select elements that are descendants of another element. When selecting levels, you can select as many levels deep as you need to.
Comments
Comments in CSS are used to explain your code, and may help you when you edit the source code later. Comments are ignored by browsers.
Inheritance
Inheritance refers to the way properties flow through the page. A child element will usually take on the characteristics of the parent element unless otherwise defined.
Font Family
The font-family property specifies the font for an element. There are two types of font family names: - font family - generic family
Font Size
The font-size property sets the size of a font. One way to set the size of fonts on the web is to use keywords. For example xx-small, small, medium, large, larger, etc.
Font Style
The font-style property is typically used to specify different styles like italic text
Font Weight
The font-weight controls the boldness or thickness of the text. The values can be set as normal (default size), bold, bolder, and lighter.
Font Variant
The CSS font-variant property allows you to convert your font to all small caps. The values can be set as normal, small-caps, and inherit.
Color
The CSS color property specifies the color of the text.
Text Align
The text-align property specifies the horizontal alignment of text in an element. By default, text on your website is aligned to the left. However, at times you may require a different alignment.
Vertical Text Align
The vertical-align property sets an element's vertical alignment. Commonly used values are top, middle, and bottom.
Text Decoration
The text-decoration property specifies how the text will be decorated.
Text Indent
The text-indent property specifies how much horizontal space should be left before the beginning of the first line of the text.
Text Shadow
The text-shadow property adds shadow to text. It takes four values: the first value defines the distance of the shadow in the x (horizontal) direction, the second value sets the distance in the y (vertical) direction, the third value defines the blur of the shadow, and the fourth value sets the color.
Text Transform
The text-transform CSS property specifies how to capitalize an element's text. For example, it can be used to make text appear with each word capitalized.
Letter Spacing
The letter-spacing property specifies the space between characters in a text.
Word Spacing
The word-spacing property specifies the space between words in a text. Just like the letter-spacing property, you can set the word-spacing values as normal, length, and inherit.
White Spacing
The white-space property specifies how white-space inside an element is handled. The values can be set as normal, inherit, nowrap, etc.
CSS Basic Quiz
BASIC QUIZ
In CSS Basic quiz, we take a quiz of all the tutorials which are described in the Basic Section
CSS Basic Exercise
BASIC EXERCISE
In CSS Basic exercise, we take a exercise test of all the tutorials which are described in the Basic Section
CSS Advance
Box Model
The CSS box model represents the design and layout of the site. It consists of margins, borders, paddings, and the actual content.
Border
The CSS border property allows you to customize the borders of HTML elements. In order to add a border to the element, you need to specify the size, style, and color of the border.
Width and Height
the width and height properties of CSS allow you to customize the width and height of any given element.
Background Color
The background-color property is used to specify the background color of an element.
Background Image
The background-image property sets one or several background images in an element.
Background Repeat
The background repeat property specifies how background images are repeated. A background image can be repeated along the horizontal axis, the vertical axis both axes, or not repeated at all.
Background Attachment
The background-attachment property sets whether a background image is fixed or scrolls with the rest of the page.
List Styling
The CSS list properties allow us to set different list item markers.
Table Styling
Table styling is used for styling the table in CSS. It has border-collapse, border-spacing and many more properties inside it.
Link Styling
Links can be styled with any CSS property to make them look better.
Cursor Styling
Cursor styling is the change of cursor icon for different purposes. CSS allows you to set your desired cursor style when you mouse over an element.
Display Property
Every element on a web page is a rectangular box.The display property determines how that rectangular box behaves.
Visibility Property
Visibility property will either allow user to show the given element on the webpage or not, However, it will take the required space on the webpage but still it will not be visible to end user.
Positioning in CSS
Positioning property allow to position the element at a desired place in the webpage
Floating Property
With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Float is often used with images, but it is also useful when working with layouts.
Overflow Property
The CSS overflow property specifies the behavior that occurs when an element's content overflows the element's box.
Z-index Property
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
CSS Advance Quiz
ADVANCE QUIZ
In CSS Advance quiz, we take a quiz of all the tutorials which are described in the Advance Section
CSS Advance Exercise
ADVANCE EXERCISE
In CSS Advance exercise, we take an exercise test of all the tutorials which are described in the advance Section
CSS3
CSS3 Intro
CSS3 is the latest standard for CSS. CSS3 is completely backwards-compatible with earlier CSS versions.
Vendor Prefixes
CSS vendor prefixes or CSS browser prefixes are a way for browser makers to add support for new CSS features during periods of testing and experimentation.
Border Radius Property
With CSS3, you can give any element
Box Shadow Property
The CSS3 box-shadow property applies shadow to elements.
Transparency
Before CSS3, transparent background images were used to create transparency effects. The new features of CSS3 now make it easier to create transparency effects.
Text Shadow
Text Shadow property is used to give shadow to a text. It is introduced in CSS3
Pseudo Classes
The CSS pseudo-classes allow us to style elements, or parts of elements, that exist in the document tree without using JavaScript or any other scripts.
Pseudo Elements
Pseudo elements are used to select specific parts of an element.
Word Wrap
The word-wrap property allows long words to be broken and wrapped into the next line. It takes two values: normal and break-word.
@Font-Face
The @font-face rule allows custom fonts to be loaded into a webpage. With the help of this rule, designs are no longer limited to the fonts that are installed on a user's computer.
Linear Gradients
CSS3 gradients enable you to display smooth transitions between two or more specified colors.
Radial Gradient
A radial gradient is defined by at least two color stops. The radial gradient is defined by its center.
Background Size
The background-size property adds new functionality to CSS that allows us to specify the size of background images, using either lengths or percentages.
Background Clip
The background-clip property specifies the painting area of the background.
Opacity
CSS opacity property provides an excellent means of adding opacity to any element.
Transitions
CSS3 transitions allow us to change from one property value to another over a given duration.
Transform Rotate
CSS3 transforms allow you to translate, rotate, scale, and skew elements. A transformation is an effect that lets an element change shape, size, and position.
Translate Skew
CSS3 transforms allow you to translate, rotate, scale, and skew elements. A transformation is an effect that lets an element change shape, size, and position.
Scale and Multiple
CSS3 transforms allow you to translate, rotate, scale, and skew elements. A transformation is an effect that lets an element change shape, size, and position.
Animations
An animation lets an element gradually change from one style to another. You can change as many CSS properties as you want to, as many times you want to.
Animation Properties
Animation-name property, Animation-timing-function, Animation-iteration-count, Animation-delay, Animation-direction
3D Transform
Along with the x and y axes, 3D Transforms introduce the Z-axis, which enables 3D manipulations.
CSS Filters 1
The CSS filter property lets you apply graphical effects like blurring or color shifting to an element.
CSS Filters 2
CSS Filters GrayScale Sepia Saturate hue-rotate invert in CSS
CSS Filter 3
CSS Filters Opacity, brightness, contrast, blur in CSS
CSS3 Quiz
CSS3 QUIZ
CSS3 QUIZ, Everything read in the CSS3 will be in the quiz
CSS3 Exercise
CSS3 EXERCISE
In CSS3 Exercise Test, everything present in the CSS3 section is included in the test
CSS Properties
columns Property in CSS
The columns property is a shorthand property for column-width and column-count properties
content Property in CSS
The content property is used with the ::before and ::after pseudo-elements, to insert generated content. Its default value is normal.
counter-increment Property in CSS
The counter-increment property is used to either increase or decrease the value of one or more CSS counters.
counter-reset Property in CSS
The counter-reset property is used to create or reset one or more CSS counters. It is usually used together with the counter-increment property and the content property.
cursor Property in CSS
The cursor property is used to determine the mouse cursor to be displayed when pointing over an element. Its default value is none.
direction Property in CSS
The direction property is used to specify the text direction or writing direction within a block-level element. It is used in combination with unicode-bidi property. Its default value is ltr.
display Property in CSS
The display property is used to determine the display behavior of an element. Its value is taken from HTML specifications or from the browser/user default stylesheet if not specified.
empty-cells Property in CSS
The empty-cells property is used to determine whether or not to display borders on empty cells in a table. Its default value is show.
filter Property in CSS
The filter property is used to specify visual effects to an element like an image or video. By default, its value is none.
flex Property in CSS
The flex property is used to set the flexible length on flexible items. It is a short hand property.
flex-basis Property in CSS
The flex-basis property is used to specify the initial length of a flexible item. It is only usable if the element is flexible. Its default value is auto.
flex-direction Property in CSS
The flex-direction property is used to specify the direction of the flexible items. It is only usable if the element is flexible. Its default value is row.
flex-flow Property in CSS
The flex-flow property is used to set the direction of flexible items and either wrap them or not. It is a short hand property.
flex-grow Property in CSS
The flex-grow property is used to specify how much the item will grow relative to the rest of the flexible items inside the same container. Its default value is 0.
flex-shrink Property in CSS
The flex-shrink property is used to specify how the item will shrink relative to the rest of the flexible items inside the same container.
flex-wrap Property in CSS
The flex-wrap property is used to specify whether the flexible items should wrap or not. It is only usable if items are flexible. Its default value is nowrap.
float Property in CSS
The float property is used to specify whether an element should float to the left, right, or not at all. It will not work on elements that are positioned absolutely. Its default value is none.
font Property in CSS
The font property is a shorthand property for font-style, font-variant, font-weight, font-size, font-family.
@font-face Rule in CSS
In @font-face, we first define a name for the font and then point to the font file. To use the font in the HTML element, we need to refer to the name of the font through the font-family property.
font-family Property in CSS
The font-family property is used to specify the font for an element. It can hold several font names as a fallback system. If the browser does not support the first font, it tries the next font.
font-feature-settings Property in CSS
The font-feature-settings property is used to control advanced typographic features in OpenType fonts. By default, its value is normal.
font-kerning Property in CSS
The font-kerning property is used to control the usage of the kerning information stored in a font. It defines how letters are spaced. Its default value is auto.
font-size Property in CSS
The font-size property is used to set the size of a font. Its default value is medium.
font-stretch Property in CSS
The font-stretch property is used to make text narrower/condensed or wider/expanded. It is a property that is offered by many fonts.
font-style Property in CSS
The font-style property is used to specify the font style for a text. Its default value is normal.
font-variant Property in CSS
The font-variant property is used to specify whether or not a text should be displayed in a small-caps font.
font-variant-caps Property in CSS
The font-variant-caps property is used to control the usage of alternate glyphs for capital letters. By default, its value is normal.
font-weight Property in CSS
The font-weight property is used to set how thick or thin characters in text should be displayed. Its default is normal.
gap Property in CSS
The gap property is used to specify the size of the gap between the rows and columns. It is a shorthand property for row-gap, column-gap. It is formerly known as grid-gap.
grid Property in CSS
The grid property sets all of the explicit and implicit grid properties in a single declaration i.e, a shorthand property
grid-area Property in CSS
The grid-area property is used to define a grid item size and location in a grid layout. It is a shorthand property.
grid-auto-columns Property in CSS
The grid-auto-columns property is used to set the size of the columns in a grid container. It works only on those columns whose size is not specified.
grid-auto-flow Property in CSS
The grid-auto-flow property is used to control how auto-placed items get inserted into the grid. By default its value is row.
grid-auto-rows Property in CSS
The grid-auto-rows property is used to set the size of the rows in a grid container. It only works when the size of a row is not specified.
grid-column Property in CSS
The grid-column property is used to define grid item size and location in a grid layout. We can say that it is a shorthand property.
grid-column-end Property in CSS
The grid-column-end property is used to specify how many columns an item will span or in other words, on which column-line the item will end. Its default value is auto.
grid-column-gap Property in CSS
The grid-column-gap property is used to specify the size of the gap between the columns in a grid layout. Its name was changed to column-gap.
grid-column-start Property in CSS
The grid-column-start property is used to specify on which column-line the item will start.
grid-gap Property in CSS
The grid-gap property is used to specify the size of the gap between the rows and columns. It is a shorthand property for row-gap, column-gap.
grid-row Property in CSS
The grid-row property is used to define grid item size and location in a grid layout. It is a shorthand property.
grid-row-end Property in CSS
The grid-row-end property is used to specify how many rows an item will span. In other words, on which row-line the item will end.
grid-row-gap Property in CSS
The grid-row-gap property is used to specify the size of the gap between the rows in a grid layout. Its new name is row-gap. Its default value is 0.
grid-row-start Property in CSS
The grid-row-start property is used to specify on which row-line the item will start. Its default value is auto.
grid-template Property in CSS
The grid-template property is a shorthand property for grid-template-rows, grid-template-columns, and grid-template-areas.
grid-template-areas Property in CSS
The grid-template-areas property is used to define an area within the grid layout.
grid-template-columns Property in CSS
The grid-template-columns property is used to define the number and the width of columns in a grid layout. Its values are a space-separated list.
grid-template-rows Property in CSS
The grid-template-rows property is used to define the number and the width of rows in a grid layout. Its values are a space-separated list.
hanging-punctuation Property in CSS
The hanging-punctuation property is used to specify whether a punctuation mark is placed outside the line box at the start or at the end of a full line of text.
height Property in CSS
The height property is used to set the height of an element. It does not include padding, borders, or margins.
hyphens Property in CSS
The hyphens property is used to specify whether hyphenation is allowed to create more soft wrap opportunities within a line of text or not.
image-rendering Property in CSS
The image-rendering property is used to specify the type of algorithm to be used for image scaling. It does not work if the images are not scaled. Its default value is auto.
isolation Property in CSS
The isolation property is used to specify whether an element must create a new stacking content. It works best when used with background-blend-mode or mix-blend-mode.
justify-content Property in CSS
The justify-content property is used to align the flexible container items when the items do not use all available space on the main axis. It is sometimes used in combination with the align-items property.
@keyframes Rule in CSS
The @keyframes rule is used to specify the animation code. It is created by gradually changing from one set of CSS styles to another.
left Property in CSS
The left property is used to change the horizontal position of a positioned element. It does not work on non-positioned elements.
letter-spacing Property in CSS
The letter-spacing property is used to increase or decrease the space between characters in a text. Its default value is normal.
line-height Property in CSS
The line-height property is used to specify the height of a line. Negative values are not allowed. Its default value is normal.
list-style Property in CSS
The list-style is used to style the list items. It is a shorthand for list-style-type, list-style-position, and list-style-image.
list-style-image Property in CSS
The list-style-image property is used to replace the list-item marker with an image. We have to specify the list-style-type property in addition. This property is used if the image for some reason is unavailable.
list-style-position Property in CSS
The list-style-position property is used to specify the position of the list-item markers. If it is set to outside, then bullet points will be outside the list item. If it is set to inside, then bullet points will be inside the list item.
list-style-type Property in CSS
The list-style-type is used to specify the type of list-item marker in a list. Its default value is disk.
margin Property in CSS
The margin property is used to specify the margins for an element. It is a shorthand property for margin-top, margin-right, margin-bottom, and margin-left.
margin-bottom Property in CSS
The margin-bottom property is used to set the bottom margin of an element. We can use negative values in it.
margin-left Property in CSS
The margin-left property is used to set the left margin of an element. We can use negative values in it. Its default value is 0.
margin-right Property in CSS
The margin-right property is used to set the right margin of an element. We can use negative values in it. Its default value is 0.
margin-top Property in CSS
The margin-top property is used to set the top margin of an element. We can use negative values in it. Its default value is 0.
mask-image Property in CSS
The mask-image property is used to specify an image to be used as a mask layer for an element. We can use linear and radial gradients in CSS as the mask image. Its default value is none.
mask-mode Property in CSS
The mask-mode property is used to specify whether the mask layer image should be treated as a luminance mask or as an alpha mask. Its default value is match-source.
mask-origin Property in CSS
The mask-origin property is used to specify the origin position and the mask position area of a mask layer image. Its default value is border-box.
mask-position Property in CSS
The mask-position property is used to specify the starting position of a mask image. It is relative to the mask position area. Its default position is the top-left corner and is repeated both vertically and horizontally.
mask-repeat Property in CSS
The mask-repeat property is used to specify how a mask image will be repeated if we want it to repeat. A mask image is repeated both vertically and horizontally by default.
mask-size Property in CSS
The mask-size property is used to define the size of the mask layer image. Its default value is auto.
max-height Property in CSS
The max-height property is used to specify the maximum height of an element. If the content is larger than the maximum height, it will overflow.
max-width Property in CSS
The max-width property is used to specify the maximum width of an element. If the content is larger than the maximum width, it will overflow.
@media Rule in CSS
The @media rule is applied in media queries to apply different styles for different media types and devices.
min-height Property in CSS
The min-height property is used to specify the minimum height of an element. If the content is larger than the minimum height, it will overflow.
min-width Property in CSS
The min-width property is used to specify the minimum width of an element. If the content is larger than the minimum width, it will overflow.
mix-blend-mode Property in CSS
The mix-blend-mode property is used to specify how an element content should blend with its direct parent background.Its default value is normal.
object-fit Property in CSS
The object-fit property is used to specify how an img element or video element be resized to fit its container.
object-position Property in CSS
The object-position property is used in combination with object-fit to specify how an img element or video element should be positioned with x/y coordinates inside its own content box.
opacity Property in CSS
The opacity property is used to specify the opacity level for an element. It is also known as transparency-level. Its value of 1 is opaque at all, 0.5 is 50% see-through, and 0 is completely transparent.
order Property in CSS
The order property is used to specify the order of a flexible item relative to the rest of the flexible items inside the same container. It is not applicable if items are not flexible.
orphans Property in CSS
The orphans property is used to specify the minimum number of lines that must be left at the bottom of a page or column. Its default value is 2.
outline Property in CSS
An outline is a line that is drawn around elements that are outside of its borders which makes the element stand out. It is a shorthand property.
outline-color Property in CSS
The outline-color property is used to specify the color of an outline. It is a line that is drawn around elements which are outside the borders and that makes the element stand out.
outline-offset Property in CSS
The outline-offset property is used to add space between the outline and the edge or border of an element. Usually, it is transparent.
outline-style Property in CSS
The outline-style property is used to specify the style of an outline. It is a line that is drawn around elements that are outside the borders and that makes the element stand out.
outline-width Property in CSS
The outline-width is used to specify the width of an outline. It is a line that is drawn around elements that are outside the borders and that makes the element stand out.
overflow Property in CSS
The overflow property is used to define what should happen if content overflows an element box. It specifies whether to clip content or to add scrollbars when an element content is too big to fit in a specified area
overflow-wrap Property in CSS
The overflow-wrap property is used to determine whether or not the browser can break lines having long words, in case of overflowing the container. Its default value is normal.
overflow-x Property in CSS
The overflow-x property is used to define whether to clip the content and add a scroll bar or display overflow content of a block-level element when it overflows at the left and right edges.
overflow-y Property in CSS
The overflow-y property is used to define whether to clip the content and add a scroll bar or display overflow content of a block-level element when it overflows at the top and bottom edges.
padding Property in CSS
The padding property is used to specify the padding for an element. It is a shorthand property for padding-top, padding-right, padding-bottom, and padding-left
padding-bottom Property in CSS
The padding-bottom property is used to set the bottom padding of an element. We can use negative values in it. Its default value is 0.
padding-left Property in CSS
The padding-left property is used to set the left padding of an element. We can use negative values in it. Its default value is 0.
padding-right Property in CSS
The padding-right property is used to set the right padding of an element. We can use negative values in it. Its default value is 0.
padding-top Property in CSS
The padding-top property is used to set the top padding of an element. We can use negative values in it. Its default value is 0.
page-break-after Property in CSS
The page-break-after property is used to add page-break after a specified element. Similar properties like it are page-break-before and page-break-inside.
page-break-before Property in CSS
The page-break-before property is used to add page-break before a specified element. Similar properties like it are page-break-after and page-break-inside.
accent-color Property in CSS
The accent-color property is used to specify the accent color for user-interface controls like: input type=checkbox, input type=radio, input type=range and progress elements.
page-break-inside Property in CSS
The page-break-inside property is used to define whether a page-break is avoided inside a specified element or not. Similar properties like it are page-break-after and page-break-before.
align-content Property in CSS
The align-content property is used to modify the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it is used to align flex lines.
perspective Property in CSS
The perspective property is used to specify how far the object is away from the user. Therefore, we can say that a lower value will result in a more intensive 3D effect than a higher value.
align-items Property in CSS
The align-items property is used to specify the default alignment for items inside the flexible container. To override this property, we have to use the align-self property.
perspective-origin Property in CSS
The perspective-origin property is used to specify from which position the user is looking at the 3D-positioned element. When we define a perspective property for an element, it will impact its CHILD elements.
align-self Property in CSS
The align-self property is used to specify the alignment for the selected item inside the flexible container. It is actually used to override the align-items property.
pointer-events Property in CSS
The pointer-events property is used to specify whether or not an element reacts to pointer events. Its default value is auto.
all Property in CSS
The all property is used to resets all properties to their initial or inherited value. However, it does not have any effect on unicode-bidi and direction.
position Property in CSS
The position property is used to specify the type of positioning method used for an element. There are the following types of positioning methods static, relative, absolute, fixed, and sticky.
animation Property in CSS
The animation property is used for adding an animation to an element. It is a shorthand property.
quotes Property in CSS
The quotes property is used to set the type of quotation marks for quotations.
animation-delay Property in CSS
The animation-delay property is used to specify a delay for the start of an animation. Its value is defined in seconds or milliseconds.
resize Property in CSS
The resize property is used to define how an element is resizable by the user if the user wants to resize it. It is not applicable to inline elements. Its default value is none.
animation-direction Property in CSS
The animation-direction property is used to define whether an animation should be played forwards, backwards, or in alternate cycles.
right Property in CSS
The right property is used to change the horizontal position of a positioned element. It does not work on non-positioned elements.
animation-duration Property in CSS
The animation-duration property is used to define how long an animation should take to complete one cycle. Its default value is 0.
row-gap Property in CSS
The row-gap property is used to specify the gap between the grid rows. Its old name was grid-row-gap. Its default value is normal.
animation-fill-mode Property in CSS
The animation-fill-mode property is used to specify a style for the element when the animation is not playing i.e, before animation starts, after the animation ends, or both. Its default value is none.
scroll-behavior Property in CSS
The scroll-behavior property is used to specify whether to smoothly animate the scroll position when the user clicks on a link within a scrollable box or a straight jump when the user clicks on a link within a scrollable box.
animation-iteration-count Property in CSS
The animation-iteration-count property is used to specify the number of times an animation should be played. Its default value is 1.
tab-size Property in CSS
The tab-size property is used to specify the width of a tab character. The tab character is usually displayed as a single space character and the result of the tab-size property will only be visible for textarea and pre elements.
animation-name Property in CSS
The animation-name property is used to specify the name for the @keyframes animation. Its default value is none.
table-layout Property in CSS
The table-layout property is used to define the algorithm used to lay out table cells, rows, and columns. If its value is set to fixed then the table will render faster.
animation-play-state Property in CSS
The animation-play-state property is used to specify whether the animation is running or paused. It is used with JavaScript to pause an animation. Its default value is running.
text-align Property in CSS
The text-align property is used to specify the horizontal alignment of text in an element. Its default value is right if the direction is rtl, and left if the direction is ltr.
animation-timing-function Property in CSS
The animation-timing-function is used to specify the speed curve of an animation. Speed curve is the TIME an animation uses to change from one set of CSS styles to another.
text-align-last Property in CSS
The text-align-last property is used to specify how to align the last line of a text. It sets the alignment for all last lines within the selected element. Its default value is auto.
backdrop-filter Property in CSS
The backdrop-filter property is used to apply a graphical effect to the area behind an element. Its default value is none.
text-decoration Property in CSS
The text-decoration property is used to set the decoration added to the text. It is a shorthand property for text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness
backface-visibility Property in CSS
The backface-visibility property is used to specify whether or not the back face of an element should be visible when facing the user.
text-decoration-color Property in CSS
The text-decoration-color property is used to specify the color of the text-decoration like underlines, overlines, line through. Its default value is the current color.
background Property in CSS
The background property is used for setting the background of an element. It is a short hand property.
text-decoration-line Property in CSS
The text-decoration-line property is used to set the kind of text-decoration to use like underline, overline, or line-through. Its default value is none.
background-attachment Property in CSS
The background-attachment property is used to determine whether a background image scrolls with the rest of the page or is fixed. Its default value is scroll.
text-decoration-style Property in CSS
The text-decoration-style property is used to set the style of the text-decoration like solid, wavy, dotted, dashed, or double. Its default value is solid.
background-blend-mode Property in CSS
The background-blend-mode property is used to specify the blending mode of each background layer. The background layer may be an image or color. Its default value is normal.
text-decoration-thickness Property in CSS
The text-decoration-thickness property is used to specify the thickness of the decoration line. Its default value is auto.
background-clip Property in CSS
The background-clip property is used to define how far the background should extend within an element. Its default value is border-box.
text-emphasis Property in CSS
The text-emphasis property is used to set emphasis marks on text. It is a shorthand for text-emphasis-style and text-emphasis-color. Its default value is none.
background-color Property in CSS
The background-color property is used to set the background color of an element. The background of an element is the total size of the element containing padding and border.
text-indent Property in CSS
The text-indent property is used to specify the indentation of the first line in a text block. If the value is a negative value then the first line will be indented to the left if the value is negative. Its default value is 0.
background-image Property in CSS
The background-image property is used to set one or more background images for an element. It is placed in the top-left corner by default and is repeated in both directions. Its default value is none.
text-justify Property in CSS
The text-justify property is used to specify the justification method of text when the text-align is set to justify. Its default value is auto.
background-origin Property in CSS
The background-origin property is used to specify the origin position of a background image. It has no effect on the background-attachement property.
text-overflow Property in CSS
The text-overflow property is used to specify how overflowed content that is not displayed should be signaled to the user. It can be clipped or display an ellipsis (...) or display a custom string.
background-position Property in CSS
The background-position property is used to set the starting position of a background image.
text-shadow Property in CSS
The text-shadow property is used to add shadow to text. It accepts a comma-separated list of shadows to be applied to the text. Its default value is none.
background-repeat Property in CSS
The background-repeat property is used to set how a background image will be repeated. A background-image is repeated both vertically and horizontally by default.
text-transform Property in CSS
The text-transform property is used to control the capitalization of text. Its default value is none.
background-size Property in CSS
The background-size property is used to determine the size of the background images. Its default value is auto.
top Property in CSS
The top property is used to change the vertical position of a positioned element. It does not work on non-positioned elements.
border Property in CSS
The border property is used to make a border around the element. It is a short hand property.
transform Property in CSS
The transform property is used to apply a 2D or 3D transformation to an element. It allows us to rotate, scale, move, skew, translate, etc., elements. Its default value is none.
border-bottom Property in CSS
The border-bottom property is used to make a bottom border of an element. It is a short hand property.
transform-origin Property in CSS
The transform-origin property is used to allow us to change the position of transformed elements. The 2D transformations can change the x- and y-axis of an element while the 3D transformations can also change the z-axis of an element.
border-bottom-color Property in CSS
The border-bottom-color property is used to set the color of an element bottom border. We have to always declare or use border-style or border-bottom-style property with it.
transform-style Property in CSS
The transform-style property is used to specify how nested elements are rendered in 3D space. It is used together with the transform property. Its default value is flat.
border-bottom-left-radius Property in CSS
The border-bottom-left-radius property is used to specify the radius of the bottom-left corner. It allows adding rounded borders to the element. Its default value is 0.
transition Property in CSS
The transition property is used to add transitions to an element. It is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay. Its default value is all 0s ease 0s.
border-bottom-right-radius Property in CSS
The border-bottom-right-radius property is used to specify the radius of the bottom-right corner. It allows adding rounded borders to the element. Its default value is 0.
transition-delay Property in CSS
The transition-delay property is used to specify when the transition effect will start. Its value is defined in seconds or milliseconds. Its default value is 0s.
border-bottom-style Property in CSS
The border-bottom-style property is used to set the style of an element bottom border. Its default value is none.
transition-duration Property in CSS
The transition-duration property is used to specify how many seconds or milliseconds a transition effect takes to complete. Its default value is 0s.
border-bottom-width Property in CSS
The border-bottom-width property is used to set the width of an element bottom border.
transition-property Property in CSS
The transition-property property is used to specify the name of the CSS property the transition effect is for. A transition effect is typically occurs when a user hovers over an element. Its default value is all.
border-collapse Property in CSS
The border-collapse property is used to determine whether table borders should collapse into a single border or be separated as in standard HTML.
transition-timing-function Property in CSS
The transition-timing-function property is used to specify the speed curve of the transition effect. It allows a transition effect to change speed over its duration. Its default value is ease.
border-color Property in CSS
The border-color property is used to set the color of an element four borders i.e, top, right, bottom, left.
unicode-bidi Property in CSS
The unicode-bidi property is used with the direction property to set or return whether the text should be overridden to support multiple languages in the same document or not. Its default value is normal.
border-image Property in CSS
The border-image property is used to specify an image to be used as the border around an element.
user-select Property in CSS
The user-select property is used to specify whether the text of an element can be selected or not. If you double-click on some text it will be selected or highlighted in the browser. This property can be used to prevent this.
border-image-outset Property in CSS
The border-image-outset property is used to specify the amount by which the border-image area extends beyond the border-box. Its default value is 0.
vertical-align Property in CSS
The vertical-align property is used to set the vertical alignment of an element. Its default value is baseline.
border-image-repeat Property in CSS
The border-image-repeat property is used to determine whether the border-image should be repeated, rounded, spaced, or stretched. Its default value is stretch.
visibility Property in CSS
The visibility property is used to specify whether or not an element is visible. Hidden elements will take space when set hidden by visibility property.
border-image-slice Property in CSS
The border-image-slice property is used to specify how to slice the image specified by border-image-source. The image is always sliced into nine sections:
white-space Property in CSS
The white-space property is used to specify how white space inside an element is handled. Its default value is normal.
border-image-source Property in CSS
The border-image-source property is used to specify the path to the image to be used as a border.
widows Property in CSS
The widows property is used to specify the minimum number of lines that must be left at the top of a page or column. It is similar to orphans property. Its default value is 2.
border-image-width Property in CSS
The border-image-width property is used to specify the width of the border-image. Its default value is 1.
width Property in CSS
The width property is used to set the width of an element. It does not include padding, borders, or margins. The min-width and max-width properties override the width property. Its default value is auto.
border-left Property in CSS
The border-left property is used to style the left border of an element. It is a shorthand property
word-break Property in CSS
The word-break property is used to specify how words should break when reaching the end of a line. Its default value is normal.
border-left-color Property in CSS
The border-left-color property is used to set the color of an element left border. It is always used with the border-style or border-left-style property.
word-spacing Property in CSS
The word-spacing property is used to increase or decrease the white space between words. We can use negative values in it. Its default value is normal.
border-left-style Property in CSS
The border-left-style property is used for setting the style of an element left border. Its default value is none. 
word-wrap Property in CSS
The word-wrap property is used to allow long words to be able to be broken and wrap onto the next line. Its default value is normal.
border-left-width Property in CSS
The border-left-width property is used for setting the width of elements left border. It is always used after the border-style or border-left-style property is used.
writing-mode Property in CSS
The writing-mode property is used to specify whether lines of text are laid out horizontally or vertically. Its default value is horizontal-tb.
border-radius Property in CSS
The border-radius property is used to define the radius of the element corners. It allows us to add rounded corners to our borders in an element.
z-index Property in CSS
The z-index property is used to specify the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order. It is only usable on positioned elements.
border-right Property in CSS
The border-right property is used to style the right border of an element. It is a shorthand property.
border-right-color Property in CSS
The border-right-color property is used to set the color of an element right border. It is always used after the border-style or border-right-style property is declared.
border-right-style Property in CSS
The border-right-style property is used to set the style of an element right border. Its default value is none.
border-right-width Property in CSS
The border-right-width property is used to set the width of an element right border. It is always used after the border-style or border-right-style property is declared.
border-spacing Property in CSS
The border-spacing property is used to specify the distance between the borders of adjacent cells. It works only on the table element and only when the border-collapse property is set to separate.
border-style Property in CSS
The border-style property is used for setting the style of an element four borders. This property can have from one to four values.
border-top Property in CSS
The border-top property is a shorthand property. It is used to set all the top border properties in one declaration.
border-top-color Property in CSS
The border-top-color property is used to set the color of an element top border. It is always used after the border-style or border-top-style property is declared.
border-top-left-radius Property in CSS
The border-top-left-radius property is used to specify the radius of the top-left corner. It is used to apply rounded corners to it. Its default value is 0.
border-top-right-radius Property in CSS
The border-top-right-radius property is used to specify the radius of the top-right corner. It is used to apply rounded corners to it. Its default value is 0.
border-top-style Property in CSS
The border-top-style property is used for specifying the style of an element top border. Its default value is none.
border-top-width Property in CSS
The border-top-width property is used to set the width of an element top border. It is always used after the border-style or border-top-style property is declared.
CSS border-width Property
The border-width property is used for setting the width of an element four borders.
bottom Property in CSS
The bottom property is used to specify the vertical position of a positioned element. It does not work on non-positioned elements.
box-decoration-break Property in CSS
The box-decoration-break property is used to determine how the background, padding, border, border-image, box-shadow, margin, and clip-path of an element is applied when the box for the element is fragmented
box-shadow Property in CSS
The box-shadow property is used to add one or more shadows to an element. By default, its value is none.
box-sizing Property in CSS
The box-sizing property is used to specify how the width and height of an element are calculated i.e, is padding and borders included or not. Its default value is content-box.
break-after Property in CSS
The break-after property is used to determine whether or not a page break, column break, or region break should occur after the specified element.
break-before Property in CSS
The break-before property is used to determine whether or not a page break, column break, or region break should occur before the specified element.
break-inside Property in CSS
The break-inside property is used to determine whether or not a page break, column break, or region break should occur inside the specified element.
caption-side Property in CSS
The caption-side property is used to determine the placement of a table caption. Its default value is Top.
caret-color Property in CSS
The caret-color property is used to specify the color of the cursor in inputs, textareas, or any element that is editable. Its default value is auto.
@charset Rule in CSS
The @charset rule is used to specify the character encoding used in the style sheet.
clear Property in CSS
The clear property is used to control the flow next to floated elements. It specifies what should happen with the element that is next to a floating element. Its default value is none.
clip Property in CSS
The clip property is used to specify a rectangle to clip an absolutely positioned element.
color Property in CSS
The color property is used to specify the color of the text. It is mostly used in combination with background-color property.
column-count Property in CSS
The column-count property is used to specify the number of columns an element should be divided into. Its default value is auto.
column-fill Property in CSS
The column-fill property specifies how to fill columns, balanced or not. If the height property is added to a multi-column element, we can control how the content fills the columns.
column-gap Property in CSS
The column-gap property is used to specify the gap between the columns. If the property column-rule is present, then it will appear in the middle of the gap. Its default is normal.
column-rule Property in CSS
The column-rule property is used to set the width, style, and color of the rule between columns. It is a shorthand property.
column-rule-color Property in CSS
The column-rule-color property is used to specify the color of the rule between columns. Its default value is the current color of an element.
column-rule-style Property in CSS
The column-rule-style property is used to specify the style of the rule between columns. Its default value is none.
column-rule-width Property in CSS
The column-rule-width property is used to specify the width of the rule between columns. Its default value is medium.
column-span Property in CSS
The column-span property is used to specify how many columns an element should span across. Its default value is none.
column-width Property in CSS
The column-width property is used to determine the column width. It is a flexible property. It is similar to min-width property for the browser.
CSS Functions
attr() Function in CSS
The attr() function is used to return the value of an attribute of the selected elements. 
calc() Function in CSS
The calc() function is used to perform a calculation that will be used as the property value.
conic-gradient() Function in CSS
The conic-gradient() function is used to define a conic gradient as the background image. It is a gradient with color transitions rotated around a center point and has at least two color stops.
counter() Function in CSS
The counter() function is used to return the current value of the named counter in the form of a string.
cubic-bezier() Function in CSS
The cubic-bezier() function is used to define a Cubic Bezier curve. It is defined by four points P0, P1, P2, and P3.
hsl() Function in CSS
The hsl() function is used to define colors using the Hue Saturation Lightness model (HSL). In this, H stands for Hue, S stands for Saturation, and L stands for Lightness.
hsla() Function in CSS
The hsla() function is used to define colors using the Hue Saturation Lightness Alpha model (HSLA). In this, H stands for Hue, S stands for Saturation, L stands for Lightness, and A  stands for Alpha.
linear-gradient() Function in CSS
The linear-gradient() function is used to set a linear gradient as the background image. We have at least two color stops for the creation of a linear gradient.
max() Function in CSS
The max() function is used to only use the largest value from a comma-separated list of values as the property value.
min() Function in CSS
The min() function is used to only use the smallest value from a comma-separated list of values as the property value.
radial-gradient() Function in CSS
The radial-gradient() function is used to define a radial gradient as the background image. It is always defined by its center and has at least two color stops.
repeating-conic-gradient() Function in CSS
The repeating-conic-gradient() function is used for repeating multiple conic gradients.
repeating-linear-gradient() Function in CSS
The repeating-linear-gradient() function is used for repeating multiple linear gradients.
repeating-radial-gradient() Function in CSS
The repeating-radial-gradient() function is used for repeating multiple radial gradients.
rgb() Function in CSS
The rgb() function is used to define colors using the Red Green Blue (RGB) model. Its value can be specified by rgb(red, green, blue).
rgba() Function in CSS
The rgba() function is used to define the colors using the Red Green Blue Alpha (RGBA) model. It is an extension of RGB.
var() Function in CSS
The var() function is used to insert the value of a CSS variable. We can define a variable by placing -- before its name in the :root part.
CSS Selectors
.class Selector in CSS
The .class selector is used to select elements with a specific class attribute.
#id Selector in CSS
The #id selector is used to style the element with the specified id.
* Selector in CSS
The * selector is used to select all elements. It can also be used to select all elements inside another element.
element Selector in CSS
The element selector is used to select all elements with the specified element name.
element.class Selector in CSS
The element.class selector is used for selecting the specified element with the specified class.
element,element Selector in CSS
For styling multiple elements with the same style we have to separate each element name with a comma.
element element Selector in CSS
The element element selector is used for selecting elements inside elements.
element>element Selector in CSS
The element>element selector is used for selecting elements with a specific parent. Those elements which are not a direct children of the specified parent will not be selected.
element+element Selector in CSS
The element+element selector is used for selecting an element that is directly after another specific element.
element1~element2 Selector in CSS
The element1~element2 selector is used to match the occurrence of element2 that is preceded by element1. Both should have the same parent.
[attribute] Selector in CSS
The [attribute] selector is used for selecting elements with the specific attribute.
[attribute=value] Selector in CSS
The [attribute=value] selector is used for selecting elements with the specified attribute and value.
[attribute~=value] Selector in CSS
The [attribute~=value] selector is used for selecting elements with an attribute value containing a specified word.
[attribute|=value] Selector in CSS
The [attribute|=value] selector is used for selecting elements with the specific attribute starting with the specific value.
[attribute^=value] Selector in CSS
The [attribute^=value] selector is used to match every element whose attribute value begins with a specific value.
[attribute$=value] Selector in CSS
The [attribute$=value] selector is used to match every element whose attribute value ends with a specific value.
[attribute*=value] Selector in CSS
The [attribute*=value] selector is used to match every element whose attribute value containing a specific value.
:active Selector in CSS
A link becomes active when we click on it. The :active selector is used to select and style such types of links.
::after Selector in CSS
The ::after selector is used to inserting something after the content of each selected element. For this purpose, we have to use the content property to specify the content to insert.
::before Selector in CSS
The ::before selector is used to insert something before the content of each selected element. For this purpose, we have to use the content property to specify the content to insert.
:checked Selector in CSS
The :checked selector is used to match every checked input element i.e, radio buttons, checkboxes, and option elements.
:default Selector in CSS
The :default selector is used to selecting the default form element in a group of related elements.
:disabled Selector in CSS
The :disabled selector is used to match every disabled element. It is mostly used on form elements.
:empty Selector in CSS
The :empty selector is used to matching every element which has no children including text nodes.
:enabled Selector in CSS
The :enabled selector is used to match every enabled element. It is mostly used on form elements.
:first-child Selector in CSS
The :first-child selector is used to select the specified selector if and only if it is the first child of its parent.
::first-letter Selector in CSS
The ::first-letter selector is used to adding a style to the first letter of the specified selector.
::first-line Selector in CSS
The ::first-line selector is used to adding a style to the first line of the specified selector.
:first-of-type Selector in CSS
The :first-of-type selector is used to match every element that is the first child of the particular type of its parent. It is very much similar to the nth-of-type().
:focus Selector in CSS
The :focus selector is used to select the element that has focus. It is that element that accept user inputs or keyboard events.
:fullscreen Selector in CSS
The :fullscreen selector is used to select elements in full-screen mode.
:hover Selector in CSS
The :hover selector is used to select elements when we mouse over them. This selector can be used on all elements.
:in-range Selector in CSS
The :in-range selector is used to select all elements with a value within a specified range. It is used for input elements with min and/or max attributes.
:indeterminate Selector in CSS
The :indeterminate selector is used to select form elements that are in an indeterminate state. It is used on input type=checkbox, input type=radio, and progress elements.
:invalid Selector in CSS
The :invalid selector is used to select form elements with a value that does not validate according to the element default settings.
:lang Selector in CSS
The :lang() selector is used to select element with a lang attribute with the specified value.
:last-child Selector in CSS
The :last-child selector is used to match every element that is the last child of its parent. It is similar to nth-last-child(1).
:last-of-type Selector in CSS
The :last-of-type selector is used to match every element that is the last child of a particular type of its parent. It is very much similar to nth-last-of-type(1).
:link Selector in CSS
The :link selector is used to select and style the unvisited links. It is not used for those links which are already been visited.
::marker Selector in CSS
The ::marker selector is used to select and style the marker of a list item. It works on list items in ordered lists and unordered lists.
:not Selector in CSS
The :not(selector) selector is used to match every element that is NOT the specified element or selector.
:nth-child() Selector in CSS
The :nth-child(n) selector is used to match every element that is the nth child of its parent. We can say that n can be a number, a keyword or a formula like an + b.
:nth-last-child() Selector in CSS
The :nth-last-child(n) selector is used to match every element that is the nth child of its parent counting from the last child. We can say that n can be a number, a keyword, or a formula.
:nth-last-of-type() Selector in CSS
The :nth-last-of-type(n) selector is used to match every element that is the nth child of a particular type of its parent starting from the last child. We can say that n can be a number, a keyword, or a formula.
:nth-of-type() Selector in CSS
The :nth-of-type(n) selector is used to match every element that is the nth child of the same type of its parent. We can say that n can be a number, a keyword, or a formula.
:only-of-type Selector in CSS
The :only-of-type selector is used to match every element that is the only child of its type of its parent.
:only-child Selector in CSS
The :only-child selector is used to match every element that is the only child of its parent.
:optional Selector in CSS
The :optional selector is used to select form elements that are optional. Those elements are called optional which do not have the required attribute. It is only applicable on input, select, and textarea elements.
:out-of-range Selector in CSS
The :out-of-range selector is used to select all elements with a value that is outside a specified range. It is usable for input elements with min or max attributes.
::placeholder Selector in CSS
The ::placeholder selector is used to select form elements with placeholder text and allows us to style the placeholder text.
:read-only Selector in CSS
The :read-only selector is used to select elements that are readonly. Forms having readonly attribute are defined as readonly.
:read-write Selector in CSS
The :read-write selector is used to select form elements that are readable and writeable. Form elements having no readonly and disabled attributes are defined as read-able and write-able.
:required Selector in CSS
The :required selector is used to select form elements that are required. Form elements having required attributes are said to be required. It is applicable to input, select, and textarea elements.
:root Selector in CSS
The :root selector is used to match the document root element. In an HTML document, html element is always the root.
::selection Selector in CSS
The ::selection selector is used to match the portion of an element that is selected by a user.
:target Selector in CSS
The :target selector is used to style the currently active target element.
:valid Selector in CSS
The :valid selector is used to select form elements with a value that validates according to the element default settings.
:visited Selector in CSS
The :visited selector is used to select visited links. This selector can be used on all elements.