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.

PROPERTYDESCRIPTIONVALUE
FontA 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-familyA prioritized list of family names or generic family names for an elementArial Times new roman Calibri,etc.
Font-styleSpecifies an aspect value for an element that will preserve the X-height of the first choice fontNormal Italic Oblique
Font-WeightDefine the font size with font styleNormal Bold Bolder Light Lighter One of The 9 number values (100,200,300,…,900)
Font-sizeDefine the absolute sizeXX X-Normal Small-medium Medium Large X-Large XX-Large Smaller Larger Length Percentage(%)
Font-size-adjustSpecifies an aspect value for an element that will preserve the X-height of the first choiceNone Number
Font-stretchExpands the current font-familyNormal Wider Narrower Ultra-condensed Extra-condensed Semi-condensed Expanded Extra-expanded Ultra-expanded
Font-variantDisplays text in a small caps font or a normal fontNormal 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.

PROPERTYDESCRIPTIONVALUE
ColorSets the color of a textColor
DirectionSets the text directionLTR(Left to Right) RTL(Right to Left)
Line-heightSets the distance between lineNormal Number Length Percentage (%)
Letter-spacingIncrease or decrease the space between charactersNormal Length
Text-alignAlligns the text in an elementLeft Right Center Justify
Text-decorationAdds decoration to textNone Underline over line Line-through Blink
Text-indent(spacing)Indents the first line of text in an elementLength Percentage (%)
Text-shadowSets the shadow of textNone Color Length
Text-transactionControls the letters in an elementNone Capitalize Uppercase Lowercase
White-spaceSets how white space inside an element is handledNormal Pre
Word-spacingIncrease or decrease space between wordsNormal 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.

PROPERTYDESCRIPTIONVALUE
BorderA shorthand property for setting all of property for the four borders in one declarationBorder-width Border-style Border-color
Border-bottomA shorthand property for setting all of property for the bottom borders in one declarationBorder-bottom-width Border-style Border-color
Border-bottom-colorSets the color of the bottom borderBorder-color
Border-bottom-sizeSets the style of the bottom borderBorder-style
Border-bottom-widthSets the width of the bottom borderBorder-style
Border-colorSets  the color of the four borders, can have from 1 to four colorsColor range
Border-leftA shorthand property for setting all of property for the left borders in one declarationBorder-left-width Border-style Border-color
Border-left-colorSets the color of the left borderBorder-color
Border-left-sizeSets the style of the left borderBorder-style
Border-left-widthSets the width of the left borderThin 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:

PropertyDescription
list-styleSets all the properties for a list in one declaration
list-style-imageSpecifies an image as the list-item marker
list-style-positionSpecifies the position of the list-item markers (bullet points)
list-style-typeSpecifies the type of list-item marker

Color Properties :-

The color property specifies the color of text.

ValueDescription
colorSpecifies the text color. Look at CSS Color Values for a complete list of possible color values.
initialSets this property to its default value. 
inheritInherits this property from its parent element. 

Background Properties :-

ValueDescription
background-colorSpecifies the background color to be used
background-imageSpecifies ONE or MORE background images to be used
background-positionSpecifies the position of the background images
background-sizeSpecifies the size of the background images
background-repeatSpecifies how to repeat the background images
background-originSpecifies the positioning area of the background images
background-clipSpecifies the painting area of the background images
background-attachmentSpecifies whether the background images are fixed or scrolls with the rest of the page
initialSets this property to its default value. 
inheritInherits 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:

image 3
ValueDescription
content-boxDefault. The width and height properties (and min/max properties) includes only the content. Border and padding are not included
border-boxThe width and height properties (and min/max properties) includes content, padding and border
initialSets this property to its default value. 
inheritInherits this property from its parent element. 

1 thought on “CSS – Properties”

Leave a Comment