Cascading Style Sheets, CSS

Cascading Style Sheets

I. Cascading Style Sheets: Lecture 1 | 13:59 min

Lecture Description

Loading video...

Next Lecture

Previous Lecture

Discussion
Download Lecture Slides
Table of Contents
Related Services

Text Comments (7)

	3 answers Last reply by: Douglas Cassin Sun Nov 18, 2012 5:29 PM Post by Muhammed Naeem on February 5, 2011 could you give us the code?
	0 answers Post by Joe Froese on June 7, 2012 Umm, this website used to work before I paid you and now I just paid you and it does not work at all. It bugs out, videos don't load and I get sent to these web pages that are complete gibberish. Please help with this. Thanks.
	0 answers Post by Gen Gaines on August 12, 2012 I usually don't have a problem viewing videos if I allow them to load first. You need to allow that orange "time band" to expand all the way across the viewing screen before the entire video will play without a glitch. I have issue with the fact that some instructors make erroneous statements and when you post a comment questioning them, you are ignored and your comment just withers on the vine... This is serious if people are paying for erroneous information that the powers that be could care less about correcting. The video(s) in question should be analyzed and replaced with a corrected one, if need be.
	0 answers Post by Tony Adams on August 29, 2012 Brenton i really like the videos they give a good overview of the subject and help to think logically about whats being done. 1 month ago i knew nothing about HTML or CSS and now but just following i'm getting pretty capable with the basics

Cascading Style Sheets

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

Intro

The Composition of a Web Page

The Separation of Content and Style

Your First CSS

Example: Applying CSS

Learning Suggestions

I. Cascading Style Sheets
	Cascading Style Sheets	13:59
	Basic CSS Syntax	25:25
	Basic CSS Syntax 2	23:03
	Browser Considerations	18:48
	Layouts	28:41
	CSS Typography	46:37
	CSS Backgrounds	24:17
	Images in CSS	33:25
	The Box Model	23:21
	Applying Styles to Forms	12:44
	Float Basics	23:00
	The Display Property	23:29
	Positioning	20:47
	Lists	30:39
	Links	29:35
	CSS Units	16:10
	CSS for Alternative Display Method	14:44
	Advanced CSS and CSS3	40:03
	Advanced CSS Properties	45:24

Computer Science: CSS Intro


Cascading Style Sheets			13:59
	Intro		0:00
	The Composition of a Web Page		0:16
		The Composition of a Web Page and CSS	0:17
		Example of CSS: Hello, Friends!	1:06
	The Separation of Content and Style		2:41
		CSS: Separation of Content and Style	2:42
		Example: CSS Zen Garden	3:24
	Your First CSS		5:14
		Example: Applying CSS	5:15
	Learning Suggestions		12:00
		Teach Yourself	12:01
		Put What You Learn Into Practice Immediately	12:39
		Grasp the General Big Idea	13:26
Basic CSS Syntax			25:25
	Intro		0:00
	Rule Syntax		0:08
		Rule Syntax: Selector and Declaration	0:09
	The Cascade		1:38
		Cascade and CSS	1:40
		Inline	2:30
		Embedded	3:56
		Included	5:12
		User Defined CSS and Browser Defined CSS	7:28
	Selecting by Id		10:11
		Selecting by Id	10:28
	Selecting by Class		14:52
		Selecting by Class	14:53
	Descendant Selectors		19:13
		Descendant Selectors	19:14
		Example of Descendant Selectors	21:05
