Tips Tutorials

10 CSS Tricks You Might Not Know About

For web developers, CSS is the simplest way to style web pages. It’s incredible simple language that allows us to do a range of things to impact the visual layer of a website. Of course, as with any other skill online today, it’s worth learning as much as you can about the different tricks and tips that might help you to take advantage of your CSS environment. Here, we’ll look at just some of the tips and snippets you might not know about.


1.The CSS Font Shorthand Trick

When it comes to styling your CSS font, you might be using a complex solution like this:

Font-style: italic;
Font-weight: bold;
Font variant: small-caps;
line-height: 1.5em;
Font size: 1em;
Font family: Verdana, sans-serif

However, you don’t need to go through all of this clutter if you can make the most of CSS shorthand instead. This way you can simply say: font: bold italic small caps 1em/1.5em Verdana, Sans-serif. The key is making sure that you specify font family and size. Family most always come right at the end of your shorthand comment, while the size comes directly beforehand.

2.CSS Image Replacement

It’s generally a good idea to use the typical HTMLmarkup to display text, instead of using an image. This permits a faster download speed and more accessibility. However, if you need to use a specific image, then you’ll have to replace your text with an image. For instance, to use an obscure font, you’ll need to use the following commands: h1 {background: url(image.gif) no-repeat; height: # text-indent: -2000px}

3.Pushing Two Classes together

Most of the time, attributes will be given in a single class -but that doesn’t mean that’s all you can do. You can assign all the classes you want. Using different classes together, separate with a space instead of a comma means that the paragraph associates the rules assigned to both size and text. If between the classes contradict each other, then the class below the other in a CSS document will have precedence.

4.CSS Documents and Printing

Plenty of web pages have links you can click on to access print-friendly versions. However, there’s no need for this when you can create a second CSS document to apply when a user prints the page. Your page header will need to contain links to two CSS documents:

Media=”screen” />
Media=”print” />

The initial line of code calls up the CSS for the screen, while the second line of code calls up the printable version.

5.CSS Border Default Values

When creating border rules for CSS, you’ll need to specify style, width, and colour in any order. For instance, border #000 solid 3px will give you a 3px thick solid black border. However, you only need the border style. The default would be used if you stick to border: solid. Defaults are a medium 3 to 4px border, and the colour for the border will reflect the text used inside of the border.

6.Support Opacity/Transparency in Major Browsers

With this command, you can give the div element a specific level of opacity. For instance, you can use the following command to deliver a 60% opacity:

Div {/* standards-compliant-browsers */ opacity: 0.6;/*

7.Centering a Fixed Page Element

If you need to centre a fixed height or fixed width element within the middle of a container, then you can use the following command. You can adapt your code to centre images, text, or anything else within its chosen container. To begin with, you’ll need to do a little math to get the fixed-size element in centre according to margins and positioning.

Div {position: absolute; top: 50%; left: 50%; width: 500px; height: 400px; margin-top: -200px; (half of the element height), margin-left: -250px; (half of the element width)}

8.Vertically Aligning with CSS

With tables, vertical alignment was easy. All you needed to do to make your cell content line up in the middle of a page was use the code vertical-align: middle. Unfortunately, with a CSS layout, matters become a little more complex. Imagine you have a menu item with a height of around 2em, and you put the vertical align command into your rules. This won’t make any different, but it will push the text up to the top of your box. The solution is simply to specify the line height to ensure it’s the same as the overall height of the box in your CSS rules. Since the box is 2em high in our example, you’d put line-height: 2em into the rule, and the text would float within the centre of the box.

9.CSS Positioning in a Container

One of the main reasons why web developers love using CSS so much, is that it allows you to position objects and elements wherever you like on your document. It’s also completely possible to position certain objects in a container with relative simplicity. All you need to do is assign a rule into the container as follows: #container {position: relative}. From that point, any element in your should be situated relative to the container itself.

10.Background Colour Full Fill

Finally, one of the most significant disadvantages of using CSS, is that it’s difficult to control the appearance of your webpages vertically. This can cause problems that standard table layouts simply don’t suffer from. Imagine you have a column running down the left side of your page which contains information about site navigation. Perhaps your page has a black background, but you want your column on the left to have a white background. You might think that you should simply put: #navigation {background: white; width: 150px} into the rule set. However, the navigation doesn’t continue to the bottom of the screen, so your colour doesn’t either.

If you want to avoid your white being cut down half way down the page, you’ll need to cheat and assign an image to the background that’s the same width and colour as your left-most column. This would mean using this command: body {background: URL (white-image.gif) 0 0 repeat-y}

More Resources:

Best Free Adobe Photoshop Plugins

Latest Premium and Free Adobe Muse Templates

Characteristics of A Great User Interface Design


Leave a Comment

eighteen + 3 =