How and where to write CSS?

introduction

Formatting Text

Box Model

Advanced selectors

More about CSS

Syntax and Explanation

Here h1 is the selector. In h1 place we can use any HTML element, class name or ID. Inside the curly braces we will give declarations. Declaration means property and value. Whatever the property and value we are using to that particular selector those values only apply to that selector in the browser. If you use the same selector with different properties and values in another place, those will be overwritten with first values. So beware of styles. If you open the curly brace you must close that curly braces after writing all the declarations. Inside the curly braces you can write a number of declarations that you want to apply. You must put colon between property and value. After completion of property and value you must put a semicolon. That means the browser understands that, that is one style to apply. In the above example there are two declarations one is to change h1 element color to blue and another one is to align the h1 to the centre of the page.

How to apply CSS to a html page?

Internal styling

<html><head><style>
         h1{
            color: red;
         }
      </style></head>
   <body><h1>Welcome to the Head First Lounge</h1><p><img src="image.jpg" alt="Drinks"></p></body>
</html>

Inline styling

It isn’t enough to just define a style— you also need to apply it, effectively telling the browser which elements the style should affect. The most direct way to apply a style to an element is by using the style global attribute.

<html><head><title>Example</title></head><body><a href="http://edupoly.com" style="background-color:grey; color:white">
         Visit the Edupoly website
      </a><p>I like <span>apples</span> and oranges.</p><a href="http://w3c.org">Visit the W3C website</a></body>
</html>

There are four content elements in this HTML document—two hyperlinks (created with the ‘a’ element) and a ‘p’ element that contains a span element. we have used the style global attribute to apply the style to the first ‘a’ element—the one that links to the Edupoly web site. The style attribute acts upon only the element to which it has been applied as you can see below:

The impact of the two CSS properties used in the example can be seen in the figure. The background-color property sets the color of the background of the element, and the color property sets the color of the foreground. The other two content elements in the HTML document are unaffected by the style.

External styling

This is the most common and effective way of using CSS. The styles in external style sheets affect all pages to which they’re linked. Typically an external style sheet is used for an entire site or subsection of a site, making it easy to update multiple pages by editing only one file. Create your style rules in a separate file, and save the file with the file name extension .css. An external style sheet can be anywhere within your website, but the normal practice is to put all style sheets in a dedicated folder called styles or css. You attach an external style sheet in the <head> section of your web page using a <link> tag. A <link> tag looks like this:

<link href="css/basic.css" rel="stylesheet">

In HTML5, the <link> tag requires two attributes:

href: This is the path to the external style sheet.
rel: This tells the browser that the file is a style sheet. Note that the value stylesheet is written as one word.