ITNP43: HTML Lecture 4

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "ITNP43: HTML Lecture 4"

Transcription

1 ITNP43: HTML Lecture 4 1 Style versus Content HTML purists insist that style should be separate from content and structure HTML was only designed to specify the structure and content of a document Style (how things look) is left up to software that displays HTML documents - web browsers 2 1

2 Structure and Content Structure headings paragraphs lists tables Content text images <html> <head> <title>my First Web Page</title> </head> <body> <p> Hello world. </p> <p> It is a <em>wonderful</em> day, today! </p> </body> </html> 3 Style and HTML But web page designers wish to have control over how things look Fonts, colours Page layout So HTML does include tags and attributes to specify some aspects of style <i>, <b> <font color= # > (deprecated) 4 2

3 Style Sheets We might wish to specify style separately from content and structure in a style sheet give page designer full control over style A style sheet specifies the style of page elements e.g. I want all my headings in red One style sheet may serve for many different pages 5 Cascading Style Sheets (CSS) HTML style sheets are known as cascading style sheets Reasonable support by latest browsers Revision CSS 2.1 widely used (Parts of) CSS 3 implemented Cascade refers to the fact that a hierarchy of style information may be specified (details later) Style information may be in the HTML file itself or in a separate file Style sheets consist of rules for specifying how page elements should be displayed 6 3

4 CSS Zen Garden Example See for an exercise in CSS styling. 7 Style Rules Style rules consist of: selector { property p : value } declaration Selector identifies element(s) to be affected e.g. h1, p Declaration specifies particular style instructions for the element e.g. colour, font 8 4

5 Contextual Selectors Style attributes can be specified according to their context, e.g. we may specify that emphasized text should be red: em { color: red; } an overriding rule can specify that any emphasized text in a list item should be green: li em { color: green; } 9 CLASS Selectors class selectors are used to specify different possible styles for single elements class example: h1 { color: green; } h1.important { color: red; } <h1 class= important >Attention!</h1> Can be non-tag specific (note the dot):.important t { color: red; } <h1 class= important >Attention!</h1> <p class= important >Red text.</p> 10 5

6 ID Selectors ID selectors are used to specify a style for a particular identified element id example: h1 { color: green; } h1#myhead21 { color: red; } <h1 id= myhead21 >Attention!</h1> Do not really need the element e.g.: #myhead21 { color: red; } 11 Inline styles Adding Styles to HTML style information for individual HTML elements in the HTML document itself styleattribute e.g. <h1 style= color: red >Red Head</h1> Embedded style sheets in HTML <head> External style sheets in a separate file 12 6

7 Inline Styles with Scope <div> and <span> These are HTML tags for delimiting parts of a document that a style will be applied to <div style= color: blue > <h1>my Heading</h1> <p>just some blue text.</p> </div> <p>just some <span style= color: blue >blue text.</span> This sentence is not blue.</p> 13 Embedded Style Sheets <style type= text/css > in header Or in HTML5, just <style> <head> <style> h1 { color: red; } p { font-size: 24pt; font-family: Verdana, sans-serif; } </style> <title>examples of CSS</title> </head> 14 7

8 External Style Sheets Put all style information in a separate file (e.g. mystyles.css) Just your style rules (no need for the <style> tag) h1 { color: red; } p { font-size: 24pt; font-family: Verdana, sans-serif; } HTML document says which external style sheet document(s) it will use maybe more than one details next Linking Style Sheets <link> tag in HTML header <head> <link rel= stylesheet href= mypath/mystyles.css /> </head> relattribute defines linked document s relationship with current document e.g. stylesheet Can have more than one link per document Can have inline, embedded and linked styles in one document 16 8

9 The Cascade More than one style sheet can affect a single document at one time A hierarchy is defined: GENERAL browser default settings user style settings (set in browser) linked external style sheets, in order listed embedded style sheets later rules have precedence over earlier rules inline styles SPECIFIC The specific overrides the general 17 Inheritance This kind of hierarchy applies to HTML tag attributes, as well Style properties are passed down from a parent element to any child element, e.g. colour specifications for text at the <body> level apply to the whole document, except... colour specs for lists are applied to every list item this colour spec would override spec at the body level colour specs could be given for individual list items overriding specs at the list or body levels 18 9

