CSS Tutorial 3: Colors and backgrounds

CSS Tutorial 3: Colors and backgrounds

In this lesson you’re going to be taught the best way to apply colours and background colors to your websites. We will additionally look at developed ways to role and manipulate heritage pix. The next CSS homes shall be defined:

Foreground color: the ‘color’ property

The colour property describes the foreground color of an detail.

For illustration, assume that we want all headlines in a record to be darkish purple. The headlines are all marked with the HTML detail <h1>. The code beneath units the color of <h1> elements to crimson.

	
	h1 {
		color: #ff0000;
	}
	

Colours may also be entered as hexadecimal values as in the instance above (#ff0000), or you need to use the names of the colors (“pink”) or rgb-values (rgb(255,zero,zero)).

The ‘background-color’ property

The heritage-colour property describes the history colour of factors.

The element <body> contains the entire content of an HTML file. Accordingly, to alter the history colour of an whole page, the heritage-colour property must be applied to the <body> aspect.

That you could additionally practice background colours to other elements together with headlines and textual content. Within the illustration under, one-of-a-kind historical past colors are applied to<body> and <h1> factors.

	
	body {
		background-color: #FFCC66;
	}

	h1 {
		color: #990000;
		background-color: #FC9804;
	}
	

Observe that we applied two houses to <h1> via dividing them by a semicolon.

Background images [background-image]

The CSS property heritage-picture is used to insert a history image.

As an instance of a heritage picture, we use the butterfly below. That you can download the snapshot so you should utilize it in your possess computer (proper click on the photograph and prefer “keep image as”), or you should use an extra image as you see match.

butterfly-tech-frk

To insert the photograph of the butterfly as a historical past photograph for an online web page, with ease apply the background-picture property to <body> and specify the vicinity of the snapshot.

	
	body {
		background-color: #FFCC66;
		background-image: url("butterfly.gif");
	}

	h1 {
		color: #990000;
		background-color: #FC9804;
	}
	

NB: become aware of how we specified the place of the photo as url(“butterfly.Gif”). This means that the image is located within the identical folder as the kind sheet. That you may additionally discuss with pics in other folders using url(“../snap shots/butterfly.Gif”) and even on the internet indicating the full deal with of the file:url(“http://www.Html.Net/butterfly.Gif”).

Repeat background image [background-repeat]

Within the instance above, did you discover that by way of default the butterfly was once repeated both horizontally and vertically to duvet the complete screen? The propertybackground-repeat controls this behaviour.

The desk under outlines the 4 exceptional values for heritage-repeat.

VALUEDESCRIPTIONEXAMPLE
background-repeat: repeat-xThe image is repeated horizontallyShow example
background-repeat: repeat-yThe image is repeated verticallyShow example
background-repeat: repeatThe image is repeated both horizontally and verticallyShow example
background-repeat: no-repeatThe image is not repeatedShow example

For example, to avoid repetition of a background image the code should look like this:

	
	body {
		background-color: #FFCC66;
		background-image: url("butterfly.gif");
		background-repeat: no-repeat;
	}

	h1 {
		color: #990000;
		background-color: #FC9804;
	}
	

Lock background image [background-attachment]

The property history-attachment specifies whether or not a background snapshot is fixed or scrolls together with the containing detail.

A fixed history snapshot will not move with the textual content when a reader is scrolling the web page, whereas an unlocked history picture will scroll along with the textual content of the web page.

The desk below outlines the 2 extraordinary values for history-attachment. Click on on the examples to look the change between scroll and fixed.

VALUEDESCRIPTIONEXAMPLE
Background-attachment: scrollThe image scrolls with the page – unlockedShow example
Background-attachment: fixedThe image is lockedShow example

For example, the code below will fix the background image.

	
	body {
		background-color: #FFCC66;
		background-image: url("butterfly.gif");
		background-repeat: no-repeat;
		background-attachment: fixed;
	}

	h1 {
		color: #990000;
		background-color: #FC9804;
	}
	

Place background image [background-position]

By default, a historical past photo will be placed within the prime left corner of the screen. The propertybackground-function allows you to vary this default and role the background image at any place you love on the screen.

There are countless methods to set the values of heritage-position. Nonetheless, all of them are formatted as a set of coordinates. For illustration, the value ‘100px 200px’ positions the background photo 100px from the left aspect and 200px from the top of the browser window.

The coordinates can be indicated as percentages of the browser window, constant models (pixels, centimetres, and so on.) or you can use the phrases high, backside, center, left and correct. The model below illustrates the approach:

figure004-tech-frk

The table below gives some examples.

VALUEDESCRIPTIONEXAMPLE
background-position: 2cm 2cmThe image is positioned 2 cm from the left and 2 cm down the pageShow example
background-position: 50% 25%The image is centrally positioned and one fourth down the pageShow example
background-position: top rightThe image is positioned in the top-right corner of the pageShow example

The code example below positions the background image in the bottom right corner:

	body {
		background-color: #FFCC66;
		background-image: url("butterfly.gif");
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-position: right bottom;
	}

	h1 {
		color: #990000;
		background-color: #FC9804;
	}
	

Compiling [background]

The property heritage is a brief hand for all of the historical past houses listed on this lesson.

With historical past which you can compress several residences and thereby write your style sheet in a shorter manner which makes it simpler to learn.

For instance, seem at these five traces:

	
	background-color: #FFCC66;
	background-image: url("butterfly.gif");
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-position: right bottom;
	

Using background the same result can be achieved in just one line of code:

	
	background: #FFCC66 url("butterfly.gif") no-repeat fixed right bottom;
	

The list of order is as follows:

[background-color] | [background-image] | [background-repeat] | [background-attachment] | [background-position]

If a property is disregarded, it’ll mechanically be set to its default worth. For example, if history-attachment and heritage-role are taken out of the example:

	
	background: #FFCC66 url("butterfly.gif") no-repeat;
	

These two properties that are not specific would in basic terms be set to their default values which as you know are scroll and prime left.

Summary

In this lesson, you have got already learned new systems that might now not be feasible utilizing HTML. The fun continues in the subsequent lesson which examines the huge range of potentialities when making use of CSS to describe fonts.