Categories
CSS Tutorials

Applying CSS

CSS can be applied to HTML documents in different ways:

Inline Styles

Inline styles are used to apply styles directly to HTML element start tag. It can be added with the “style” keyword. The style attribute includes combination of CSS properties and values. Each “property: value” pair is separated by a semicolon (;).

<h1 style="color:red; font-size:30px;">This is a heading</h1>
<p style="color:green; font-size:22px;">This is a paragraph.</p>
<div style="color:blue; font-size:14px;">This is some text content.</div>

Using the inline styles are generally considered a bad practice. As style rules are embedded directly inside the HTML tag, it causes the presentation to become mixed with the content of the document; which makes the code hard to maintain and negates the purpose of using CSS.

For example, a flower bouquet looks very beautiful, but to pick a particular flower, it is difficult to find out where it is.

Internal style sheet

To write internal styles, we use the <style>…</style> block. These styles will be applied only for the current page. Many designers prefer to work in a single page to refine their ideas before moving the styles to an external style sheet. Because they’re embedded in the page, these are known as embedded styles. To create a <style> block, we write the style rules in exactly the same way as in an external style sheet, and wrap them in a pair of HTML <style> tags. For valid HTML, the opening tag must contain type=”text/css” like this:

<style type="text/css">
	/* Style definitions go here */
</style>

We write this </style> block in <head> section of the page.

<html>
  <head>
   <style type = "text/css" media = "all">
     body {
      background-color: linen;
     }
     h1 {
      color: maroon;
      margin-left: 40px;
     }
   </style>
  </head>  
  <body>
   <h1>This is a heading</h1>
   <p>This is a paragraph.</p>
  </body>
</html>

All flowers at same place with pre separated lanes for each type of flowers. So it is little bit easier to find out each type of flowers.

External style sheet

An external style sheet is ideal when the style is applied to many pages of the website. An external style sheet holds all the style rules in a separate document that you can link from any HTML file on your site. External style sheets are the most flexible because with an external style sheet, you can change the look of an entire website by changing just one file. You attach an external style sheet in the section of your web page using a tag or a CSS @import rule. A tag looks like this:

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

OR

<style>
  @import url(css/basic.css);
</style>

In the basic.css file, we will have all the styles of HTML elements.

Each flower group is separated with a name. Now, by using that name we can easily find out the required flower wherever it is.