Basic CSS Syntax 2			23:03
	Intro		0:00
	Multiple Declarations per Rule		0:13
		Many Declarations Within a Single Rule	0:14
	Multiple Selectors per Rule		1:23
		Many Selectors Within a Single Rule	1:24
	Nesting		2:17
		Introduction to Nesting	2:18
	Nesting Cont.		4:03
		Nesting Rules	4:04
	Rule Order		7:00
		Multiple Rules & Same Element	7:01
	Rule Order: The Cascade		7:52
		Inline Rules	8:23
		Embedded Rules	9:53
		External Rules	10:44
		User Stylesheets & Browser Stylesheets	11:09
	Rule Order: Specificity		11:51
		Rules with the Same Origin	11:53
		Types of Selectors: Id, Class & Tag	13:30
	Calculating Specificity		15:46
		Calculating Specificity	15:47
	Rule Order: Order of Appearance		18:57
		Rules with Same Specificity & Originating from the Same Place	18:58
	Inheritance		20:01
		Inheritance & Example	20:02
Browser Considerations			18:48
	Intro		0:00
	Browser Considerations		0:11
		Basic Browser Considerations	0:12
	Dealing With Multiple Browsers		5:05
		Dealing With Multiple Browsers	5:06
		Conditional Comments	6:15
	Managing Conflicting Styles		7:44
		Managing Conflicting Styles	7:45
	Code Formatting		9:30
		Code Formatting	9:31
	CSS Compression		12:20
		CSS Compression	12:21
		Example of CSS Compression	12:59
	Resetting User-Agent CSS		14:58
		Resetting User-Agent CSS	14:59
		CSS Tools: Reset CSS	16:15
Layouts			28:41
	Intro		0:00
	Layout HTML		0:46
		Page Layout	0:47
		Avoid Contracting Divitis	1:57
		Header, Nav, Aside, Section, and Footer	3:11
	Example: A Basic Layout		3:55
		Step 1: Structure Page, Apply Basic Styles, and Position Elements Correctly	3:57
		Step 2: Use Container Elements and Center the Layout	19:20
		Step 3: Add an Aside Column	20:08
		Step 4: Create Two Main Content Columns	24:09
		Final Result and Conclusion	26:45
CSS Typography			46:37
	Intro		0:00
	Typography Properties		0:07
		Font-family	0:08
		Font-size	1:15
		Font-style	1:23
		Font-weight	1:33
		Letter Spacing	1:56
		Line-height	2:24
		Margin-left and right	2:39
		Text-align	2:44
		Text-decoration	2:52
		Text-indent	3:35
		Text-shadow	3:50
		Text-transform	4:56
		Word-spacing	5:11
		Word-wrap	5:23
	Firefox FireFontFamily Firebug Plug-in		5:56
		Installing Firefox Plug-in	5:57
	Example 1: Site-wide Font Settings		8:15
		Step 1: Make All Fonts Default to a Sans-serif Font	9:20
		Step 2: Make All Heading Fonts Default to a Cursive Font	12:50
		Step 3: Justify Paragraphs	15:19
		Step 4: Increase the Line-height of Paragraph Text	17:10
	Example 2: Big First Letter		19:02
		Step 1: Make the First Letter of the First Paragraph Bigger	19:03
		Step 2: Position the First Two lines of Text to Wrap Around the First Letter	25:17
		Step 3: Align the Bottom of the First Letter With the Baseline of the Second Line	25:47
	Example 3: Fun Quotes		27:50
		Step 1: Stylize the Quote in an Interesting Font and Color	27:51
		Step 2: Add a Graphical Quote for Flair & Use a Reverse Indentation for Fun	28:21
	Example 4: Breaking Long Words		34:42
		Step 1: Make the Long Word Terms Italic Instead of Bold	34:45
		Step 2: Long Words Wrap	37:08
	Example 5: Rainbow		38:10
		Step 1: Fixing the RAINBOWS!!!!! Sentence	38:13
		Step 2: Improving the Rainbow Text	42:08
