Some CSS Tricks that you might have Missed:
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 />
Comments
Post a Comment