If you have already created a website and inserted all the text, images and components, and you need a better understanding of how to edit the CSS in your stylesheet block, these helpful hints should get you started.

Listed below are some of the most common forms of CSS used on web pages today, and developer tools which can help to clarify the rules of CSS for quick implementation with your site.

Insert a background image

The CSS background image property sets the background image for an element. There are several resources available for those who need to learn how to insert a background image into their web page. Try this useful guide to learn how to insert a background image¹.

Wrap text around an image

With CSS float, an element can be pushed to the left or right, allowing other elements to wrap around it. Here you will find a useful website tutorial on a common method to wrap text around an image².

Change text or link colors

CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). There are useful online tutorials that range from how to change the font color of an element with CSS³ to a more advanced tutorial on how to change link colors in CSS⁴. If you need to choose a color then you may find this advanced color picker developer tool⁵useful.

Typography

In CSS, there are a number of available fonts to choose from when you decide on a look and feel for your website. This is one of the more useful developer tools to compare screen type and to generate the CSS code⁶.

Margins and Padding

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. Conversely, padding clears an area around the content (inside the border) of an element and is affected by the background color of the element.

A good tutorial and demonstration on CSS margins and padding⁷ can be found here, as well as a more illustrative tutorial on margins and padding⁸ here.

You can also find useful hints here for those who need a quick guide on how to set the width and height properties of elements⁹ in your website.

1) how to insert a background image
2) wrap text around an image
3) how to change the font color of an element with CSS
4) how to change link colors in CSS
5) advanced color picker developer tool
6) compare screen type and to generate the CSS code
7) CSS margins and padding basic
8) tutorial on margins and padding advanced
9) set the width and height properties of elements