CSS Background

The background effects for web pages can range from plain colors to attractive images. All having a specific purpose or thought behind them. CSS background properties can be also be used for the same purpose. Depending upon the type of background required, there are various background effects that we’ll discuss in this section.

Background Color

The name itself suggests the plain and simple purpose for this property.
The background-color property can be used to provide different colors to the background.
The background-image: url(“image.png”); takes image path or image url to show in background
The sample code for the same goes like:

The complete example is

The value for the background-color property can be any known CSS color-name, hex code or RGB code.
Color names can be specified like black, white, green, pink, orange, yellow, red etc.
Hex code are six-digit hexadecimal color code followed by # symbol like #000000, #ffffff, #FFFF00 etc.
RGB code is (r,g,b) combination of color between 0 and 255 like (245,222,179) for wheat.

Background Image

Here, instead of color we can have and image file as the web-page background.
The sample code for this is as follows:


Photo by Free Creative Stuff from Pexels

Background Repeat

In order to restrict the background image to repeat in only x or y direction (horizontally or vertically), we use the background-repeat property along with the background image property. The code goes as following

Now the image will repeat in only x direction.

Similar to repeat in y direction use bsckground-repeat:repeat-y;

If you do not want the image to repeat in any direction, the same property can be used like

Background-Position

Used to specify the position of image on the screen. This can be done by the background-position property. The property can be used as follows:


backgroud-position property can have following values

Background-Attachment

This property is used when you want your background image to be fixed while scrolling the web-page. The sample code:

All these properties can also be used in single line in what is known as the shorthand feature of background property. An example of the same is:

The order of the properties for shorthand is:
Color>Image>Repeat>Attachment>Position

CSS Colors

Colors are the quintessential part of styling in general. Web page designers too need to be very specific about their color choices in order to provide the right feel to the user. Thus, web-page styling language CSS, also has colors as one of its important features.

Almost all the popular browsers in their latest versions, allow 120+ colors. CSS has different ways of controlling the coloring aspect of the web-pages. Let’s take a look at each, one by one.

Color Names

The easiest way is to specify the color name that you wish to use and CSS has the color names already associated with the respective colors at your service. Currently, CSS can recognise up to 140 different color names.

RGB Values

The RGB color scheme is one of the most used styling techniques in programming. Each color is defined by the different intensities of the base colors (Red, Green, Blue) the minimum allowed value for each of the three colors is 0 and maximum is 255. So, if the color code is (0,255,0) we know that the color is Green.

Hexadecimal Values

It is somewhat similar to RGB but here, instead of three different numbers, we use a single Hexadecimal code for each color. The general hexadecimal code for any colors is #RRGGBB. Therefore the RGB intensity is defined in a single code with values ranging from 00 to FF for each RR, GG ad BB. The hexadecimal codes can be used in both Upper and Lower cases.

The CSS Colors can be used for simple HTML elements like the texts, backgrounds, table cells etc. As mentioned earlier, CSS can recognise 140 color name which covers majorly all the requirements. However, the Hexadecimal and RGB codes enabled CSS to used more than 16.5 million color shades which help it to create more complex styling constructs like animations, shadows etc.

How to Include CSS in HTML- Inline External Internal

Your CSS code can be included with your HTML document, there are four different ways. These are namely:

  • Embedded CSS
  • Inline CSS
  • External CSS and
  • Imported CSS

To understand and make a choice about which kind of inclusion you should go with, we will now learn more about each one of these types:

Embedded CSS

As the name suggests, Embedded CSS is when you include the CSS style code by adding it within your HTML document.
The <style> element in HTML is employed for this purpose. The <style> tag has to be put within the <head></head> tag.

Whatever rules you define within this, will be applied to the respective fields in the document.
Thus, Embedded CSS is useful when you are designing a webpage with separate styling constructs but you also want the design to be reusable within the page.

Inline CSS

This is another way of adding the CSS code within the HTML document. However, Inline CSS is more element specific than Embedded.
Here, instead of a separate <style> tag, we add the CSS code to the style attribute in the different HTML elements.

Therefore, if you’re looking for styling your different webpage elements in different ways, Inline CSS is the way forward.

External CSS

The next two inclusion techniques are about using the CSS code in a separate file rather than the HTML document itself.
This enables the programmer to use the same CSS codes in multiple web pages.

Talking about External CSS specifically, the CSS code here is included by mentioning the CSS file name in a <link> tag. For example, below is a sample code for including a CSS file styleit.css into the HTML document

The CSS code file is saved under the .css extension.

Imported CSS

The basic idea is similar to the Externa CSS. Here, instead of the tag, we use @import. So the CSS file is written with the @import annotation to include it in the HTML code.

CSS Syntax and Types of Selectors

Just like any programming language works, the CSS code is also interpreted based on some rules.
Here, the browser interprets what are called the style rules.
Based on the rules, it applies the design to the corresponding elements of the webpage.

The style rule can be seen as following 3 parts:

Selector – This is the HTML part of your webpage. Any HTML tag that will be styled by the CSS code is termed as a Selector.
Property – All the hassle that once had to be done as HTML attributes, now falls under this category. Simply put, all the color, border, cell padding etc. attributes of your HTML tags are now the CSS properties
Value – We have the style-ee we have the style-er all that remains is the style. Value corresponds to the style value given to the Property to be applied for the Selector.

CSS Syntax

The basic syntax for a basic CSS code can be shown as

general syntax of defining a css rule is as above.

selector then inside parenthesis property: value.

CSS Selector

Selectors with a specific type body,h1,div span, etc

CSS Type Selector

Selectors with a specific type body,h1,div span, etc

It will show result

Universal Selectors

This is when you want don’t want the selector to be specific for type and be universally applied at all tags * is used as universal selector

CSS Universal Selectors

Universally applied at all tags

It will show result

Descendant Selectors

It’s for when you want a style to be applied to an element only in case it is a part of another specific element

color will only apply to p inside div

CSS Descendant Selectors

Descendant selectior applied to all p tag inside div

Descendant selectior not applied to p tag outside div

It will show result

Class Selectors

As name suggest, this is for the styling of the class attribute in css class is represented by class name preceded by dot(.),

CSS Class Selectors

applied based on class

It will show result

ID Selectors

Similar to class selectors, this is for the id attribute id attribute are assinged on css with # then id attribute value

CSS Id Selectors

applied based on id

It will show result

Child Selectors

It is very much similar to descendant selectors in its execution. chile selector selects only the immediate child of a tag whereas descendent selector selects a tag at any level inside the parent tag. to select a child we use > symbol

CSS Child Selectors

applied based on id

It will show result

Attribute Selectors

You can specify a particular attribute (for e.g. type= “password”) which you want to style.

Attribute Selectors

It will show result

Multiple Style Selectors

You can have multiple properties for a single selector depending on the style requirement. Each property value pair is separated by semicolon (;)

You can specify a particular attribute (for e.g. type= “password”) which you want to style.

CSS Multiple Style Selectors

We can apply multiple styles seperated by semicolumn

It will show result

Grouping Selectors

This is when many selectors have similar property-value pairs.

CSS Multiple Style Selectors

CSS Multiple Style Selectors

CSS Multiple Style Selectors

We can apply same style to multiple selectors

It will show result