CSS background-color Property

The CSS background-color property is used to set the background color of an element. The background of an element is the total size of the element, including padding and border, excluding the margin.

CSS background-color Example

body {background-color: khaki;}

Set background color with a HEX value

body {background-color: #FFDAB9;}

Set background color with an RGB value

body {background-color: rgb(255,218,185);}

CSS background-image Property

The css background-image property is used to set one or more background images for an element. By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally. The background of an element is the total size of the element, including padding and border excluding the margin. It can be used with background-color property which will be used if the image is unavailable.

CSS background-image Example

body {
background-image: url(“background_img.gif”);
background-color: #f0f0f0;
}

Multiple Background Images

You can set multiple background images for an element using following syntax.

background-image: url(“background_img.gif”), url(“background_img2.gif”);

CSS Classes

You may be wondering if it is possible to give an HTML element multiple looks with CSS. Say for example that sometimes you want the font to be large and white, while other times you would prefer the font to be small and black. CSS would not be very useful if it did not allow you to have many different types of formats for a single HTML tag. Well, you are in luck! CSS allows you to do just that with the use of classes.

Using CSS Classes

Using classes is simple. You just need to add an extension to the typical CSS code and make sure you specify this extension in your HTML. Let’s try this with an example of making two paragraphs that behave differently. First, we begin with the CSS code, note the red text.

CSS Classes Example

CSS Code:

p.one{ color: blue; }
p.two{ color: red; }

HTML Code:

<p>This is a normal paragraph.</p>

<p class=”one”>This is a paragraph that uses the p.first CSS code!</p>
<p class=”tow”>This is a paragraph that uses the p.second CSS code!</p>

You can use CSS classes with any HTML element. if we had already defined a value for the default <p> tag, the CSS class for any <p> tag will override the default <p> CSS. If the CSS class uses a CSS attribute already defined by the default CSS, then the formatting defined by the class will be the value that is used.

It may be easier to imagine that the CSS for a generic HTML element is the starting point and the only way to change that look is to overwrite the attributes using CSS classes.

CSS Code:

p{ color: red; font-size: 20px; }
p.test1{ color: blue; }
p.test2{ font-size: 12px; }

HTML Code:

<p>This is a normal paragraph.</p>
<p class=”test1″>This is a paragraph that uses the p.test1 CSS code!</p>
<p class=”test2″>This is a paragraph that uses the p.test2 CSS code!</p>

Inline CSS

We have only shown you how to use CSS the way it was meant to be used — separated from the HTML. However, it is possible to place CSS right in the thick of your HTML code, and this method of CSS usage is referred to as inline css.

Inline CSS has the highest priority out of external and internal css. This means that you can override styles that are defined in external or internal by using inline CSS. However, it detracts from the true purpose of CSS, so use it sparingly.

The style Attribute

Believe it or not, CSS is built in to every HTML tag. If you want to add a style inside an HTML element all you have to do is specify the desired CSS properties with the style HTML attribute. Let’s add some style to a paragraph tag.

Inline CSS Example

<p style=”background:blue; color: white;”>This is a paragraph</p>

The normal rules of CSS apply inside the style attribute. Each CSS statement must be separated with a semicolon “;” and colons appear between the CSS property and its value.

External CSS

When using CSS it is preferable to keep the CSS separate from your HTML. Using external CSS allows the web designer to completely differentiate between content (HTML) and design (CSS). External CSS is a file that contains only CSS code and is saved with a “.css” file extension. This CSS file is then referenced in your HTML using the <link> tag instead of <style> tag. If you’re confused, don’t worry. We are going to walk you through the whole process.

CSS File

Let us get started by making that external CSS file. Open up notepad.exe, or any other plain text editor and type the following CSS code.

CSS Code

body{ background-color: gray;}
p { color: blue; }
h3{ color: white; }

Now save the file as a CSS (.css) file. Make sure that you are not saving it as a text (.txt) file, as notepad likes to do by default. Name the file “style.css” (without the quotes). Now create a new HTML file and fill it with the following code.

External CSS Example

<html>
<head>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>

<h3> A White Heading </h3>
<p> This paragraph will have a blue font. The background color of this page will be gray because we changed it with CSS! </p>

</body>
</html>

Then save this file as “index.html” (without the quotes) in the same directory as your CSS file. Now open your HTML file in your web browser and see the output.
This paragraph has a blue font. The background color of this page is gray because we changed it with CSS!

Why Use External CSS?

  1. It keeps your website design and content separate.
  2. It’s much easier to reuse your CSS code if you have it in a separate file. Instead of typing the same CSS code on every web page you have, simply have many pages refer to a single CSS file with the “link” tag.
  3. You can make drastic changes to your web pages with just a few changes in a single CSS file.

 

Internal CSS

Cascading Style Sheets come in three flavors: internal, external, and inline. We will cover internal and external, as they are the only flavors a designer should utilize. In this lesson, we cover the basics of the easier type, internal. When using internal CSS, you must add a new tag <style> inside the <head> tag.

The HTML code below contains an example of <style>’s usage.

Internal CSS Example

<html>
<head>
<style type=”text/css”>
p {color: white; }
body {background-color: black; }
</style>
</head>
<body>
<p>White text on a black background!</p>
</body>
<html>

Background Color will be black and text color will be white.

CSS Syntax

CSS has a simple syntax, and uses a number of English keywords to specify the names of various style properties.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors and a declaration block. A declaration-block consists of a list of semicolon-separated declarations in braces. Each declaration itself consists of a property, a colon (:), a value, then a semi-colon (;).

The CSS syntax is made up of three parts: a selector, a property and a value:

selector {property: value}

The selector is normally the HTML element/tag you wish to define, the property is the attribute you wish to change, and each property can take a value. The property and value are separated by a colon, and surrounded by curly braces:

body {color: black}

Note: If the value is multiple words, put quotes around the value:

p {font-family: “sans serif”}

Note: If you wish to specify more than one property, you must separate each property with a semicolon. The example below shows how to define a center aligned paragraph, with a red text color:

p {text-align:center;color:red}

To make the style definitions more readable, you can describe one property on each line, like this:

p
{
text-align: center;
color: black;
font-family: arial
}

CSS Grouping

You can group selectors. Separate each selector with a comma. In the example below we have grouped all the header elements. All header elements will be displayed in green text color:

h1,h2,h3
{
color: green
}

CSS Class Selector

With the class selector you can define different styles for the same type of HTML element.
Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align: right}
p.center {text-align: center}

