Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100

Size: px
Start display at page:

Download "Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100"

Transcription

1 Introduction to Multimedia MMP100 Spring 2016 thiserichagan.com/mmp100

2 Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax! Any mistakes? Check your file names! Any spelling errors, spaces, or weird characters? Check your file paths and extensions! Are your files there? Are they the right type? Did you save the most recent changes?

3 Question Time? Any and all questions including: How the internet works HTML CSS Where to find x We will have a short in class Quiz next class (10 question multiple choice)

4 File structure and extensions THESE MATTER! Just like if we move our directories around (folders) or save it in a different place, we can break stuff! Consistency will help! RESTful architecture (fancy way of saying organized structures) for our files and multiple websites will make it easier, I will demonstrate

5 Review: Inline vs Block Block elements: p, div, li Inline elements: strong, img, a

6 CSS explained Control elements of the boxes Width and Height Borders (color, width, style) Background color and images Positions in browser window Text Typeface Size Color Italics, bold, uppercase, lowercase, small-caps

7 CSS CSS works by associating rules with HTML elements Two parts to a CSS rule: a selector a declaration Example: p { font-family: Arial;}

8 CSS declaration Sit inside { curly brackets } Two parts property value Example h1, h2, h3 { font-family: Arial; color: red;}

9 Selector Options Universal Selector * { } Targets all elements on the page Type Selector Matching element names h1, h2, h3 { } id Selector Matches id attribute #introduction { }

10 Selector Options continued Class Selector class html attribute makes elements part of a type.note { } = all elements with a class attribute of note Example:.note { } All elements with a class of note Also specify html element + class Example: p.note { } Only paragraph elements with a class attribute of.note

11 Selector Options Continued Child Selector Continued Matches element that is a direct child Example: li>a { } (links that are in list elements) Descendant Selector Matches element that are any descendent (not just immediate) Example: p a { } (links inside any paragraph element)

12 Continued Continued Continued Continued etc Adjacent Sibling Selector Matches an element that is the next sibling of another Example: h1 + p { } (heading one followed by a paragraph, only the first paragraph is targeted) General Sibling Selector Matches an element that is a sibling of another (doesn t have to be immediate next) Example: h1~p{ } (would apply to all paragraphs after a <h1> header)

13 Inheritance font-family / color properties can be inherited (passed onto child elements) This saves from having to include fontfamily in every declaration background-color and border properties are NOT INHERITED (would be very messy) Can force properties to be inherited by using inherit as the value of the property

14 Selector Options Important to note: You can be as specific or vague as you want, get used to thinking about your elements as occupying places on the page TEST YOUR STYLE PAGES, look at your pages.

15 No, Seriously, Look At Your Pages! The only way to know if things look the way you want, make it easier to read and understand the information is if you LOOK AT THE PAGES YOU HAVE CREATED!!!!!! Really, look at them (yes, I can tell)

16 Text Properties Two Groups: Directly affect the font and its appearance Typeface, format, size of text Same effect on the text no matter what Color, spacing between words and letters

17 Typeface Serif Fonts Examples: Georgia, Times New Roman Sans Serif Examples: Arial, Lucinda Grande, Verdana Monospace Examples: Courier New, Lucinda Console

18 Font Properties Weight Light, Medium, Bold, Black Style Normal, Italic, Oblique Stretch Condensed, Regular, Extended

19 Serif vs Sans-serif Serif small line attached to the end of the letters Example: Times New Roman Sans-serif without the small lines Example: Helvetica

20 Monospace All characters have the same spacing between them Example: Monaco

21 Cursive Joining strokes or other cursive characteristics Example: Monotype Corsiva

22 Fantasy Decorative fonts, not for large bodies of text, but better for titles Example: Impact

23 Weight Light Medium Bold Black

24 Style Normal Italic cursive aspect to the letters Oblique regular font but slanted

25 Stretch Condensed thin and closer Regular Extended thicker and further apart

26 How to choose your font? Browser needs the font on the computer in order to display it! Crazy exciting fonts you find on the internet probably won t be available to everyone You have things to say, and you want people to be able to read them We will address this more as we get into color as well This means no ironic Comic Sans Usage

27 Adjusting fonts font-family Example:font-family: Georgia, Times, serif font-size pixels (12 px), percent (%) or em font-weight, font-style font-weight:normal, bold font style: normal, italic, oblique

