The style sheet language CSS is used to code the look of a website and it is preferred by most web designers. What many designers miss though are shortcuts and things that can make their work easier. Here are six such CSS tricks that you may have missed till now.
1. Shorthand rule: Shorthand in CSS is very useful. It makes your code simpler and easier to edit. Moreover, it reduces the load on your server and makes downloads faster.<br />
<br />
This is what you would be doing now,<br />
<br />
<i>font-weight: bold;<br />
font-style: italic;<br />
font-variant: small-caps;<br />
font-size: 1em;<br />
line-height: 1.5em;<br />
font-family: verdana,sans-serif</i><br />
<br />
The shorthand is,<br />
<br />
<i>font: bold italic small-caps 1em/1.5em verdana,sans-serif</i><br />
<br />
2. Two classes together: There is no rule saying that attributes need to be assigned to a single class. You can assign as many classes as you want.<br />
<br />
<i><p class="text side">...</p></i><br />
<br />
3. CSS border default value: When putting down the border rule, the programmer usually specifies three things: colour, width and style. What many don’t know is that only the border style is required here and you can ignore the other two. So, you usually write, border: 3px solid #000, which gives you a solid black border that is 3px thick. Instead you can write border: solid and the default values for the border will automatically be used. <br />
<br />
The default width for a border is medium (3-4px) and the default colour is the same as the text colour that has been chosen within the border. <br />
<br />
4. CSS document for printing: You would have seen that many websites link to a print friendly page often. This though is not necessary. Instead, you can set up a second CSS document that will be used when the user wants to print a page. <br />
<br />
For this you page header will contain links to two CSS documents. First for the screen and second for printing.<br />
<br />
<i><link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /><br />
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" /></i><br />
<br />
In this the first line is calling the CSS for the screen and the second is calling the CSS for the print version. Next you need to create a second CSS document and save it as <i>printstyle.css</i>. Your screen CSS command will be pointing to this document.<br />
<br />
<i><link type="text/css" rel="stylesheet" href="printstyle.css" media="screen" /></i><br />
<br />
After this you just need to keep entering commands until the screen on the display looks the way you want the printable version to look.<br />
<br />
5. Image replacement: Using HTML markup display text instead of an image allows downloads to be faster. In addition, it also has accessibility benefits. But there are times when you want a particular font, which is less likely to be present on all your user’s computers. In such cases an image is the only way out. <br />
<br />
To put an image, you use, <br />
<br />
<h1><img src="widget-image.gif" alt="XYZ" /></h1><br />
<br />
But search engines don’t assign the same importance to alt text as they do to real text. So what do you do then? Of course, there’s a simple solution,<br />
<br />
<h1>XYZ</h1><br />
<br />
But that means you’re compromising on the font that you want. Here’s how to fix that issue,<br />
<br />
<i>h1<br />
{<br />
background: url(widget-image.gif) no-repeat;<br />
height: image height<br />
text-indent: -2000px<br />
}</i><br />
<br />
In this you need to change the image height to the height of the image that is needed. This code though will cause accessibility issues. Users with images turned off won’t see the image.<br />
<br />
6. Centre aligning a block element: When you want your website to have a fixed width layout and the content floats in the middle of the screen, use the following command, <br />
<br />
<i>#content<br />
{<br />
width: 700px;<br />
margin: 0 auto<br />
}</i><br />
<br />
In the body of the HTML document enclose every item with <i><div id="content"></i>.
1. Shorthand rule: Shorthand in CSS is very useful. It makes your code simpler and easier to edit. Moreover, it reduces the load on your server and makes downloads faster.<br />
<br />
This is what you would be doing now,<br />
<br />
<i>font-weight: bold;<br />
font-style: italic;<br />
font-variant: small-caps;<br />
font-size: 1em;<br />
line-height: 1.5em;<br />
font-family: verdana,sans-serif</i><br />
<br />
The shorthand is,<br />
<br />
<i>font: bold italic small-caps 1em/1.5em verdana,sans-serif</i><br />
<br />
2. Two classes together: There is no rule saying that attributes need to be assigned to a single class. You can assign as many classes as you want.<br />
<br />
<i><p class="text side">...</p></i><br />
<br />
3. CSS border default value: When putting down the border rule, the programmer usually specifies three things: colour, width and style. What many don’t know is that only the border style is required here and you can ignore the other two. So, you usually write, border: 3px solid #000, which gives you a solid black border that is 3px thick. Instead you can write border: solid and the default values for the border will automatically be used. <br />
<br />
The default width for a border is medium (3-4px) and the default colour is the same as the text colour that has been chosen within the border. <br />
<br />
4. CSS document for printing: You would have seen that many websites link to a print friendly page often. This though is not necessary. Instead, you can set up a second CSS document that will be used when the user wants to print a page. <br />
<br />
For this you page header will contain links to two CSS documents. First for the screen and second for printing.<br />
<br />
<i><link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /><br />
<link type="text/css" rel="stylesheet" href="printstyle.css" media="print" /></i><br />
<br />
In this the first line is calling the CSS for the screen and the second is calling the CSS for the print version. Next you need to create a second CSS document and save it as <i>printstyle.css</i>. Your screen CSS command will be pointing to this document.<br />
<br />
<i><link type="text/css" rel="stylesheet" href="printstyle.css" media="screen" /></i><br />
<br />
After this you just need to keep entering commands until the screen on the display looks the way you want the printable version to look.<br />
<br />
5. Image replacement: Using HTML markup display text instead of an image allows downloads to be faster. In addition, it also has accessibility benefits. But there are times when you want a particular font, which is less likely to be present on all your user’s computers. In such cases an image is the only way out. <br />
<br />
To put an image, you use, <br />
<br />
<h1><img src="widget-image.gif" alt="XYZ" /></h1><br />
<br />
But search engines don’t assign the same importance to alt text as they do to real text. So what do you do then? Of course, there’s a simple solution,<br />
<br />
<h1>XYZ</h1><br />
<br />
But that means you’re compromising on the font that you want. Here’s how to fix that issue,<br />
<br />
<i>h1<br />
{<br />
background: url(widget-image.gif) no-repeat;<br />
height: image height<br />
text-indent: -2000px<br />
}</i><br />
<br />
In this you need to change the image height to the height of the image that is needed. This code though will cause accessibility issues. Users with images turned off won’t see the image.<br />
<br />
6. Centre aligning a block element: When you want your website to have a fixed width layout and the content floats in the middle of the screen, use the following command, <br />
<br />
<i>#content<br />
{<br />
width: 700px;<br />
margin: 0 auto<br />
}</i><br />
<br />
In the body of the HTML document enclose every item with <i><div id="content"></i>.
No comments:
Post a Comment