CSS Modification .tags

I made some changes to the .tags class. Tags are displayed at the bottom of each post, which I will keep as is. The styling didn’t involve much because everything is inherited from other div tags, which I intend to alter as it’s confusing. In every post’s categories, timestamp, tags and body there is the same styling in the font. For start I changed the tags. The border-top property became a double 3 pixel line instead of a 1px solid. I kept the colour #dadada the same. I added the property font-variant which game that different look I wanted when compared to the main body. This property messes with the case of the font. I chose small-caps which converts all letters into capitals but smaller than the first of each word.

I needed though to make visible that every tag is a link (when you click on the tag it takes you to a search result with posts of the same tag). When I added colour to the class .tag , every letter of the area became coloured. In order to make only the links coloured I had to add a new class applicable to the .tags class only. The way is by setting a new class and an anchor pseudo-class after that class.
Like this .tags a:link. This new class will be effective only into the links of the specified class. I added the properties color and font-variant in order to achieve the desired look.

before

screenshot of the tags area under the post

after
tags area screenshot with all letters in colour

final
tags area screenshot 3

Although it looks good it is not finished yet. After you have clicked on the link the colour changes back to the inherited. This means I will have to add more selectors like the :visited and the :active.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s