Tag: css

CSS font shorthand property explained

At some point in the past I stumbled upon a picture or an article describing an example of using the CSS shorthand for the font property in one line. I found the sketch I made in an old notebook and decided to post it here (reproduced of course because my handwriting is terrible). So I guess the only credit that goes to me is for taking the time with it, sorry I can’t remember the original source and so anyway, the following diagram should be pretty self-explanatory.

CSS font shorthand example

Advertisements
How to center a DIV both vertically and horizontally

How to center a DIV both vertically and horizontally

This quick and lightweight method offers the benefit of getting the job done in just a few lines of CSS, in those situations where using a framework / boilerplate would be an absolute overkill, i.e. a simple separate standalone login screen for an already existing application, where the actual login form would look just lovely in the middle of the screen. The only rather insignificant downside of this technique is that the size of the centered element is fixed.

body {position:relative}
#centered {position:fixed; top:50%; left:50%;}
#centered {width:18em; height:8em; margin-top:-4em; margin-left:-9em}

We basically just set relative positioning on the body and fixed or absolute positioning on the div element to be aligned. Define the div dimensions in em units and set the top and left attributes to 50%. Set the margin-top and margin-left attributes to minus half the width and height values.

HTML for effective website logos

HTML for effective website logos

Ideally, the logo in the header section of the website should be in fact textual, in the form of a H1 heading. But that alone would look like something from back in the ’90s where the Internet was text.

Luckily, with a bit of CSS magic, we can have both the SEO benefit of a textual H1 and the awesomeness of the perfect eye-candy logo you’ve been designing for hours. The following example will accomplish just that and also make the logo clickable, offering a backlink to the frontpage of the website.

HTML

<html><body><header>
<h1><a href=”SITE_ROOT” target=”_self” title=”SITE_NAME”>SITE_NAME</a></h1>
</header></body></html>

CSS

body > header h1 a {
display: block;
background: url(logo.png) no-repeat;
text-indent: -9999px;
}

That’s it, really, plus this method is not considered a blackhat technique and does contribute to over-optimization.