Box Sizing

The box-sizing property defines how the width and height of an element are calculated: should they include padding and borders, or not.

Example

Set the "universal box-sizing":

CSS Syntax

box-sizing: content-box|border-box|initial|inherit;

Value	Description
content-box	Default. The width and height properties (and min/max properties) includes only the content. Border and padding are not included
border-box	The width and height properties (and min/max properties) includes content, padding and border
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Text Decoration

The text-decoration property specifies the decoration added to text, and is a shorthand property for:

text-decoration-line (required)
text-decoration-color
text-decoration-style

CSS Syntax

text-decoration: text-decoration-line | text-decoration-color|text-decoration-style|initial|inherit;

text-decoration: none; /*Removes lines from links (Võtab linkidelt jooned ära)*/

Value	Description
text-decoration-line	Sets the kind of text decoration to use (like underline, overline, line-through)
text-decoration-color	Sets the color of the text decoration
text-decoration-style	Sets the style of the text decoration (like solid, wavy, dotted, dashed, double)
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

List Style

Thelist-style property is a shorthand for the following properties:

list-style-type
list-style-position
list-style-image

If one of the values are missing, the default value for that property will be used.

list-style: none; /* Takes points from the list (Võtab listil punktid eest ära)*/

Value	Description
list-style-type	Specifies the type of list-item marker. Default value is "disc"
list-style-position	Specifies where to place the list-item marker. Default value is "outside"
list-style-image	Specifies the type of list-item marker. Default value is "none"
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Css Syntax

list-style: list-style-type list-style-position list-style-image|initial|inherit;

Value	Description	Play it
medium	Sets the font-size to a medium size. This is default	Play it »
xx-small	Sets the font-size to an xx-small size	Play it »
x-small	Sets the font-size to an extra small size	Play it »
small	Sets the font-size to a small size	Play it »
large	Sets the font-size to a large size	Play it »
x-large	Sets the font-size to an extra large size	Play it »
xx-large	Sets the font-size to an xx-large size	Play it »
smaller	Sets the font-size to a smaller size than the parent element	Play it »
larger	Sets the font-size to a larger size than the parent element	Play it »
length	Sets the font-size to a fixed size in px, cm, etc. Read about length units	Play it »
%	Sets the font-size to a percent of the parent element's font size	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit

See Examples

Display Grid

The grid property is a shorthand property for:

CSS Syntax

display: grid; /* Makes the page responsive */
grid-template-columns: auto auto auto auto;

Value	Description	Play it
none	Default value. No specific sizing of the columns or rows
grid-template-rows / grid-template-columns	Specifies the size(s) of the columns and rows	Play it
grid-template-areas	Specifies the grid layout using named items	Play it
grid-template-rows / grid-auto-columns	Specifies the size (height) of the rows, and the auto size of the columns
grid-auto-rows / grid-template-columns	Specifies the auto size of the rows, and sets the grid-template-columns property
grid-template-rows / grid-auto-flow grid-auto-columns	Specifies the size (height) of the rows, and how to place auto-placed items, and the auto size of the columns
grid-auto-flow grid-auto-rows / grid-template-columns	Specifies how to place auto-placed items, and the auto size of the rows, and sets the grid-template-columns property
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Transition Color

The transition property is a shorthand property for:

CSS Syntax

transition: property duration timing-function delay|initial|inherit;

Transition:color 150ms; /* You can change the color change speed (Sellega saab muuta värvi vahetuse kiirust) */
....:hover /* Here, hovering over a text changes the color (Siin siis hiirega mingi teksti peale minnes muudab värvi) */

Value	Description
transition-property	Specifies the name of the CSS property the transition effect is for
transition-duration	Specifies how many seconds or milliseconds the transition effect takes to complete
transition-timing-function	Specifies the speed curve of the transition effect
transition-delay	Defines when the transition effect will start
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

Justify Content

The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (horizontally).

Tip: Use the align-items property to align the items vertically.

CSS Syntax

Value	Description	Play it
flex-start	Default value. Items are positioned at the beginning of the container	Play it »
flex-end	Items are positioned at the end of the container	Play it »
center	Items are positioned at the center of the container	Play it »
space-between	Items are positioned with space between the lines	Play it »
space-around	Items are positioned with space before, between, and after the lines	Play it »
initial	Sets this property to its default value. Read about initial	Play it »
inherit	Inherits this property from its parent element. Read about inherit