Anatomy of a CSS Rule

from: Getting Started with XHTML and CSS

Buy now

About this lesson

CSS can be a bit daunting when you're just getting started. In this video, we'll break down a CSS rule into its basic components so you have a better understanding of how to write them.

From: Getting Started with XHTML and CSS

The first step in learning the fundamentals of web design is getting past acronyms like XHTML and CSS. In this user-friendly workshop, author and trainer Chad Chelius demystifies XHTML code, showing you the building blocks of a web page’s content, and explains the role that cascading style sheets (CSS) play in building web pages. You’ll learn how to gain complete control over the appearance of your web pages and how to work with links, graphics, and alt text. Finally, you’ll see how to upload your files to a server, add meta tags, and test your website, and you’ll even get a glimpse of the future of the web: HTML5 and CSS3.

$34.99

4 hrs

Buy now

Similar Courses

In order to be an effective web designer, you need to know some fundamentals of the web. This chapter walks you through some key concepts that are important to know when creating files for the web.

Understanding the Web
- Understanding how the web works will help you to make decisions that can affect important aspects of your website. This video provides a high-level overview of how the World Wide Web functions.
  
  How the Web Works
  
  02:14
- The preliminary setup of a website has two important elements: domain registration and hosting. In this video, you'll learn what these are and what role they play in making your website work properly.
  
  Domain Registration and Hosting
  
  03:18
- There are very few hard-and-fast rules on the web, but there are some general guidelines you can follow to help things run smoothly. In this video, you'll get some suggestions for naming your files as well as best practices for working with files on a web server.
  
  Naming Conventions and Best Practices
  
  05:44
- There are so many acronyms used in discussions about the web that it's easy to get confused. XHTML and CSS are to acronyms that you definitely need to know and understand thoroughly, and you'll learn all about them in this video.
  
  What Are XHTML and CSS?
  
  03:19
- Before you dive in and start writing code, it's a good idea to map out your website. In this video, you'll see one approach to this and get a general overview of what a website looks like.
  
  Before You Begin
  
  01:37
Every web page contains content that is tagged using XHTML code. Understanding how to use these tags to obtain the desired results is crucial to good web design, and this chapter will get you started.

Creating Web Pages with XHTML
- Each web page that you create starts from the same basic foundation. This video will introduce you to the fundamental elements and structure of a web page.
  
  Creating Your First Web Page
  
  07:53
- The title of a web page is important because that is what appears in a browser window when a web page is viewed, and also because search engines use this content to display your page in search results. This video shows you how to add a title to your web page.
  
  Adding a Title
  
  05:49
- When you add content to a web page it needs to be appropriately tagged with standard XHTML elements. In this video we'll insert raw text and apply semantic markup to the content to give it logical structure.
  
  Creating Structured Markup
  
  08:37
- XHTML elements fall into one of two categories: block and inline. In this video you'll learn the difference between the two and, more importantly, how to apply them in an XHMTL file.
  
  Block vs. Inline Elements
  
  05:45
- XHTML contains predefined list tags that make creating lists quick, easy, and powerful. In this video, you'll learn the structure of lists and how to quickly change from one list type to another.
  
  Creating Lists
  
  06:31
- Tables are excellent for displaying tabular data; however, the code can look a bit intimidating at first. In this video you'll learn how to create a table and structure the table so that it displays correctly.
  
  Creating Tables
  
  09:10
- In this video, you'll learn how to add comments that are not interpreted by a web browser to an XHTML document. These can be useful as notes to yourself or to other users who will be editing the file.
  
  Adding Comments
  
  05:34
- Entities are reserved characters that are used to mark up code in XHTML. Because of this, it's important that they not be used in the content of your web page. In this video, you'll learn about the five reserved entities in XHTML and how to use them correctly.
  
  Entities
  
  07:31
Links are the backbone of the web. Without links, surfing the web would be a mundane and time-consuming process. This chapter walks you through creating links in your web pages.

Creating Links
- Relative links are probably the most common type of link that you'll create in your web pages. In this video, you'll learn how relative links work and how to use them in your web pages.
  
  Relative Links
  
  08:34
- Absolute links are a necessity when linking to web pages that do not reside on your server. In this video, you'll learn how to create an absolute link to an external web site.
  
  Absolute Links
  
  02:55
- The target attribute allows you to control the destination window of a link. In this video, you'll learn about the target attribute and how to apply it in your own web pages.
  
  Changing the Link Target
  
  05:20
- Email links are a great way to provide an easy line of communication between yourself and your customers. In this video you'll learn how to create an email link so your viewers can email you quickly and easily.
  
  Creating Email Links
  
  06:12
