CSC 337. Cascading Style Sheets. Marty Stepp, Rick Mercer
|
|
- Cecil Butler
- 6 years ago
- Views:
Transcription
1 CSC 337 Cascading Style Sheets Marty Stepp, Rick Mercer
2 Preview of a style sheet /* The good way, with a preview of cascading style sheet (css) that has class mystyle */ body { background-color: grey;.mystyle { border-style: solid; border-width: 2px 20px 10px 30px; border-color: red; margin: 20px; padding: 40px; font-family: Arial, Helvetica, sans-serif; font-size: 1.5em; color: aqua; <body> Default rendering <div class="mystyle">a styled block</div> </body>
3 Styles on W3Schools The online tutorials have styles like this (okay) in <head> add <style> </style> here <head>
4 A poor way to produce styles (on W3) W3Schools also shows styles in html tags (not OK) <body> <h1 style="color: blue;">this is a heading</h1> <p style="color: red;">this is a paragraph.</p> </body> Later we'll use a 3 rd way to include CSS styles <head> <title>store CSS code in a separate file</title> <link href="mystyles.css" type="text/css" rel="stylesheet" /> </head>
5 Cascading Style Sheets (CSS) HTML describes the content of the page CSS describes appearance and layout of information on a web page
6 Basic CSS rule syntax A CSS file consists of one or more rules Each rule begins with a selector When using a tag like <p>, the style will apply to ALL <p> blocks Between { there are 1 to many style property: value declarations General Form: selector { property: value; property: value;... property: value; Example: p { font-family: sans-serif; color: red;
7 CSS Properties for Colors <!DOCTYPE html> <html> Property <head> color <title>styles</title> background-color <style> p { color: red; background-color: yellow; </style> </head> <body> <p>this paragraph uses the style above</p> <p>so does this <p></p> </body> </html> Description color of an element s text color that will appear behind the element
8 <!DOCTYPE html> <html> <head> <title>this is a Title</title> <style> p { color: red; h2 { color: rgb(128, 0, 196); h4 { color: #8000ff; </style> </head> Specifying Colors <body> <p> This paragraph uses the first style above. </p> <h2> This h2 uses the second style above </h2> <h4> This h2 uses the third style above </h4> </body> </html> Color names: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white (white), yellow RGB codes: red, green, and blue values from 0 (none) to 255 (full) Hex codes: RGB values in base-16 from 00 to FF
9 Fonts Units: pixels (px), point (pt), or m-size (em) for better resizing of web pages 16px, 16pt, 1.16em Vague font sizes: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger Percentage font sizes: 90%, 120%
10 CSS Properties for Fonts <!DOCTYPE html> <html> <head> <title>styles</title> <style> p { font-family: Courier; font-size: 8pt; font-style: italic; div { font-family: Arial; font-size: 2em; font-weight: 900; color: blue; </style> </head> <body> <p>arial 8pt italic</p> <div>2em div bold blue</div> </body> </html> property font-family font-size font-style font-weight possible value Courier Arial 8pt 2em normal italic or beak normal bold lighter thickness There are a couple dozen more
11 Multiple font choices Can specify multiple fonts from highest to lowest priority Because some fonts may not exist on the computer If Garamond is not on the computer, try "Times new Roman", then serif p { font-family: Garamond, "Times New Roman", serif; A few commonly used font families Georgia, serif "Times New Roman", Times, serif Arial, Helvetica, sans-serif Or use generic font names, probably best to use: serif, sans-serif, cursive, monospace
12 Embedding styles in a separate css file CSS can be embedded in HTML (previous slide) or placed in a.css file Use the code below to include the styles you build in the rel attribute means relationship There must be an href present The file name can be anything, but use.css extension If the file is named styles.css, you get them with this <head> <link href="styles.css" type="text/css" rel="stylesheet"> </head>
13 Backgrounds and an External CSS File /* styles.css */ body { font-size: 1.5em; background-image: url("images/moviebg.png"); h1 { background-color: green; <!DOCTYPE html> <!-- background.html --> <html> <head> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <body> Body has a repeating image, looks like color green <h1>h1 has green background</h1> </body> </html>
14 /* styles.css */ div { border-style: solid; color: green; width: 160px; height: 120px; p { border-style: double; color: grey; width: 100px; height: 40px; <head> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <div> A div <p>inner paragraph </p> <p>another </p> </div> </body> </html> Borders and external CSS
15 The CSS Box Model Every HTML element has Content - The content of the box, where text and images appear border - A border that goes around the padding and content padding - Clears an area around the content, inside the element. The padding is transparent. margin - Clears an area outside the border. The margin is transparent
16 margin and padding /* styles.css */ p { border-style: solid; margin: 5px; padding: 15px; width: 60px; <head> <title>background</title> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <body> <p>one</p> <p>two</p> <p>three</p> </body>
17 <!DOCTYPE html> <html> <head> <title>box Model</title> <!-- FirstName1 LastName1 --> <!-- FirstName2 LastName2 --> <style> </style> </head> <body> <div> <p> </p> <p> </p> Active Learning Lorem ipsumdolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor Use latin so examples with text do not have distracting words like you are reading </div> </body> Given the HTML file to the left, add the CSS styles to get the appearance as close as possible to the screenshot below
18 More CSS
19 Content vs. presentation HTML is for content; what is on the page (heading; list; code; etc.) CSS is for presentation; how to display the page (bold; centered; 20px margin; layouts, etc.) Keeping content separate from presentation is an important web design principle If the HTML contains no styles, its entire appearance can be changed dramatically by swapping.css files See
20 Review CSS Syntax / Preview.classes p { /* CSS */ font-family: sans-serif; color: red; A.css file consists of rules Selectors include HTML tags like p table.myclass classes starting with. About 62 other selectors.review { width: 290px; background: lightgray; border: solid <!-- HTML --> <p>the default values of p elements are changed</p> <div class="review">this div has a border now</div>
21 More Selectors So far, we have only used HTML tags as selectors like p and body To style tables, we have seen selectors table, td, tr We now need class selectors, which is any identifier preceded by '.' Use in HTML with the class attribute /* styles.css */.bordered { border-style: solid; border-width: 6px; padding: 10px; color: grey; width: 120px; height: 20px; <head> <title>class Selector</title> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <body> <p class="bordered"> Styled with a class </p> </body>
22 text-shadow Shadow is specified as an X-offset, a Y-offset, and a color /* styles.css */.shadowed { font-weight: bold; font-size: 1.8em; color: blue; text-shadow: 2px 6px lightgrey; <head> <title>class Selector</title> <link href="styles.css" type="text/css" rel="stylesheet"> </head> <body> <div class="shadowed"> Styled with a class </div> </body> </html>
23 background-image, text-align Image repeats to fill all of the HTML block.woodbg { /* CSS */ color: white; text-align: center; background-image: url("images.jpg"); width: 300px; height: 250px; <!-- HTML --> <div class="woodbg"> This entire div should have an image </div>
24 box-shadow Put a shadow to the right and bottom of an element.box { /* CSS */ /* 10px down, 10px right, 5px thick */ box-shadow: 10px 10px 5px black; border: solid; border-width: 2px; width: 400px; height: 100px; How can we stop this overflow? <!-- HTML --> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="box">lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </body>
25 A couple of ways Make the height: value larger, like 200px; Or better yet, use min-height: 100px;
26 Rounded corners with border-radius Round the border /* CSS */.rounded { border: 3px solid blue; border-radius: 12px; padding: 0.5em; <head> <link rel="stylesheet" href="styles.css"> </head> <body> <body> <p class="rounded"> This is a paragraph </p> <p class="rounded"> This is another paragraph </p> </body>
27 Vertical Align for an image img { vertical-align: bottom img { vertical-align: middle img { vertical-align: top
28 span Use <span> to apply a style to part of an inline element No new block start.part { font-size: 1.5em; font-family: sans-serif, "Arial"; <p> Using span to <span class="part">a piece</span> of an element </p>
29 Styles that conflict When two styles set conflicting values for the same property, the latter style takes precedence p, h1, h2 { color: blue; font-style: italic; h2 { color: red; background-color: yellow; <h1> This h1 has 2 new styles </h1> <h2> This h2 has 3 styles added </h2>
IDM 221. Web Design I. IDM 221: Web Authoring I 1
IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 1 Introduc)on IDM 221: Web Authoring I 2 Hello I am Phil Sinatra, professor in the Interac4ve Digital Media program. You can find me at: ps42@drexel.edu
More informationUVic Senior s Program: Microsoft Word
UVic Senior s Program: Microsoft Word Created by Robert Lee for UVic Senior s Program website: https://www.uvic.ca/engineering/computerscience/community/index.php Opening Microsoft Word: Launch it from
More informationThinking inside the box
Intro to CSS Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside the box Thinking inside
More informationbrand rationale logo colour typography graphics & images GREEN BISHOP BRAND IDENTITY GUIDELINES
brand rationale logo colour typography graphics & images 1 BRAND RATIONALE THE STORY OF GREEN BISHOP Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore
More informationHTML for D3. Visweek d3 workshop
HTML for D3 Visweek d3 workshop What is HTML HTML is the language in which the web pages are encoded. What is HTML? HTML can be complicated But it doesn t have to be.
More informationTypography is the art and technique of arranging type in order to make language visible.
TYPOGRAPHY 101 Typography is the art and technique of arranging type in order to make language visible. Good typography goes unnoticed. Readability How easy it is to read words, phrases and blocks of text
More informationHARBORTOUCH STYLE GUIDE
HARBORTOUCH STYLE GUIDE THE LOGO The Harbortouch logo was created for its simplicity and ease of use for all types of applications. It is essential that the logo is not altered in any way in order for
More informationKIDS BEDROOMS SHOP NOW -00% NEW. Item Name & Description $00 $00 -00% NEW. Item Name & Description $00 $00 NEW COLLECTIONS SHOP NOW!
Sign In / 0 0 0 HOME ACCESSORIES DINING SETS SPECIAL OFFERS 2016 COLLECTIONS! JUNE 24,2016 ELEGANT DINING SET Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
More informationBusiness Applications Page Format
Margins Business Applications Page Format Page margins are the blank space around the edges of the page. The printable area is the section of the page inside the margins. To Change the Page Margins Margins
More informationhowtomarketing VISUAL IDENTITY In this section 30/04/ MY PR plus 1
howtomarketing VISUAL IDENTITY Module 1 Identify 1 In this section + WHAT IS VISUAL IDENTITY? + BRAND PROMISE AND STYLE + COLOURS + FONTS + DESIGN + VISUAL IDENTITY GUIDES/STYLE SHEETS 2 1 Visual Identity
More informationIDM 221. Web Design I. IDM 221: Web Authoring I 1
IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 6 IDM 221: Web Authoring I 2 The Box Model IDM 221: Web Authoring I 3 When a browser displays a web page, it places each HTML block element in a box.
More informationPromiseShip Style Guide
Logo Options Primary - Color Primary with Tag - Color Black Black with Tag Reverse/White Reverse/White with Tag 2 Logo Use Guidelines Use the height of the P in PromiseShip to determine the width of space
More informationBRAND Guide. EuropeActive LOGOS
BRAND Guide EuropeActive LOGOS version 10/2014- p1 EuropeActive Logo The European Health & Fitness Association (EHFA) has been rebranded to EuropeActive. With our mission to get more people, more active,
More informationCASE EXPLORER - INSTALLATION GUIDE. Doc
CASE EXPLORER - INSTALLATION GUIDE Doc. 20161104 Table Of Contents Overview... 3 Log In... 3 Procedure... 3 Home Page... 4 Searching and Pagination... 4 Utility Tools... 5 Report Generation... 6 Additional
More informationThis is an H1 Header. This is an H2 Header. This is an H3 Header
is a key element in web design. This templates delivers you sophisticated typography and various stylings. The style guide gives you an overview about all possible HTML tag stylings provided by the template.
More informationChapter 3 CSS for Layout
Chapter 3 CSS for Layout Chapter two introduced how CSS is used to manage the style of a webpage, this chapter explores how CSS manages the layout of a webpage. Generally a webpage will consist of many
More informationDESIGN GUIDELINES. Use the following slides as a guide to make sure your presentation follows the PCS Plus brand.
Use the following slides as a guide to make sure your presentation follows the PCS Plus brand. LOGO PLACEMENT On white content slides the logo should appear in full colour on the bottom left of the screen
More informationHigh Performance Auto Layout
#WWDC18 High Performance Auto Layout Ken Ferry, ios System Experience Kasia Wawer, ios Keyboards 2018 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission
More informationBrand Guidelines. Brand Guidelines V1.2 May 21, 2018
Brand Guidelines Brand Guidelines V1.2 May 21, 2018 1. Table of Contents 1. Table of Contents 2. Introduction 3. Logo 3.1 Clear Space 3.2 Color 3.3 Photo Backround 3.4 Sizing 3.4 Don t 4. Color Palette
More informationINTRODUCTION. As GRADED brand user, you are also responsible for preserving that image. We count on your cooperation in this process.
BRAND BOOK 1 INTRODUCTION In this guide, you will find the rules to use the GRADED logo and graphic elements correctly with the possible variations and allowed limits. The guide aims to build a harmonious
More informationnagement ompetition enture coaching GRAPHIC STANDARDS capital investment launch opening risk assessment entrepreneur information feasibility study
eas development ESEARCH startup groundwork capital investment risk assessment Analysis nagement enture coaching entrepreneur information ompetition GRAPHIC STANDARDS launch opening feasibility study strategy
More informationStyling of Controls Framework
Styling of Controls Framework 2011 51Degrees.mobi Limited. All rights reserved. The copyright in and title to the document Styling of Controls Framework belongs to 51Degrees.mobi Limited. No part of it
More informationAd Spec Guidelines
Ad Spec Guidelines 03.19.18 Ad Spec Guidelines 1 General Guidelines Required Assets For best results, please provide fully editable assets. FILES Design Files - Layered PSD (Photoshop) Fonts - RTF / TTF
More informationLorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod tempor incididunt ut labore et dolore magna - ali qua. Ut enim ad minim veniam,
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna - ali qua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
More informationHTML. UC Berkeley Graduate School of Journalism
HTML UC Berkeley Graduate School of Journalism Webpages are made of three Webpages are made of three HTML Webpages are made of three HTML CSS Webpages are made of three HTML CSS JavaScript Webpages are
More information[ ] corporate brand guide brought to you from the minds at:
[ ] corporate brand guide 2015-2016 introduction This document describes the most essential elements of the p d adapt visual identity collage including logo usage, typographical marks and color palette.
More informationANNEX VIII.2 New dangerous substances website. Safety and health at work is everyone s concern. It s good for you. It s good for business.
ANNEX VIII.2 New dangerous substances website Safety and health at work is everyone s concern. It s good for you. It s good for business. Information architecture 2 Information architecture Multilingual
More information01 The logo design. Our logo is the touchstone of our brand and one of the most valuable assets. We must. Designed by KING DESIGN
01 The logo design Our logo is the touchstone of our brand and one of the most valuable assets. We must 1. The logo and its usage / 2. Black, white and grayscale / 3. Logo construction + clear space /
More informationBrand Guidelines CONTENTS. About these guidelines...2. Logo usage...3. Color palette...6. Fonts...7. Additional design elements...
CONTENTS About se guidelines...2 Logo usage...3 Color palette...6 Fonts...7 Additional design elements...8 Collateral examples...10 Brand Guidelines AUGUST 2013 1 about se guidelines [yoc-to] The smallest
More informationSTOCKHOLM BEAMER THEME
STOCKHOLM BEAMER THEME sthlm is based on the hsrm theme 20130731-093333-r2.2B-TemplatesthlmBeamerTheme HendryOlson.com Made in Sweden OVERVIEW 1. Background 2. Structure 3. Features 4. Tutorial 2 BACKGROUND
More informationManual ODIP Content Management System Version 1.0 February 2013
Manual ODIP Content Management System Version 1.0 February 2013 Chapter 1- Home page After you have logged in you will find the entry buttons to all sections of the CMS you will need to maintain the ODIP
More informationgraceland-core Documentation
graceland-core Documentation Release 0.1.0-SNAPSHOT Javier Campanini April 14, 2014 Contents 1 About 3 1.1 Contributing............................................... 3 1.2 License..................................................
More informationSphinx Readability Theme Documentation
Sphinx Readability Theme Documentation Release 0.0.6 Tsuyoshi Tokuda December 27, 2015 Contents 1 What Is It? 1 2 User s Guide 3 2.1 Installation................................................ 3 2.2
More information#BDOG2018. Taglines, Hashtags And More. Spice Up Your Messaging. Digital Sharing. Questions? Comments?
Taglines, Hashtags And More Digital Sharing Follow and share your story using the hashtag #bdog2018 Browse nonprofits and tools to get involved on our website: bigdayofgiving.org Like us on Facebook: facebook.com/bigdayofgiving
More information15. Recursion 2. Motivation: Calculator. Naive Attempt (without Parentheses) Analyzing the Problem (15 7 3) = Input * 3 = Result 15
Motivation: Calculator Goal: we build a command line calculator 15. Recursion 2 Building a Calculator, Streams, Formal Grammars, Extended Backus Naur Form (EBNF), Parsing Expressions Example Input: 3 +
More informationIntroduction to Web Design CSS Reference
Inline Style Syntax: Introduction to Web Design CSS Reference Example: text Internal Style Sheet Syntax: selector {property: value; Example:
More informationIntroduction to Web Design CSS Reference
Inline Style Syntax: Introduction to Web Design CSS Reference Example: text Internal Style Sheet Syntax: selector {property: value; Example:
More informationDESIGNPRINCIPPER FANG FORTÆLLINGEN
DESIGNPRINCIPPER Indhold: 3 / Bomærke 6 Skrift 8 Farve 9 Plakat overordnet På udstillingsstedet 11 Plakat Udstilling 12 Skrift 13 Folder 17 Flyer 2 / Bomærke 3 frizone 4 (minimum gengivelse) 2 cm 4 cm
More informationTitle Optional Subtitle
. Title Optional Subtitle J. Random Author Technische Universiteit Delft . Title Optional Subtitle by J. Random Author in partial fulfillment of the requirements for the degree of Master of Science in
More informationCSS for Styling CS380
1 CSS for Styling The good, the bad and the 2 ugly! shashdot. News for nerds!! You will never, ever be bored here!
More informationReview Question 1. Which tag is used to create a link to another page? 1. <p> 2. <li> 3. <a> 4. <em>
Introduction to CSS Review Question 1 Which tag is used to create a link to another page? 1. 2. 3. 4. Review Question 1 Which tag is used to create a link to another page? 1. 2.
More informationControlling Appearance the Old Way
Webpages and Websites CSS Controlling Appearance the Old Way Older webpages use predefined tags - - italic text; - bold text attributes - Tables (and a few other elements) use specialized
More informationCOMCAS 2015 Author Instructions for Full Manuscript Submission
COMCAS 2015 Author Instructions for Full Manuscript Submission This document provides guidance on the submission of your Manuscript to COMCAS 2015. You may wish to print out these instructions and read
More informationCSS. Lecture 16 COMPSCI 111/111G SS 2018
CSS Lecture 16 COMPSCI 111/111G SS 2018 No CSS Styles A style changes the way the HTML code is displayed Same page displayed using different styles http://csszengarden.com Same page with a style sheet
More informationCSS: The Basics CISC 282 September 20, 2014
CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML
More informationIDM 221. Web Design I. IDM 221: Web Authoring I 1
IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 2 IDM 221: Web Authoring I 2 Tools for Development Text Editor Hos.ng Version Control FTP (later) IDM 221: Web Authoring I 3 Last week we discussed
More informationTitle. Optional subtitle J. Random Author. Cover Text possibly spanning multiple lines ISBN
Title Optional subtitle J. Random Author Cover Text possibly spanning multiple lines ISBN 000-00-0000-000-0 Title Optional subtitle by J. Random Author to obtain the degree of Master of Science at the
More informationCSS Lecture 16 COMPSCI 111/111G SS 2018
No CSS CSS Lecture 16 COMPSCI 111/111G SS 2018 Styles Astyle changes the way the HTML code is displayed Same page displayed using different styles Same page with a style sheet body font-family: sans-serif;
More informationAppendix D CSS Properties and Values
HTML Appendix D CSS Properties and Values This appendix provides a brief review of Cascading Style Sheets (CSS) concepts and terminology, and lists CSS level 1 and 2 properties and values supported by
More informationUSER MANUAL. ICIM S.p.A. Certification Mark
USER MANUAL ICIM S.p.A. Certification Mark Index Informative note 4 The Certification Mark 6 Certified Management System 8 Certified Management System: Examples 19 Certified Product 27 Certified Product:
More informationCSC 443: Web Programming
1 CSC 443: Web Programming Haidar Harmanani Department of Computer Science and Mathematics Lebanese American University Byblos, 1401 2010 Lebanon CSC443: Web Programming 2 for Styling The good, the bad
More informationCONTENT STRATEGY: What s Real, What s Relevant. Kristina Halvorson Web 2.0 Expo San Francisco
CONTENT STRATEGY: What s Real, What s Relevant Kristina Halvorson Web 2.0 Expo San Francisco 04.01.09 WHO AM I? President, Brain Traffic Speaker, conferences Author, in training WHO AM I? Advocate, importance
More information01/ 03/ 05/ 07/ 09/ 11/ 13/ 15/ 17/ 19/ 21/ 23/ WEB DESIGN PRINT DESIGN PERSONAL DESIGN. DESIGN IS: a finely crafted method of mass communication
WEB DESIGN 01/ 03/ 05/ 07/ 09/ Delicious Boutique Product Page Design Vida Vibe Website Mock Design IIWII Homepage Design Naturewasher Landing Page Design Grown - Up Talk Application Design PRINT DESIGN
More informationAd Spec Guidelines. Ad Spec Guidelines 1
Ad Spec Guidelines Ad Spec Guidelines 1 Table of Contents General Guidelines 3 Banners Display 4-5 Native Ads 6 Landing Pages: Super 7-8 Image 9 Interstitials 10 Rich Media 11-12 Tags 14 Attribution Pixels
More information<body bgcolor=" " fgcolor=" " link=" " vlink=" " alink=" "> These body attributes have now been deprecated, and should not be used in XHTML.
CSS Formatting Background When HTML became popular among users who were not scientists, the limited formatting offered by the built-in tags was not enough for users who wanted a more artistic layout. Netscape,
More informationReading 2.2 Cascading Style Sheets
Reading 2.2 Cascading Style Sheets By Multiple authors, see citation after each section What is Cascading Style Sheets (CSS)? Cascading Style Sheets (CSS) is a style sheet language used for describing
More informationBrand Guidelines Clarity Coverdale Fury
Brand Guidelines 1 B R A N D M A N I F ESTO There s a spark when a girl realizes she has someone she can count on to support her dreams. The Ann Bancroft Foundation believes in nurturing that spark. Through
More informationCondition of the Mobile User
Condition of the Mobile User Alexander Nelson August 25, 2017 University of Arkansas - Department of Computer Science and Computer Engineering Reminders Course Mechanics Course Webpage: you.uark.edu/ahnelson/cmpe-4623-mobile-programming/
More informationCSS, part 1. CS147L Lecture 2 Mike Krieger
CSS, part 1 CS147L Lecture 2 Mike Krieger Welcome back! Week 1 Recap - HTML provides content - CSS provides style - Javascript provides action HTML Recap - Set of tags that enclose images, video, text,
More informationCSS. https://developer.mozilla.org/en-us/docs/web/css
CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties
More informationCase Study: Gut Check App
Case Study: Adam Keller User Experience Client: Janssen Pharmaceuticals Design & Direction Business Objective: To provide IBD and Crohn s Disease patients with a helpful tool that also collects patient-reported
More informationFeature Extraction and Classification. COMP-599 Sept 19, 2016
Feature Extraction and Classification COMP-599 Sept 19, 2016 Good-Turing Smoothing Defined Let N be total number of observed word-tokens, w c be a word that occurs c times in the training corpus. N = i
More informationCOSC 2206 Internet Tools. CSS Cascading Style Sheets
COSC 2206 Internet Tools CSS Cascading Style Sheets 1 W3C CSS Reference The official reference is here www.w3.org/style/css/ 2 W3C CSS Validator You can upload a CSS file and the validator will check it
More informationTelly Mamayek, MCWD Director of Communications and Education
Minnehaha Creek Watershed District REQUEST FOR BOARD ACTION MEETING DATE: March 26, 2015 TITLE: Acceptance of 2014 MCWD Brand Manual Updates RESOLUTION NUMBER: 15-XXX021 PREPARED BY: Telly Mamayek, MCWD
More informationThe Moldable Editor. Bachelor Thesis. Aliaksei Syrel from Minsk, Belarus. Philosophisch-naturwissenschaftlichen Fakultät der Universität Bern
The Moldable Editor Bachelor Thesis Aliaksei Syrel from Minsk, Belarus Philosophisch-naturwissenschaftlichen Fakultät der Universität Bern 6. February 2018 Prof. Dr. Oscar Nierstrasz Dr. Andrei Chiş, Dr.
More informationCSc 337 LECTURE 3: CSS
CSc 337 LECTURE 3: CSS The bad way to produce styles welcome to Greasy Joe's. You will never, ever, ever beat our
More informationAssignments (4) Assessment as per Schedule (2)
Specification (6) Readability (4) Assignments (4) Assessment as per Schedule (2) Oral (4) Total (20) Sign of Faculty Assignment No. 02 Date of Performance:. Title: To apply various CSS properties like
More informationMore CSS. <link href="filename" type="text/css" rel="stylesheet" /> CS380
1 More CSS HTML id attribute 2 coding Horror! Coding Horror! our mission is to combine programming and human factors
More informationTechnical Document Authoring and
2015 Aras 1 Technical Document Authoring and Management in PLM Kevin Richard 2015 Aras 2 Agenda Business Justification (Challenges/Goals) Technical Documents Features Demo Wrap up and questions 2015 Aras
More informationsimpleapi Documentation
simpleapi Documentation Release 0.0.9 Florian Schlachter July 06, 2014 Contents 1 Contents 3 1.1 User s Guide............................................... 3 1.2 Developer s Reference..........................................
More informationDashboard Dashboard Screens Screens
Dashboard Screens DataSynapse Grid Server Dashboard Grid Components Services Admin Diagnostics Overview Overview Director Monitor Broker Monitor 45 Available Engines 16 Connected Drivers 31 Active Sessions
More informationCascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Mendel Rosenblum 1 Driving problem behind CSS What font type and size does introduction generate? Answer: Some default from the browser (HTML tells what browser how)
More informationIntroducing Natural Language
Session #WWDC18 Introducing Natural Language 713 Doug Davidson, Senior Software Engineer Vivek Kumar Rangarajan Sridhar, Software Engineering Manager 2018 Apple Inc. All rights reserved. Redistribution
More informationGraphic Identity Manual Version 5.0 (Updated 08/17)
Graphic Identity Manual Version 5.0 (Updated 08/17) University at at Albany Graphic Identity Manual 2 Contents 3 Introduction 4 Name 5 Colors 7 Typefaces and Fonts 8 Wordmarks and Logos 16 Signatures 17
More informationUsername. Password. Forgot your password? Sign in. Register as new user
Username Password Forgot your password? Sign in Register as new user Registration Email Password Mobile phone Verify your account via SMS otherwise leave blank to verify via email. Terms & Conditions Lorem
More information8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2)
Web Development & Design Foundations with HTML5 Ninth Edition Chapter 3 Configuring Color and Text with CSS Slides in this presentation contain hyperlinks. JAWS users should be able to get a list of links
More information2005 WebGUI Users Conference
Cascading Style Sheets 2005 WebGUI Users Conference Style Sheet Types 3 Options Inline Embedded Linked Inline Use an inline style sheet to modify a single element one time in a page.
More information- The CSS1 specification was developed in CSSs provide the means to control and change presentation of HTML documents
3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS3 is on its way - CSSs provide the means to control and change presentation of HTML documents - CSS is not
More informationsphinx-argparse Documentation
sphinx-argparse Documentation Release 0.2.2 Alex Rudakov and Devon Ryan Mar 15, 2018 Contents 1 Installation 3 2 Basic usage 5 2.1 Other useful directives.......................................... 6 3
More informationCMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB
CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB Unit 3 Cascading Style Sheets (CSS) Slides based on course material SFU Icons their respective owners 1 Learning Objectives In this unit you
More informationElaine Torres/Jeremy Henderson/Edward Bangs
SCENARIO 1: IMAGE AND TEXT PERSONAL USE Lorem ipsum dolor sit am, consectur adipiscing Lorem ipsum dolor sit am, consectur adipiscing Cloud Capture Icon appears in the top right corner of any browser after
More informationIntroduction to MVC 1.0
Introduction to MVC 1.0 David Delabassee - @delabassee Software Evangelist Cloud & Microservices - Oracle Java Day Tokyo 2016 May 24, 2016 Copyright 2016, Oracle and/or its its affiliates. All All rights
More information3.1 Introduction. 3.2 Levels of Style Sheets. - HTML is primarily concerned with content, rather than style. - There are three levels of style sheets
3.1 Introduction - HTML is primarily concerned with content, rather than style - However, tags have presentation properties, for which browsers have default values - The CSS1 cascading style sheet specification
More informationChapter 3 Style Sheets: CSS
WEB TECHNOLOGIES A COMPUTER SCIENCE PERSPECTIVE JEFFREY C. JACKSON Chapter 3 Style Sheets: CSS 1 Motivation HTML markup can be used to represent Semantics: h1 means that an element is a top-level heading
More informationDemo User Interface and Graphic Guidelines
Demo User Interface and Graphic Guidelines Typography & Colours Titillium Regular Titillium Semibold Titillium Bold The font used in Qt Demos is the company font Titillium. Fonts weights used: regular,
More information**Method 3** By attaching a style sheet to your web page, and then placing all your styles in that new style sheet.
CSS Tutorial Part 1: Introduction: CSS adds style to tags in your html page. With HTML you told the browser what things were (e.g., this is a paragraph). Now you are telling the browser how things look
More informationUser Manual. Version ,
User Manual Version 2.3.13, 2018-07-20 Table of Contents Introduction...6 Features...7 Installation...9 Uninstall...9 Quick Start...10 Settings...13 Block name...14 Block code...15 Quickly disable insertion...15
More informationUser Guide. Version 2.3.9,
User Guide Version 2.3.9, 2018-05-30 Table of Contents Introduction...6 Features...7 Installation...9 Uninstall...9 Quick Start...10 Settings...13 Block name...14 Block code...15 Quickly disable insertion...15
More informationCSS Cascading Style Sheets
CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css images boris.jpg Types of CSS External Internal Inline External CSS An external style sheet is a text document with
More informationAmplience Content Authoring Cartridge for Salesforce Commerce Cloud
Amplience Content Authoring Cartridge for Salesforce Commerce Cloud Makes it easy to integrate Amplience-created content modules with Commerce Cloud page templates. The result? Seamless content and commerce
More information- HTML is primarily concerned with content, rather than style. - However, tags have presentation properties, for which browsers have default values
3.1 Introduction - HTML is primarily concerned with content, rather than style - However, tags have presentation properties, for which browsers have default values - The CSS1 cascading style sheet specification
More informationEECS1012. Net-centric Introduction to Computing. Lecture 3: CSS for Styling
EECS1012 Net-centric Introduction to Computing Lecture 3: CSS for Styling Acknowledgements Contents are adapted from web lectures for Web Programming Step by Step, by M. Stepp, J. Miller, and V. Kirst.
More informationbrand guide book & resources
brand guide book & resources back to top 1 logo page 3 placement, colours and composition key visuals & graphics page 8 placement, colours and composition typography page 10 font use and rules placement,
More informationUnit 20 - Client Side Customisation of Web Pages. Week 2 Lesson 4 The Box Model
Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 4 The Box Model So far Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded (internal style-sheet) External
More informationCSS Tutorial Part 1: Introduction: A. Adding Style to a Web Page (3 options):
CSS Tutorial Part 1: Introduction: CSS adds style to tags in your html page. With HTML you told the browser what things were (e.g., this is a paragraph). Now you are telling the browser how things look
More informationEnter the Elephant. Massively Parallel Computing With Hadoop. Toby DiPasquale Chief Architect Invite Media, Inc.
Enter the Elephant Massively Parallel Computing With Hadoop Toby DiPasquale Chief Architect Invite Media, Inc. Philadelphia Emerging Technologies for the Enterprise March 26, 2008 Image credit, http,//www.depaulca.org/images/blog_1125071.jpg
More information.and we ll give you 100 to say thank you
The digital bank Windows Internet Explorer http://www.anybank.co.uk/distinction Open an anybank current account today. Get our award winning Distinction Account 5 mobile banking app No monthly fees* Earn
More informationBOOTSTRAP GRID SYSTEM
BOOTSTRAP GRID SYSTEM http://www.tutorialspoint.com/bootstrap/bootstrap_grid_system.htm Copyright tutorialspoint.com In this chapter we shall discuss the Bootstrap Grid System. What is a Grid? As put by
More informationAgenda. Combining Rules & Selectors Classes, IDs and DIVs
CSS Rules Agenda Combining Rules & Selectors Classes, IDs and DIVs 2 Border Styles Placing the above rule associated with h1 selector, will draw a line - 1 pixel wide - under the heading in our site (you
More informationCSCB20 Week 7. Introduction to Database and Web Application Programming. Anna Bretscher Winter 2017
CSCB20 Week 7 Introduction to Database and Web Application Programming Anna Bretscher Winter 2017 Cascading Style Sheets (CSS) Examples of CSS CSS provides a powerful and stillevolving toolkit of style
More information