CSS Video Tutorials » CSS Basics http://cssvideos.com Learn CSS Wed, 25 Jan 2012 06:28:43 +0000 en hourly 1 http://wordpress.org/?v=3.1 Embedding CSS in Your Website http://cssvideos.com/css-basics/embedding-css-in-your-website/ http://cssvideos.com/css-basics/embedding-css-in-your-website/#comments Sun, 19 Jul 2009 23:18:30 +0000 Ashton Sanders http://cssvideos.com/?p=108 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

]]> http://cssvideos.com/css-basics/embedding-css-in-your-website/feed/ 25 CSS Selectors Part 2 http://cssvideos.com/css-basics/css-selectors-2/ http://cssvideos.com/css-basics/css-selectors-2/#comments Mon, 01 Jun 2009 20:25:51 +0000 Ashton Sanders http://cssvideos.com/?p=59 Hi this is Ashton Sanders with CSS Videos.com and this is the second video about CSS Selectors. In CSS Selectors Part 1, we covered how you can use HTML tags, ID‘s and Classes to select what to apply your CSS to.

In this video we’ll talk about

  1. Applying the same CSS to multiple elements.
  2. Using HTML’s hierarchy to be more specific about what elements are selected.

Selecting Multiple Elements at Once

To select two separate elements at the same time and apply the same styling to each, normally you’d write it as this:

h1 { color: red;}
h2 { color: red;}

Or you can use a comma to separate the selectors and put them together like this:

h1, h2  { color: red;}

Nope, not very complicated at all. This line of CSS will make all <h1> and <h2> tags red. You can apply the same styles to as many selectors as you want. There’s no limit.

h1, h2, #item, .red   { color: red;}

In this line of CSS, we have applied the same styling to four different selectors. All <h1> tags, <h2> tags, elements with the id=”item” and class=”red”.

CSS Descendant Selector

Of the CSS Basics, I probably use the CSS Descendant Selector the most. This is wher eyou use the hierarchy of your HTML to define which elements get “styled” (as opposed to assigning classes to everything. To quickly define hierarchy, here is some simple HTML:

<body>
<div>
<p>Random Text</p>
</div>
<p>More Text</p>
</body>

We have two paragraphs (<p>) in this HTML. The only difference between them is that one is the “child” of a <div> and the other is not. It can also be said that the <div> is the “parent” of the <p>, just like how the <body> is the “grandparent” of the first paragraph and the  “parent” of the second paragraph. A simpler way to say this is: the <body> is an “ancestor” (parent, grandparent, etc.) of both paragraphs. We can use these relationships in our CSS Selectors.

Let’s use CSS to only change the color of all paragraphs with a div as an ancestor:

div p { color: red;}

Yes, it’s that simple. The space represents ancestory.

body p { color: red;}

This CSS would make both paragraphs red since both paragraphs  are a descendants (child, grandchild, etc.) of the <body> tag.

Note: There are more ways to use your HTML hierarchy in your CSS Selectors (like only direct, siblings, etc.) but as they don’t work in all browsers in use today *cough* IE6 *cough*… I won’t go into them in detail here.

That pretty well summarizes what you  can do with CSS Selectors!

The next video will talk about the three ways of including your Cascading Style Sheets into an HTML document.

Thanks for watching and rating.

]]> http://cssvideos.com/css-basics/css-selectors-2/feed/ 21 CSS Selectors Part 1 http://cssvideos.com/css-basics/css-selectors-1/ http://cssvideos.com/css-basics/css-selectors-1/#comments Fri, 22 May 2009 22:20:54 +0000 Ashton Sanders http://cssvideos.com/?p=48 Hi this is Ashton Sanders with CSS Videos.com and this CSS Video Tutorial is the first video about CSS Selectors.

CSS Selectors add an incredible amount of flexibility and functionality to what you can style with Cascading Style Sheets. So far we have briefly defined what the CSS Selector does in the CSS Syntax video, and that is:

  • Selector: is the hook used to choose what part(s) of your HTML to apply the CSS to.

I have a feeling that won’t even make sense to most beginners. If it does right now, excellent; if it doesn’t you’ll soon understand in these examples. In this video I’ll give you a better understanding of how the Selector works and three types of hooks you can select with it. There are many different ways to “select” HTML elements, but I will try to cover the necessary basics.

I will note that CSS can be applied to many more languages other than just plain HTML, but since it’s the most common, lets start with some example HTML:

<h1>CSS Selectors</h1>

Here we have a simple <h1> tag around the text of “CSS Selectors.” Now we are going to write our CSS to select this <h1> tag and make it red:

h1  { color: red; }

That’s pretty simple and straightforward. The selector is the h1 and it selects all <h1> tags in your HTML document to make it red.

But we have one little problem, and that is that this CSS will make all <h1> tags red. If you have two <h1> tags on your website and you want one to be red and another to be blue, there are a couple things you can do. (Boo yea, that rhymes.) We’re going to start with assigning Classes and IDs to the HTML <h1> tags.

CSS Classes


Here is the HTML of adding a class of “hdr” to one <h1> tag:

<h1 class=”hdr”>CSS Selectors</h1>

As you can see, the class is just a simple HTML attribute we added to the H1 tag. The same class attribute of “hdr” can be used as many times as you want on the same HTML page. For CSS Selectors we use a period (.) to represent a class.

h1.hdr {color:red;}

This code selects all <h1> tags with the class=”hdr” attribute and makes it red. You can also write the class without listing the HTML element like this:

.hdr {color:red;}

This would select all HTML elements with the class=”hdr” attribute and make it red. This is useful if you want to apply the same styles to different HTML tags. You just add the class=”hdr” attribute to the element and it will become red. It doesn’t matter if it’s a <h1> tag, <p> (paragraph) tag, or <blockquote>.

