(141 votes, avg: 3.82/5)
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
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.
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
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..?
Great beginners CSS guide. Thanks for the information. Look forward to more of your video sessions.
Tht’s really great start. thanks alot for the video. Hope to see advanced CSS video Tutorials in the future.
Hey Sir Ash,
Can I have a copy of your videos..?
Please, how can i download it?
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,
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
Excellent!! Looking forward to viewing more of these very helpful tutorials.
Good day, great writing.
There is plain a lot for me to ascertain outside of my books. Thanks for the wonderful read,
Buenas tardes!. Excelente artículo, te añadiré a mi lector de noticias. Nos vemos!
Nice post.
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.
@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.
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 !
hi-ya, nice article.
Thanks..very clear & helpful
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
i want to make full website
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?
Where were you all my web design life?
Great videos. Clear and straight to the point.
Thanks
Excellent! This saved me HOURS of reading!!!
Keep up the great job!
[…] Videoyu İzle […]
Super – thanks again.
Thank you for keeping this site up. You’ve guide is so simple that it makes CSS seem so easy.
Thx again!
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!