1. How to align the layer in the middle of the web-page?
To center a layer you shall set a fixed layer width in % or pixels. Then you shall add a paragraph on the left and on the right with "auto" value to the style of the layer.
An example:
#wrap{
width:1000px; /*set a fixed width to the layer*/
margin:0 auto; /*margin is to set a value 0 for the top/bottom paragraphs from the layer, and auto sets the left/right paragraphs from the layer */
}2. How to change paragraph value on the web page?
To change paragraphs on the web page you shall set the following value to the document body:
An example:body{
margin:0; /* Remove paragraphs */
padding:0; /* Remove margins */
} 3. How to change distance between the paragraphs in the text.
When you use a tag <p> you receive paragraphs by default on the top and on the bottom of the text block. It is to separate visually one block from the other.
To remove or to change the paragraphs you shall use our universal well known attribute "margin".
An example:p{
margin-top: 0.5em; /* Change the top paragraph */
margin-bottom:0; /* Change the bottom paragraph*/
} 4. How to remove paragraphs and margins for all the elements on the page?
To make paragraphs and margins for all the elements on the page equal to 0, use style parameters margin and padding with 0 value by adding them to the universal selector *.
An example:* {
margin: 0;
padding: 0;
} Pay attention to the fact that the example above removes paragraphs for both the text and the page itself.
5. How to choose background and text color on the page?
Any web designer knows how important is the background color for any web page and represents its considerable element. First it sets the mood and character of the whole web site and of course it favours an easy text reading. To change background color you shall use background parameter added to BODY selector. Correspondingly Color parameter is responsible for the font color.
An example:body {
background-color: #fc0; /* Background color */
color: #036; /* Font color */
} 6. How to make external links look different on your web site with the help of CSS.
Being a web developper you may know how important links to other web sites are.
If you are working on optimization of your web site position in the search engines, link exchange may be a perfect method to attract new customers and increase your positions.
In this artticle we offer to your consideration a very efficient method to make external links differ by color from interior links on your web pages.
This method is efficient for all the we browsers and consists of creating a new class and adding it to required links.
For example we create "blank" class and with the help of "class" parameter to html tags you need.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Link underlining</title>
<style type="text/css" />
A.blank {
font-weight: bold; /* Bold outline */
}
</style>
</head>
<body>
<p><a href="index.html">Example of simple link</a></p>
<p><a href="http://www.graphicson.com" class="blank">Link to graphicson.com</a></p>
</body>
</html>
Spectacular example:
As you can see a lower link is underlinded with the help of bold outline that is being set through styles for blank class.
7. Underlining of links!
One of the most popular CSS tricks is underlining of links by default and hidden underlining of links when you point to them with a cursor. A user more willingly accept visually a link that is underscored.
That's why we recommend to underline links especially in text block.
a{
color:#0000ff; /* color link */
text-decoration:underline; /* underlined link*/
}
a:hover{
text-decoration:none; /* remove underlining */
}Spectacular example:
8. Link to a new window
If you need to create a link to some document that is to be open in a new browser window, then you shall use parameter target="_blank" of <А> html tag.
Usually this feature is required when you have a link to another web site or if you wish to detach a piece of information from the whole web site content. But in this particular case it is desirable to place an additional button allowing a user to close a new window.
Example of html code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Link to new window</title>
</head>
<body>
<p><a href="http://www.graphicson.com">Simple link to www.graphicson.com</a></p>
<p><a href="http://www.graphicson.com" target="_blank">Link opens a new window to www.graphicson.com</a></p>
</body>
</html>
Spectacular example:Close