Techno

CSS Attributes and Properties - Elements

CSS attributes or property used to the differing effects on the HTML DOM. As you know that CSS refers to the Cascading style that helps to design a website. You can say the CSS attributes as CSS elements. CSS elements and attributes are same. CSS resource included various attributes to design the website. If you have need design a div element then you can use different CSS elements . Every attribute has different properties.

CSS attributes/Elements list here(property) -

Attributes/Elements Description /attributes or property
Class Name (.header) Create a CSS class name(header) with .(dot)===>(.header)
color color defines the text color
background-color Specified the background color of a div or block
font-size Increese and decrese the text size by give in px like 20px;
font-family Specified the font-family for text like arial,times New Roman,calibri etc -
margin-left Move left to right if positove (20px) and move to left if negative (-20px)
margin-right Move right to left if positove (20px) and move to right if negative (-20px)
margin-bottom Move up to down(bottom) if positove (20px) and move to up if negative (-20px)
text-align How to align a text eg center ,left or right
padding Defines the space around the div or block
height Increse and decrease hieght of div or block
width Increse and decrease width of div or block
box-shadow box-shadow property is used to shadow effect for div element or block
box-sizing: border-box; padding and border in the div element's total width and height:
caret-color: blue; Define the color of cursor in input element
background-image: Define the color of cursor in input element
border-color: Define the border color for block .
border-style : Specified the style for the border (block)
border-width: Specified the width for the border (block)

Use of these CSS attributes and elements |attributes or property

CSS attributes or property have different effect on block elements . Whenever you need effects on your block (div block) then you have to need to use CSS attributes. You have seen above attributes or property and their description. That is not enough to create CSS using CSS attributes. You just need to know about the elements. CSS attributes contain more sub-attributes or elements(attributes or property) .
for example:- CSS attribute => text-align . In the above table, you have read, how to align a text eg center, left or right.
Sub attributes /elements: center ,left ,right .
text-align:center;
text-align:left ;
text-align:right ;

CSS attributes and Sub attributes

Attributes/Elements Sub attributes/Properties =>How to use ?
Class Name (.header) Not have any sub attribute
color color:red
color:blue;
color: #B22222;
color:colorname or color code ;
background-color background-acolor:red
background-color:blue;
background-color: #B22222;
background-color:colorname or code ;
font-size font-size:20px;
font-size:30px;
font-size:20%;
font-size:30%;
font-size:value(px or %);
font-family font-family:arial;
font-family:Bell MT
font-family:Bell MT;
font-family:Calibri
font-family:family name (font name)
margin-left margin-left:10px;
margin-left:20px;
margin-left:20%;
margin-left:10%;
margin-left:value(px or %);
margin-right margin-right:10px;
margin-right:20px;
margin-right:20%;
margin-right:10%;
margin-right:value(px or %);
margin-bottom margin-bottom:10px;
margin-bottom:20px;
margin-bottom:20%;
margin-bottom:10%;
margin-bottom:value(px or %);
text-align text-align:center;
text-align:left;
text-align:right;
text-align:sub-attribute;
padding padding:30px;
padding:40px;
padding:40%;
padding:40%;
padding:value(px or %)
height heigh:35px;
heigh:43px;
heigh:36%;
heigh:43%;
heigh:value(px or %);
width width:35px;
width:43px;
width:36%;
width:43%;
width:value(px or %);
box-shadow box-shadow: 2px 8px;
box-shadow: 2px 8px #FF0000;
box-sizing box-sizing: border-box;
caret-color caret-color: blue;
caret-color: red;
caret-color:#B22222;
caret-color: colorname or color code ;
background-image background-image:url("myimage.jpg");
background-image:url("myimage.png");
background-image:url("myimage.jpeg");
background-image:url("myimage.gif");
background-image:url("image-name.formate");
border-color: border-color:red
border-color:blue;
border-color:#B22222;
border-color:colorname or color code ;
border-style : none border-style:solid ;
border-style:dotted;
border-style:dashed ;
border-style:double;
border-style:groove ;
border-style:ridge;
border-style:inset ;
border-style:outset;
border-style:hidden;
border-width: border-width:35px;
border-width:43px;
border-width:36%;
border-width:43%;
border-width:value(px or %);

All properties have diffrent effect on HTML DOM . Use all properties and try to change the effects .