CSS Tutorial - Part 1 - Types

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... 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... 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... 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... ... to the attributes of that element if you chose a class, or... 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... if you chose a class, or... (You can remove the line beginning with // if you wish). Here's an example...