CSS Backgrounds			24:17
	Intro		0:00
	Background Properties		0:14
		Background, Attachment, Color, Image, Position & Repeat	0:15
	Example 1: Colors		1:32
		Step 1: Change the Color of the Document Background	1:33
		Step 2: Change the Background Color of a Paragraph & Some Inline Text	2:42
		Step 3: Observe the Change in Background Size as Margins, Borders, and Padding Changes	4:38
	Example 2: Background Image Guy		8:20
		Step 1: Remove the Decorative Image From the Content	8:21
		Step 2: Use CSS to Place It in the same Location It Was Before	10:05
		Step 3: Make the Image Stay There, Even When the Document is Scrolled	12:32
	Example 3: Repeating Images		14:52
		Step 1: Create a Horizontal Pattern Using Repeat-x	14:55
		Step 2: Add a Secondary Decorative Image in the Top-right Corner	16:31
		Step 3: Use the ColorZilla Firefox Add-on to Find the Background Color that will Match the Image	19:08
	Example 4: Putting it Together		21:37
		Step 1: Use a Single Background Property to Put Back the Picture of Me in Its Place From Example 2	21:38
Images in CSS			33:25
	Intro		0:00
	General Concepts		0:12
		General Concepts of Images	0:13
		Bandwidth and Images	1:15
	Example 1: Photo Gallery Tune-up		2:16
		Step 1: Give a Gallery of Images Nice Spacing	2:17
		Step 2: Remove the Browser Border From Each Images	4:42
		Step 3: Give a Nice Custom Border to Images on Hover	5:12
		Step 4: Enhance Images with Rounded Corners for Browsers that Support It.	6:45
	Example 2: Background Images		10:56
		Step 1: Add a Graphical Decoration to an Existing Element Using Background-image	10:57
		Step 2: Add a Graphical Decoration in a <Div> Created for It.	14:34
	Example 3: Replacing Text with Images		19:57
		Step 1: Enhance a Heading by Replacing the Text with an Image	19:58
	Example 4: Image Sprites		25:08
		Introduction to Image Sprites	25:09
		Example: Google Image Sprites	25:23
		Step 1: Create an Image Sprite Rollover Button	27:14
The Box Model			23:21
	Intro		0:00
	Properties		1:08
		Width & Height	1:09
		Margin, Padding & Border	1:29
	Example 1: Box Properties		2:05
		Step 1: Create a Box with Margins, Padding, and Border	2:06
		Step 2: Add Width and Height to the Box	5:23
		Step 3: Consolidate Margins and Padding with Shorthand Notation	7:41
	General Concepts		12:45
		Inner Content, Padding, Border, and Margins	12:46
		Internet Explorer's Broken Box Model and Understanding the Correct Box Model	13:40
	Less intuitive Behavior		15:51
		Width Affects the Content Area Only, Not the Padding, Border, or Margins	15:52
		Margins Collapse Into Each Other	16:16
		Margins Can Have Negative Values	18:17
		Padding Can't Have Negative Values	19:32
		Background Lies Behind the Content, Padding, and Border Areas	19:51
		Overflow Property	20:38
Applying Styles to Forms			12:44
	Intro		0:00
	General Advice		0:08
		Form Controls & Form Styling	0:33
		Avoid Styling Browser Form Controls	1:41
		Don't Directly Style the Form Element & Display Value of Inline	3:00
	Targeting Particular Selectors		3:41
		Syntax: input[type=value]{…}	3:42
	Example: Targeting Particular Selectors		4:34
	Example: Style a Series of Form Controls Into Two Column Without a Table		7:33
Float Basics			23:00
	Intro		0:00
	Float Functionality		0:07
		Float	0:08
		Clear	0:25
		More on Floating	0:35
	Float Behavior		1:28
		Floated Element Behavior	1:40
		Width & Height of Floated Element	3:27
		Multiple Floated Elements	5:17
		Floated Elements Removed From the Flow of the Document	5:51
		Clear Property & Preventing Floats From Stacking Horizontally	9:53
		Clear Property & Non-floated Elements	17:15
		The Overflow Property & Elements Extending Beyond the Borders	19:24
