CSS Video Tutorials https://cssvideos.com Learn CSS Thu, 09 Aug 2012 20:33:18 +0000 en-US hourly 1 https://wordpress.org/?v=6.0.11 CSS Font-Weight (Bold) https://cssvideos.com/css-properties/css-font-weight-bold/ https://cssvideos.com/css-properties/css-font-weight-bold/#comments Sat, 09 Jun 2012 05:38:01 +0000 http://cssvideos.com/?p=193 Hello and welcome to CSS Videos.com. My name is Ashton Sanders I’m going to explain the CSS Property: Font-Weight. Font-Weight is the CSS property to make text bold or not bold. (You would think this is the most simple, straight-forward CSS property, but it’s not. In this case, it is a bit more complicated than […]

The post CSS Font-Weight (Bold) first appeared on CSS Video Tutorials.

]]> Hello and welcome to CSS Videos.com. My name is Ashton Sanders I’m going to explain the CSS Property: Font-Weight.

Font-Weight is the CSS property to make text bold or not bold.

(You would think this is the most simple, straight-forward CSS property, but it’s not. In this case, it is a bit more complicated than it needs to be, giving you just a bit more functionality than you’d expect or think you’d need. The bad news is that some browsers don’t currently pay attention to this extra functionality.)

CSS Font-Weight has the values you’d expect: “bold” and “normal”, and honestly, that’s all you really need to know, but here’s the…

CSS Bold Details

CSS Font-Weight also has a sliding scale of not-bold to bold. It starts at 100 (not bold) and increases by increments of one hundred up to 900 (bold). At this point almost none of the modern browsers care about this sliding scale, but maybe one day, you’ll be able to accurately make your text just a little bit bolder with font-weight: 300. Until then, 100 to 500 count as not bold and 600 to 900 count as bold.

(There is also a “lighter” and a “bolder” value, but it might as well be “normal” and “bold” for all intensive purposes.)

Below this video, I’ll show each of the CSS font-weight (CSS bold or not bold) values in effect (and in two fonts) so you can see how each one looks in your browser (and in this video, I’ll show you what the font-weight values looks like in Firefox 12):

Font: Trebuchet Font: Arial
normal bold normal bold
lighter bolder lighter bolder
100 600 100 600
200 700 200 700
300 800 300 800
400 900 400 900
500   500  

You’ll also notice in some browsers (including FireFox 12) that Font-Weight 800 and 900 for the font Arial changes from “Arial Bold” to “Arial Black”.

The final possible value for CSS font-weight is “inherit” which acts as all other inherit values: allowing your element to inherit its bold or not bold state from its parent element. (This is what all elements do on default.)

That is the long winded explanation of how to bold text with CSS.

Thank you for watching, and please subscribe in the left sidebar if you want to get notified when I post new CSS Tutorials. There are advanced CSS Videos in the works, so stay tuned!

Ashton Sanders
CSSVideos.com

The post CSS Font-Weight (Bold) first appeared on CSS Video Tutorials.

]]> https://cssvideos.com/css-properties/css-font-weight-bold/feed/ 6 CSS Font-Style (Italics) https://cssvideos.com/css-properties/css-font-style-italics/ https://cssvideos.com/css-properties/css-font-style-italics/#comments Sat, 18 Jun 2011 03:37:34 +0000 http://cssvideos.com/?p=184 Hello again and welcome to CSSvideos.com. My name is Ashton Sanders and this CSS Tutorial will be a simple overview of the CSS Property called “Font-Style“. This is how you use CSS to make text slanted or italic. The four possible values for font-style are: normal, italic, oblique and inherit. The default value is normal […]

The post CSS Font-Style (Italics) first appeared on CSS Video Tutorials.

]]> Hello again and welcome to CSSvideos.com. My name is Ashton Sanders and this CSS Tutorial will be a simple overview of the CSS Property called “Font-Style“. This is how you use CSS to make text slanted or italic.

The four possible values for font-style are: normal, italic, oblique and inherit. The default value is normal (not italic), but it does inherit the font-style of parent elements. The difference between italic and oblique is that oblique takes the “normal” font and turns it sideways, while italic font will look for the italic version of the font first. In some recent browsers these two are pretty interchangeable.

In this example code, I have made all of my <p> (paragraphs) italic with font-style:

p { font-style: italic; }

This CSS Property is inherited, which means all child elements inside of the selected element also will be italicized. So if I applied the font-style of italic to the <body> of the page, all the text in the body will be italic.

(This can easily be overwritten by applying another font-style to a child element.)

Thank you for watching this CSS Tutorial.

The post CSS Font-Style (Italics) first appeared on CSS Video Tutorials.

]]> https://cssvideos.com/css-properties/css-font-style-italics/feed/ 13 CSS Font-Family https://cssvideos.com/css-properties/css-font-family/ https://cssvideos.com/css-properties/css-font-family/#comments Wed, 15 Jun 2011 06:05:01 +0000 http://cssvideos.com/?p=139 Hello again and welcome to CSSvideos.com. My name is Ashton Sanders and this video will be a simple overview of the CSS Property called “Font-Family“. Font-Family Basics This attribute, as expected declares the font that will be used for the selector. In this example code, I have given my <body> the font-family of  “Arial”: body […]

The post CSS Font-Family first appeared on CSS Video Tutorials.

]]> Hello again and welcome to CSSvideos.com. My name is Ashton Sanders and this video will be a simple overview of the CSS Property called “Font-Family“.

Font-Family Basics

