class 4
play

Class 4 @rwdkent Overview Current Events (10 min) Break (5 min) - PowerPoint PPT Presentation

Feb 23, 2024 •386 likes •949 views

Class 4 @rwdkent Overview Current Events (10 min) Break (5 min) Explore RWD (25 min) CSS Hands-On (45 min) HTML Basics 2 Review (10 min) CodePen Challenge (45 min) CSS Lesson (30 min) Current Events in Web Design Explore RWD #3 HTML

  1. Class 4 @rwdkent

  2. Overview Current Events (10 min) Break (5 min) Explore RWD (25 min) CSS Hands-On (45 min) HTML Basics 2 Review (10 min) CodePen Challenge (45 min) CSS Lesson (30 min)

  3. Current Events in Web Design

  4. Explore RWD #3

  5. HTML Basics 2 Review

  6. CSS Cascading Style Sheets

  7. CSS Associates Style Rules With HTML Elements SELECTOR p { font-family: Arial; } DECLARATION

  10. CSS Associates Style Rules With HTML Elements h1, h2, h3 { font-family: Arial; color: yellow;} PROPERTY VALUE

  11. 
 <h1>From Garden to Plate</h1> 
 <p>A <i>potager</i> is a French term for 
 an ornamental vegetable or kitchen 
 garden...</p> 
 <h2>What to Plant</h2> 
 <p>Plants are chosen as much for their 
 functionality as for their color and 
 form...</p>

  13. 
 
 
 
 body { 
 font-family: Arial, Verdana, sans-serif;} 
 h1, h2 { 
 color: #ee3e80;} 
 p { 
 color: #665544;}

  15. Making the Link CSS can be added as part of the HTML document (internally) or as a separate .css file (externally)

  16. Making the Link It is best practice to use external CSS. That way, the same sheet can be shared by multiple pages and you only have to make changes in one place.

  17. Making the Link Use the <link> element in the <HEAD> to make the link between the HTML and CSS.

  18. <html> 
 <head> 
 <title>Using External CSS</title> 
 </head> 
 <body> 
 <h1>Potatoes</h1> 
 <p>There are dozens of…</p> <link href="css/styles.css" 
 type="text/css" 
 rel="stylesheet"> 
 </body> 
 </html>

  19. CodePen & CSS CodePen makes the link between HTML and CSS automatically. Regular HTML will not.

  20. What You Can Style (Selectors) Universal * {} Type h1, h2, h3 {} Class .note {} p.note {} ID #introduction {}

  21. 
 
 
 The Cascade * { 
 font-family: Arial; 
 color: #333333;} 
 h1 { 
 font-family: "Courier New", monospace;} 
 i {color: green;} 
 i {color: red;} p i {color: green;} 
 i {color: red;} 
 p b {color: blue !important;} 
 p b {color: violet;}

  22. The Cascade Last Rule in Sequence Takes Precedence More Specific Rule Takes Precedence !important overrides everything else

  23. Inheritance Some rules are inherited by their children (font-family for example). Others are not (background-color)

  24. 
 
 
 * { 
 font-family: Arial; 
 color: #333333;} 
 h1 { 
 font-family: "Courier New", monospace;} 
 i {color: green;} 
 i {color: red;} 
 p b {color: blue !important;} 
 p b {color: violet;}

  25. Browsers Browsers interpret CSS in different ways. You must test in all browsers before launching a web project.

  26. CSS Properties

  27. Foreground Color h1 { color: DarkCyan;} h2 { color: #ee4e80;} p { color: rgb(100, 100, 90);}

  28. Background Color body { background-color: rgb(200,200,200);} h1 { background-color: DarkCyan;} h2 { background-color: #ee3e80;} p { background-color: white;}

  30. 
 Opacity p.one { 
 background-color: rgb(0,0,0); 
 opacity: 0.5; 
 padding: 10px;} 
 p.two { 
 background-color: rgba(0,0,0,0.5);}

  31. Opacity

  32. Typefaces SERIF SANS-SERIF MONOSPACE

  33. 
 
 Typefaces body { 
 font-family: Georgia, Times, serif;} 
 h1, h2 { 
 font-family: Arial, Verdana, sans-serif;} 
 .credits { 
 font-family: "Courier New", Courier, 
 monospace;} 


  34. More Font Choices @font-face: specify path to a font file on your server Hosted Web Fonts (TypeKit, Google)

  35. 
 
 Type Sizes body { 
 font-family: Georgia, Times, serif; 
 font-size: 12px;} 
 h1 { 
 font-size: 200%;} 
 .credits { 
 font-size: 1.3em;}

  36. Units em pixel (px) percent (%) rem point (pt)

  37. Type Sizes http://codepen.io/challahan/professor/bVRQNN/

  38. Choosing Units You can interchange units However, it is best to be consistent when possible. Change to a relative or non-relative unit when necessary.

  39. Font Weight and Style .credits { 
 font-weight: bold;} .credits { 
 font-style: italic;}

  40. Upper/Lowercase h1 { 
 text-transform: uppercase;} 
 h2 { 
 text-transform: lowercase;} 
 .credits { 
 text-transform: capitalize;}

  41. 
 Underline .credits { 
 text-decoration: underline;} 
 a { 
 text-decoration: none;}

  42. Leading p { 
 line-height: 1.4;}

  43. 
 Letter / Word Spacing h1, h2 { 
 text-transform: uppercase; 
 letter-spacing: 0.2em;} 
 .credits { 
 font-weight: bold; 
 word-spacing: 1em;}

  44. 
 
 Alignment h1 { 
 text-align: left;} 
 p { 
 text-align: justify;} 
 .credits { 
 text-align: right;}

  45. Indenting .credits { 
 text-indent: 20px;}

  46. Drop Shadow p.one { 
 background-color: #eeeeee; 
 color: #666666; 
 text-shadow: 1px 1px 0px #000000;} 
 p.two { 
 background-color: #dddddd; 
 color: #666666; 
 text-shadow: 1px 1px 3px #666666;} 
 p.three { 
 background-color: #cccccc; 
 color: #ffffff; 
 text-shadow: 2px 2px 7px #111111;}

  47. Styling Links a:visited { 
 color: black;} 
 a:hover { 
 color: deeppink; 
 text-decoration: underline;} 
 a:active { 
 color: darkcyan;} a:focus { 
 color: darkcyan;}

  48. Styling Lists ol { 
 list-style-type: lower-roman;} ul { 
 list-style-type: none;}

  49. Styling Lists

  50. 
 Styling Lists ul { 
 list-style-image: url("star.png");} 
 li { 
 margin: 10px 0px 0px 0px;}

  51. Styling Lists

  52. Styling Tables width border padding text-align text-transform background-color letter-spacing :hover font-size

  53. Styling Forms

  54. Text Inputs font-size :focus color :hover background-color background-image border padding border-radius

  55. Submit Buttons color background-color text-shadow border-radius border-bottom :hover

Recommend

Electing Your Membership Class Class TG, Class TH, or Class DC As a school employee who

Electing Your Membership Class Class TG, Class TH, or Class DC As a school employee who

Electing Your Membership Class Class TG, Class TH, or Class DC As a school employee who first became an active member of PSERS on or after July 1, 2019, you are automatically enrolled as a Class TG member. Class TG is a hybrid of both

538 views • 17 slides
First-Class Values A value is first-class if it satisfies all of these properties: First-Class

First-Class Values A value is first-class if it satisfies all of these properties: First-Class

First-Class Values A value is first-class if it satisfies all of these properties: First-Class Functions in Racket It can be named by a variable It can be passed as an argument to a function; It can be returned as the result of a

341 views • 3 slides
TwissOptics Class Joschua Dilly TwissOptics Class 2 The TwissOptics Class Resonance Driving

TwissOptics Class Joschua Dilly TwissOptics Class 2 The TwissOptics Class Resonance Driving

TwissOptics Class Joschua Dilly TwissOptics Class 2 The TwissOptics Class Resonance Driving Terms Linear Dispersion Coupling Chromatic Beating Conclusion To do TwissOptics Class 3 The TwissOptics Class TwissOptics Class 4 New class

450 views • 24 slides
Inheritance II Is-a versus has-a When an object of class A has a n object of class B, use

Inheritance II Is-a versus has-a When an object of class A has a n object of class B, use

Inheritance II Is-a versus has-a When an object of class A has a n object of class B, use object composition . Class A will have a field (variable) of class B in its implementation. When class A is a specific kind of another class B,

700 views • 12 slides
Class Specifications } A class diagram only gives a sketch of that class } More detail is

Class Specifications } A class diagram only gives a sketch of that class } More detail is

Class Specifications } A class diagram only gives a sketch of that class } More detail is given by the full specification of a class } Every useful Java class should have such a specification } When you write code, its up to you to create

64 views • 4 slides
CS 137: File Systems Class Overview 1 / 14 Class Overview Todays Topics Purpose of class

CS 137: File Systems Class Overview 1 / 14 Class Overview Todays Topics Purpose of class

CS 137: File Systems Class Overview 1 / 14 Class Overview Todays Topics Purpose of class How class will be run Project Sources of filesystem papers Early reading Introduction to disk technology 2 / 14 Class Overview

436 views • 15 slides
CS 137: File Systems Class Overview 1 / 16 Class Overview Todays Topics Purpose of class

CS 137: File Systems Class Overview 1 / 16 Class Overview Todays Topics Purpose of class

CS 137: File Systems Class Overview 1 / 16 Class Overview Todays Topics Purpose of class How class will be run Project Sources of filesystem papers Early reading Introduction to disk technology 2 / 16 Class Overview

344 views • 17 slides
CS 135: File Systems Class Overview 1 / 11 Class Overview Todays Topics Purpose of class

CS 135: File Systems Class Overview 1 / 11 Class Overview Todays Topics Purpose of class

CS 135: File Systems Class Overview 1 / 11 Class Overview Todays Topics Purpose of class How class will be run Project Sources of filesystem papers Early reading Introduction to disk technology 2 / 11 Class Overview

515 views • 12 slides
Previous*Courses Digital*Logic*Design Boolean*Algebra

Previous*Courses Digital*Logic*Design Boolean*Algebra

Preliminary*Information Instructor*Introduction Class*Policies Disabilities/Religious*Holidays Cheating/Copying Class*Web*Site Class*Notes Class*Schedule Laboratories

795 views • 18 slides
The header file is a class declaration class Dice What the class looks like, but now how it

The header file is a class declaration class Dice What the class looks like, but now how it

Classes: From Use to Implementation Anatomy of the Dice class The class Dice, need #include &quot; dice.h &quot; Weve used several classes, a class is a collection of objects sharing similar characteristics Objects: six-sided dice,

299 views • 8 slides
Classroom Assessment Scoring System (CLASS) 104 B New Report Format Interpreting your CLASS

Classroom Assessment Scoring System (CLASS) 104 B New Report Format Interpreting your CLASS

Classroom Assessment Scoring System (CLASS) 104 B New Report Format Interpreting your CLASS report CLASS Webinar Series -Scope &amp; Sequence Title Description Why the DECE uses the CLASS tool What the CLASS tool measures CLASS 101

447 views • 41 slides
Chapter 10 Object-Oriented Thinking 1 Class Abstraction and Encapsulation Class abstraction is

Chapter 10 Object-Oriented Thinking 1 Class Abstraction and Encapsulation Class abstraction is

Chapter 10 Object-Oriented Thinking 1 Class Abstraction and Encapsulation Class abstraction is the separation of class implementation details from the use of the class. The class creator provides a description of the class to let users know

420 views • 24 slides
Inner Class Inner Classes A &quot;regular&quot; inner class is declared inside the curly

Inner Class Inner Classes A &quot;regular&quot; inner class is declared inside the curly

Inner Class Inner Classes A &quot;regular&quot; inner class is declared inside the curly braces of another class, but outside any method or other code block. An inner class is a full-fledged member of the enclosing (outer) class, so it can

381 views • 6 slides
Curriculum on The Cadet Corps Uniform Class A Uniform Class A Uniform Agenda C1. Class A

Curriculum on The Cadet Corps Uniform Class A Uniform Class A Uniform Agenda C1. Class A

Curriculum on The Cadet Corps Uniform Class A Uniform Class A Uniform Agenda C1. Class A Uniform CLASS A UNIFORM C1. Wear the Class A Uniform to standard. Class A Uniform Known as Black Service Uniform or Class A Worn mainly

502 views • 14 slides
Logos Class Letters to the Corinthians online class for Oct 11, 2020 Logos Class. Mod 1 Room

Logos Class Letters to the Corinthians online class for Oct 11, 2020 Logos Class. Mod 1 Room

Logos Class Letters to the Corinthians online class for Oct 11, 2020 Logos Class. Mod 1 Room 1 10/10/20 1 Agenda for todays class Open chat room from 8:50am to 9:05am 9:05-9:15 Prayer time and updates Welcome our guests today

710 views • 19 slides
UML Class Diagrams Steven Zeil February 25, 2013 UML Class Diagrams Outline Class

UML Class Diagrams Steven Zeil February 25, 2013 UML Class Diagrams Outline Class

UML Class Diagrams UML Class Diagrams Steven Zeil February 25, 2013 UML Class Diagrams Outline Class Diagrams 1 A Class, in Isolation 2 Attributes Operations Generalization Relationships 3 Associations 4 Naming Your

948 views • 68 slides
DINNER Class of '61 Class of '61 Welcome Peter Turner Chairman of the 2016 Reunion

DINNER Class of '61 Class of '61 Welcome Peter Turner Chairman of the 2016 Reunion

2016 2016 DINNER Class of '61 Class of '61 Welcome Peter Turner Chairman of the 2016 Reunion Organizing Committee Class of '61 Ted Forsyth Laird King Tony De Kock Tony Sherrard Bevan Rudolph Class of '61 ROGER WEBBER Class of

626 views • 40 slides
3/14/16 Review Class/Object Type Class Keyword class class Point

3/14/16 Review Class/Object Type Class Keyword class class Point

3/14/16 Review Class/Object Type Class Keyword class class Point { // Fields int x; Object Declares a new type int y; color c; Data fields ( class variables)

318 views • 3 slides
Logos Class Letter to the Philippian Church Online class for June 28, 2020 6/28/20 1

Logos Class Letter to the Philippian Church Online class for June 28, 2020 6/28/20 1

Logos Class Letter to the Philippian Church Online class for June 28, 2020 6/28/20 1 Agenda for todays class Open chat room from 8:50am to 9:10am 9:10-9:15 Prayer time and general class discussion Welcome our guests today

453 views • 17 slides
Programming Abstraction in C++ Eric S. Roberts and Julie Zelenski Stanford University 2010

Programming Abstraction in C++ Eric S. Roberts and Julie Zelenski Stanford University 2010

Vector Class Grid Class Stack Class Queue Class Map Class Lexicon Class Scanner Class Iterators Programming Abstraction in C++ Eric S. Roberts and Julie Zelenski Stanford University 2010 Vector Class Grid Class Stack Class Queue Class

586 views • 54 slides
ENDNOTES 14.84 E3d 734 (5th Cir. 1996). against nationwide class where 1. Gen.Tel. Co. Falcon,

ENDNOTES 14.84 E3d 734 (5th Cir. 1996). against nationwide class where 1. Gen.Tel. Co. Falcon,

Consumer Cases Brought under Rule 23(b)(3) STRATEGIES FOR DEFEATING CLASS CERTIFICATION By Thomas A. Dye and Dean A. Morande A lawsuit founded defeating succeed in class tainable. consumer A class definition fails if it is on to ever even

502 views • 4 slides
class Orange { } class Pork {

class Orange { } class Pork {

Name: _____________________________ Date:______________________ Student #: _________________________________ COMP3021: Java Programming In-class Exercise The

275 views • 4 slides
AR Stars! 6 th Grade Students 30% Goal Ms. Bartels Class Ms. Lopezs Class Mr. Chos Class

AR Stars! 6 th Grade Students 30% Goal Ms. Bartels Class Ms. Lopezs Class Mr. Chos Class

Honoring our Cortez AR Stars! 6 th Grade Students 30% Goal Ms. Bartels Class Ms. Lopezs Class Mr. Chos Class Kaylee Dominguez Amaiah Barba Sara Santamaria Gwen Gelabert Adrian Chavez Ethan Serrano Miley Matos Julian Chavez

382 views • 16 slides
New Patient Chemotherapy Class What you need to know Class video available online: A class for

New Patient Chemotherapy Class What you need to know Class video available online: A class for

Today well talk about How chemotherapy works How to prevent and manage side effects What to do if you get side effects What to expect when you come in for treatment New Patient Chemotherapy Class What you need to know Class

524 views • 8 slides

More recommend