RSS
CSS Videos
By Ashton Sanders

CSS Properties

Embedding CSS in Your Website

StupidMehOkayGreatAwesome!
(126 votes, avg: 4.02/5)
Loading ... Loading ...

Video Transcript:

Hello again and welcome to CSSvideos.com. My name is Ashton Sanders and this video will show you how to embed CSS into your website.

Now that you know the basic CSS Syntax and how to use the CSS Selector, I will describe the three ways you can embed (or use) Cascading Style Sheets in your website.

Inline CSS

The first way is called Inline Cascading Style Sheets. You can add CSS directly into the elements in your markup with the “style” attribute.

<div style=”color:red;”>
<p style=”font-size:12px;”>

“Style” is a “Core HTML Attribute” so you can apply it to any visual HTML/XHTML elements. (This excludes: html, head, title, base, meta, param, script and style.)  In other words you can use it on any HTML element that can actually be seen (the <body> element and its children).

This may seem to be the easiest way of using CSS, but it is not recommended as it completely ignores the best parts of Cascading Style Sheets. You might as well use font tags instead of CSS, but I’ll get into that more later in this video.

Internal Style Sheets

The second way adds CSS to a single document or web page by adding the following code into the <head> of your document using the <style> element.

<style type=”text/css”>

div {color: red;}
p {font-size: 12px;}

</style>

As you can see, <style> is an HTML element that is opened and closed. Within the <style> element is the CSS that will be applied to that page. There is no limit to the amount of CSS you can put inside the <style> element. You would enter this code in the <head> area of your web page (anywhere after <head> and before </head> in your HTML document) and that would apply this CSS to the elements of that web page.

External Style Sheets

The third, and most adventagous way to embed CSS into a document uses External Cascading Style Sheets (or External Style Sheets).  An external CSS file is simply a text file with a “.css” extension. This file can then be included into many different pages. This allows you to make one document that has the styling for your entire website. Then you include that file into every page of your website. This is the recommended way of using CSS in your website as it lets you make global visual changes (to an entire website) by only tweaking one file.

For Example, lets say you have a website where all the paragraphs are black, and you want to change them to grey. Since you have an external Style Sheet, you just open up that one CSS file and change the style for paragraphs to: color:grey; Now all the paragraphs on your website are grey!

Here’s the code you would use to include an external style sheet into a webpage:

<link type=”text/css” rel=”stylesheet” href=”/link/to/stylesheet.css” />

Conclusion

Thank you for watching this CSS Video. I hope you learned something from it and are able to apply it on your own web page hosting sites. This is the last of the CSS Basic Videos. Next, we will be getting into the CSS Properties!

See you soon,
Ashton Sanders

This entry was posted by Ashton Sanders on Sunday, July 19th, 2009 at 7:18 pm and is filed under CSS Basics. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

27 Responses to “Embedding CSS in Your Website”

  1. Jim Wilson says:

    Ashton, I understand how to set up the external style sheet within the document, but I don’t know where to set the “external” style sheet up. Could you please explain this to me? Thanks.

  2. Ashton Sanders says:

    Hi Jim,

    You will save all of your CSS into a “.css” text file (ie. style.css) and upload it to your server. Then the above <link type=”text/css” rel=”stylesheet” href=”/css/style.css” />

    Make Sense?
    Ashton Sanders

  3. Fayaz says:

    hi jim..
    its very easy.. you just save your ESS file with extension “.css”.. then call this ‘ess’ file in your original program.. you can easily get connected.. bye..

    Ashton Sanders.. is it correct..?

  4. Pam says:

    Great beginners CSS guide. Thanks for the information. Look forward to more of your video sessions.

  5. Amanuel says:

    Tht’s really great start. thanks alot for the video. Hope to see advanced CSS video Tutorials in the future.

  6. Cynthz says:

    Hey Sir Ash,

    Can I have a copy of your videos..?
    Please, how can i download it?

    • Ashton Sanders says:

      I sent you an email earlier, but thought I’d post it anyway:

      I’m sorry, but my videos are copyright so please don’t download and distribute them.

      Thank you,

  7. Walter Ozuna says:

    You would not believe how long ive been googling for something like this. Through 5 pages of Yahoo results couldnt find diddly squat. One search on Bing. There was this…. Gotta start using that more often

  8. KOL says:

    Excellent!! Looking forward to viewing more of these very helpful tutorials.

  9. Treme says:

    Good day, great writing.

  10. Panama says:

    There is plain a lot for me to ascertain outside of my books. Thanks for the wonderful read,

  11. Elmira Belluomini says:

    Buenas tardes!. Excelente artículo, te añadiré a mi lector de noticias. Nos vemos!

  12. health insurance information says:

    Nice post.

  13. bilal shah says:

    bilal shah says:
    i am very thanks full for uploading such kind of video which give me very help full in my study now i am really easily understand complete Css concept before this i am facing some problem but after that i clear my concept. i am looking for further help full video thanks once again. if i have occur some problem then i contact with u.

  14. bilal shah says:

    @Ashton Sanders:
    bilal shah says:
    can explain the java scripts and make the video like css .we most student facing problem in to java scripts.

  15. Maneesh says:

    Dear Ashton Sanders,
    Thank u very much for ur effort for us.
    I particularly like the Video Transcript, with it we have everything that u say and that aid in better understanding.
    We want to learn complete css, and other technologies as well.
    Plz do the needful asap.
    God Bless U ! All the Best ! Take Care !

  16. Krysten Wallenbrock says:

    hi-ya, nice article.

  17. Dreamy Pink says:

    Thanks..very clear & helpful

  18. Joerg says:

    Hi Ashton,
    That’s the type of material I really appreciate: As short as possible, as long as necessary and totally clear all the way. Outstanding job! Thank you so much!
    All the best to you!

    Joerg

  19. hamayun says:

    i want to make full website

  20. Gidi says:

    Thanks Ashton, Great videos. Let me quote Joerg: As short as possible, as long as necessary and totally clear all the way.

    Are you making any more videos?

  21. Sunganani says:

    Where were you all my web design life?

    Great videos. Clear and straight to the point.

    Thanks

  22. Jacques ATL says:

    Excellent! This saved me HOURS of reading!!!
    Keep up the great job!

  23. […] Videoyu İzle […]

  24. Will says:

    Super – thanks again.

  25. Jeb says:

    Thank you for keeping this site up. You’ve guide is so simple that it makes CSS seem so easy.

    Thx again!

  26. Bintang says:

    Great Css Tutorial!
    Thanks for your hard-effort and free work for all of us, the absolute beginner, Mr. Aston. Your tuts are easy to understand.
    I look forward to your next videos on the same matter. Thanks again Sir!

Leave a Reply

 
 
.love { css: awesome }