Where can the CSS go? CSS Location

CSS code can go in one of three places.
It can even be used in more than one of these three places within a single web page, if you want to get fancy.

External style sheets (slightly more advanced, not required for this course)
Internal style sheets (what we require in this course)
Local styles

  1. External style sheets:

    What goes into an external style sheet?

    Lines of CSS (selectors and declarations) go into a new plain text file that must be saved with .css at the end of the name.

    This file should not include any HTML tags, not even the <style> tags or normal HTML structural tags. Only CSS rules (selectors and declarations in the curly brackets) should go into this text file.

    Naming External Style Sheets:

    follow similar rules as naming a web page, in terms of using letters and numbers, avoiding spaces and punctuation marks. However, external CSS files must be named with .css as the file extension on the end of the name. The file could be called, for example,   name.css

    Format of External Style Sheets:

    An external CSS file must be saved in text format. So when you need to start a new external style sheet, just choose File>New to start with a blank text file when using text editing programs like TextEdit, Notepad, BBEdit.

    How does the CSS affect the HTML?

    The HTML page will link to this external CSS file using the following tag within the head of your HTML page:

    <link rel="stylesheet" href="name.css">

    The above tag in the head loads the CSS rules in name.css so that they apply to the HTML page. Both the CSS document and your web page must be in same folder (unless an appropriate path indicated in the href in the above tag). Change the name of the CSS file in the above example to reflect the name of your external CSS file.

    There are other ways you can load external CSS files, but the above method is the simplest and is extremely widely supported by browsers.

    Advantages of External CSS?

    Putting your styles in an external CSS file is useful because you can then apply those styles to many different HTML files all at the same time. Each HTML file just has to use the same <link rel="stylesheet" href="name.css"> tag in the head. This is usually the most efficient way to apply CSS to a site, and to update a site's CSS.

    External CSS helps keep all the CSS together, and can improve workflow and organization because of this. People often group CSS rules (using CSS comments) for different parts of the site into different parts of the external .css file

    It is also possible to use multiple .css files in a site, and/or to group CSS rules for different parts of the site (or rules for different kinds of CSS uses) into different external .css files. It is possible for a single .html file to load multiple external .css files.

    Disadvantages of External CSS?

    A bit harder to understand and work with as a CSS newbie. More files to keep track of.

    Making certain pages in the site different from other pages can be done, even using just one external .css file, but may seem counter-intuitive and complex at first.

    The final thoughts listed as advantages (above) may cause many headaches to the CSS newbie. I recommend that you stick to only one external .css file in a site until you are more comfortable using CSS and the external .css method.


  2. Internal style sheets

    Internal style sheets go inside the head of the HTML document.
    Internal style sheets require a <style> tag that you add inside the page's <head> tag
    Internal CSS is a good choice for this course.

    This is the easiest way to apply CSS rules to a page if you are a beginner:
    <style>

    p {color: navy; font-family: Arial, Helvetica;}
    #fancy {font-family: Gothic, Times;}
    .hot_items {color: red;}


    </style>

    Advantages of Internal CSS?

    Putting your styles in an internal style sheet in the head with the <style> </style> tag is useful because you can then apply those styles to anything on that one HTML page.
    Allows pages to be different from each other, and does so in an easy-to-understand way.
    Internal CSS is the easiest way to apply CSS rules to a page if you are a beginner.

    Disadvantages of Internal CSS?

    Doesn't apply to all pages in the site. You will need to do more work to update the CSS of multiple pages, and make sure that things are appropriately consistent. Therefore, internal CSS is generally not as efficient as external CSS.


  3. Local Styles

    - styles can be locally applied (meaning, the style rules go down in the content area inside the tag itself you want to affect):
    <h1 style="color: red"> Heading One Text is VERY Important</h1>
    <p style="background: yellow; color: green">sentences go here </p>

    Advantages of Local CSS?

    Using locally applied styles only affects the particular tag you add the style into. Local styles are always the most dominant. This is useful for overriding styles already set in an internal or external style sheet that would otherwise affect that particular instance of the tag.

    Disadvantages of Local CSS?

    Local CSS is scattered throughout your .html document. It is clearly the least efficient form of CSS, because it can be extremely labour intensive to alter or remove the CSS settings.

    Avoid local CSS for this course.