Web Design Class: CSS (Cascading Style Sheets) Fundamentals

50 %
50 %
Information about Web Design Class: CSS (Cascading Style Sheets) Fundamentals
Education

Published on February 14, 2014

Author: lifeinoleg

Source: slideshare.net

Description

This "beta" deck is for a CSS (Cascading Style Sheets) Fundamentals course I first gave at the West Hollywood Library on 14 February 2014. It's still in beta, because I will very likely be refining it and the way I'm going to be teaching the class. In addition to the deck, I gave participants two handouts: 1) the HTML source for Fluffy's page, 2) the CSS Stylesheet for Fluffy's page. Fluffy is my fictional cat.

Photo: (cc) Uta Wollf, Rodebay (With permission) WEB DESIGN CLASS: CSS FUNDAMENTALS (OR THE TIP beta OF THE ICEBERG) Oleg Kagan, okagan@library.lacounty.gov

STYLE SHEETS? Photo: (cc) Dreftymac Wikimedia Commons

WWW.CSSZENGARDEN.COM

CASCADING? USER AGENT (browser defaults) EXTERNAL STYLESHEET (seperate file) INTERNAL STYLESHEET (in <head> tags) INLINE STYLE (in other tags) USER-DEFINED STYLE

WHERE WILL FLUFFY GO?

WHERE WILL FLUFFY GO?

RULES ARE MADE TO BE... selector { property: value; }

SEE? Selector body { background: #0097ff; font-family: Arial, sans-serif; color:black; Value } Property

5 SELECTORS TO KNOW a:link {text-decoration:none; color: #40FF00; } *{ padding:0; margin:0; } a:visited {text-decoration:none; color: #40FF00; } a:hover {text-decoration:underline; } a:active { }

RULING THE HEADER! h1 { letter-spacing:3px; font-size: 60px; margin: 10px 0px 10px 0px; width:100%; text-align:center; } text-transform: capitalize|uppercase|lowercase|initial|inherit; line-height: value;

RULING THE PARAGRAPH! <p style="width:50%; textalign:center; margin-left:350px;"> My Paragraph</p> INLINE STYLE (in other tags)

CLASSES & IDS, OH MY! <hr class="groovy-hrs" /> Class: Many of the same.  ID: One of a kind. 

<DIV> AND CONQUER <div id="favorite-things"> #favorite-things { float:left; margin: 20px 20px 20px 353px; 20px } 353px 20px 20px

BOX MODEL More: http://www.w3schools.com/css/css_boxmodel.asp

A FEW GOOD PROPERTIES... o border: 3px white solid; o list-style-type: disc|square|circle; o float: left|right|turn-yourself-around; o display: Play it! o position: Play it! o font-size: value px / em / pt / % etc; o font-style: italic|oblique|initial|inherit; o font-weight: 100-900, etc.;

QUESTIONS?

THANK YOU

Add a comment

Related presentations

Related pages

Cascading StyleSheets (CSS) - Academy Class

Web Fundamentals Cascading StyleSheets (CSS) Training Courses Cascading Style Sheets (CSS) are a standard instrument for scheming the design of HTML pages.
Read more

Beginning CSS: Cascading Style Sheets for Web Design: Ian ...

Beginning CSS: Cascading Style Sheets for Web Design ... on building web sites with Cascading Style Sheets (CSS) ... it for class and it was the most ...
Read more

Web Fundamentals Cascading Stylesheets (CSS) Training ...

Web Fundamentals Cascading Stylesheets (CSS) training courses from Academy Class. Authorised Web Fundamentals training in London, Glasgow, Manchester ...
Read more

CSS Fundamentals Training - AcademyX

Web Design with CSS (Cascading Style Sheets) HTML and CSS work hand in hand to construct and display accessible, searchable, and flexible web pages.
Read more

INTRODUCTORY WEB DESIGN CLASS (HTML AND CSS)

WEB DESIGN FUNDAMENTALS WITH HTML AND CSS CRS107 ... course is an introduction to the practice of web design, ... and CSS (Cascading Style Sheets) ...
Read more

CSS Training and Tutorials | Lynda.com

Our CSS tutorials can help you learn responsive design best practices ... CSS Fundamentals ... New to web design? Learn how to use CSS to style your ...
Read more

CSS Training Course, CSS Class

Home › Courses › Desktop › Web Design & Graphics › CSS CSS Duration: 2 Days, ... Once you’re familiar with HTML, Cascading Style Sheets (CSS) ...
Read more

Cascading Stylesheets (CSS) – Academy Class

Web fundamentals. Cascading StyleSheets (CSS) Dreamweaver; HTML; ... Muse; NodeJS; PHP / MYSQL; WordPress; Unity 3D; UX Design; Design. Creative ...
Read more

Web Design Fundamentals with HTML and CSS - Web Design ...

... and CSS (Cascading Style Sheets ... Class Level: Beginner; Age ... What you'll learn in this web design fundamentals training: ...
Read more