Change Colour of Text Underline

Looking to set the underline colour of text to be a different colour to the text.

The default colouring will set the underline colour to be the same as the text, as illustrated below:

Example text with an underlined word

We can use CSS for setting the colour using the parameter will be

text-decoration-color: #dd0000;

This may be included, targeting underlines in general, or by use of classes/ids.

Here’s the same underline, with the text-decoration-color set. In this example I’ve used the in-line style – its easier to use for ad-hoc styling examples.

Example text with an <u style=”text-decoration-color: #dd0000;”>underlined</u> word

Example text with an underlined word


Whilst writing this article I noticed that the ready formatting options offered in the WordPress text editor don’t include an underline. Is this for simplicity, rationalising the options available in a limited space, maybe because the underline can so easily be confused with a link, or perhaps use of the tag is no longer encouraged.

I found that version 4.7 of WordPress, from late 2016, removed both the underline and justify options from the TinyMCE editor.



Adding ClearFix Clear Float after div

I was interested in clearing floats and adding clearfix after a section of content.

Working on a website theme I was integrating the output from a plugin. The plugin had a wrapper div with a series of entries each in a div.

Shown below is the wrapper div with the two floating elements.

<div class="features">
    <div class="feature">example</div>
    <div class="feature">example</div>

It could easily be a series of images, each floating left against its neighbour.

For presentation I was using the floats left and right.


After this section of content I wished to cancel the floats. Leaving the float active affected the following content layout. I would assign clear:both.

Utilising the plugin I did not wish to add an empty div after the section. This would mean adding the HTML code within the editor. I chose to use the after pseudo element.

Given below is the clearfix equivalent added to the content wrapper.

	content: " ";
	visibility: hidden;
	display: block;
	height: 0;
	clear: both;

So there you have, a clearfix equivalent added to a wrapper div utilising the after pseudo element to save adding an extra empty div.

Change the Horizontal Line Colour in WordPress

On a WordPress website I added a horizontal line to divide two sections of content.

Within the WordPress editor I had added a horizontal line to space some text. Providing a divider between two sections of text on the web page.

To add the line I had used the HTML tag <hr />.

The WordPress editor doesn’t offer a horizontal line option. I added the line by flipping into Text mode and adding the HTML <hr /> code at the requisite point.

To add a further distinction I wanted to select a different colour for the hr tag. The body text was black on a white background. Black looked to be too strong I favoured a red colour, perhaps #dd0000.

I first tried setting the colour of the hr horizontal line using the CSS style color.

<hr style=”color: #dd0000;” />

But I found there was no change, the colour remained a dull grey.

How to change the colour of the hr html tag <hr />?

An alternative styling of the hr tag is border based. Define the border colour for each of the edges. For example:

<hr style=”border:#dd0000 solid 1px;” />

With this option the line was showing red as intended.

The website’s theme was a child theme built upon the popular bootstrap.

With the help of the FireFox FireBug add-on I was able to see that the default CSS for the hr tag was defined using borders.

I found that the hr tag is constructed from a single border line, not the full box.

hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eeeeee;

Whilst this at first appeared to be counter to expectations it has the advantage that it is ready to change the line style to dots or dashes. The thickness can be easily amended. It can be shown as an open box or a couple of horizontal lines.

<hr style=”border:3px dashed #dd0000;padding:4px;” />

The border property takes precedence over the colour property. Once defined against the tag, either globally or within a section of the page, this method should be followed.

Maybe this is why the popular bootstrap framework uses border in its definitions.

For simplicity I added the CSS styling in-line using the style property.

To develop the presentation further the styling for the <hr> tag can be moved into the CSS supporting files. This maybe a generic rendering for all of the hr tags or more specific according to the page template and area of the page.

Outline-offset Alternative for Internet Explorer

Whilst constructing an addition for a website, a part of the spec was a border around an image.

The images to be shown were created by a gallery, each wrapped in a link to show the larger version of the image.

Unlike the usual border around an image. I wished to add a border which had a gap between it and the image edge.

Given below is an example of the gallery module output:

<div class="gallery6">
     <a class="" href="" style="width:265px;height:25px;" >
          <img src="" alt="Apples" style="width:265px;height:25px;">
     <a class="" href="" style="width:265px;height:25px;" >
          <img src="" alt="Plums" style="width:265px;height:25px;">
     <a class="" href="" style="width:265px;height:25px;" >
          <img src="" alt="Pears" style="width:265px;height:25px;">

I initially investigated styling the link and image appropriately, but circumstance didn’t make this a viable option. The gallery was controlling much of the rendering, including in-line styling of the link and image width and height.

