(37 votes, avg: 3.92/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. 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
For example, if you put your style.css file into a folder called "/css/", your code would look like this:
<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, Ash..Can i have a copy of your website?..How can i download it?
Hey Sir Ash,
Can I have a copy of your videos..?
Please, how can i download it?