No. of
Lectures
Duration
(hrs:min)
23
12:20

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

4.5
35 ratings • 15 reviews
  • Level Beginner
  • 23 Lessons (12hr : 20min)
  • 1,111 already enrolled!
  • 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

Section 1: Cascading Style Sheets

  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%
0%
0%
0%
By David BeamerMarch 14, 2014
Brenton -- good job in ignoring the vacuum cleaner.  I would have completely lost my train of thought, for sure.
By Steven MorrisonOctober 8, 2013
Great lectures, thank you!
By Steven MorrisonSeptember 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 raimondoJanuary 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 umoruJanuary 12, 2013
good work . can the video be downloaded so we can access anytime?
Educator®

Please sign in to participate in this lecture discussion.

Resetting Your Password?
OR

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Membership Overview

  • Available 24/7. Unlimited Access to Our Entire Library.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lecture slides for taking notes.
  • Track your course viewing progress.
  • Accessible anytime, anywhere with our Android and iOS apps.