Blog

padding-margin

CSS Padding and Margin

  • April 26, 2016
  • CSS

The most two popular CSS properties are margin and padding, they are used for spacing-out elements. Simply put the padding is the space inside something whilst the margin is the space outside of something.



CSS3

CSS Font Smoothing in Webkit and Firefox

  • March 11, 2016
  • CSS

Using font smoothing can turn a horrible typeface to a beautiful one. The Webkit and Firefox browsers make the fonts look slightly thicker, using just two lines of CSS we can solve this problem.



CSS3

Pseudo Class

  • March 11, 2016
  • CSS

A pseudo-class starts with a colon (:),it is similar to a class in HTML, but it’s not specified explicitly in the markup. When creating a pseudo-class there can not being any whitespace between a top selector or universal selector and the colon, nor can whitespace appear after the colon.

In this post we will look at the :first-child, :link, :visited, :hover, :active, :focus and the :lang pseudo-classes.




Hiding Elements using CSS

  • March 10, 2016
  • CSS

We have plenty of options at our disposal at hiding elements with CSS. In this post we will explore the options we have and more importantly the pros and cons of each choice. The ability to hide elements is essential in modern websites and web applications, it is quite commonly used alongside Javascript as well.




Quick Tip – Using CSS3 For Alternate Row Colours

  • March 7, 2016
  • CSS

Using the CSS3 pseudo class nth-child we can style table rows to be alternating colours.Browser support using the nth-child is good, with all major browsers supporting it.




CSS How to Style External Links

  • March 7, 2016
  • CSS

Styling an external links is a nice visual indictor for users that if they click the link they will be taken to another website. This is particularly useful for websites that have reference links such as Wikipedia.



CSS3

CSS Opacity

The CSS opacity property controls how transparent an element is. The values can be between 0 (not visible) and 1 (completely visible). The initial value is 1, it is also worth noting that if you apply transparency to the parent that all the child elements will be effected too.




CSS Cursors

  • March 5, 2016
  • CSS

Using the correct type of cursors is becoming more important than ever with the increase in web applications. The cursor property controls the styling of the mouse cursor. Obviously this property is only for operating systems that use a mouse e.g. it wouldn’t apply a phone or a tablet because there is no mouse. From a UX perspective it is essential to utilise this property as it conveys meaning.

As well as the standard cursors there is custom cursors which we will look at it too.



HTML-comments-banner

Comments in HTML

  • December 6, 2015
  • HTML

Using comments in the HTML document will not be visible in the user’s browser. It can be useful for revision histories, notes, or commenting out other tags.



HTML5-Logo

A Guide to HTML Tables

  • November 30, 2015
  • HTML

Tables have been used in the past (hopefully not still) to design the full layouts of websites. However using tables in this way is bad practice as accessibility tools such as screen readers to navigate pages that use tables as the layout. In this post we will look in-depth into HTML tables, the basics and advanced elements and attributes.