CSS – Properties

Introduction

Properties of CSS :-

1. Font Properties
2. Text Properties
3. Margin properties
4. Border Properties
5. List properties
6. Color Properties
7. Background Properties
8. Box Properties

Font Properties :-

The css font properties allow you to change the font family.

PROPERTY	DESCRIPTION	VALUE
Font	A shorthand property for setting all of the properties for a font in  one declaration.	Font-style Font-variant Font-weight Font-size/line-height Font-family Caption Icon Menu Message-box Small-caption Status bar
Font-family	A prioritized list of family names or generic family names for an element	Arial Times new roman Calibri,etc.
Font-style	Specifies an aspect value for an element that will preserve the X-height of the first choice font	Normal Italic Oblique
Font-Weight	Define the font size with font style	Normal Bold Bolder Light Lighter One of The 9 number values (100,200,300,…,900)
Font-size	Define the absolute size	XX X-Normal Small-medium Medium Large X-Large XX-Large Smaller Larger Length Percentage(%)
Font-size-adjust	Specifies an aspect value for an element that will preserve the X-height of the first choice	None Number
Font-stretch	Expands the current font-family	Normal Wider Narrower Ultra-condensed Extra-condensed Semi-condensed Expanded Extra-expanded Ultra-expanded
Font-variant	Displays text in a small caps font or a normal font	Normal Small-caps

Text Properties :-

The CSS text property allows you to control the appearance of text. It is possible to change the colour of a text, increase or decrease the space between characters in a text, indent the first line in a text and more.

PROPERTY	DESCRIPTION	VALUE
Color	Sets the color of a text	Color
Direction	Sets the text direction	LTR(Left to Right) RTL(Right to Left)
Line-height	Sets the distance between line	Normal Number Length Percentage (%)
Letter-spacing	Increase or decrease the space between characters	Normal Length
Text-align	Alligns the text in an element	Left Right Center Justify
Text-decoration	Adds decoration to text	None Underline over line Line-through Blink
Text-indent(spacing)	Indents the first line of text in an element	Length Percentage (%)
Text-shadow	Sets the shadow of text	None Color Length
Text-transaction	Controls the letters in an element	None Capitalize Uppercase Lowercase
White-space	Sets how white space inside an element is handled	Normal Pre
Word-spacing	Increase or decrease space between words	Normal Length

Margin properties :-

The CSS margin properties are used to create space around elements, outside of any defined borders.

With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

CSS has properties for specifying the margin for each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left

All the margin properties can have the following values:

• auto – the browser calculates the margin
• length – specifies a margin in px, pt, cm, etc.
• % – specifies a margin in % of the width of the containing element
• inherit – specifies that the margin should be inherited from the parent element

margin: 25px 50px 75px 100px;

• top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px

Border Properties :-

The CSS border properties allow you to specify the style and color of an element’s border. In HTML, We use tables to create browsers around a text, but with the css border properties. We can create borders with nice effects and it can be applied to any element.

PROPERTY	DESCRIPTION	VALUE
Border	A shorthand property for setting all of property for the four borders in one declaration	Border-width Border-style Border-color
Border-bottom	A shorthand property for setting all of property for the bottom borders in one declaration	Border-bottom-width Border-style Border-color
Border-bottom-color	Sets the color of the bottom border	Border-color
Border-bottom-size	Sets the style of the bottom border	Border-style
Border-bottom-width	Sets the width of the bottom border	Border-style
Border-color	Sets  the color of the four borders, can have from 1 to four colors	Color range
Border-left	A shorthand property for setting all of property for the left borders in one declaration	Border-left-width Border-style Border-color
Border-left-color	Sets the color of the left border	Border-color
Border-left-size	Sets the style of the left border	Border-style
Border-left-width	Sets the width of the left border	Thin medium

List properties :-

The CSS list properties allow you to:

• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items

When using the shorthand property, the orders of the property values are:

Property	Description
list-style	Sets all the properties for a list in one declaration
list-style-image	Specifies an image as the list-item marker
list-style-position	Specifies the position of the list-item markers (bullet points)
list-style-type	Specifies the type of list-item marker

Color Properties :-

The color property specifies the color of text.

Value	Description
color	Specifies the text color. Look at CSS Color Values for a complete list of possible color values.
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Background Properties :-

Value	Description
background-color	Specifies the background color to be used
background-image	Specifies ONE or MORE background images to be used
background-position	Specifies the position of the background images
background-size	Specifies the size of the background images
background-repeat	Specifies how to repeat the background images
background-origin	Specifies the positioning area of the background images
background-clip	Specifies the painting area of the background images
background-attachment	Specifies whether the background images are fixed or scrolls with the rest of the page
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

Box Properties :-

The CSS box-sizing the property allows us to include the padding and border in an element’s total width and height.

Without the CSS box-sizing Property

By default, the width and height of an element is calculated like this:

width + padding + border = actual width of an element
height + padding + border = actual height of an element

This means: When you set the width/height of an element, the element often appear bigger than you have set (because the element’s border and padding are added to the element’s specified width/height).

The following illustration shows two <div> elements with the same specified width and height:

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.
inherit	Inherits this property from its parent element.