CSS Tutorial - Part 1 - Types

Submitted by: 
Language: 
Visitors have accessed this post 1058 times.

Introduction:
This is the first part in my CSS Styling tutorial! Hopefully, it should be a detailed series, but not too long. So since this is the first tutorial I will be going over the three different methods of CSS styling; Inline, Internal CSS, and External CSS.

What's The Difference?
The coding for each of the different methods is the exact same, however the only difference is the placement and position of the coding itself.

There aren't really many (if any) positives or negatives for each method, however; since the only one that is not within the same page as it is being used is the external styling, it means that the external styling may be slightly slower to load or possibly un-reliable to someone with a poor internet connection. However, it does mean keeping the external CSS separate will keep the file sizes down of all your other HTML, HTM, PHP, etc. files lower.

Examples:
There will be no CSS coding in this tutorial, but here are how to set-up the styling...

Inline:
This is where the CSS is kept within the elemnt the styling is appropriate to, for example, giving a div a 50% width...

  1. <div style='width:50%;'></div>

Internal:
This is where all the CSS is kept within the same document it is being used by, however it is kept in one place, professionally in the head tag since it is not a direct element to display within the page...

  1. <style>
  2. //CSS Styling Would Go In Here.
  3. </style>

External:
Finally, this is when all the CSS is kept in one external .css file. Here is how you link to the external css file in the php/html document...

  1. <link rel='stylesheet' type='text/css' href='style.css'>

What Does .CSS Stand For?
.CSS = Cascading Styling Sheet

Linking CSS To a HTML Element:
To link your CSS to an HTML element (text, div, etc.) you will need to decide whether you want to use a class or id, you will also need a unique name. Once you have those, go to your element in HTML and add...

  1. class='myClass'

... to the attributes of that element if you chose a class, or...

  1. id='myID'

if you chose an id.

Make sure you replace 'myClass' and/or 'myID' with your unique name. Then, in the CSS you will want to encase your properties with...

  1. .myClass {
  2. //Properties go here
  3. }

if you chose a class, or...

  1. #myID {
  2. //Properties go here
  3. }

(You can remove the line beginning with // if you wish).

Here's an example...

  1. <html>
  2. <head>
  3. <link rel='stylesheet' type='text/css' href='externalCSS.css'/> <!-- External CSS example. -->
  4. <style>
  5. .internal {
  6. color: blue;
  7. width: 300px;
  8. height: 100px;
  9. //Internal CSS example.
  10. }
  11. </style>
  12. </head>
  13. <body>
  14. <div style="width:50%;">Inline</div> <!-- Inline CSS example. -->
  15. </body>
  16. </html>

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe>
  • You may insert videos with [video:URL]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
CAPTCHA
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.