Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Learning CSS3 - A Comprehensive Tutorial For Web Developers

Master CSS3 and learn how to engage your users with fast loading compliant web pages across all browsers.

Created byInfinite Skills

Last updated 1/2017

English

Course content

11 sections • 101 lectures • 7h 58m total length

Working Files - Download These First0:01
Welcome1:36
Explore CSS3 fundamentals through selectors, box model, floating layouts, and typography, then build navigation bars, tables, lists, and sidebars, while learning cascading style sheets and rounded corners, opacity, and shadows.
What CSS Is And How It Works2:33
CSS Rule Structure3:08
Explore the anatomy of a css rule, including selectors, declaration, properties such as font family and font size, and the border shorthand.
How Does CSS Fit Into Web Design2:29
Choosing Your Coding Application2:41
Choose a pure text editor to hand-code CSSA, avoiding word processors, with options like TextEdit on Mac, Notepad++ on Windows, Dreamweaver in code view, and CODA or TextWrangler.
Getting Set Up4:24
Working Between Code And Browsers5:54
HTML Quick Review6:57
Setting The HTML Doctype3:17
Building The Files Structure5:42
HTML And CSS References7:37

Introducing Inline Styles4:46
Applying Multiple Properties4:17
Pros And Cons Of Inline Formatting4:05
Explore the pros and cons of inline formatting for fast, rough-draft CSS, useful for quick tests or targeted WordPress tweaks, yet tedious per-element updates hinder long-term maintenance.
Applying Inline Styles Using Span5:09
Applying Basic Typefaces3:44
Using Specific Fonts2:15
Setting A Document Wide Font5:58
Controlling Font Sizes5:40
Applying Text Decorations5:12
Explore the text-decoration property in CSS, applying underline, overline, and line-through via inline styles and span elements, while understanding browser support and usability considerations for blinking text.
Applying Color To Text5:36
Apply color to text in CSS using the color property, inline styles, and hexadecimal values, and explore color names, body tag color, and cascading effect.

Creating A Basic Class Rule4:03
Applying A Class Rule - Part 15:51
Applying A Class Rule - Part 23:10
Applying Multiple Class Rules To An Element6:06
Editing And Removing Class Formatting5:14
Converting Inline Formatting To A Class Rule4:53
Learn to convert inline formatting into class rules by moving styles from a span with a style attribute into an internal stylesheet, then apply the new classes and refresh.
HTML Selectors - Part 14:19
Learn how to convert inline formatting to CSS using the internal stylesheet and body selectors, and style paragraphs and headings with font, color, size, and background.
HTML Selectors - Part 26:39
Combining Class And HTML Selectors3:54
Creating And Applying ID Selectors4:28
Working With Group Selectors6:12
Formatting Using Pseudo Elements4:28
Controlling Hyperlinks With Pseudo Classes6:08

Introducing The CSS Box Model6:23
Explore how the CSS box model defines each HTML element as a rectangular box with content, padding, border, and margins. Observe how block and inline elements form nested boxes.
Introducing DIV Elements5:00
Setting Padding6:28
Getting Started With Borders5:35
Setting Borders With Shorthand4:23
Exploring Border Values4:35
Setting Margin5:27
Learn how to control layout with margins, using top, bottom, left, and right properties and the shorthand margin syntax to create spacing around elements.
Setting Widths And Heights2:37
Understanding Widths In CSS3:19
Introducing Floating3:40
Formatting Graphics - Part 17:19
Formatting Graphics - Part 26:15
Creating A Floating Sidebar - Part 15:30
Creating A Floating Sidebar - Part 23:05
Targeting Sidebar Content With Descendant Selectors - Part 16:18
Targeting Sidebar Content With Descendant Selectors - Part 25:55
Grouping Descendant Selectors4:19
Applying And Formatting Background Graphics6:20
Learn to apply and control graphical backgrounds in CSS3 by combining background color with images, adjusting tiling with repeat options, fixing backgrounds, and positioning images on the body and sidebar.
Setting Backgrounds With Shorthand CSS2:04
Creating An Alert Message6:26
Create a reusable alert message using a CSS class selector, including a background color, background graphic, borders, padding, and margins, to demonstrate a real-world warning on screen.

HTML Table Structure6:03
Techniques For Formatting Table Structure4:21
Formatting Table Contents6:34
Formatting Specific Table Contents5:26
Controlling Table Formatting With CSS - Part 14:55
Explore table formatting by transforming a raw html table with width, border, cellspacing and padding, apply a colspan to the statistics header, and preview results as you begin css styling.
Controlling Table Formatting With CSS - Part 26:11
Controlling Table Formatting With CSS - Part 35:42
Learn how to apply and reuse CSS class selectors to specific table rows and cells, format new admissions and discharges, and align numeric values right for clean, modern tables.
Formatting Table Captions3:59
Learn to style and position table captions with CSS by adding a caption element, applying a class or redefining caption, and using caption-side to place captions at top or bottom.

