CSS 3 Visual Learning
a comprehensive example set for getting up to speed fast

What you will learn

CSS 3 Skills

Fast Workflows for Design Experimentation

Web Design

Description

CSS 3 Visual Learning fills a gap in the learning and reference courses on introductory web design. Instead of the terse definitions written for experts found in online documentation resources, or long commentaries to ease novices into programming, this course strikes a balance between succinct explanation and complete visualizations of code so that the key concepts are learned through easy-to-follow examples.

This course details comprehensively the practice of enhancing the visual styling of HTML-structured web content through the use of Cascading Style Sheets, by covering CSS 3 syntax and properties. The course assumes a prior knowledge of HTML. If you have worked through the precursor course to this one– HTML 5 Visual Learning– or have equivalent knowledge and skills in using markup for HTML pages, you will be able to work through the CSS examples in this course.


Get Instant Notification of New Courses on our Telegram channel.


No previous experience with CSS is required. Since HTML experience is presumed, it is also expected that you have basic knowledge of how to use a code editor, and how to use an FTP client application if your eventual goal is to design live websites that are stored on a web server. Those topics are also covered in HTML 5 Visual Learning.

English
language

Content

Your Instructor

Other Udemy Courses by Myk Eff
About the Instructor

Prerequisite and Code Examples

Preface
What This Course Assumes
Access the Online Code

Video Walkthroughs | CSS 3

A Note About the Videos
Overview
Basic Syntax
Syntax Variations Part 1
Syntax Variations Part 2
Syntax Variations Part 3

Video Walkthroughs | Creating and Modifying Websites

A Note About the Videos
Using an FTP Client
Modifying Website Templates
Using a Web Editor Part 1
Using a Web Editor Part 2
Using a Web Editor Part 3
Using a Web Editor Part 4
Using a Web Editor Part 5

Introduction

HTML, CSS and JavaScript– the languages of the web
Recommended Code Editors
Cascading Styles

Syntax

Comments in CSS
White Space & Indentations
The Three Ways to Add CSS to an HTML Document
Inline Style
Internal Style
External Stylesheet
The Basic CSS Syntax
The Tree Structure
Hierarchy of Style Declarations
Specific Beats General
Breaking Ties: Last One Wins
!important
Targeting Multiple Elements with the Same Declarations
Targeting Nested Elements aka Descendent Selectors
Direct child selector
Pseudo-Classes
Targeting Elements by Attribute
[attr |=value]
[attr^=value]
Value Case Insensitivity
attr*=value]
[attr~=value]
[attr$=value]
General Sibling Combinator
Adjacent Sibling Combinator
The Universal Selector

CSS 3 Properties

Google Fonts
Bit.ly URL Shortener Note
Properties
all
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
More Border Shorthands
border-image
border-radius
border-collapse & border-spacing
bottom, top, left & right
box-shadow
box-sizing
caption-side
caret-color
clear & float
clip
clip-path
color
columns, column-count, column-width, -balance, -gap, -rule & -span
columns
column-fill
column-gap
column-rule
column-span
cursor & pointer-events
direction
display
em & rem
empty-cells
filter
font
font-size
font-style
font-weight
font-family
font-variant
line-height
font-synthesis
height & width
hyphens
letter-spacing
list-style
margin
max-height, min-height, max-width, min-width & overflow
mix-blend-mode
opacity
outline
padding
perspective, perspective-origin & transform-style
position
quotes
resize
scroll-behavior
text-align & text-align-last
text-decoration
text-indent
text-orientation
text-shadow
text-transform
transform
transition
user-select
vertical-align
visibility
white-space
word-spacing
writing-mode
z-index
End of the Tour of CSS Properties

Resources and Final Considerations

Browser Differences
Where to Go Next
List of All Bit.ly Links Used
Online Resources