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