In this Intro to CSS video tutorial we learn how to add basic styles to a page with CSS. First, we link to an external style sheet, and then we learn the basic syntax of CSS, as well as four of the most common CSS Selector types; (1) type selectors, (2) ID selectors, (3) class selectors, and (4) descendant selectors.
To view this lesson in full written form, see:
If you would rather learn from a single, unified video course instead of individual one-off video tutorials check out my 8 hour video course and learn pro-level HTML, CSS, and responsive design.
Hey Brad,
I have a question. If you want to increase or decrease the size of let’s say an image or a text, is it better to use % than px? Because sometimes if you display your webpage on a different browser or run it on a different computer the images or texts kinda mess up. Some images will look bigger or some will out of the position.
Great question.
There isn’t a “correct” answer – it depends on your overall approach. If you are designing your entire layout to be flexible in width, than yes, by all means use percentage values instead of pixels. This is becoming increasingly popular because it works well for mobile devices, and with things like “media queries” we can make sure that things don’t look strange on large / wide desktop monitors.
Regarding font-size: I recommend always using either percentage or “em” values. Some browsers can’t resize the text on the fly if you use pixel values. You mentioned that text will appear larger or smaller on different browsers – that is very true. Simply using percentage values instead of pixels won’t fix that issue – it’s just the nature of different operating systems and browsers. I recommend you check out a pre-made CSS “reset” or “guide” file. It’s a collection of code put together by others, and it creates a level playing field for all browsers, and then you can add your site-specific styles in a separate style sheet, layered on top.
Take a look at Yahoo’s reset file:
http://yuilibrary.com/yui/docs/cssreset/
Thanks!
I am a beginner in css/xhtml web pages and your tutorials are helpful.
Thanks
Thanks for all the free info. I wish I had waited to learn from you instead of paying 100K to go to SCAD. haha. Hopefully your training vids will help me get out of all this student loan debt. You are a very good teacher and thanks again.
Thanks for the kind words, Julie! I’m glad you find the articles & videos useful 🙂