10 Colour Specification By name: 140 named colours in CSS 3 (17 in CSS 2.1) e.g. h1 { color: olive; } By RGB value a variety of ways: { color: #0080FF; } { color: rgb(0,128,255); } { color: rgb(0%, 50%, 100%); } Background and foreground colours: h1 { background-color: silver; color: olive; } 19 Font family: Font Properties Usually specify specific and generic fonts e.g. { font-family: family: Arial, Verdana, sans-serif; serif; } Font size: Absolute e.g. p { font-size: small; } or { font-size: 9pt; } Relative e.g. p { font-size: 0.8em; } or { font-size: 80%; } Relative is best for accessibility Differences in how relative sizes are inherited Font weight and style: E.g p { font-weight: bold; font-style: italic; } 20 10

11 <html> <head> <title>examples of CSS</title> <link rel="stylesheet" type="text/css" href="mystyles.css > <style type="text/css"> h1 { color: green; } h2 { color: maroon; } p { font-size: 18pt; font-family: Arial, sans-serif; } em { background-color: #8000ff; color: white; } li em { background-color: white; color: red; font-weight: bold; } </style> </head> 21 <body> <p class="border">this gives you a basic idea of how to use style sheets and how they "cascade". There are a great many elements of style that can be specified with style sheets. Niederst's Web Design in a Nutshell mystyles.css is a good place to start to learn more about h1 { color: red; } what you can do.</p> p { font-size: 24pt; </body> font-family: Verdana, sans-serif; </html> color: blue; } p.border { color: white; background-color: navy; border-width: medium; border-style: inset; } 22 11

12 Text Properties Text (and inline element) alignment: Indent first line of text e.g. p { text-indent: 20px; } Horizontal alignment e.g. p { text-align: center; } Vertical alignment e.g. p { vertical-align: sub; } <p>just some text <img style= vertical-align: middle src= myimage.jpg alt= nice picture > with an image in the middle.</p> Text spacing: Letter spacing e.g. p { letter-spacing: 8px; } Word spacing e.g. p { word-spacing: 1em; }

13 List Styles Bullets and numbering in lists are set with styles: e.g. ul { list-style-type: square; } eg e.g. ol { list-style-type: style type: upper-alpha; } 25 CSS Information W3C home page for CSS Validation: CSS validation at jigsaw.w3.org/css-validator/ can upload external style sheets or cut-and-paste style rules from embedded sheets Tutorials w3schools com/css/ Predefined style sheets

14 End of Lecture Next lecture: more CSS 27 14

What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure

What is CSS? Official W3C standard for controlling presentation Style sheets rely on underlying markup structure CSS Peter Cho 161A Notes from Jennifer Niederst: Web Design in a Nutshell and Thomas A. Powell: HTML & XHTML, Fourth Edition Based on a tutorials by Prof. Daniel Sauter / Prof. Casey Reas What is CSS?

More information

Outline of CSS: Cascading Style Sheets

Outline of CSS: Cascading Style Sheets Outline of CSS: Cascading Style Sheets nigelbuckner 2014 This is an introduction to CSS showing how styles are written, types of style sheets, CSS selectors, the cascade, grouping styles and how styles

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages

More information

Web Design Revision. AQA AS-Level Computing COMP2. 39 minutes. 39 marks. Page 1 of 17

Web Design Revision. AQA AS-Level Computing COMP2. 39 minutes. 39 marks. Page 1 of 17 Web Design Revision AQA AS-Level Computing COMP2 204 39 minutes 39 marks Page of 7 Q. (a) (i) What does HTML stand for?... () (ii) What does CSS stand for?... () (b) Figure shows a web page that has been

More information

FETAC Certificate in Multimedia Production. IBaT College Swords. FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3

FETAC Certificate in Multimedia Production. IBaT College Swords. FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3 IBaT College Swords FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3 Lecturer: Cara Martin M.Sc. Lecturer contact details: cmartin@ibat.ie IBaT 2009 Page 1 Cascading Style Sheets

More information

Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.

Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia. Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.edu @joegilbert Why Learn the Building Blocks? The idea

More information

Web Design and Databases WD: Class 7: HTML and CSS Part 3

Web Design and Databases WD: Class 7: HTML and CSS Part 3 Web Design and Databases WD: Class 7: HTML and CSS Part 3 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Recap! HTML

More information

{color:blue; font-size: 12px;}

{color:blue; font-size: 12px;} CSS stands for cascading style sheets. Styles define how to display a web page. Styles remove the formatting of a document from the content of the document. There are 3 ways that styles can be applied:

More information

Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design

Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Basics of HTML (some repetition) Cascading Style Sheets (some repetition) Web Design Contents HTML Quiz Design CSS basics CSS examples CV update What, why, who? Before you start to create a site, it s

More information

Cascading Style Sheets CS7026

Cascading Style Sheets CS7026 Cascading Style Sheets CS7026 Applying CSS There are three ways of applying CSS to HTML: Inline Internal External 2 Inline Styles Inline styles are put straight into the HTML tags using the style attribute.

More information

Typography and page layout is better controlled. Font Size Line Spacing Letter Spacing Indents Margins Element Positioning

Typography and page layout is better controlled. Font Size Line Spacing Letter Spacing Indents Margins Element Positioning CSS2 Typography and page layout is better controlled Font Size Line Spacing Letter Spacing Indents Margins Element Positioning Style is separate from structure Text and color formatting can be configured

More information

Applying CSS. There are three ways of applying CSS to HTML:

Applying CSS. There are three ways of applying CSS to HTML: Basic CSS Introduction CSS, or Cascading Styles Sheets are a way to style HTML HTML should be used for the content, and the style sheet for the presentation of your document Styles have a format of property:

More information

Dreamweaver Cascading Style Sheets

Dreamweaver Cascading Style Sheets Dreamweaver Cascading Style Sheets Email: training@ ufl.edu Web Page: http://training.health.ufl.edu 2 This page intentionally left blank. Dreamweaver Cascading Style Sheets What are Cascading Style Sheets?...

More information

Web Design with CSS and CSS3. Dr. Jan Stelovsky

Web Design with CSS and CSS3. Dr. Jan Stelovsky Web Design with CSS and CSS3 Dr. Jan Stelovsky CSS Cascading Style Sheets Separate the formatting from the structure Best practice external CSS in a separate file link to a styles from numerous pages Style

More information

CHAPTER 3: DESIGNING A WEB PAGE WITH CSS CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY)

