You can do many things to refresh the appearance of your website without having to undertake a complete redesign. You can easily alter how it looks and feels by making some simple changes.
In the same way a new coat of paint can brighten up your home, making adjustments to CSS styling can freshen up your website - without requiring any changes to its core functionality
By adjusting a few snippets of code, you can give your website a cosmetic makeover, transforming its appearance to present visitors with a fresh and dynamic visual experience.
Size & Colour
Making simple edits to CSS code can totally alter the look of your website.
You can use CSS to:
- Change the colour of text, background boxes and images.
- Italicise, underline or adjust font sizes and weights.
- Set headlines in capitals or sentence case.
- Add shadows or blend colours.
Depending on how your website has been coded, a small coding edit can change all headlines and text throughout your site. By making just a few CSS changes, you can completely refresh the visual appearance of your website without needing to change the functional coding.
Red Bold Text
All cap text in Orange
Text with a shadow.
Colour blend and box size.
Fonts & Typefaces
Different fonts can be added using CSS. Instead of using the same old font, you can call in new fonts to use on your website.
You might want to match your website font to your company brand guidelines. Often, you can buy a typeface to use in print and online. It’s worth bearing in mind that not all fonts work well online and are often remastered especially for this purpose. Most well-known typefaces have online versions available.
You don’t always need to buy fonts – many web fonts are available for free. Google fonts have a good selection of online web fonts that have been specially designed and optimised for web use. Adobe fonts also have a good range of web fonts available.
Merienda soft script font from Google.
Merriweather serif font from Google.
Poppins sans serif font from Google.
Borders & Corners
Set borders for a whole box or a single side (top, right, bottom or left). You can set the border's thickness with set sizes such as ‘Thin, Medium or Thick” or use standard sizes such as px, em, rem etc.
Border styles can be set as solid, dotted, grooved, ridge, dashed or double. Colour values can be added to borders as a single value for all sides or multiple values for different colour sides. Using a corner radius will curve the box or border. The radius can be set to a fixed size or a percentage.
50% corner radius.
corner radiuses 5px , 10px, 20px and 40px.
Using CSS, you can set an effect to occur as an item is hovered over. For example, as a visitor hovers their cursor over text or a box, you can have text or a box change colour. This effect is commonly used to identify buttons and other areas of interactivity.
Transition & Animation
Transitions can be added to CSS between states, using the transition effects to set timing and delays between states and generate animation effects. For example, you might set a box width to 10px – and set it to 100px on hover. The box will instantly change from 10px width to 100% on hover. If you use a transition delay of 2 seconds, the box will gradually increase from 10px to 100px over a period of 2 seconds.
There is also the option to ease the animation in and out so that there’s less of a sudden start and finish to your animation.
Hover over the orange box above to see it increase in size over 2 seconds.
2D & 3D effects
There are options to move items in 2D or 3D dimensions. You can move items across an X or Y dimension and rotate by degrees in a 2D dimension. With a bit more advanced CSS coding, you can also create 3D effects using a Z dimension for depth. You can use CSS to tilt and rotate items in 3D dimensional space. Flip an image over or create a cube that spins as you hover over it, all achievable with CSS code. Set the scene with a perspective value, and you can make the cube scale and adjust within the 3D landscape.
2D box rotated in CSS.
3D box in CSS.
Click to open and close the box in 3D.
Click the box to open it.
With relatively little effort, you can make significant style changes to you site and improve the visitor experience.