It is assumed that the designer has some hard working stuff to do, and you can’t make a proper design by coding if you have limited knowledge of CSS. However, is not always the easiest thing to do, which is why we have created a figure which describes some important attributes of Css structure. It provides a basic visual example of CSS elements and their structure in a CSS style sheet.
Following are the various items to note about the code in above image:
- Selectors—These are used when declaring and calling a particular rule. The above image identifies two types of selectors, an ID selector and a Class selector, both of which can be used with XHTML tags, such as or .
- Properties—Various aspects of a selector that can be used for different styles.
- Values—The specific qualities of properties.
- Shorthand Properties—A method of combining multiple related values for a property under one general property.
- Rule—The entire grouping of a selector, a property (or properties), and value(s).
Some Useful Css Properties
As we know that css is the most easiest and common way to style a Html or normal text, So below we have added a table containing some most important css attributes and their usage. These css properties are responsible for the styling attribute of the css coding.
margin:0px 0px 0px 0px; Used for setting the distance between the outside border of a container and what is nested inside of it.
padding:0px 0px 0px 0px; Used for setting the distance between the outside border of a container and what is nested inside it.
font:13px Arial, Helvetica, sans-serif; font-weight::bold; Used to set the size, face, and weight of a font. The bold value, however, does not work in all situations, which is why it is sometimes separated out as font-weight:bold; or included in the XHTML code.
color:#000000; Used to set the text color.
a:link { color:#FF7800; } Used to set a hyperlink color.
a:visited { color:#FF5A00; } Used to set the hyperlink color of a visited or previously clicked link.
a:active { color:#FFC600; } Used for defining the color of a link while it is being clicked and has not yet been released.
a:hover { color:#000000; } Used for changing the color of a hyperlink when it is moused over but has yet to be clicked.
a.linklist:link { text-decoration: none;color:#308DAE;} Used for setting the color of a link with an assigned class (e.g., class=”linklist”).
a.linklist:visited { text-decoration: none;color:#308DAE;} Used for setting the visited color of a link with an assigned class (e.g., class=”linklist”).
a.linklist:active { text-decoration: none;color:#308DAE;} Used for setting the active color of a link with an assigned class (e.g., class=”linklist”).
a.linklist:hover { text-decoration: underline;color:#FF7800;} Used for setting the hover color of a link with an assigned class (e.g., class=”linklist”).
border: 1px solid #000000; Used for setting the border of a CSS element to 1, with a specified color.
text-align:left;text-align:right;text-align:center; Used to control the horizontal placement of content, whether the value left, right, or center is used.
position:relative;position:absolute; Used to define whether a box, or container, in the box model will be assigned relative or absolute positioning.
float:right;float:left;float:center; Used to position elements to the left or right in content.
clear:both; Used to remove floating elements from the left and right sides of a container.
width:100%; Used to set the width of an element, such as a box.
margin-left:auto;margin-right:auto; Used when centering a fixed-width Web page.
left:0px;right:0px; Used for setting how many pixels an element is placed from the left or right side of the body or a parent box.
top:0px;bottom:0px; Used for setting how many pixels an element is placed from the top or bottom of the body or a parent box.
height:78px; Used for forcing the height of an element.
line-height:42px;vertical-align:30%; Used for forcing the vertical positioning of text in an element. The line-height property needs to be included for the vertical-align property to be interpreted by the browser. It also should appear after the font property to work for the various browsers.
background:#000000 url(images/bg-menu.gif) repeat-x 0px 0px; Used for determining what background image is used, where it is placed, and how it is repeated. The HEX value sets what the background color of an element will be if the background does not fill the entire space.