You have to use the class attribute in your HTML document:

Note: To apply more than one class per given element, the syntax is:

<p class=”center bold”>This is a paragraph</p>

The paragraph above will be styled by the class “center” AND the class “bold”.
You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class=”center” will be center-aligned:

.center {text-align: center}

In the code below both the h1 element and the p element have class=”center”. This means that both elements will follow the rules in the “.center” selector:

<h1 class=”center”>This heading will be center-aligned</h1>
<p class=”center”>This paragraph will also be center-aligned.</p>

Add Styles to Elements with Particular Attributes

You can also apply styles to HTML elements with particular attributes.
The style rule below will match all input elements that have a type attribute with a value of “text”:

input[type=”text”] {background-color: blue}

CSS ID Selector

You can also define styles for HTML elements with the id selector. The id selector is defined as a #. The style rule below will match the element that has an id attribute with a value of “green”:

#green {color: green}

The style rule below will match the p element that has an id with a value of “para1”:

p#para1
{
text-align: center;
color: red
}

CSS Comments

Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with “/*”, and ends with “*/”, like this:

/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}

What is CSS

Cascading Style Sheet (CSS) is a way to control the look and feel of your HTML documents in an organized and efficient manner. Styles define how to display HTML elements with CSS you will be able to:

  1. Add new looks to your old HTML
  2. Completely restyle a web site with only a few changes to your CSS code
  3. Use the “style” you create on any webpage you wish
  4. External Style Sheets can save you a lot of work

Style Sheets Can Save a Lot of Work

Styles sheets define how HTML elements are to be displayed, just like the font tag and the color attribute in HTML 3.2. Styles are normally saved in external .css files and also they can be embedded in html file. External style sheets enable you to change the appearance and layout of all the pages in your Website, by changing one single CSS document. CSS allows developers to control the style and layout of multiple Web pages all at once. As a Web developer you can define a style for each HTML element and apply it to as many Web pages as you want. To make a global change, simply change the style, and all elements in the Website are updated automatically.

Multiple Styles Will Cascade into One

Style sheets allow style information to be specified in many ways. Styles can be specified inside a single HTML element, inside the element of an HTML page, or in an external CSS file. Even multiple external style sheets can be referenced inside a single HTML document.

Cascading Order

What style will be used when there is more than one style specified for an HTML element?
Generally speaking we can say that all the styles will “cascade” into a new “virtual” style sheet by the following rules, where number four has the highest priority:

  1. Browser default
  2. External style sheet
  3. Internal style sheet (inside the tag)
  4. Inline style (inside an HTML element)

So, a style inside an HTML element (inline style) has the highest priority, which means that it will override a style declared inside the tag, in an external style sheet, or in a browser (a default value).