How to use the text-decoration and the text-align property?

The text-align CSS property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers).

Example

 h1 {
    text-align: center;
}

p.date {
    text-align: right;
}

p.main {
    text-align: justify;
}

Text Decoration

The text-decoration property is used to set or remove decorations from CSS Text.
The text-decoration property is mostly used to remove underlines from links for design CSS purposes:

 a {
    text-decoration: none;
}

css Background Image - Shorthand property

 

As you'll be able to see from the examples on top of, there ar several CSS3 properties to think about once coping with backgrounds.
To shorten the CSS code, it's conjointly potential to specify all the properties in one single property. this can be known as a shorthand property.
The shorthand property for background is just "background":

body {
    background: #ffffff url("img_tree.png") no-repeat right top;
}

When victimization the shorthand CSS property the order of the property values is:

•     background-color
•     background-image
•     background-repeat
•     background-attachment
•     background-position

It doesn't matter if one in every of the  css3 property values is missing, as long because the ones that ar gift ar during this order.

This example uses a lot of advanced CSS. Take a look: Advanced CSS example

Background Image - no-Repeat and Horizontally or Vertically Set position

By default, the background-image CSS property repeats a picture each horizontally and vertically.
Some pictures ought to be recurrent solely horizontally or vertically, or they're going to look strange, like this:

body {
    background-image: url("gradient.png");
}

If the image is recurrent CSS solely horizontally (repeat-x), the background can look better:

body {
    background-image: url("gradient.png");
    background-repeat: repeat-x;
}

Showing the image just the once is fixed by the background-repeat property:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
}

In the CSS example higher than, the background image is shown within the same place because the text. we would like to vary the position of the image, so it doesn't disturb the CSS files an excessive amount of.The CSS position of the image is fixed by the background-position property:

body {
    background-image: url("img_tree.png");
    background-repeat: no-repeat;
    background-position: right top;
}

The css Background image define

The background-image CSS property specifies a picture to use because the background of a component.
By default, the image is continual therefore it covers the whole part.
The CSS background image for a page will be set like this:

Example

body {
    background-image: url("paper.gif");
}

Below is Associate in Nursing CSS example of a nasty combination of text and background image. The text is sort of not readable:

Example

body {
    background-image: url("bgdesert.jpg");
}

The css Background Color value in the body selector

The background-color css property specifies the background color of a part.

The background color of a page is outlined within the body css selector:

Example

body {
    background-color: #b0c4de;
}

With CSS, a color is most frequently such that by:

•     a HEX worth - like "#ff0000"
•     associate degree RGB worth - like "rgb(255,0,0)"
•     a color name - like "red"

Look at CSS3 Rules Color Values for a whole list of attainable color values.
In the css example below, the h1, p, and div parts have completely different background colors:

Example

h1 {
    background-color: #6495ed;
}

p {
    background-color: #e0ffff;
}

div {
    background-color: #b0c4de;
}

How To do stylesheet CSS?

 

Three Ways to Insert CSS

  There are 3 ways of inserting a mode sheet for CSS :

•     External sheet
•     Internal sheet
•     Inline vogue

External sheet

An external sheet is good once the fashion is applied to several pages. With AN external sheet, you'll modification the planning of a complete computing device by ever-changing only one file.

Each CSS files page should embody a link to the fashion sheet with the <link>  tag. The <link>  tag goes within the top section:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

Internal sheet

An internal sheet ought to be used once one document encompasses a distinctive vogue. You outline internal designs within the head section of AN HTML pages, within the  tag, like this:

<head>
<style>
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/background.gif");}
</style>
</head>

Inline Styles

An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly!
To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS3 properties. The CSS Example shows how to change the color and the left margin of a paragraph:

 <p style="color:sienna;margin-left:20px;">This is a paragraph.</p>

CSS Introduction for beginner

 

What is CSS?

• CSS stands for Cascading Style Sheets
• Styles define how to display HTML elements
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save a lot of work
• External Style Sheets are stored in CSS files    

 Styles solved  an enormous drawback

HTML was never meant to contain tags for format a document.
HTML was meant to outline the content of a document, like:
<h1>This is a heading.</h>
<p>This is a paragraph</p>
When tags like <font> and color attributes were further to the markup language 3.2 specification, it started a nightmare for net developers. Development of huge internet sites, wherever fonts and color data were further to each single page, became an extended and pricey method.
To solve this drawback, the planet Wide net syndicate (W3C) created CSS3.
In HTML 4.0, all format may well be far from the markup language document, and hold on in a very separate CSS file.
All browsers support CSS these days.

CSS Saves lots of Work!

CSS defines however HTML parts area unit to be displayed.

Styles area unit unremarkable saved in external CSS files. External vogue sheets alter you to alter the looks and layout of all the pages during a site, simply by redaction one single file!

CSS Ordinary Tutorial

In our CSS3 tutorial you will learn how to use CSS3 to control the style and layout of multiple Web pages all at once.

Examples in Each Chapter

This CSS tutorials contains hundreds of CSS3 examples.

With our online editor, you can edit the CSS and click on a button to view the result.

CSS3 Example

body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
p
{
font-family:"Times New Roman";
font-size:21px;
}

 CSS3 References

At W3Schools you will find complete CSS3 references of all properties and selectors with syntax, examples, browser support, and more.

• CSS3 Properties
• CSS3 Selectors
• CSS3 Aural
• CSS3 Units
• CSS3 Color