I will also mention that the HTML attribute of “class” allows multiple values separated by spaces. So you can have an <h1> tag with the class of “hdr” and “main” at the same time like this:

<h1 class=”hdr main”>CSS Selectors</h1>

You can apply CSS to this element using either class. You can use any of these three lines to make the color of this <h1> tag red.

.hdr {color:red;}
.main {color:red;}
h1.main {color:red;}

That pretty much wraps up classes. Next on the list is CSS ID’s:

CSS IDs

Here is the HTML code for adding an ID of “mainhdr” to an <h1> tag:

<h1 id=”mainhdr”>CSS Selectors</h1>

As you can see this is just like the class attribute. The difference between the class and the ID is that the ID is only supposed to be used once on an HTML page. In CSS we use a hash mark (#) to represent an ID.

h1#mainhdr {color:red;}

This would select the <h1> with the ID of mainhdr and make it red. Just like the class selector, you can write the ID selector without the HTML element like this:

#mainhdr {color:red;}

This code selects any HTML element with the ID of “mainhdr” and makes it red.

Is that it? Heck no, but that’s all I can fit into this video. The next video will be CSS Selectors Part 2 and will cover applying the same CSS to multiple elements and using the hierarchy of your HTML document to specify what elements are selected.

Thanks for watching the video I hope you enjoyed it.

]]> http://cssvideos.com/css-basics/css-selectors-1/feed/ 13 CSS Syntax http://cssvideos.com/css-basics/css-syntax/ http://cssvideos.com/css-basics/css-syntax/#comments Wed, 06 May 2009 15:15:14 +0000 Ashton Sanders http://cssvideos.com/?p=42 Hi this is Ashton Sanders with CSS Videos.com, and we are going to be talking about CSS Syntax.

My favorite thing about CSS is that it has a very simple syntax; making it super easy to learn.

In Cascading Style Sheets, you are writing a series of rules to apply to your HTML document.  Every rule has these things:

 

CSS Syntax

  • Selector: is the hook used to choose what part(s) of your HTML to apply the CSS to. Following the selector is the…
  • Declaration Block: Everything within the curly brackets,  “{” and “}”, is called the declaration block
  • Declaration: Inside a declaration block you can have as many declarations as you want and each declaration is a combination of a CSS Property and a value.
  • Property: is one of the CSS Properties used to tell what part of the selector will be changed (or styled).
  • Value: assigns a value to the property.

(Note that the Property is always followed by a colon, and each declaration is separated with a semicolon

Here are some quick sample:

Let’s Say that title at the top of this video screen is an H1 element. The HTML code for that would look like this:

<h1>CSS Syntax</h1>

Now lets use CSS to make it red.

h1 { color: red }

This bit of code tells the h1 to have the color of red. Boo yea, we got some red in there and we are good to go.

Let’s add another declaration to the declaration block to make the background color black:

h1 { color: red; background: black; }

You now know the basics of the CSS Syntax.

My next video will go into further detail about the CSS Selector, and some things you should know about it.

Thanks for Watching!

Ashton Sanders
CSSVideos.com

]]> http://cssvideos.com/css-basics/css-syntax/feed/ 24 What is Cascading Style Sheets? http://cssvideos.com/css-basics/what-is-cascading-style-sheets/ http://cssvideos.com/css-basics/what-is-cascading-style-sheets/#comments Sun, 26 Apr 2009 06:46:28 +0000 Ashton Sanders http://cssvideos.com/?p=28 *This has been recently Updated! Enjoy the new version and let me know what you think.*

Welcome to CSS Videos.com. My name is Ashton Sanders and this is the first CSS video tutorial, so I will be answering a very important question: “What is Cascading Style Sheets?”

But before we get to CSS, we must first quickly define HTML as CSS works with HTML to make websites faster and easier to edit.

What is HTML?

HTML (HyperText Markup Language) is the most basic programming language for websites. HTML consists of elements (or tags) that are used to create websites. For example, the HTML element “<p>” is used to create a paragraph on a web page.

<p>Here’s an example paragraph in HTML code.</p>

Web pages are created with HTML elements and then CSS is used to style those HTML elements and define how they will look.

What Does CSS Do?

CSS allows you to style a lot of different aspects of HTML elements. You can use CSS to do things like:

  • changing the font, size and alignment of text
  • adding a background color or background image
  • adding a border
  • create a drop down menu
  • define the width and height of an element
  • and much, much more…

How Do People Use CSS?

As CSS is so versatile, people use it as much or as little as they want. Any part of a webpage that doesn’t get created with HTML can be done with CSS.

One recommended practice is to use HTML to:

  1. Define the different areas of your web page (ie. header, sidebar, content, footer) and
  2. Fill it with content (text, images, etc.).

Then you use CSS to:

  1. Format the size and placement of your web page areas
  2. Style the content (color, size, bold, font, etc.) and
  3. Add the design (look and feel) to the HTML.

Purpose of CSS?

The purpose of CSS is to keep as much of your actual content (HTML) separated from your design styles (CSS). This allows you to make website-wide changes easily. For example, if you want to change the color of all the text on your website, you only need to change the color in your CSS file, and your entire website has been updated.

Cascading Style Sheets helps to keep your code clean, decreases your file size and gives you mountains of functionality.

I hope you enjoyed the CSS Tutorial. As I’m always looking to improve my videos, please leave a comment below with any suggestions or recommendations you may have to improve them.

Thank you very much for watching this CSS Video on “What is Cascading Style Sheets”.

Ashton Sanders
CSSVideos.com

]]> http://cssvideos.com/css-basics/what-is-cascading-style-sheets/feed/ 26