Positioning Basics4:29
Static Positioning4:20
Absolute Positioning6:31
Positioning Nested Elements7:16
Further Positioning Of Nested Elements3:48
Relative Positioning3:11
Using Relative Positioning On Nested Elements3:56
Fixed Positioning3:53
Fixed Positioning Techniques2:43
Stacking Elements With Z-Index4:13
Using Overflow5:13
Explore the CSS overflow property to control content inside a div, using visible, hidden, scroll, and auto values for clipping and scrolling.

The Two Common Types Of HTML Lists3:32
Using CSS To Format Lists5:32
Explore how to format lists with css using list-style-type, list-style-image, and list-style-position. See how ul selectors control bullets and switch to decimal, roman, or alphabetic styles, with optional custom graphics.
Additional CSS Properties For Lists3:02
HTML Structure For Navigation3:31
Convert a bulleted list into a navigation menu with HTML and CSS, placing it at the top and using items such as home, about us, products, services, and contact us.
Converting The List To A Menu With CSS5:45
Convert a bulleted list into a navigation menu with CSS by making items inline and list-style-type: none, then apply margins, background color, padding, borders, and hover effects.
Creating CSS Rollovers2:08
Learn to create css rollovers by hover effects on list items, swap background to white and text to black, and convert items into clickable hyperlinks using simple css and anchors.
Additional CSS Button Effects5:08
Create a new button class in CSS to produce clickable bevelled navigation buttons with border effects and a pointer cursor, then apply it to nav items.

Creating An External Style Sheet6:28
Working With Rules In An External Style Sheet3:46
CSS Commenting4:15
Master css commenting with /* ... */ to add notes and organize rules, labeling sections like utility and body formatting; comments stay in stylesheets and don't render.
Understanding The Cascading Effect Of CSS - Part 15:45
Explore how the CSS cascade prioritizes the rule closest to the element, as colors shift from red (external) to blue to green to orange with inline styles.
Understanding The Cascading Effect Of CSS - Part 25:00

Description

A Verifiable Certificate of Completion is presented to all students who undertake this course.

CSS powers the visual side of the internet, and anyone looking for a real understanding of web design must know what it can do and how it works. This Learning CSS3 Tutorial Course simplifies the standard of cascading style sheets into its most basic elements, and then gradually advances to help you gain a well-rounded understanding to creating layouts and stylistic elements for the web. This beginner-friend CSS3 training course is led by expert Geoff Blake, who draws from his background as a designer to help you see how various graphical elements and settings can work together to form a complete user experience. Because the training is built around CSS3, you'll also learn features that are specific to the newest standard of the style sheets protocol. Get ready to learn layout, layering, typography and special effects in this unique and engaging 8-hour course.

What You Will Learn

-How to create complete website layouts using Cascading Style Sheets (CSS) according to best-practice professional standards.

-How to manipulate and modify onscreen graphical elements within a site, including text, menus, lists, borders, and graphics.

-How to enhance a website's appearance with subtle special effects such as drop-shadows and transparency.

-How to use CSS in conjunction with standard HTML to develop and enhance pages and sites.

Who Should Take This Course

-Anyone who wants more control over the visual appearance of their current websites or ones they are planning to build. No experience is needed.

-Anyone who wants to know how HTML and CSS work together on modern pages and sites.

-Anyone who has tried working with CSS but found it difficult in the past.

What People Are Saying

"I knew some basic HTML but my layouts were flat and boring. Now that I understand layers and CSS it's a whole different ballgame. Thank you Geoff!"

-Marty Self

"Coming from a graphics background, these videos helped me learn how to create artwork suited for the web...and even better, how to place them on my site for maximum effect."

-Roy Ramirez

"Loved the section on special effects and transparency...web design CAN be fun."

-Jennifer Blockman

Learning CSS3 - A Comprehensive Tutorial For Web Developers

Explore related topics

Course content

Introduction 12 lectures • 46min

Inline Formatting And Basic Font Formatting 10 lectures • 47min

Working With Selectors 13 lectures • 1hr 5min

Understanding The CSS Box Model20 lectures • 1hr 41min

Controlling Table Formatting 8 lectures • 43min

Page Layout With Positioning And Layering11 lectures • 50min

Building A Layout With Floats 7 lectures • 33min

Formatting Lists And Creating A Navigation Bar 7 lectures • 29min

Deeper Into Typography3 lectures • 18min

External Style Sheets5 lectures • 25min

Description

A Verifiable Certificate of Completion is presented to all students who undertake this course.