The Using of One Line CSS Styling

Hi bloggy readers,
The using of one line value in CSS styling has been discussed in my older post called - The using of One Line Padding Command in CSS styling -. In case you haven't read that post, in that article, i've already shown you about the meaning and using of one line padding values padding: 20px 20px 20px 20px in CSS styling, which can also be utilized in creating margin area on element.

Anyway, besides the using of that one line values or used to be called as "shorthand property" on padding and margin, there is also other choice in using a one line command on other part of CSS styling, specifically, on the exact CSS anchor that controls the element. For example, if your sidebar is controlled by the CSS styling .sidebar, you can use a one line CSS styling just like in the shorthand property method above. If you can't swallow my explanation above, you must read the whole post to get the better understanding about this article. Okay, here's the tutorial.

Usually, the link interfaces (standard, hover, and visited links) in post area are controlled by the CSS styling below, where .post a indicates the first or standard interface of link, .post a:visited indicates the interface of visited link, and .post a:hover indicates the appearance of link when being pointed by mouse cursor.

.post a {
  text-decoration:none;
  color:red;
  font-size:15px;
  font-weight:bold;
}

.post a:visited {
  text-decoration:none;
  color:red;
  font-size:15px;
  font-weight:bold;
}

.post a:hover {
  text-decoration:none;
  color:red;
  font-size:15px;
  font-weight:bold;
}

Now, in order to use the same method just like in shorthand property method in the value part of CSS styling, we can also use that similar method to the exact CSS styling, not only on the values. So, if you want to use a one line CSS styling to control the link interfaces of standard link, hover, and visited, you can simply re-type the CSS styling above into more simple form of CSS styling like the example below:

.post a, .post a:visited, .post a:hover {
  text-decoration:none;
  color:red;
  font-size:15px;
  font-weight:bold;
}

As you can see in the CSS styling above, the CSS styling that controls the link interface has been wrapped up in one line .post a, .post a:visited, .post a:hover. By doing this, all the link interfaces of standard, visited, and hover will be displayed in the same interface, in bold and red color, 15px sized, and without the underline decoration.

As a result in your blog, the link element will appear like the picture below, in red color when in the standard mode, visited and also hover mode as well.

Okay, that's it for today's tutorial. Let see if i can digg more about this topic in the future. See you at my next post.

I'm Out...