Searching for alternative ideas and inspiration I found the outline-offset HTML CSS option.

Excellent I thought! I implemented the outline-offset in CSS and checked it in a number of browsers.

.gallery6 img{
     border:1px solid #000;

Then I looked with Internet Explorer. To my dismay there was no border.

Mozilla and w3 Schools provide information on the use of outline-offset.

The w3 website also summarises the browser compatibility of outline-offset. It shows only the one browser not supporting it: Internet Explorer

So an alternative approach is required.

I found reference to a workaround which adds the border using a pseudo element

Here’s that workaround for the outline-offset with Internet Explorer using the after pseudo element.

.gallery6 a{
.gallery6 a:after{
    border: 1px solid #afa987;
    content:" ";
    position: absolute;
    top: -20px;
    left: -20px;

In this example the pseudo element is set to the greater width and height and given a negative move of the top left corner to position it correctly.

Don’t forget the relative, or absolute positioning of the main item. in this example gallery6 a.

Whilst Internet Explorer doesn’t support the property outline-offset a comparable result , ie a border surrounding an image offset by a number of pixels, can be achieved using the after pseudo element with a larger size and shifted the appropriate pixels left and up.

Don’t Inherit parent CSS opacity

In CSS once a parent element has its opacity set, the child elements inherit the same value.

This can render the child elements progressively more difficult to view.

But, now there are ways to prevent CSS child elements from adopting their parent’s setting.

When setting a CSS opacity on a div layer the child elements inherit this opacity value.

Ideally we want a parent element to be semi transparent with an opacity setting of, for example, 80% with the child elements bright and clear.

Here’s our example

<div style="background: #00d; opacity: 0.8; padding: 8px;">
<div style="background: #efefef;  padding: 8px;">
<strong>Title within</strong>

Content within div of opacity 80%.

Which renders as:

Title within
Content within div of opacity 80%.

If we use RGBA values instead, the opacity is set to the assigned element only and isn’t inherited to the child elements.

The rgba setting equivalent would be background:rgba(239,239,239,0.8)

RGBA values can be used in CSS to configure gradients, so manufactured bars and buttons will be OK.

However, we need to ensure that older browsers can serve the page as we wish.

To this end a background image is used, already created with a transparency level. I’m assuming that IE6 and its well known PNG file issues won’t be supported.


Note that the order of the CSS elements is important. The RGBA entry is to be positioned after the image. Otherwise the newer browser would select this setting over the RGBA one, which we wish it to use.

So there you are by changing the way colours are assigned we can set a transparency on a parent element which isn’t inherited by its child elements.

Add Quotes Around Text With CSS

Add quotation marks around a testimonial text using CSS, not in the testimonial entry.

Instead of adding quotation marks within the quoted text why not add them automatically using CSS?

For a WordPress website I had included a testimonials plugin. The plugin had a number of text fields. Wishing to simplify the customer’s actions. I didn’t want the customer to remember to add quotation marks to the start and end of the quoted body text.

I chose to use CSS to make the addition of the quotation marks.

Using the CSS before and after pseudo elements, characters can be added wrapping the content of an HTML element.

Given below is the sample HTML, a div with the class testimonial assigned to it. This wraps the testimonial content.

<div class=”testimonial”>A pleasure to do business with… </div>

The CSS below adds the quotation marks


Note the use of the back slash to escape out the quote.

This gives

“A pleasure to do business with…”

CSS Import

Using @import a second CSS stylesheet can be included as a reference from a CSS file.

An example of this referencing is shown below where the file stylesheetB.css has been referenced using @import.

@import url(“stylesheetB.css”);

@import should be added to the head of the CSS file.

Adding an import of another CSS file to a an existing file allows for reuse and management of code but will increase the time taken to download the files making the rendering of the site slower, affecting the Google site ranking given that site response is taken into consideration.

Some of the advantages and disadvantages of including a style sheet import are given below.


There are occasionally situations where @import is appropriate Like using @media to apply different styles to different devices.

It can be practical to create one or more standard CSS construction files which are referenced according to the design or features implemented. For example references to the design/development company can be maintained separately as opposed to editing a CSS file across multiple sites or simply making it easier to find the file within a given site.

Commonly used features such as a Google font can be created and then referenced by each stylesheet as opposed to repeatedly including the code within each file. Updates are then mastered once rather than multiple times with the possibility of error or omission.


Adding the import to an existing style sheet can affect the concurrency in the downloading of the files. This can lead to the referenced imported CSS file being held until the referencing file has been downloaded.

Each file downloaded has an overhead. Concentrating all of the CSS code into a single minified file is more efficient and will take less time to download.


JQuery Accordion with Different Header Colours

The JQuery Accordion is configured, by default, to have one colour style for the inactive headers and another for the active one. CSS can be used to give each header a different colour.

JQuery with different coloured headersUsing the CSS3 child numbering for elements different colour schemes can be assigned to each of the headers.

In the example image shown on the right, the highlighted entry is given a yellow background colour. The other sections are shown as red, green and blue.

The Accordion code is defined as a series of <h3> tags, with the associated content within a <div>.

The operation of the Accordion can be configured, but for the default operation clicking on a section opens it for view, whilst closing the previously open section.

The code example below shows the outline HTML for the accordion. In this view the heading sections are shown, together with some of their associated content.

<div id="accordion">                  
    <h3>Meat & Fish</h3>
    <div id="MeatFish">
        <div>British Chicken Breast</div>
        <div>British Pork Loin Steaks</div>
        <div>British Beef Mince</div>
        <div>Scottish Salmon Supremes</div>
        <div>Haddock Fillets</div>
        <div>Scottish Smoked Salmon</div>
    <h3>Fresh Produce</h3>
    <div id="FreshProduce">
        <div>British Courgettes</div>
        <div>Green Beans</div>
        <div>British Cauliflower</div>
        <div>British Carrots</div>
    <div id="Fruits">
        <div>Bramley Apples</div>
    <h3>Store Cupboard</h3>
    <div id="StoreCupboard">
        <div>British butter</div>
        <div>British Milk</div>
        <div>British Double Cream</div>
        <div>Low Fat Natural Yogurt</div>
        <div>British Free Range medium Eggs</div>                         
        <div>British Cheddar Cheese</div>
        <div>Somerset Brie</div>

Using CSS3 with references to nth-child elements 1, 2 3 and 4 each of the sections can be configured.

Below is the associated CSS, in this case the first element is shown in full, with only partial content for the following 4 entries, together with a full entry for the selected (active) item.

#accordion .ui-accordion-header:nth-child(1){
    background: -moz-linear-gradient(
        center bottom,
        #9f2a3c 0%,
        #87141b 50%,
        #b8001e 100%
    background: -webkit-gradient(
        left bottom,
        left top,
        color-stop(0, #9f2a3c),
        color-stop(0.50, #87141b),
        color-stop(1, #b8001e)
    background: -o-gradient(
        left bottom,
        left top,
        color-stop(0, #9f2a3c),
        color-stop(0.50, #87141b),
        color-stop(1, #b8001e)
    background: -ms-gradient(
        left bottom,
        left top,
        color-stop(0, #9f2a3c),
        color-stop(0.50, #87141b),
        color-stop(1, #b8001e)

#accordion .ui-accordion-header:nth-child(2){
#accordion .ui-accordion-header:nth-child(3){
#accordion .ui-accordion-header:nth-child(5){
#accordion .ui-accordion-header:nth-child(6){
#accordion .ui-accordion-header.ui-state-active {
    background: -moz-linear-gradient(
        center bottom,
        #ebf145 0%,
        #decc00 50%,
        #f6ff00 100%
    background: -webkit-gradient(
        left bottom,
        left top,
        color-stop(0, #ebf145),
        color-stop(0.50, #decc00),
        color-stop(1, #f6ff00)
    background: -o-gradient(
        left bottom,
        left top,
        color-stop(0, #ebf145),
        color-stop(0.50, #decc00),
        color-stop(1, #f6ff00)
    background: -ms-gradient(
        left bottom,
        left top,
        color-stop(0, #ebf145),
        color-stop(0.50, #decc00),
        color-stop(1, #f6ff00)

The CSS for the first element’s header class is defined using the reference #accordion .ui-accordion-header:nth-child(1). The background gradient is then defined for the different browsers.

#accordion is a reference to the wrapping div, with id of accordion

.ui-accordion-header refers to the class which the JQuery code automatically added to the <h3> elements, when it is called, once the page has been loaded. This is visible when the source of the web page is viewed either directly or using one of the browser tools to inspect an element.

#accordion .ui-accordion-header.ui-state-active is the CSS for the active, expanded section header.

Remove Blue Border Around an Image

By default images within a hyperlink a shown with a 1 pixel blue border surrounding them. To stop the border from being shown the default border value is overridden with a value of 0.

The old method of removing the border was by setting the border property of the image. The preferred method is now through the use of CSS.

The example below shows the old method using the border parameter within the IMG tag definition.

<IMG src=”/images/apples.jpg” border=”0″>

The current preferred alternative method is to use CSS either in-line or in an external file. In the following examples I have also changed the tag definition to include all lower case and a trailing / as per the current practice.

In-line CSS

In line CSS uses the style parameter with the relevant CSS styling, for example

<img src=”/images/apples.jpg” style=”border: 0;” alt=”apples” />

The semi colon isn’t strictly required after the border value, it being the last item. However, I prefer to add them rather than omit it in error. More relevant when creating a complete CSS class within the water all CSS referenced file.

External CSS File

It is better to add a class to the image and add the CSS for the class within the external CSS files for the website. Below is shown the image reference with a class called noborder and the associated code for the CSS file.

<img src=”/images/apples.jpg” class=”noBorder” alt=”apples” />


Configuring the image border using classes allows all images to be configured at a single point. Changes can then be enacted across all images with that class, amended if required according to changes which are desired either for presentation and the appearance of the site of if the standards requirements change.

It is also possible to configure all images globally adding a CSS reference for the image tag. No class needs to be added to each use of the image tags. The updated CSS form is as shown below:



Browser Fonts

Historically fonts available for use on a website were limited to just a few, ensuring compatibility across multiple operating systems and installed fonts. Modern browsers support the inclusion of referenced fonts, downloading them on demand.

In-line Font Specification

Originally fonts were specified in-line. To change the font within a section of text an additional parameter was added to the <p> and <span> tags.

<p font=”arial”>The quick brown fox</a>
<p>The <span font=”arial”>quick</span> brown fox</p>

Specifying a Font in CSS

Within programming there is a desire to separate code into defined sections. For a website this means separating the rendering style as CSS code into separate files. The HTML code is used for the layout. Using common classes and CSS styling allows a single change to act globally across a website making changes to all instances. Our font usage above is changed in the html file and becomes:

<p class="fontClass">The quick brown fox</a>
<p>The <span class="fontClass">quick</span> brown fox</p>

Within a CSS entry, either for a named ID or a class, the font is specified using the font-family parameter. Typically a list of entries is given. The browser taking the first entry from the left which it is able to support. For example while writing the article The HTML Font Tag I couldn’t understand why the Comic Sans font example wasn’t showing correctly. I was using the Iceweasel browser on a Linux Computer, without support for the Comic Sans font.

In the example given below the font parameters are defined for a class called fontClass, the fonts to be used will be a definition called futura-pt, followed by arial and sans-serif.

font-family; "futura-pt",arial,sans-serif;

Importing a font in CSS

Below example import of font using CSS3

@font-face {
font-family: Anivers;
src: url(../fonts/Anivers.otf) format("opentype");

Here the name to be used is specified in the font-family parameter. The source for the file is specified using src and url. Note this specification can appear anywhere in the file. Although I prefer to keep them near to the top for easier administration of the file.

Which Font is a Browser Rendering?

Some fonts can be similar in their styling. When the browser works through the defined list of fonts and chooses one to use which of the available fonts is it actually using to render the text? Both FireFox and Chrome support add-ons which can help to realise this. I have used the FireFox add-on Font Finder previously to understand which font is being rendered.

Default Browser Font

The default font specified by a browser may also be significant. Take a look in the browser configuration for the details

Browser Settings Default
FireFox  Tools > Options > Content : Fonts & Colors: Advanced  Times New Roman (16)
Iceweasel Edit/Preferences > Content/ > Fonts & Colours Serif 16
IE (10)  Settings > Internet Options > Fonts Times new Roman
Chrome  Tools/Settings > Advanced > Web Content > Fonts and Encoding Balker
Opera  Settings > Preferences > Web Pages DejaVu Serif
Safari  Toolbar > Preferences > Appearance Times 16

FireFox Fails to Reference Fonts

FireFox may not reference the external fonts.

  1. Browser navigation enter about:config, hit enter
  2. acknowledge the warning and proceed
  3. search for: network.http.sendRefererHeader
  4. a value of 2 is required for it to work

Also to be checked are the following setitngs:

  • gfx.downloadable_fonts.enabled

By default FireFox fails to load fonts referenced from a domain other than the website. This is done to help preventing fonts being linked from your website server and the stealing of bandwidth and to respect your copyright.


Most browsers support the option to Inspect Element to discover the HTML and CSS settings for a particular element on a web page.

Firefox supports the use of Add Ons to provide tools. I have found the following useful

  • FireBug
  • Font Finder

Google chrome has its own extensions

  • WhatFont