Preprocessors like Less and Sass have helped over the past few years to keep development CSS codebases simple, organised and maintainable. One of the most used features in preprocessors is the ability to use variables in the stylesheet which was not possible natively in CSS. Now it is possible to use CSS custom properties in native CSS with support across most browsers apart from IE.
The border property allows you to specify how the border of the box representing an element should look. The border module consists of the following properties, border-color, border-style and border-width. In this post we will look at all three properties and how we can combined them into the shorthand property.
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.
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.
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
:focus and the
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.
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.
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.
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.