Course info
Jul 18, 2011
2h 9m

An Introduction to CSS will give you all the knowledge you need to start working with Cascading Style Sheets (CSS) and web design. During the course you'll see how to achieve 2 and 3 column layouts with CSS, and learn how to work with the HTML box model and CSS cascade feature. Along the way we'll also be styling text, changing colors, and using the flexibility and power of CSS selectors.

About the author
About the author

Scott has over 15 years of experience in commercial software development and is a frequent speaker at national conferences, and local user groups. Scott is a Microsoft MVP and has authored books on several Microsoft technologies, including ASP.NET, C#, and Windows Workflow.

More from the author
C# Fundamentals
6h 5m
Apr 16, 2019
More courses by Scott Allen
Section Introduction Transcripts
Section Introduction Transcripts

An Introduction to CSS
Hi this is Scott Allen and this module is an introduction to Cascading Style Sheets. In the mid 1990s when the web first entered the mainstream, websites and web browsers were relatively simple. Web pages consisted mostly of text and hyperlinks. Colors were generally solid and images were rare. Most design was done using simple tabular layouts. Fast forward to today and we've been working with cascading style sheets for over a decade. CSS is the technology that allows us to create beautiful, maintainable, and flexible website designs and in this module we'll learn the basic principles behind CSS. We're going to look at how to add styles to a web page and talk about fundamental principles like selectors, rules, and units of measurement. This is the first module in a series of modules that will give you everything you need to know about styles for moderate websites.

Cascading and Inheritance in CSS
Hi this is Scott Allen and in this module we'll look at Cascading and Inheritance with CSS. The C in CSS stands for cascading, so this is a very important topic to learn, and this is the module where we will find out how the web browser uses cascading and inheritance rules to set the properties of HTML elements. When working with CSS it's important to understand how these rules will affect the presentation of your content. As an example, let's look at the following three style rules. You might remember some of these selectors from the introductory module that started this course. The first rule says that divs inside of the body tag should have a background color of red. The second rule says all divs should have a black background, and the last rule, you might remember that being the wildcard selector, says that all elements should have a green background. If you put all of these rules in a stylesheet and include the stylesheet in a page that has a div element, will the div has a red, black, or green background? In this module I'll explain how the browser will interpret those seemingly conflicting instructions and show you the tools and techniques you can use to understand the cascade and inheritance.

CSS and the Box Model
Hi this is Scott Allen and in this module I want to demonstrate the box model of CSS and HTML. The box model is important to understand because every HTML element on your web page will produce a box. You cannot always see the size and dimensions of these boxes, but divs, paragraphs, anchors, headers, lists, and the rest of the elements are all producing boxes and quite often you'll have boxes inside of boxes. Understanding how to size and arrange these boxes is a large step towards understanding web design with CSS.

Styling Text with CSS
Hi this is Scott Allen and this module is going to cover fonts and texts in CSS. It's inside of this module where you will find out how to specify the font that you want to use for the textual content of your site, like a monospaced font or a font with a serif typeface and also how to set the font properties to make that text italicized or bold. In addition, we'll also be looking at text properties including the ability to indent and align texts and we'll be styling a page of textual content as a demonstration.

Layout with CSS
Hi this is Scott Allen and this module is going to show you how to perform page layouts with CSS. Layout design is all about positioning content so that your users and customers can find the information they need and navigate around the site. We'll be looking at the different positioning options in CSS, like relative, static, absolute, and fixed, and we're also going to look at floating content to the left and right and building two and three column layouts, which are quite popular on the web today.