Easy to Learn Cascading Style Sheets ...

How To Add CSS in a Webpage

When using CSS, it is important to make sure that browsers use their most standards compliant response. You will need to ensure that your DOCTYPE triggers standards mode rendering for these browsers, or they will assume your code is relying on some mistakes of older browsers, and will try to replicate some them to various degrees, which can produce unpredictable results.

 
Different Ways of Adding CSS in a Webpage

There are two ways to include CSS on a page. One is by loading it from an external file, and one is by embedding it directly in the source code of the page. One of the most useful features of CSS is the ability to share the same styles across many pages, so that all pages can be changed by modifying a single file. To do that, you will need to keep the CSS in a separate file.

This also allows you to keep the clutter out of your document, and helps avoid several other problems, so even if you only intend to use the CSS on one page, you may want to include it in an external file anyway.

To use an external file, you would usually name the file something.css (choose an appropriate name), and then use the LINK tag to tell the page to use it. Inside the head of a document put this:

1

    

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

To embed CSS directly into a web page, use the STYLE tag, and set the type to ‘text/css’:

1
2
3

    

  <style type="text/css">
  /* CSS goes here */
  </style>

Note: That the CSS should only ever be included in the head of your document, unless you use inline style attributes on individual elements.

 
How to Use Comment in CSS

Comments allow you to leave notes to yourself and other people in your CSS, and are useful as a reminder of what the styles are being used for and why. CSS only supports block comments, and these can span multiple lines. The slash-asterisk indicates a comment start. Everything after it will be ignored by the CSS engine until an asterisk-slash is encountered.

1
2
3
4
5
6

    

  p { color: green; }
 
  /* This is a
  block comment */
 
  div { position: relative; }

This is not needed any more. All current browsers are aware of style tags, and how to treat their contents, since they have been part of HTML since HTML 3. Browsers that do not understand HTML 3 or CSS (these are virtually never used now) will display the CSS as if it was the content of the page. You can hide the CSS from them by commenting out your CSS with standard HTML comments. Browsers that understand CSS will simply ignore these comments, and will just interpret the CSS within them:

1
2
3
4
5
6
7

    

  <style type="text/css">
  <!--
 
  /* CSS goes here */
 
  -->
  </style>

source: heygb

 View Full Story.