CHAPTER 3: DESIGNING A WEB PAGE WITH CSS CREATED BY L. ASMA RIKLI (ADAPTED FROM HTML, CSS, AND DYNAMIC HTML BY CAREY) CHAPTER 3: DESIGNING A WEB PAGE WITH CSS OVERVIEW Applying Style to Elements Based on ID and Class Styling Web Page Text Styling Lists Styling Tables Styling Forms Psuedo Classes and Elements APPLYING

More information

Tutorial 3 Designing a Web Page with CSS. HTML and CSS 6 TH EDITION

Tutorial 3 Designing a Web Page with CSS. HTML and CSS 6 TH EDITION Tutorial 3 Designing a Web Page with CSS HTML and CSS 6 TH EDITION Objectives Explore the history and theory of CSS Define a style rule Study style precedence and inheritance Apply color using CSS Explore

More information

Cascading Style Sheets. Overview and Basic use of CSS

Cascading Style Sheets. Overview and Basic use of CSS Cascading Style Sheets Overview and Basic use of CSS What are Style Sheets? A way for web page designers to separate the formatting of a document from the HTML markup A way of centrally managing the styles

More information

Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?

Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML

More information

CSS notes for RoboHelp

CSS notes for RoboHelp In the CSS page The CSS (Cascading Style Sheet) is made up of a list of selectors and their declarations, in this general format: Selector: {Declaration Selector: names the style and defines where to use

More information

HTML5 and CSS3 Design with CSS Page 1

HTML5 and CSS3 Design with CSS Page 1 HTML5 and CSS3 Design with CSS Page 1 1 12 2 3 3 4 45 5 6 6 7 7 HTML5 and CSS3 DESIGN WITH CSS Styles in HTML Documents Styles provide a method of creating consistent formatting of elements throughout

More information

In-class Assignment 2

In-class Assignment 2 In-class Assignment 2 Configuring Color and Text with CSS Over the last few classes we have been learning about Cascading Style Sheet (CSS). Now, we want to take that knowledge and apply it using inline

More information

Agenda. Goal. Applying CSS. Syntax in-line styles. Aniel Bhulai. Inleiding Computergebruik - CSS 1

Agenda. Goal. Applying CSS. Syntax in-line styles. Aniel Bhulai. Inleiding Computergebruik - CSS 1 Agenda Advantages of CSS In-line styles Embedded styles External style sheets Syntax + examples styles Some CSS properties (font, background, color, etc.) 1 2 Goal Give insight in the advantages of CSS.

More information

CSS 101. CSS CODE The code in a style sheet is made up of rules of the following types

CSS 101. CSS CODE The code in a style sheet is made up of rules of the following types CSS 101 WHY CSS? A consistent system was needed to apply stylistic values to HTML elements. What CSS does is provide a way to attach styling like color:red to HTML elements like . It does this by defining

More information

Web Programming 1 Packet #2: Cascading Style Sheets (CSS)

Web Programming 1 Packet #2: Cascading Style Sheets (CSS) Web Programming 1 Packet #2: Cascading Style Sheets (CSS) Name: Objectives: By the completion of this packet, students should be able to understand and use: embedded style sheets for basic document formatting

More information

September 4, 2013 CIS 1151 CLASS LECTURE NOTES

September 4, 2013 CIS 1151 CLASS LECTURE NOTES September 4, 2013 CIS 1151 CLASS LECTURE NOTES Post-Startup Project Updated Web Page and Resources New Assignment Guidelines Updated Course Calendar Updated Project Guidelines Keep to the Code Midterm

More information

Web Design and Development ACS-1809. Chapter 9. Page Structure

Web Design and Development ACS-1809. Chapter 9. Page Structure Web Design and Development ACS-1809 Chapter 9 Page Structure 1 Chapter 9: Page Structure Organize Sections of Text Format Paragraphs and Page Elements 2 Identifying Natural Divisions It is normal for a

More information

CIS 467/602-01: Data Visualization

CIS 467/602-01: Data Visualization CIS 467/602-01: Data Visualization HTML, CSS, SVG, (& JavaScript) Dr. David Koop Assignment 1 Posted on the course web site Due Friday, Feb. 13 Get started soon! Submission information will be posted Useful

More information

Diane s CSS Cheatsheet

Diane s CSS Cheatsheet Diane s CSS Cheatsheet Anatomy of a CSS Rule: selector { property: value; selector { property: value; property: value; property: value; CSS Comment: /* This is a CSS comment */ Inline CSS Styles: The CSS

More information

Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6

Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6 Web Design for Print Designers CSS uses a variety of declarations for styling text. Many use the variations of the font declaration. Other styles are done using different declarations. The font declaration

More information

Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,:

Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: CSS Tutorial Part 2: Last week we talked about creating your own tags: div tags and span tags. A div tag goes around other tags, e.g.,: animals A paragraph about animals goes here

More information

Welcome! Please sit in alternating rows

Welcome! Please sit in alternating rows Welcome! Please sit in alternating rows Day TWO: CSS 101 What are we going to do? Today will be all about CSS: Day one: HTML 101 Introduction to websites HyperText Markup Language (HTML) Making our first

More information

Web Development & Design Foundations with XHTML. Chapter 3 Key Concepts

Web Development & Design Foundations with XHTML. Chapter 3 Key Concepts Web Development & Design Foundations with XHTML Chapter 3 Key Concepts Learning Outcomes In this chapter, you will learn to: Describe the evolution of style sheets from print media to the Web List advantages

More information

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) W3C standard for defining presentation of web documents (way documents are displayed or delivered to users typography, colours, layout etc) Presentation separated from content

More information

HTML TIPS FOR DESIGNING

HTML TIPS FOR DESIGNING This is the first column. Look at me, I m the second column.

More information

html/xhtml + css new media web design

html/xhtml + css new media web design html/xhtml + css new media web design hyper (dynamic + non linear) text (regular old words) markup (tags marking up the words) language (structured method of communication) html 4.1 vs. xhtml 1.0 XHTML

More information

Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 2

Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 2 Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 2 CSS stands for Cascading Style Sheets, these allow you to specify the look and feel of your website. It also helps with consistency.

More information

Web Publishing Basics 2

Web Publishing Basics 2 Web Publishing Basics 2 HTML and CSS Coding Jeff Pankin pankin@mit.edu Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What

More information

Creating a Resume Webpage with

Creating a Resume Webpage with Creating a Resume Webpage with 6 Cascading Style Sheet Code In this chapter, we will learn the following to World Class CAD standards: Using a Storyboard to Create a Resume Webpage Starting a HTML Resume

More information

HTML. Project 8. Creating Style Sheets. Project #8

HTML. Project 8. Creating Style Sheets. Project #8 HTML Project #8 Project 8 Creating Style Sheets Project Objectives Describe the three different types of Cascading Style Sheets Add an embedded style sheet to a Web page Change the margin and link styles

More information

Web Authoring CSS. www.fetac.ie. Module Descriptor

Web Authoring CSS. www.fetac.ie. Module Descriptor The Further Education and Training Awards Council (FETAC) was set up as a statutory body on 11 June 2001 by the Minister for Education and Science. Under the Qualifications (Education & Training) Act,

More information

Web Development 1 A4 Project Description Web Architecture

Web Development 1 A4 Project Description Web Architecture Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:

More information

CASCADING STYLE SHEETS (CSS)

CASCADING STYLE SHEETS (CSS) CASCADING STYLE SHEETS (CSS) Overview 2 Basic CSS CSS Properties More CSS Syntax 3 Basic CSS The good, the bad and the ugly! 4 shashdot. News for nerds!! You will never,

More information

CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28

CSS. CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo. ADI css 1/28 CSS CSS - cascading style sheets CSS - permite separar num documento HTML o conteúdo do estilo ADI css 1/28 Cascaded Style Sheets Por ordem de prioridade: Inline

More information

CST 150 Web Design I CSS Review - In-Class Lab

CST 150 Web Design I CSS Review - In-Class Lab CST 150 Web Design I CSS Review - In-Class Lab The purpose of this lab assignment is to review utilizing Cascading Style Sheets (CSS) to enhance the layout and formatting of web pages. For Parts 1 and

More information

Introduction to Adobe Dreamweaver CC

Introduction to Adobe Dreamweaver CC Introduction to Adobe Dreamweaver CC What is Dreamweaver? Dreamweaver is the program that we will be programming our websites into all semester. We will be slicing our designs out of Fireworks and assembling

More information

CSS Crash Course. ! In-line styles are plonked straight into the HTML tags using the style attribute.! They look something like this:

CSS Crash Course. ! In-line styles are plonked straight into the HTML tags using the style attribute.! They look something like this: CSS Crash Course About This Guide This is a small CSS basics tutorial by David. If you have not read the Getting Started with HTML guide (located under Resources > Documents and Tutorials > Web Design

More information

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements Styles are normally stored in Style Sheets Styles were added to HTML 4.0 to solve a

More information

CAS 111D: CSS Tutorial

CAS 111D: CSS Tutorial CAS 111D: CSS Tutorial Cascading Style Sheets Using CSS allows you to have creative control over the layout and design of your web pages. By using CSS you can create styles that can be used on many different

More information

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL

HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head

More information

COMP519 Web Programming Autumn 2015. Cascading Style Sheets

COMP519 Web Programming Autumn 2015. Cascading Style Sheets COMP519 Web Programming Autumn 2015 Cascading Style Sheets Content vs. Presentation Most HTML tags define content type, independent of how that content is to be presented. There are a few obvious exceptions

More information

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates

Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,

More information

Web Guide. Style Types. Understanding CSS. Tag styles defined in most style sheets to start. What is a rule (style)?

Web Guide. Style Types. Understanding CSS. Tag styles defined in most style sheets to start. What is a rule (style)? Web Guide Understanding CSS Let s say you want to create a headline with certain text formatting. Now, suppose you want to apply those characteristics to many headlines. It would be advantageous to be

More information

Create Webpages using HTML and CSS

Create Webpages using HTML and CSS KS2 Create Webpages using HTML and CSS 1 Contents Learning Objectives... 3 What is HTML and CSS?... 4 The heading can improve Search Engine results... 4 E-safety Webpage... 5 Creating a Webpage... 6 Creating

More information

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CSS - Cascading Style Sheets language Cascading Style Sheets (CSS) is a simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents designed for HTML in 1996

More information

HTML and CSS Session Two

HTML and CSS Session Two HTML and CSS Session Two What We Will Cover Some HTML Review Create and Link a CSS File Let s Review Everyone have file from last session -- first.html? We will quickly make a few more basic html files

More information

CSS Tutorial. By Lily Olson

CSS Tutorial. By Lily Olson CSS Tutorial By Lily Olson 2 Table of Contents 1. The Basics a. What is CSS? b. Why Use CSS? c. CSS in Libraries i. Why should librarians learn CSS? ii. How is CSS helpful for libraries? 2. Getting Started

More information

CSS - Cascading Style Sheets

CSS - Cascading Style Sheets CSS - Cascading Style Sheets From http://www.csstutorial.net/ http://www.w3schools.com/css/default.asp What is CSS? CSS stands for Cascading Style Sheets Styles define how to display HTML elements External

More information

INFORMATICA GENERALE 2015/2016 LINGUAGGI DI MARKUP CSS

INFORMATICA GENERALE 2015/2016 LINGUAGGI DI MARKUP CSS INFORMATICA GENERALE 2015/2016 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

How to Properly Compose E-Mail HTML Code : 1

How to Properly Compose E-Mail HTML Code : 1 How to Properly Compose E-Mail HTML Code : 1 For any successful business, creating and sending great looking e-mail is essential to project a professional image. With the proliferation of numerous e-mail

More information

APPENDIX B: CSS QUICK REFERENCE 1

APPENDIX B: CSS QUICK REFERENCE 1 APPENDIX B: CSS QUICK REFERENCE 1 Style Rules The example below illustrates a typical style rule. The p represents the HTML element . The style rule contains instructions to use the font-family

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

ICE: HTML, CSS, and Validation

ICE: HTML, CSS, and Validation ICE: HTML, CSS, and Validation Formatting a Recipe NAME: Overview Today you will be given an existing HTML page that already has significant content, in this case, a recipe. Your tasks are to: mark it

More information

What is CSS? Comp140

What is CSS? Comp140 What is CSS? Comp140 The problem with HTML Never intended as a design medium HTML 1.0 offered only bold and italic HTML formatting was attempted HTML formatting commands added later up to HTML 3.0 Tricks

More information

cs002 Lab 5 An Introduction to CSS

cs002 Lab 5 An Introduction to CSS Assigned: October 31, 2016 Due: November 11, 2016 Introduction Last week, we started working with HTML, a markup language for describing how content on web pages should be laid out. You may have noticed

More information

Cascading Style Sheet (CSS) Tutorial Using Notepad. Step by step instructions with full color screen shots

Cascading Style Sheet (CSS) Tutorial Using Notepad. Step by step instructions with full color screen shots Updated version September 2015 All Creative Designs Cascading Style Sheet (CSS) Tutorial Using Notepad Step by step instructions with full color screen shots What is (CSS) Cascading Style Sheets and why

More information

CSS Styling Introduction About the Course

CSS Styling Introduction About the Course CSS Styling CSS Styling Introduction About the Course 1. CSS Overview 2. CSS Presentation 3. CSS Display 4. CSS Layout 5. Preprocessors and SASS 6. LESS 2 Table of Contents CSS Overview What is CSS? Styling

More information

WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012)

WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012) WEB DESIGN LAB PART- A HTML LABORATORY MANUAL FOR 3 RD SEM IS AND CS (2011-2012) BY MISS. SAVITHA R LECTURER INFORMATION SCIENCE DEPTATMENT GOVERNMENT POLYTECHNIC GULBARGA FOR ANY FEEDBACK CONTACT TO EMAIL:

More information

Cascading Style Sheets (CSS) 2008 Pearson Education, Inc. All rights reserved.

Cascading Style Sheets (CSS) 2008 Pearson Education, Inc. All rights reserved. 1 Cascading Style Sheets (CSS) 2 Introduction Cascading Style Sheets (CSS) Used to specify the presentation of elements separately from the structure of the document CSS validator jigsaw.w3.org/css-validator/

More information

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com

Essential HTML & CSS for WordPress. Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com Essential HTML & CSS for WordPress Mark Raymond Luminys, Inc. 949-654-3890 mraymond@luminys.com www.luminys.com HTML: Hypertext Markup Language HTML is a specification that defines how pages are created

More information

Using Style Sheets for Consistency

Using Style Sheets for Consistency Cascading Style Sheets enable you to easily maintain a consistent look across all the pages of a web site. In addition, they extend the power of HTML. For example, style sheets permit specifying point

More information

Girls for STEAM. HTML and CSS Course. Class #1 HTML

Girls for STEAM. HTML and CSS Course. Class #1 HTML Girls for STEAM HTML and CSS Course Class #1 HTML Taught by: Katherine Wakefield {WebCodeChicks} webcodechicks.com Tools The Basics: Windows - Notepad Downloads: Google Chrome Browser (Free) - www.google.com/chrome/

More information

CSS Web Designing HTML. The src attribute specifies the URL (web address) of the iframe page.

CSS Web Designing HTML. The src attribute specifies the URL (web address) of the iframe page. HTML Iframes An iframe is used to display a web page within a web page. Iframe Syntax The syntax for adding an iframe is: The src attribute specifies the URL (web address) of

More information

Selectors in Action LESSON 3

Selectors in Action LESSON 3 LESSON 3 Selectors in Action In this lesson, you will learn about the different types of selectors and how to use them. Setting Up the HTML Code Selectors are one of the most important aspects of CSS because

More information

Building Your Website

Building Your Website Building Your Website HTML & CSS This guide is primarily aimed at people building their first web site and those who have tried in the past but struggled with some of the technical terms and processes.

More information

WEBDESIGN WITH CSS. Cascading Style Sheets. Martina Semlak

WEBDESIGN WITH CSS. Cascading Style Sheets. Martina Semlak WEBDESIGN WITH CSS Cascading Style Sheets Martina Semlak What is CSS CSS stands for Cascading Style Sheets Control the design (e.g., fonts, colors, spacing) of multiple websites all at once HTML to structure

More information

Designing HTML Emails for Use in the Advanced Editor

Designing HTML Emails for Use in the Advanced Editor Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into

More information

Introduction to Cascading Style Sheets

Introduction to Cascading Style Sheets Introduction to Cascading Style Sheets

More information

ART 379 Web Design. HTML, XHTML & CSS: Introduction, 1-2

ART 379 Web Design. HTML, XHTML & CSS: Introduction, 1-2 HTML, XHTML & CSS: Introduction, 1-2 History: 90s browsers (netscape & internet explorer) only read their own specific set of html. made designing web pages difficult! (this is why you would see disclaimers

More information

4 CSS for Presentation

4 CSS for Presentation 4 CSS for Presentation 4.1 Cascading Style Sheets Orientation Cascading Style Sheets (CSS) is the W3C standard for defining the presentation of documents written in HTML, XHTML, and, in fact, any XML language.

More information

Advanced Web Design. Zac Van Note. www.design-link.org

Advanced Web Design. Zac Van Note. www.design-link.org Advanced Web Design Zac Van Note www.design-link.org COURSE ID: CP 341F90033T COURSE TITLE: Advanced Web Design COURSE DESCRIPTION: 2/21/04 Sat 9:00:00 AM - 4:00:00 PM 1 day Recommended Text: HTML for

More information

CSS Syntax. What does a typical style sheet look like? What is a CSS file? What does it contain? What does a rule look like? Here's an example:

CSS Syntax. What does a typical style sheet look like? What is a CSS file? What does it contain? What does a rule look like? Here's an example: CSS Syntax What is a CSS file? A CSS file is a plain text file, saved with the extension, ".css". What does it contain? A list of rules, which state how particular elements in an HTML document (web page)

More information

How to code, test, and validate a web page

How to code, test, and validate a web page Chapter 2 How to code, test, and validate a web page Slide 1 Objectives Applied 1. Use a text editor like Aptana Studio 3 to create and edit HTML and CSS files. 2. Test an HTML document that s stored on

More information

Making our HTML Look Nicer Cascading Style Sheets. CSS Already? Internet

Making our HTML Look Nicer Cascading Style Sheets. CSS Already? Internet Making our HTML Look Nicer Cascading Style Sheets Unless otherwise noted, the content of this course material is licensed under a Creative Commons Attribution 3.0 License. http://creativecommons.org/licenses/by/3.0/.

More information

Style & Layout in the web: CSS and Bootstrap

Style & Layout in the web: CSS and Bootstrap Style & Layout in the web: CSS and Bootstrap Ambient intelligence: technology and design Fulvio Corno Politecnico di Torino, 2014/2015 Goal Styling web content Advanced layout in web pages Responsive layouts

More information

FUNDAMENTALS OF WEB DESIGN (46)

FUNDAMENTALS OF WEB DESIGN (46) PAGE 1 OF 10 CONTESTANT ID# Time Rank FUNDAMENTALS OF WEB DESIGN (46) REGIONAL 2012 Section Possible Awarded Objective Questions 75 pts Application 160 pts TOTAL POINTS 235 pts Failure to adhere to any

More information

HTML Syntax Tags, Attributes, Properties, Values and Formatting Notes on HTML

HTML Syntax Tags, Attributes, Properties, Values and Formatting Notes on HTML HTML Syntax Tags, Attributes, Properties, Values and Formatting Notes on HTML HTML is more forgiving of errors or differences in coding. SOME COMMON HTML TAGS AND ATTRIBUTES TAG PURPOSE EXAMPLE For

More information

HTML, CSS, XML, and XSL

HTML, CSS, XML, and XSL APPENDIX C HTML, CSS, XML, and XSL T his appendix is a very brief introduction to two markup languages and their style counterparts. The appendix is intended to give a high-level introduction to these

More information

CHAPTER 10. When you complete this chapter, you will be able to:

CHAPTER 10. When you complete this chapter, you will be able to: Data Tables CHAPTER 10 When you complete this chapter, you will be able to: Use table elements Use table headers and footers Group columns Style table borders Apply padding, margins, and fl oats to tables

More information

Using an external style sheet with Dreamweaver (CS6)

Using an external style sheet with Dreamweaver (CS6) Using an external style sheet with Dreamweaver (CS6) nigelbuckner.com 2012 This handout explains how to create an external style sheet, the purpose of selector types and how to create styles. It does not

More information

Co. Cavan VEC. Programme Module for. Web Authoring. leading to. Level 5 FETAC. Web Authoring 5N1910

Co. Cavan VEC. Programme Module for. Web Authoring. leading to. Level 5 FETAC. Web Authoring 5N1910 Co. Cavan VEC Programme Module for Web Authoring leading to Level 5 FETAC May 2012/June 2012 1 Introduction This programme module may be delivered as a standalone module leading to certification in a FETAC

More information

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)

CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main

More information

Introduction to Cascading Style Sheets

Introduction to Cascading Style Sheets Introduction to Cascading Style Sheets Welcome to the CSS workshop! Before you begin this workshop you should have some basic understanding of HTML and building web pages. What is CSS anyway and what will

More information

Contents. Downloading the Data Files... 2. Centering Page Elements... 6

Contents. Downloading the Data Files... 2. Centering Page Elements... 6 Creating a Web Page Using HTML Part 1: Creating the Basic Structure of the Web Site INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 2.0 Winter 2010 Contents Introduction...

More information

HTML & CSS Brief Introduction and Exercises

HTML & CSS Brief Introduction and Exercises HTML & CSS Brief Introduction and Exercises Chris Sparks HTML and CSS are useful to understand when working on digital editions, since they are very frequently published online, and hence often make use

More information

Gentle Introduction to Web Applications. Part 1: Client Side Episode 2: CSS Kaya Oğuz

Gentle Introduction to Web Applications. Part 1: Client Side Episode 2: CSS Kaya Oğuz Gentle Introduction to Web Applications Part 1: Client Side Episode 2: CSS Kaya Oğuz Mirror mirror on the wall, who is the fairest of Cascading Style Sheets. them all? Define how elements will be rendered.

More information

4 Tags (Required for every Webpage)

4 Tags (Required for every Webpage) HTML 4 Tags (Required for every Webpage) HTML Head (only one thing in the head the title) Title (What appears in the blue bar) Body (Everything

More information

Web Design and Databases WD: Class 5: HTML and CSS Part 2

Web Design and Databases WD: Class 5: HTML and CSS Part 2 Web Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Hmm I need

More information

CASCADING STYLE SHEETS (CSS) Style Sheet Syntax

CASCADING STYLE SHEETS (CSS) Style Sheet Syntax CASCADING STYLE SHEETS (CSS) A newer way to structure HTML documents is through the use of cascading style sheets(css). Cascading Style Sheets allow you to determine how a variety of page elements will

More information

Cascading Style Sheets. An Introduction

Cascading Style Sheets. An Introduction Cascading Style Sheets An Introduction WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION... 1 Why Use CSS? 1 How Do They Cascade? 2 INTERNAL AND EXTERNAL STYLE SHEETS... 2

More information

HTML Recitation Notes

HTML Recitation Notes HTML Recitation Notes Basic Structure of HTML program title of the Page Content of the Page The order in which you open and close the tags is

More information