Text Styling

color:

Sets the text color.

Values: Named colors (like red, blue), hexadecimal color codes, RGB values, etc.

TRY ALL TAGS YOURSELF >>

font-family:

defines the font for the text.

Values: 'Font names, generic font families (e.g., 'serif', 'sans-serif').

TRY ALL TAGS YOURSELF >>

font-size:

Sets the text size.

Values: Pixels (px), ems (em), percentages (%), etc.

TRY ALL TAGS YOURSELF >>

font-weight:

Sets the boldness of the text.

Values: ' normal', 'bold', numeric values (e.g. '700').

TRY ALL TAGS YOURSELF >>

font-style:

Sets the style of the text.

Values: 'normal', 'italic', 'oblique'

TRY ALL TAGS YOURSELF >>

text-decoration:

Adds decorations to text.

Values: 'none', 'underline', 'overline', 'line-through'.

TRY ALL TAGS YOURSELF >>

text-align:

Specifies text alignment.

Values: 'left', 'right','center','justify'.

TRY ALL TAGS YOURSELF >>

Background Styling

background-color:

Sets the background color of an element.

Values: Named colors (e.g. 'red', 'blue'), hexadecimal color codes, RGB values, etc.

TRY ALL TAGS YOURSELF >>

background-image:

Sets a background image.

Values: 'URL'

TRY ALL TAGS YOURSELF >>

background-repeat:

Defines how background images are repeated.

Values: 'repeat', 'no-repeat', 'repeat-y', 'repeat-x'

TRY ALL TAGS YOURSELF >>

background-size:

Specifies the size of background images..

Values: px

TRY ALL TAGS YOURSELF >>

Box Model

margins and padding:

margin:Sets margins around an element
padding: Sets padding within an element

Values: 'Length values (px, em)', 'percentages (%)', 'auto'

TRY ALL TAGS YOURSELF >>

border:

Sets all border properties

Values: 'border-width', 'border-style', 'border-color'

TRY ALL TAGS YOURSELF >>

width and height:

width: Sets the width of an element
height: Sets the height of an element

Values: 'Pixels(px), 'percentages (%)', 'auto'

TRY ALL TAGS YOURSELF >>

box-sizing:

Specifies how an element's is box value is calculated.

Values: 'content-box', 'border-box'

TRY ALL TAGS YOURSELF >>

Layout & Positioning

display:

Specifies how an element is displayed.

Values: 'block', 'inline', 'inline-block', 'none'

TRY ALL TAGS YOURSELF >>

position:

Specifies the positioning method.

Values: 'static', 'relative', 'absolute', 'fixed'

TRY ALL TAGS YOURSELF >>

float:

Specifies how an element should float.

Values: 'left', 'right', 'none'

TRY ALL TAGS YOURSELF >>

overflow:

Defines how content that overflows an element's box is handled.

Values: 'visible', 'hidden', 'scroll', 'auto'

TRY ALL TAGS YOURSELF >>

Visibility & Opacity

opacity:

Sets the opacity of an element:

Values: Numeric values between 0 (transparent) and 1 (opaque)

TRY ALL TAGS YOURSELF >>

visibility:

Controls the visibility of an element.

Values: 'visible', 'hidden'

TRY ALL TAGS YOURSELF >>

Transformations

transform:

Applies 2D and 3D tranformations to element.

Values: 'rotate(deg)', 'skewX(deg)', 'skewY(deg)'

TRY ALL TAGS YOURSELF >>

transform-origin:

Sets the origin point for transformations.

Values: 'x-axis', 'y-axis'

TRY ALL TAGS YOURSELF >>

Lists Tags

list-style-type:

Sets the list item marker type.

Values: 'circle', 'square', 'upper-roman', 'lower-alpha'

TRY ALL TAGS YOURSELF >>

list-style-image:

Sets an image as the list item marker.

Values: 'URL'

TRY ALL TAGS YOURSELF >>