28 Some words on measurements Default browser text is: 16 pixels Pixels Specify exactly what size you want Relative to screen resolution Percentages Based off default text size (can be changed by the user) Em-the width of one letter m Change text with a relative size

29 Standard Scale 8, 9, 10, 11, 12, 14, 18, 24, 36, 48, 60, 72 Calculate percentages based off 16 pixels (as the standard) h1 = 200% (32px) h2 = 150% (24 px) h3 = 133% (18 px) body = 100% (16px)

30 Font adjustments text-transform: UPPERCASE, lowercase, Capitalize text-decoration: none, underline, overline, line-through

31 Leading (ie line height): Space between lines Measurement from the bottom of the lowest letter (descender) to top of the tallest letter(ascender) Best given in em so that it is relative size Alignment of vertical height Between the lines Alignment of vertical height Between the lines

32 Letter & Word Spacing Kerning letter spacing Letter-spacing: space between each letter Given in em

33 Alignment text-align: left, right, center, justify vertical-align: Intended to align inline elements (not text in div or p) text-indent: Indent lines of text (can take negative values)

34 CSS Box Model

35 Box Dimensions Div{ width: 300 px; height: 300px; background-color: rgb(0, 61, 157);} p{ width: 75%; height:75% background-color:rgb(100,20,0);}

36

37 Limiting Size Proliferation of different devices for browsing = more dynamic webpages! (and relative sizes) Need to prevent things from becoming illegible / take up too much space min-width, min-height, max-width, max-height, Example

38 Overflow You have too much to say, but your box is too small! How do you handle this travesty? overflow: hidden; hides the extra content overflow:scroll; includes a scroll bar

39 Border Margin Padding

40 So What? Borders separate the edge of one box from another Margins sit outside the edge of the border, and use them to increase space between boxes Padding is the space between the border of a box and any content within.

41 Size distinction If you specify a width: borders, margin and padding are added to its width and height Width = Content box size, in W3C compliant web browsers etc, border padding and margin are added to this

42 White Space White space is your friend, use it to make your text more legible and separate parts of your website We don t need that stupid <br> tag

43

44 Borders border-width (px, or thin, medium, thick) border-top, border-right, border-bottom, border-left, border-width: 1px 5px 5px 1px;

45 Border Style Default = blank! solid, dotted, dashed, double, groove, ridge, inset, outset

46 But wait, there s more! border-color RGB, HEX, or CSS color Change the color for each side! Same shorthand, control all 4 at the same time border-color: #FF0000 #00FF00 #0000FF #000000;}

47 Padding Space between border and content A lot: None: Same shorthand padding: 5px 10px 15px 5px;

48 Margins Space around the outside of the box. margin-top: px or % Shorthand: Top, Right, Bottom, Left

49 Centering Can automatically center boxes on the page! Must set width in px (otherwise box takes up screen size) Set left and right margin to auto Margin: 10px auto 10px auto This should also be combined with text-align to make the text centered in the box