- When you are creating a page that contains a lot of content, your page can become very long in the vertical direction. This can be cumbersome to navigate. In this video, you'll learn how to use text anchors to simplify user navigation of long pages.
  
  Creating Text Anchors
  
  08:36
There are many graphics file formats that you can use to save your images. Only a few of them, however, are suitable for web use. This chapter explains the file formats available for web use and shows you how to insert and resize graphics in your web pages.

Working with Graphics
- It can be tricky to determine which web format is right for the particular graphic that you want to put on your web page. In this chapter, you'll learn about the different web formats and which ones are best for certain types of graphics.
  
  Graphics Formats for the Web
  
  07:02
- Graphics really add visual impact to a web page. In this video, you'll learn how to insert images into your web page and how to control their location on the page.
  
  Inserting Graphics
  
  05:50
- It's often necessary to resize graphics on a web page to produce the desired result. However, there are pros and cons to doing so in the XHTML code. This video shows you how to resize your images and discusses the arguments for and against.
  
  Resizing Graphics
  
  05:40
- Alt text provides a description of an image for people with visual impairments, search engines, and users who choose not to display images in their browsers. In this video, you'll learn how easy it is to add alt text to your images.
  
  Adding Alternate Text
  
  03:38
Cascading style sheets (CSS) control all of the formatting on a website; this is the presentation part of the website equation. This chapter walks you through the process of writing CSS to format content on a web page.

Formatting with CSS
- CSS can be a bit daunting when you're just getting started. In this video, we'll break down a CSS rule into its basic components so you have a better understanding of how to write them.
  
  Anatomy of a CSS Rule
  
  07:49
- Tag selectors are quite powerful because they format existing tags in the structure of your document. In this video you'll get started by creating your first CSS rule as a tag selector.
  
  Tag Selectors
  
  07:11
- CSS inheritance is an important principle to understand when working with CSS in your own web pages. In this video, you'll learn what inheritance is and see how it works first-hand.
  
  CSS Inheritance
  
  07:50
- CSS provides great control of the text in your XHTML document. In this video, you'll learn how to fine-tune the text on a web page using CSS.
  
  Tag Selectors with Text Elements
  
  08:29
- Margin collapsing is a CSS phenomenon that can be incredibly frustrating - that is, until you watch this video and learn how to deal with it.
  
  Margin Collapsing
  
  05:55
- Class selectors provide fine control of text formatting in a document. In this video you'll learn about the different ways to use class selectors to format elements in your XHTML document.
  
  Class Selectors
  
  07:42
- DIV tags are the best way to incorporate structure and dimension into a document. In this video, you'll learn how to insert DIV tags into your document.
  
  Setting Up Structure Using DIV Tags
  
  04:46
- Formatting DIVs with ID selectors enables you to gain control of your layout. In this video, you'll add ID selectors and format the size and color of DIVs in the XHTML document.
  
  Formatting DIVs with ID Selectors
  
  08:03
- In order to position DIVs effectively, you need to use floats with CSS. In this video, you'll learn how to float DIVs into the correct position and how to clear them as well.
  
  Formatting DIVs Using Floats
  
  06:56
- Not only can CSS format content on your web page, it can also present graphics without actually inserting the image into your page. In this video you'll learn how to use CSS to control where an image appears on your website.
  
  Using CSS to Display Graphics
  
  08:37
- With compound selectors, you gain great control over the formatting of each individual area of your web layout. In this video, you'll learn how to use compound selectors by formatting the navbar of your web page.
  
  Compound Selectors
  
  07:57
- Pseudo-class selectors are a great way to add some visual interest to your web page. In this video, you'll learn how to add pseudo-class selectors to the navbar of your web page.
  
  Pseudo-Class Selectors
  
  07:21
- External style sheets provide an easy and efficient means of updating your entire site at one time. In this video, you'll learn how to move your CSS rules to an external file for easy updating.
  
  Making CSS External
  
  08:44
This chapter covers the final steps in creating your website: uploading, adding meta tags, and testing.

Going Live with Your Website
- Once your website is finished, you need to upload it to a public web server. In this video, you'll learn how to use an FTP client to upload files to a web server.
  
  Uploading Your Files via FTP
  
  03:44
- Meta tags allow you to enter relevant information about your web page so that it can be read by search engines. In this video, you'll learn how to add meta tags to your file.
  
  Meta Information
  
  05:16
- Testing and validating your site is an important step in making sure it complies with current standards. In this video, you'll learn a couple of ways to test your site to ensure maximum compatibility with various browsers.
  
  Testing Your Site
  
  07:05
The web is ever-changing. You'll learn about up-and-coming technologies in this chapter.

Future Technologies
- HTML5 is the proposed standard for the next generation of the web specification. You'll learn a little more about it in this video.
  
  HTML 5 and CSS3
  
  01:24