The Display Property			23:29
	Intro		0:00
	Display Values		0:08
		Display	0:10
		Visibility	1:19
		Example: Display Property	1:29
	Display: Block		3:34
		Block Elements	3:35
		Elements With a Display of Block by Default	4:07
		Floated Elements and Elements Positioned Absolutely Become Block	5:11
	Display: Inline		5:36
		Introduction to Inline	5:37
		Inline Creates a Long Box that Wraps at the End of a Line	6:17
		Text-Level Elements are Inline by Default	9:45
		Margins and Padding	10:08
		Inline Elements Cannot Be Sized	12:14
	Display: Inline-Block		13:04
		Allows for Boxes to Stack Up Inline	13:05
		Allows for a Width and Height to be Set	13:27
		Requirement for Internet Explorer 6/7	15:29
		Eliminating White-Space	16:00
	Display: None		18:10
		Removes the Element and All Children From the Flow Completely	18:11
		Visibility & Hidden	20:30
Positioning			20:47
	Intro		0:00
	Positioning Values		0:05
		Position: Static, Relative, Absolute, Fixed	0:06
		Z-Index: [number]	0:22
	Position: Static		0:39
		Introduction to Static Value and Example	0:40
	Position: Relative		2:19
		Introduction to Relative Value and Example	2:20
	Position: Absolute		6:37
		Introduction to Absolute Value and Example	6:38
	Position: Fixed		10:35
		Introduction to Fixed Value and Example	10:36
	Z-Index		12:58
		Introduction to Z-Index	12:59
		Example of Z-Index	13:58
Lists			30:39
	Intro		0:00
	List Properties		0:06
		List-style-type: Square, Disc, Circle, and Decimal	0:08
		List-style-image	1:14
		List-style-position	1:34
		List-style	2:10
	Example 1: An Inline List		2:30
		Step 1: Make a List Display Inline	2:31
		Step 2: Style a List So That It Looks Like Navigational Buttons	7:03
	Example 2: Nested Lists and Dynamic Navigation		14:02
		Step 1: Use List Nesting to Create a Tiered Nav Links Section	14:03
		Step 2: Use CSS to Hide Sub-sections Until Hovered	15:10
	Example 3: Sidebar Nav Menu		18:18
		Create a Dynamic Nav Menu Using Nested Lists	18:19
	Example 4: Horizontal Nav Menu		25:04
		Create a Nav Menu with Drop-down Sub-menus	25:05
Links			29:35
	Intro		0:00
	Basic Link Styling		0:06
		Link, Visited, Active & Hover	0:07
	Changing the Defaults		2:45
		Remove the Underline From Links	2:46
		Remove the Dotted Border on Clicked Links in IE	3:50
		Remove Borders From Linked Images	4:20
	Simple Enhancements		4:55
		Change the Cursor	4:56
		Text Rollovers	7:09
		Link-type icons	10:23
	Advanced Rollovers		14:18
		Use Image Sprites for Image Rollovers	14:19
	Breadcrumb Navigation		17:34
		Breadcrumb Navigation	17:35
		Example	19:10
	Highlighting Bookmark Links		25:54
		Highlighting Bookmark Links	25:55
CSS Units			16:10
	Intro		0:00
	Colors		0:32
		Hexadecimal Notation	0:33
		RGB Notation	3:44
		Key Words	5:42
		Example of Colors	6:19
	Lengths		6:56
		Fixed	6:57
		Relative	9:18
	URI's		14:12
		URI and CSS	14:13
CSS for Alternative Display Method			14:44
	Intro		0:00
	The Media Property		0:38
		Media Types: Screen, Print, Handheld and Small Devices	0:39
	CSS for All		2:18
		CSS with a Media Value of All	2:19
		Media Rule	3:00
	Print Media		4:32
		Pages for Printing	4:33
		Print Media Example	6:11
	Handheld Media		10:02
		Handheld Media	10:03
	Other Media Types		12:48
		Braille, Embossed, and Projection	12:49
		Speech and Aural	13:16
		tty and tv	13:56