50 Border: shorthand Width, style, and color in one property (in this order!) p{ width: 250px: border: 3px dotted #0088dd;}

51 Change Inline/Block Force one to behave like the other (cause an indent or not) Why? One example: Lists are block elements, but you want to put them all in a line to make navigation for your site li { } display: inline; margin-right: 10px;

52 Tadaaaaa!!!

53 CSS3 Properties are cool And a lot more information. The CSS3 properties are as follows: border-image box-shadow border-radius If you are interested in these, I highly recommend checking out Chapter 13, and feel free to ask me any questions (note they are not! supported everywhere)

54 External vs Internal CSS External a secondary document which holds all of your styles This is best, since if you have multiple pages with the same style and you want to change something, its in one place This will show up next class (one thing at a time) Internal css styles inside the same page as your html structure elements Normally placed inside <head> tag <style> element

55 External CSS document File extension:.css Should only include CSS code (no html code!) <link href= filename.css rel= stylesheet type= text/css >

56 Homework You must still meet the requirements! Two Pages with all the stuff you should have from before (list, pictures, links) and your text all prettied up with CSS Take your same two pages, and play with the border elements: all of the stuff we talked about today. Move your text around the page, make it look like a chess board, something, anything. EXTERNAL CSS, save it as a separate.css document!

57 Now is the last time for questions, with me here in person before your first Quiz I will also accept questions about what you are working on right now! I even bet everyone could finish their homework before the class is over

Appendix D CSS Properties and Values

Appendix 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 information

8/19/2018. Web Development & Design Foundations with HTML5. Learning Objectives (1 of 2) Learning Objectives (2 of 2)

8/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 information

CSS Cascading Style Sheets

CSS 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 information

Welcome Please sit on alternating rows. powered by lucid & no.dots.nl/student

Welcome Please sit on alternating rows. powered by lucid & no.dots.nl/student Welcome Please sit on alternating rows powered by lucid & no.dots.nl/student HTML && CSS Workshop Day Day two, November January 276 powered by lucid & no.dots.nl/student About the Workshop Day two: CSS

More information

CSS Selectors. element selectors. .class selectors. #id selectors

CSS Selectors. element selectors. .class selectors. #id selectors CSS Selectors Patterns used to select elements to style. CSS selectors refer either to a class, an id, an HTML element, or some combination thereof, followed by a list of styling declarations. Selectors

More information

Introduction to Multimedia. MMP100 Spring 2017 thiserichagan.com/mmp100

Introduction to Multimedia. MMP100 Spring 2017 thiserichagan.com/mmp100 Introduction to Multimedia MMP100 Spring 2017 profehagan@gmail.com thiserichagan.com/mmp100 Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax!

More information

COSC 2206 Internet Tools. CSS Cascading Style Sheets

COSC 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 information

CSS. Text & Font Properties. Copyright DevelopIntelligence LLC

CSS. Text & Font Properties. Copyright DevelopIntelligence LLC CSS Text & Font Properties 1 text-indent - sets amount of indentation for first line of text value: length measurement inherit default: 0 applies to: block-level elements and table cells inherits: yes

More information

HTML & CSS. SWE 432, Fall 2017 Design and Implementation of Software for the Web

HTML & CSS. SWE 432, Fall 2017 Design and Implementation of Software for the Web HTML & CSS SWE 432, Fall 2017 Design and Implementation of Software for the Web HTML: HyperText Markup Language LaToza Language for describing structure of a document Denotes hierarchy of elements What

More information

The building block of a CSS stylesheet. A rule consists of a selector and a declaration block (one or more declarations).

The building block of a CSS stylesheet. A rule consists of a selector and a declaration block (one or more declarations). WDI Fundamentals Unit 4 CSS Cheat Sheet Rule The building block of a CSS stylesheet. A rule consists of a selector and a declaration block (one or more declarations). Declaration A declaration is made

More information

CMPT 165: More CSS Basics

CMPT 165: More CSS Basics CMPT 165: More CSS Basics Tamara Smyth, tamaras@cs.sfu.ca School of Computing Science, Simon Fraser University October 14, 2011 1 The Favorites Icon The favorites icon (favicon) is the small icon you see

More information

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster.

Wanted! Introduction. Step 1: Styling your poster. Activity Checklist. In this project, you ll learn how to make your own poster. Wanted! Introduction In this project, you ll learn how to make your own poster. Step 1: Styling your poster Let s start by editing the CSS code for the poster. Activity Checklist Open this trinket: jumpto.cc/web-wanted.

More information

Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo

Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo Study Guide 2 - HTML and CSS - Chap. 6,8,10,11,12 Name - Alexia Bernardo Note: We skipped Study Guide 1. If you d like to review it, I place a copy here: https:// people.rit.edu/~nbbigm/studyguides/sg-1.docx

More information

HTML/XML. HTML Continued Introduction to CSS

HTML/XML. HTML Continued Introduction to CSS HTML/XML HTML Continued Introduction to CSS Entities Special Characters Symbols such as +, -, %, and & are used frequently. Not all Web browsers display these symbols correctly. HTML uses a little computer

More information

Reading 2.2 Cascading Style Sheets

Reading 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 information

**Method 3** By attaching a style sheet to your web page, and then placing all your styles in that new style sheet.

**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 information

CSS: The Basics CISC 282 September 20, 2014

CSS: 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 information

Chapter 12: FORMATTING TEXT

Chapter 12: FORMATTING TEXT Disclaimer: All words, pictures are adopted from Learning Web Design (3 rd eds.) by Jennifer Niederst Robbins, published by O Reilly 2007. PART III: CSS FOR PRESENTATION Chapter 12: FORMATTING TEXT CSc2320

More information

Introduction to Web Design CSS Reference

Introduction 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 information

Introduction to Web Design CSS Reference

Introduction 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 information

CASCADING STYLESHEETS

CASCADING STYLESHEETS CASCADING STYLESHEETS Cascading StyleSheets (CSS) has been mainly created because HTML is just not the right tool for precision and flexibility. HTML is not a very effective for designing web pages. Most

More information

3.1 Introduction. 3.2 Levels of Style Sheets. - The CSS1 specification was developed in There are three levels of style sheets

3.1 Introduction. 3.2 Levels of Style Sheets. - The CSS1 specification was developed in There are three levels of style sheets 3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS2.1 reflects browser implementations - CSS3 is partially finished and parts are implemented in current browsers

More information

- The CSS1 specification was developed in CSS2 was released in CSS2.1 reflects browser implementations

- The CSS1 specification was developed in CSS2 was released in CSS2.1 reflects browser implementations 3.1 Introduction - The CSS1 specification was developed in 1996 - CSS2 was released in 1998 - CSS2.1 reflects browser implementations - CSS3 is partially finished and parts are implemented in current browsers

More information

CSS. https://developer.mozilla.org/en-us/docs/web/css

CSS. 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 information

Adding CSS to your HTML

Adding CSS to your HTML Adding CSS to your HTML Lecture 3 CGS 3066 Fall 2016 September 27, 2016 Making your document pretty CSS is used to add presentation to the HTML document. We have seen 3 ways of adding CSS. In this lecture,

More information

Web Site Design and Development Lecture 6

Web Site Design and Development Lecture 6 Web Site Design and Development Lecture 6 CS 0134 Fall 2018 Tues and Thurs 1:00 2:15PM Inheritance Before we talk about font properties, it needs to be known that font properties are inherited by the descendants

More information

CSS Tutorial Part 1: Introduction: A. Adding Style to a Web Page (3 options):

CSS 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 information

CSS Styles Quick Reference Guide

CSS Styles Quick Reference Guide Table 1: CSS Font and Text Properties Font & Text Properties Example(s) font-family Font or typeface font-family: Tahoma font-size Size of the font font-size: 12pt font-weight Normal or bold font-weight:

More information

By Ryan Stevenson. Guidebook #3 CSS

By Ryan Stevenson. Guidebook #3 CSS By Ryan Stevenson Guidebook #3 CSS Table of Contents 1. How to Use CSS 2. CSS Basics 3. Text Sizes Colors & Other Styling 4. Element Layout Positioning & Sizing 5. Backgrounds & Borders How to Use CSS

More information

Networks and Web for Health Informatics (HINF 6220) Tutorial 8 : CSS. 8 Oct 2015

Networks and Web for Health Informatics (HINF 6220) Tutorial 8 : CSS. 8 Oct 2015 Networks and Web for Health Informatics (HINF 6220) Tutorial 8 : CSS 8 Oct 2015 What is CSS? o CSS (Style Sheet) defines how HTML elements are formatted and displayed. o It helps you easily change an HTML

More information

CSS مفاهیم ساختار و اصول استفاده و به کارگیری

CSS مفاهیم ساختار و اصول استفاده و به کارگیری CSS مفاهیم ساختار و اصول استفاده و به کارگیری Cascading Style Sheets A Cascading Style Sheet (CSS) describes the appearance of an HTML page in a separate document : مسایای استفاده از CSS It lets you separate

More information

CSS Cascading Style Sheets

CSS Cascading Style Sheets CSS Cascading Style Sheets site root index.html about.html services.html stylesheet.css charlie.jpg Linking to your HTML You need to link to your css in the of your HTML file.

More information

Controlling Appearance the Old Way

Controlling 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 information

ACSC 231 Internet Technologies

ACSC 231 Internet Technologies ACSC 231 Internet Technologies Lecture 7 Web Typography Efthyvoulos Kyriacou - Assoc. Prof. Frederick University Resources: C. Markides (Frederick University) Slide 1 ACSC 231: Internet Technologies 23/12/2008

More information

Review Question 1. Which tag is used to create a link to another page? 1. <p> 2. <li> 3. <a> 4. <em>

Review 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 information

UNIVERSITI TEKNOLOGI MALAYSIA TEST 1 SEMESTER II 2012/2013

UNIVERSITI TEKNOLOGI MALAYSIA TEST 1 SEMESTER II 2012/2013 UNIVERSITI TEKNOLOGI MALAYSIA TEST 1 SEMESTER II 2012/2013 SUBJECT CODE : SCSV1223 (Section 05) SUBJECT NAME : WEB PROGRAMMING YEAR/COURSE : 1SCSV TIME : 2.00 4.00 PM DATE : 18 APRIL 2013 VENUE : KPU 10

More information

CSS: Formatting Text. CSS for text processing: font-family. Robert A. Fulkerson

CSS: Formatting Text. CSS for text processing: font-family. Robert A. Fulkerson CSS: Formatting Text Robert A. Fulkerson College of Information Science and Technology http://www.ist.unomaha.edu/ University of Nebraska at Omaha http://www.unomaha.edu/ CSS for text processing: font-family

More information

Cascading Style Sheet Quick Reference

Cascading Style Sheet Quick Reference Computer Technology 8/9 Cascading Style Sheet Quick Reference Properties Properties are listed in alphabetical order. Each property has examples of possible values. Properties are not listed if they are

More information

- The CSS1 specification was developed in CSSs provide the means to control and change presentation of HTML documents

- 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 information

BIM222 Internet Programming

BIM222 Internet Programming BIM222 Internet Programming Week 7 Cascading Style Sheets (CSS) Adding Style to your Pages Part II March 20, 2018 Review: What is CSS? CSS stands for Cascading Style Sheets CSS describes how HTML elements

More information

CSS. Lecture 16 COMPSCI 111/111G SS 2018

CSS. 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 information

Cascade Stylesheets (CSS)

Cascade Stylesheets (CSS) Previous versions: David Benavides and Amador Durán Toro (noviembre 2006) Last revision: Manuel Resinas (october 2007) Tiempo: 2h escuela técnica superior de ingeniería informática Departamento de Lenguajes

More information

CSC309 Programming on the Web week 3: css, rwd

CSC309 Programming on the Web week 3: css, rwd CSC309 Programming on the Web week 3: css, rwd Amir H. Chinaei, Spring 2017 Office Hours: M 3:45-5:45 BA4222 ahchinaei@cs.toronto.edu http://www.cs.toronto.edu/~ahchinaei/ survey 1 in survey 1, you provide

More information

Assignments (4) Assessment as per Schedule (2)

Assignments (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 information

Introduction to Web Tech and Programming

Introduction to Web Tech and Programming Introduction to Web Tech and Programming Cascading Style Sheets Designed to facilitate separation of content and presentation from a document Allows easy modification of style for an entire page or an

More information

CSc 337 LECTURE 3: CSS

CSc 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 information

Tutorial 3: Working with Cascading Style Sheets

Tutorial 3: Working with Cascading Style Sheets Tutorial 3: Working with Cascading Style Sheets College of Computing & Information Technology King Abdulaziz University CPCS-665 Internet Technology Objectives Review the history and concepts of CSS Explore

More information

CSS Lecture 16 COMPSCI 111/111G SS 2018

CSS 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 information

IMY 110 Theme 6 Cascading Style Sheets

IMY 110 Theme 6 Cascading Style Sheets IMY 110 Theme 6 Cascading Style Sheets 1. Cascading Style Sheets 1.1. Cascading Style Sheets Up to now we have done styling by using the style attribute. e.g. paragraph What

More information

3.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. 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 information

Web Design and Implementation

Web Design and Implementation Study Guide 3 - HTML and CSS - Chap. 13-15 Name: Alexia Bernardo Due: Start of class - first day of week 5 Your HTML files must be zipped and handed in to the Study Guide 3 dropbox. Chapter 13 - Boxes

More information

Admin. Midterm 1 on. Oct. 13 th (2 weeks from today) Coursework:

Admin. Midterm 1 on. Oct. 13 th (2 weeks from today) Coursework: Midterm 1 on Admin Oct. 13 th (2 weeks from today) Coursework: E1 grade released: please see Karoon (TA) at his office hours (Tues at 12-1pm) E2 due tomorrow E3 posted yesterday; due this Friday 11:59pm

More information

Web Development & Design Foundations with HTML5

Web Development & Design Foundations with HTML5 Web Development & Design Foundations with HTML5 KEY CONCEPTS Copyright Terry Felke-Morris 1 Learning Outcomes In this chapter, you will learn how to... Describe the evolution of style sheets from print

More information

1 of 7 11/12/2009 9:29 AM

1 of 7 11/12/2009 9:29 AM 1 of 7 11/12/2009 9:29 AM Home Beginner Tutorials First Website Guide HTML Tutorial CSS Tutorial XML Tutorial Web Host Guide SQL Tutorial Advanced Tutorials Javascript Tutorial PHP Tutorial MySQL Tutorial

More information

<body bgcolor=" " fgcolor=" " link=" " vlink=" " alink=" "> These body attributes have now been deprecated, and should not be used in XHTML.

<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 information

Web Development & Design Foundations with HTML5

Web Development & Design Foundations with HTML5 1 Web Development & Design Foundations with HTML5 CHAPTER 3 CSS BASICS Copyright Terry Felke-Morris 2 Learning Outcomes In this chapter, you will learn how to... Describe the evolution of style sheets

More information

- HTML is primarily concerned with content, rather than style. - However, tags have presentation properties, for which browsers have default values

- 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 information

Creating A Website - Part 1: Web Design principles, HTML & CSS. CSS Color Values. Hexadecimal Colors. RGB Color

Creating A Website - Part 1: Web Design principles, HTML & CSS. CSS Color Values. Hexadecimal Colors. RGB Color Notes Week 3 By: Marisa Stoolmiller CSS Color Values With CSS, colors can be specified in different ways: Color names Hexadecimal values RGB values HSL values (CSS3) HWB values (CSS4) Hexadecimal Colors

More information

Web Design and Development Tutorial 03

Web Design and Development Tutorial 03 Table of Contents Web Design & Development - Tutorial 03... 2 Using and Applying CSS to XHTML... 2 Conventions... 2 What you need for this tutorial... 2 Common Terminology... 3 Parent / Child Elements...

More information

.hedgehog { background-image: url(backyard.jpg); color: #ffff99; height: 6in; width: 12in; } .tube {

.hedgehog { background-image: url(backyard.jpg); color: #ffff99; height: 6in; width: 12in; } .tube { .hedgehog { background-image: url(backyard.jpg); color: #ffff99; height: 6in; width: 12in;.tube { color: #996600; height: 3in; width: 12in; position: fixed; What is CSS? Cascading Style Sheets CSS is responsible

More information

Cascading Style Sheets

Cascading Style Sheets 4 TVEZEWXYHMNR LSTVSKVEQY-RJSVQEXMOENITSHTSVSZ RETVSNIOXIQ RERGSZER Q^)ZVSTWO LSWSGM PR LSJSRHYEVS^TS XYLPEZR LSQ WXE4VEL] 4VELE)9-RZIWXYNIQIHSZE% FYHSYGRSWXM CSS Cascading Style Sheets Lukáš Bařinka barinkl@fel.cvut.cz

More information

Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style

Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style Session 3.1 Objectives Review the history and concepts of CSS Explore inline styles, embedded styles, and external style sheets Understand style precedence and style inheritance Understand the CSS use

More information

CSS: Cascading Style Sheets

CSS: Cascading Style Sheets CSS: Cascading Style Sheets Computer Science and Engineering College of Engineering The Ohio State University Lecture 13 Evolution of CSS MIME type: text/css CSS 1 ('96): early recognition of value CSS

More information

Chapter 4 CSS basics

Chapter 4 CSS basics Sungkyunkwan University Chapter 4 CSS basics Prepared by J. Lee and H. Choo Web Programming Copyright 2000-2018 Networking Laboratory 1/48 Copyright 2000-2012 Networking Laboratory Chapter 4 Outline 4.1

More information

Cascading Style Sheets Level 2

Cascading Style Sheets Level 2 Cascading Style Sheets Level 2 Course Objectives, Session 1 Level 1 Quick Review Chapter 6 Revisit: Web Fonts Chapter 8: Adding Graphics to Web Pages Chapter 9: Sprucing Up Your Site s Navigation Begin

More information

Web Engineering CSS. By Assistant Prof Malik M Ali

Web Engineering CSS. By Assistant Prof Malik M Ali Web Engineering CSS By Assistant Prof Malik M Ali Overview of CSS CSS : Cascading Style Sheet a style is a formatting rule. That rule can be applied to an individual tag element, to all instances of a

More information

Introduction to HTML & CSS. Instructor: Beck Johnson Week 2

Introduction to HTML & CSS. Instructor: Beck Johnson Week 2 Introduction to HTML & CSS Instructor: Beck Johnson Week 2 today Week One review and questions File organization CSS Box Model: margin and padding Background images and gradients with CSS Make a hero banner!

More information

EECS1012. Net-centric Introduction to Computing. Lecture 3: CSS for Styling

EECS1012. 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 information

IDM 221. Web Design I. IDM 221: Web Authoring I 1

IDM 221. Web Design I. IDM 221: Web Authoring I 1 IDM 221 Web Design I IDM 221: Web Authoring I 1 Week 5 IDM 221: Web Authoring I 2 Working With Text IDM 221: Web Authoring I 3 Special Characters IDM 221: Web Authoring I 4 > < & IDM 221: Web Authoring

More information

HTML TUTORIAL ONE. Understanding What XHTML is Not

HTML TUTORIAL ONE. Understanding What XHTML is Not HTML TUTORIAL ONE Defining Blended HTML, XHTML and CSS HTML: o Language used to create Web pages o Create code to describe structure of a Web page XHTM: o Variation of HTML o More strictly defines how

More information

Internet Programming 1 ITG 212 / A

Internet Programming 1 ITG 212 / A Internet Programming 1 ITG 212 / A Lecture 10: Cascading Style Sheets Page Layout Part 2 1 1 The CSS Box Model top margin top border top padding left margin left border left padding Content right padding

More information

Introduction to CSS. Fijihosting.com Introduction to CSS page 1. What are style sheets? Lovely! How do I use them?

Introduction to CSS. Fijihosting.com Introduction to CSS page 1. What are style sheets? Lovely! How do I use them? Introduction to CSS Style sheets (or to give them their full title, cascading style sheets or CSS) are becoming more and more common on the Web. They were first introduced in a limited form to Internet

More information

CSS Box Model. Cascading Style Sheets

CSS Box Model. Cascading Style Sheets CSS Box Model Cascading Style Sheets CSS box model Background Width & height Margins & padding Borders Centering content Changing display type (block vs. inline) The Box Model Background Properties Property

More information

GoSquared Equally Rounded Corners Equally Rounded Corners -webkit-border-radius -moz-border-radius border-radius Box Shadow Box Shadow -webkit-box-shadow x-offset, y-offset, blur, color Webkit Firefox

More information

CSS. Primer. Developer Guide [Part 4]

CSS. Primer. Developer Guide [Part 4] 2017 Primer Part 4 is a primer on. It cannot cover all topics or all situations. It will give you a good start on learning about styles and how they work. Consider this a springboard to continue learning.

More information

CSS3 Basics. From & CSS Visual Dictionary Learning Curve Books, LLC

CSS3 Basics. From   & CSS Visual Dictionary Learning Curve Books, LLC CSS3 Basics From www.w3schools.com & CSS Visual Dictionary Learning Curve Books, LLC CSS Box Model Margin (top, right, bottom, left) Shorthand property, equivalent to Border-width border-style border-color

More information

Client-Side Web Technologies. CSS Part II

Client-Side Web Technologies. CSS Part II Client-Side Web Technologies CSS Part II Topics Box model and related properties Visual formatting model and related properties The CSS Box Model Describes the rectangular boxes generated for elements

More information

Lecture 10. CSS Properties. Mr. Mubashir Ali Lecturer (Dept. of Computer Science)

Lecture 10. CSS Properties. Mr. Mubashir Ali Lecturer (Dept. of Computer Science) Lecture 10 CSS Properties Mr. Mubashir Ali Lecturer (Dept. of dr.mubashirali1@gmail.com 1 Summary of the previous lecture CSS basics CSS writing option CSS rules Id,s and Classes 2 Outline Font properties

More information

2. Write style rules for how you d like certain elements to look.

2. Write style rules for how you d like certain elements to look. CSS for presentation Cascading Style Sheet Orientation CSS Cascading Style Sheet is a language that allows the user to change the appearance or presentation of elements on the page: the size, style, and

More information

CMPT 165 INTRODUCTION TO THE INTERNET AND THE WORLD WIDE WEB

CMPT 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 information

ID1354 Internet Applications

ID1354 Internet Applications ID1354 Internet Applications CSS Leif Lindbäck, Nima Dokoohaki leifl@kth.se, nimad@kth.se SCS/ICT/KTH What is CSS? - Cascading Style Sheets, CSS provide the means to control and change presentation of

More information

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148

Index. alt, 38, 57 class, 86, 88, 101, 107 href, 24, 51, 57 id, 86 88, 98 overview, 37. src, 37, 57. backend, WordPress, 146, 148 Index Numbers & Symbols (angle brackets), in HTML, 47 : (colon), in CSS, 96 {} (curly brackets), in CSS, 75, 96. (dot), in CSS, 89, 102 # (hash mark), in CSS, 87 88, 99 % (percent) font size, in CSS,

More information

2005 WebGUI Users Conference

2005 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

Page Layout. 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning

Page Layout. 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning Page Layout contents of this presentation are Copyright 2009 Marty Stepp and Jessica Miller 4.1 Styling Page Sections 4.2 Introduction to Layout 4.3 Floating Elements 4.4 Sizing and Positioning 2 1 4.1

More information

TAG STYLE SELECTORS. div Think of this as a box that contains things, such as text or images. It can also just be a

TAG STYLE SELECTORS. div Think of this as a box that contains things, such as text or images. It can also just be a > > > > CSS Box Model Think of this as a box that contains things, such as text or images. It can also just be a box, that has a border or not. You don't have to use a, you can apply the box model to any

More information

escuela técnica superior de ingeniería informática

escuela técnica superior de ingeniería informática Tiempo: 2h escuela técnica superior de ingeniería informática Previous versions: David Benavides and Amador Durán Toro (noviembre 2006) Manuel Resinas (october 2007) Last revision:pablo Fernandez, Cambios

More information

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>

>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 1 functions.php file Copy the following code and paste it at the end of your themes function custom_style_sheet() { wp_enqueue_style( 'custom-styling',

More information

INFS 2150 Introduction to Web Development

INFS 2150 Introduction to Web Development Objectives INFS 2150 Introduction to Web Development 3. Page Layout Design Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout

More information

INFS 2150 Introduction to Web Development

INFS 2150 Introduction to Web Development INFS 2150 Introduction to Web Development 3. Page Layout Design Objectives Create a reset style sheet Explore page layout designs Center a block element Create a floating element Clear a floating layout

More information

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1

Make a Website. A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Make a Website A complex guide to building a website through continuing the fundamentals of HTML & CSS. Created by Michael Parekh 1 Overview Course outcome: You'll build four simple websites using web

More information

CSS: Cascading Style Sheets

CSS: Cascading Style Sheets What are Style Sheets CSS: Cascading Style Sheets Representation and Management of Data on the Internet, CS Department, Hebrew University, 2007 A style sheet is a mechanism that allows to specify how HTML

More information

CSS worksheet. JMC 105 Drake University

CSS worksheet. JMC 105 Drake University CSS worksheet JMC 105 Drake University 1. Download the css-site.zip file from the class blog and expand the files. You ll notice that you have an images folder with three images inside and an index.html

More information

Module 2 (VII): CSS [Part 4]

Module 2 (VII): CSS [Part 4] INTERNET & WEB APPLICATION DEVELOPMENT SWE 444 Fall Semester 2008-2009 (081) Module 2 (VII): CSS [Part 4] Dr. El-Sayed El-Alfy Computer Science Department King Fahd University of Petroleum and Minerals

More information

Unit 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 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 information

8a. Cascading Style Sheet

8a. Cascading Style Sheet INFS 2150 Introduction to Web Development 8a. Cascading Style Sheet 1 Objectives Concepts of cascading style sheets (CSS). 3 ways of using CSS: inline styles, embedded styles, and external style sheet.

More information

Introduction to WEB PROGRAMMING

Introduction to WEB PROGRAMMING Introduction to WEB PROGRAMMING Web Languages: Overview HTML CSS JavaScript content structure look & feel transitions/animation s (CSS3) interaction animation server communication Full-Stack Web Frameworks

More information

CSC 443: Web Programming

CSC 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 information

INFORMATICA GENERALE 2014/2015 LINGUAGGI DI MARKUP CSS

INFORMATICA GENERALE 2014/2015 LINGUAGGI DI MARKUP CSS INFORMATICA GENERALE 2014/2015 LINGUAGGI DI MARKUP CSS cristina gena dipartimento di informatica cgena@di.unito.it http://www.di.unito.it/~cgena/ materiale e info sul corso http://www.di.unito.it/~cgena/teaching.html

More information

In the early days of the Web, designers just had the original 91 HTML tags to work with.

In the early days of the Web, designers just had the original 91 HTML tags to work with. Web Design Lesson 4 Cascading Style Sheets In the early days of the Web, designers just had the original 91 HTML tags to work with. Using HTML, they could make headings, paragraphs, and basic text formatting,

More information

Unit 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 Unit 20 - Client Side Customisation of Web Pages Week 2 Lesson 4 The Box Model Last Time Looked at what CSS is Looked at why we will use it Used CSS In-line Embedded (internal style-sheet) External

More information