This attribute, as expected declares the font that will be used for the selector. In this example code, I have given my <body> the font-family of  “Arial”:

body { font-family: Arial; }

This CSS Property is inherited, which means all child elements inside of the selected element also will get the font. So by applying the font-family of “Arial” to the <body> of the page, we have changed all text on our page to use the font of Arial.

(This can easily be overwritten by applying another font to a child element.)

Font-Family Complications

The complications begin when someone does not have a font installed on their computer. The normal nature of this CSS property requires your computer to have the font installed if you want to view it on a website.* So if your computer does not have the font “Arial”, the websites you visit will not display Arial; it will display your default font. For this reason, it is recommended that you use what is called a “font stack”, which is simply a comma-separated list of fonts in the order of preference. This way, each visitor to your website will see the font that is closest to ideal, instead of their default font.

#header { font-family:Arial, Helvetica, sans-serif; }

First the computer will check for “Arial”. If that font is not installed on the computer, it will look for “Helvetica”, and then “sans-serif” if neither previous are available. Most computers these days have “Arial”, but there are still computers out there who don’t have some of the most common fonts.

*There are ways to get your website to display fonts from the website instead of from the visitor’s computer, and I’ll be covering that in the advanced CSS videos.

Please rate and comment to let me know what you think!

Enjoy,
Ashton

The post CSS Font-Family first appeared on CSS Video Tutorials.

]]> https://cssvideos.com/css-properties/css-font-family/feed/ 2 CSS Font-Size https://cssvideos.com/css-properties/css-font-size/ https://cssvideos.com/css-properties/css-font-size/#comments Sat, 23 Apr 2011 06:07:20 +0000 http://cssvideos.com/?p=164 Welcome to CSSVideos.com. My name is Ashton Sanders, and now that we’ve gotten the Basics of CSS out of the way, we’ll start with some simple CSS properties for styling text. The first property we will cover is: Font-Size This property, as expected, declares the size of the text (letters, numbers, characters, etc.) in an […]

The post CSS Font-Size first appeared on CSS Video Tutorials.

]]> Welcome to CSSVideos.com. My name is Ashton Sanders, and now that we’ve gotten the Basics of CSS out of the way, we’ll start with some simple CSS properties for styling text. The first property we will cover is:

Font-Size

This property, as expected, declares the size of the text (letters, numbers, characters, etc.) in an element. Here is a simple example of making the text in all paragraphs 14 pixels tall:

p { font-size: 14px;}

Note: This is NOT text-size; it is font-size. Text-size is NOT a CSS property.

Font-Size Values

Font-Size has a many possible values besides a unit of measurement (like the first example). You can also use a percentage for the height. You can also use these preset values (comma separated):

xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, inherit

Font-Size, by default, is set to “medium.”

Here’s another example of making the font in the <div class=”leftcolumn”> large:

div.leftcolumn { font-size: large;}

Thank you for watching this CSS Video. Let me know if you didn’t understand anything in this CSS tutorial.

Ashton Sanders
CSSVideos.com

The post CSS Font-Size first appeared on CSS Video Tutorials.

]]> https://cssvideos.com/css-properties/css-font-size/feed/ 6 Embedding CSS in Your Website https://cssvideos.com/css-basics/embedding-css-in-your-website/ https://cssvideos.com/css-basics/embedding-css-in-your-website/#comments Sun, 19 Jul 2009 23:18:30 +0000 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 […]

The post Embedding CSS in Your Website first appeared on CSS Video Tutorials.

]]> 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

The post Embedding CSS in Your Website first appeared on CSS Video Tutorials.

]]> https://cssvideos.com/css-basics/embedding-css-in-your-website/feed/ 27 CSS Selectors Part 2 https://cssvideos.com/css-basics/css-selectors-2/ https://cssvideos.com/css-basics/css-selectors-2/#comments Mon, 01 Jun 2009 20:25:51 +0000 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 Applying the same CSS to multiple elements. Using […]

The post CSS Selectors Part 2 first appeared on CSS Video Tutorials.

]]> 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.

The post CSS Selectors Part 2 first appeared on CSS Video Tutorials.

]]> https://cssvideos.com/css-basics/css-selectors-2/feed/ 22 CSS Selectors Part 1 https://cssvideos.com/css-basics/css-selectors-1/ https://cssvideos.com/css-basics/css-selectors-1/#comments Fri, 22 May 2009 22:20:54 +0000 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, […]

The post CSS Selectors Part 1 first appeared on CSS Video Tutorials.

]]> 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.

The post CSS Selectors Part 1 first appeared on CSS Video Tutorials.

]]> https://cssvideos.com/css-basics/css-selectors-1/feed/ 19 CSS Syntax https://cssvideos.com/css-basics/css-syntax/ https://cssvideos.com/css-basics/css-syntax/#comments Wed, 06 May 2009 15:15:14 +0000 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 […]

The post CSS Syntax first appeared on CSS Video Tutorials.

]]> 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

The post CSS Syntax first appeared on CSS Video Tutorials.

]]> https://cssvideos.com/css-basics/css-syntax/feed/ 22 What is Cascading Style Sheets? https://cssvideos.com/css-basics/what-is-cascading-style-sheets/ https://cssvideos.com/css-basics/what-is-cascading-style-sheets/#comments Sun, 26 Apr 2009 06:46:28 +0000 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 […]

The post What is Cascading Style Sheets? first appeared on CSS Video Tutorials.

]]> *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

The post What is Cascading Style Sheets? first appeared on CSS Video Tutorials.

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