Home » Computer Science » CSS

No. of
Lectures

Duration
(hrs:min)

12:20

Computer Science: CSS Intro Prof. Brenton Strine, M.S.
Facebook Twitter
More

4.5

35 ratings • 15 reviews

Level Beginner
23 Lessons (12hr : 20min)
1,112 already enrolled!
4.5 35 Ratings & 15 Reviews
Audio: English

Brenton Strine is Educator's instructor for CSS where he uses his many years of web development expertise to teach how to make visually stunning websites. The course is taught with an emphasis on best practices and focuses on actual code and its interaction with the browser. Brenton builds on the skills learned from his HTML lessons to create actual working sites that demonstrate the power of CSS. He covers topics such as syntax, typography, images, links, and advanced CSS properties. This course is suited for beginners who want to learn CSS from the ground up, as well as more veteran users who seek detailed explanations of the new features in CSS3.

Table of Contents
Course Details


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

Duration: 12 hours, 20 minutes

Number of Lessons: 23

Student Feedback

4.5

15 Reviews

47%

53%

By David Beamer•March 14, 2014

Brenton -- good job in ignoring the vacuum cleaner. I would have completely lost my train of thought, for sure.

By Steven Morrison•October 8, 2013

Great lectures, thank you!

By Steven Morrison•September 27, 2013

Good lecture, I enjoyed it!

For people asking for material to practise, you will get better practise writing it out yourself(its only like 20 lines).. thats what it's all about :)

By james raimondo•January 16, 2013

So far i have listened to over 27 lectures and the lessons are great! I would highly recommend anyone who wants to learn website design to take this course. Brenton does a fantastic job of teaching!

James R

By rahaman umoru•January 12, 2013

good work . can the video be downloaded so we can access anytime?