In a recent project the default HTML underline added to a heading was of the wrong style. The line being too thin and too tight to the text, the gap was insufficient. Using the HTML underline gives a line close to the bottom of the text. But it’s thickness can’t be defined and neither can […]
Category: CSS
The Greater Than Sign > in CSS
Looking at CSS files in the section associated with the menus it is common to see the use of the greater than sign. Shown below is an example, of this use of the greater than sign in CSS: #main-menu .current_page_item > .dropdown-menu{} What does the use of the > symbol mean? The greater than sign […]
Add Textbox Instruction Text
Often HTML form text boxes have hint text already in them which disappears when the box is clicked on. This can be effective in terms of screen real estate. With the name of the field outside and more details within showing the expected format. An example might be a date field. In the example below […]
Adding a Space Within the Before and After CSS Content
I wished to customise a quotation area on a website. Also to be added was a pair of quotation marks with a little space between them Adding a boxed background was easy. As was the general rendering of the content type. As this was to be automated I thought I would use the CSS before […]
Read More… from Adding a Space Within the Before and After CSS Content
How is rem Different from em?
Both em and rem are used in CSS as proportional sizes. If they are both used to set the size of the element proportionately what makes the two different? In CSS em is used as a proportional sizing, for example .content p{font-size:2em} This will set the defined element to be twice as big as its […]
How to add Webkit Fonts to WordPress Themes
My initial thoughts are to implement the Webkit fonts inclusion either in the CSS file or the functions.php file. Both files being a part of the WordPress theme or child theme. A typical WebKit font file reference. <link rel=”stylesheet” href=”https://use.typekit.net/aa7aa7a.css” /> Where in the above aa7aa7a is a random project ident used for illustration only. […]
Create Next and Back Arrows with CSS
CSS can be used to create next and back arrows. For a simple html website I wished to add left and right arrows on a sequence of images. You know, those arrows to the left and right of a series of images or other sequence. I considered using images or Glyphicons or perhaps Bootstrap but […]
Break Long Link URL to New Line
A full website URL shown on a page may not wrap. Instead acting like a sore thumb sticking out and in the way. Sometimes I illustrate the full website address, shown as text, and linked, so that it may be copied, rather than showing it as some words. For example I might illustrate the link […]
CSS Add a Text Outline
If you are overlaying a title text over an image for clarity there is a requirement to create a contrast between the text and background image. If this is done in the image, or as a single page layout this may be customised as a one off. However, if this is on a page template […]
Bootstrap Cards Using Breakpoints to set Number per Row
Bootstrap cards, may be used to easily create content blocks with the same height and styling. Whilst I like the ease of presenting content blocks in a row I dislike the width adjustments. As the page width narrows so the width of each card does too, until finally the layout shifts to having one card […]
Read More… from Bootstrap Cards Using Breakpoints to set Number per Row