Advanced CSS and CSS3			40:03
	Intro		0:00
	Progressive Enhancement		0:41
		Progressive Enhancement and CSS	0:42
	Child Selector		2:40
		Child Selector & Example	2:41
	Adjacent Sibling Selector		7:17
		Adjacent Sibling Selector & Example	7:18
	Attribute Selector		12:43
		Attribute Selector & Example	12:44
	CSS3 Attribute Selectors		16:38
		CSS3 Attribute Selectors & Example	16:39
	First-Child and last-Child Pseudo-Classes		20:40
		First-Child and last-Child Pseudo-Classes & Example	20:41
	Before and After Pseudo-Elements		23:47
		Before and After Pseudo-Elements & Example	23:48
	Hover and Active Pseudo-Classes		24:57
		Hover and Active Pseudo-Classes & Example	24:58
	First-of-type and Last-of-type Pseudo-classes		26:56
		First-of-type and Last-of-type Pseudo-classes	26:57
	Not Pseudo-class		28:40
		Not Pseudo-class & Example	28:42
	Nth-child Pseudo-classes		31:04
		Nth-child Pseudo-classes & Example	31:05
		Nth-child	31:14
		Nth-last-child	32:31
		Nth-of-type & Nth-last-of-type	33:32
	Only Pseudo-classes		34:27
		Only Pseudo-classes & Example	34:28
	Target Pseudo-class		37:13
		Target Pseudo-class & Example	37:14
Advanced CSS Properties			45:24
	Intro		0:00
	Browser Prefixes		1:51
		Introduction to Browser Prefixes	1:52
	Webfonts		7:01
		Webfonts	7:02
		Example of Webfonts	8:52
	Overflow and Wrapping		11:30
		Overflow and Wrapping	11:31
	Automatic Columns		15:03
		Automatic Columns & Example	15:04
	Text-Stroke		17:46
		Introduction to Text-Stroke & Example	17:47
	Opacity and HSL Colors		20:41
		Opacity and HSL Colors	20:42
		Example of Opacity and HSL Colors	23:22
	Rounded Corners		25:50
		Rounded Corners & Example	25:51
	Gradients		28:39
		Gradients & Example	28:40
	Shadows		32:01
		Shadows & Example	32:02
	Reflection		34:59
		Reflection & Example	35:00
	Transformations		36:45
		Transformations and Example	36:46
	Transition		39:27
		Transition & Example	39:30
	Fixing Internet Explorer		42:07
		How to Fix Internet Explorer	42:08

Related Services

Name	Description	Link
Domain Name Registration
Go Daddy	Go Daddy is the world’s #1 domain name registrar. In addition to domain registration and hosting, Go Daddy also provides e-business related software and services.	Visit Go Daddy
Website Hosting
Name	Description	Link
Blue Host	Bluehost was recently awarded Best New Hosting Company and Best Customer Support by the some of the leading hosting review companies. $6.95/month hosting.	Visit Blue Host
Host Gator	HostGator is a world leading provider of shared, reseller and dedicated web hosting. Starting at $3.96/month hosting.	Visit Host Gator
Bigcommerce	Bigcommerce is an easy to use eCommerce software with over 30,000 online stores. If you are interested in building your own eCommerce website, Educator.com highly recommend giving Bigcommerce a try!	Visit Bigcommerce
Secure Online Backup
Name	Description	Link
Carbonite	Back up your work online with Carbonite! The choice is yours: $1500 hard drive recovery OR $59.00/year for unlimited backup? With nearly 200 billion files backed up and counting, Carbonite is the leading provider of online backup.	Visit Carbonite

Educator

the best free way to manage your classroom

Free Class Website!

Free Unlimited Hosting!

Free Educator.com Domain!

Cascading Style Sheets

Share this knowledge with your friends!

Cascading Style Sheets

Computer Science: CSS Intro

Related Services