CSS Tutorial. By Lily Olson

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "CSS Tutorial. By Lily Olson"

Transcription

1 CSS Tutorial By Lily Olson

2 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 a. How Do I Use CSS? i. Internal ii. External iii. Inline b. Syntax c. Tag, Id, Class, and Universal Selector 3. Styling your Webpages a. Fonts b. Text c. Backgrounds 4. Going Further a. Possibilities of CSS b. Selected Resources 5. Bibliography

3 3 Before You Begin Before beginning this tutorial, it is important to have knowledge of both HTML and XHTML. Don t know HTML and XHTML yet? W3schools.com provides great tutorials that will get you started. Follow the links below to find tutorials on HTML and XHTML. HTML XHTML The Basics What is CSS? CSS stands for Cascading Style Sheets. It is used within HTML webpages to help visually design and enhance the look and feel of the website. Why Use CSS? Though HTML and XHTML are great for adding content and setting up the structure of your website, they do not provide a great way to visually design your website. HTML is simply a way of carring content, where as CSS helps you to display that content in an aesthetically pleasing manor. CSS provides ways to design your website visually. CSS allows you to add borders, font colors, and add backgrounds in addition to many more visual features. Better yet, CSS allows you to create one file that dictates the design of your entire site. This way, changes can be made to your CSS file, without having to update each page individually. CSS can dramatically change the look and feel of a website. An example below shows two websites with the same content, but with different style sheets.

4 4 Why Should Librarians Learn CSS? It is very important for librarians to have knowledge of CSS. As the web presence of libraries becomes more important, so does the need to have the skills necessary for web design. CSS can help librarians better develop the look and feel of their library websites, blogs, and other online presences. How is CSS Helpful to Libraries? As we continue through the digital age, the online presence of libraries becomes more and more important. Many times, the first place a patron starts, even before entering the physical library, is online. Having a robust web presence for any library is very important for communication between the library and its patrons as well as for informational purposes. Creating a more visually appealing website will not only please patrons, but a better display will also help them better understand information on the library website Getting Started How Do I Use CSS? CSS is placed either within an HTML document, linked to an HTML document, or written within an HTML document itself. The following describes, internal, external and inline CSS. Internal Internal CSS is written within the HTML document. It appears in the HTML document between the head tags. To define your CSS information, place it between style tags. Example: <head> <style type= text/css > H1 {font-size: small; color: #blue;} H2 {font-size: large; color: #00ff99;} </style> </head> External External style sheets, a.css file, is linked from within the HTML document. All of the actual style information is then present in the.css. Example: <head>

5 5 <link rel= stylesheet type= text/css href= style.css > The information contained in the style sheet might read as follows: H1 {font-size: small; color: #blue;} H2 {font-size: large; color: #00ff99;} As shown above, it contains the same information as the internal style sheet, yet does not contain style tags. Because an external CSS file does not include any HTML, the style tags do not need to be present. Inline Inline CSS is written within the HTML of a document. Though it is recommended this method be used sparingly by W3 Schools, it can be performed on occasion. Example: <p style= font-size:small;color:blue >Hello.</p> External, Internal, or Inline: What to Choose? Now that you know more about what types of CSS can be implemented within your webpages, how do you decide which one is right for you? External CSS can be extremely useful when creating a large website. It can be linked to each page of your website and updated from the CSS file. All of the changes made to your CSS will be reflected in all of your pages. This is a fast and efficient way to make changes to your entire website all at once. External CSS also loads faster for your viewers, as your web browser will download the CSS files so it can be quickly accessed from your users cache. Though internal and inline CSS can be used in your websites for easy, visual boost to your HTML, they are not the most efficient way. When updating the visual style of your website, you will need to update the CSS within each HTML page. This makes for added work in the long run. CSS Syntax As with any programing language, CSS uses a very specific syntax. The syntax of CSS has two main parts: The Selector: the HTML element you want to style The Declaration: the style you are giving to the selector. Each declaration contains a property and value.

6 6 Property: the property you are changing Value: what change you are attributing to that property Comments are also often used in CSS to help those viewing the CSS explain code for others who might be viewing the CSS. CSS can also be helpful for the programmer as well as anyone else interested in the code. Comments do not show up on the webpage and are only seen within the code. They also do not effect the code in any way. Example: /*This element defines the HTML element paragraph*/ p {color:black;} /*This is another comment*/ Tag, Id, Class, and Universal Selectors Tag Selectors: Tag selectors are sometimes also called type or element selectors. They allow you to style HTML elements. For example, you can style the <p> tag to create a specific style for every paragraph that appears on your page. Universal Selectors: Want all of a certain element of your webpage to have the same look? You can easily do this with the universal selector. A universal selector is denoted by an asterisk (*). For example, if you wanted all HTML tags on your page to have a font color of purple, you could simply denote: * {font-color: purple;} Id Selectors: Id selectors are used for defining unique elements. Id selectors are defined in your CSS file by using a hash mark, #. For example, you could define an Id selector #navigation. #navigation { font-color: #EC1717} This would make anything identified in your HTML document #navigation, display in the color red. Id selectors are useful because they are unique and will never match more than one element in a document. Class Selectors: Class selectors are used to give elements different looks, without interfering with other tags on the page. For example, if you had many pictures, yet you wanted only

7 7 one to have a border, you could use a class selector. Class selectors are defined using a period, for example.border. This way, only images in your webpage with the class of.border will get a red border, not all images. Id Selector or Class Selector? A tag selector easily lets your control the overall look of any element of your HTML document. But what about when you want more control? Which do you choose Id or Class Selector? Below are some ways to help you decide: - Id Selector o For one unique element o Use when element only appears once on the page (header) - Class Selector o For a group of elements o Use when element appears more than once on the page (photos) Styling Your Webpages Fonts CSS provides many different style elements that can be implemented in your website. Here we will go over a few different properties that can be added and used. The properties in this section are only a select few of the properties that can be used in CSS documents. CSS is a great way for styling the text of your webpage. Styling your font is one great way to style your text. Without styling your font, the font will default to Times. Though Times may be preferred for some websites, usually you will want to determine your own fonts on your website. Within your CSS, you many choose a font-family. A font family provides a list of fonts, where the users browser will read the fonts and choose the first one that is installed on the users computer. font-family: Arial, Helvetica, sans-serif; In the example provided above, the browser will look through the list, and if the user does not have Arial installed on their computer, it will then look for Helvetica, and so forth. If a

8 8 user has neither of those fonts installed on their computer, the browser will choose a sansserif font. An example of a serif font and a sans-serif font is shown below. In addition to choosing the font family of your text there are also many other elements from which to choose. The elements you can assign to font are as follows: - font-family - defines what font-family to use - font-size - defines the size of the text - font-style - generally used to specify italic text - font-variant - allows you to style font in small caps - font-weight allows you to define weight of font (e.g. bold) Below is an example of a CSS document styling fonts: <style type="text/css"> h1{font-family:"times New Roman",Times,serif; font-style:italic; font-size:14px; font-variant:small-caps; } </style> Text In addition to styling the fonts in your webpage, you can also style the text in various ways. CSS has many text properties that can be added. Below are a few of the properties: - color specifies the color of text - direction specifies the writing direction of the text - text-decoration specifies a decoration (e.g. Underline, overline, etc.) - text-align specifies how to align the text (e.g. Center, right, left) There are 3 ways in CSS to define colors: - name the color o example: {color:red); - use RGB o example: {color: rgb(236,23,23); - use hexadecimal color notation o example: {color:#ec1717;

9 9 Each of the examples above, denote the color red. Using either a RGB or HEX value will display your color most accurately on a user s computer. Depending on how you define the value red, different computers will interpret their version of red differently. With programs such as Adobe Photoshop and GIMP, finding an RGB or HEX value is easy. The screen shot below shows where to find values for RGB and HEX values in Adobe Photoshop. Below is an example of a CSS document implementing different text properties: <style type="text/css"> h2{color: rgb(255,220,80); text-decoration:blink; test-align:center; word-spacing:30px; } </style> Backgrounds One of the best ways to enhance your website is to utilize the background property. CSS does a great job using background images in conjunction with its other properties to create stunning imagery for websites. Some of the properties that can be used to style backgrounds are as follows:

10 10 - background-color - background-image - background-repeat - background-position - background-attachment Now let s go over the background properties to see what each one does Background-color Background-color allows you to determine the color of your website s background. Just as in styling text, you are able to pick from a named color, RGB and HEX values. Again, RGB and HEX values will result in the most true and consistent colors across your viewer s computers. An example of background property being used is as follows: body {background color: rgb(255,220,80);} Background-image Background images used in CSS give great flexibility to websites, also. With CSS you are able to determine the body for different parts of your document. For example, you can style the background of the body as shown in the example below: body {background-image: url(images/img.gif); } In this example, the body is using the background img.gif. The url part of the statement above, tells you where to go to retrieve the image. Be mindful that the document path listed for the URL is in relationship to the style sheet, not the HTML page. Background-repeat The background-repeat property defines whether or not you would like a background image to repeat. The background-repeat property accepts four values: repeat, no-repeat, repeat-x, and repeat-y. Repeat and no-repeat are quite simple and tell your image to either repeat or not repeat. Repeat-x will repeat an image horizontally, and repeat-y will repeat an image vertically. Background-position Background-position determines the position of your background image. Working with the values, left, center (horizontal), right, top, center (vertical), and bottom you can position your image any where on the page. body { background-image: url(images/img.gif); background-position: center right; } The example above shows that the image will be placed horizontally in the center and vertically on the right. Using the attributes above, you can place an image anywhere on a page. The diagram below illustrates the different positions a document could be placed.

11 11 Background-attachment Background attachment allows images to remain stationary on a page. For example, when you are on a website, often images will scroll with the page. In order to make your background image stay put, you can use the background-attachment property. The background-attachment property has two values; scroll and fixed and they do just that. Scroll will allow your image to move with the page and fixed will make your image stay in place while the page is moving. Overall, backgrounds give you great flexibility when working with images in CSS. Below are examples of the kind of things that can be done just using backgrounds.

12 12 Going Further Possibilities of CSS This tutorial has covered syntax and basic styling techniques although there are endless possibilities with CSS. This tutorial only scratches the surface of what can be done with CSS. Nevertheless, the properties described in this document can help create more robust and visually engaging web pages. Other more advanced things that can be done with CSS are creating image galleries and using CSS positioning. CSS can also be used for visibility purposes. For example, images can be hidden or shown with the click of a button without any need to reload a page. Further Reading If you want to learn even more about CSS the following are great resources for continued learning. CSS Tutorial. (n.d.). Retrieved October 23, 2011, from Lemay, L., & Colburn, R. (2010). Sams Teach Yourself Web Publishing with HTML and CSS in One Hour a Day: Includes New HTML5 Coverage (6th ed.). Sams. McFarland, D. S. (2009). CSS: The Missing Manual (New edition, Second Edition.). O Reilly Media. Meyer, E. (2010). Smashing CSS: Professional Techniques for Modern Layout (1st ed.). Wiley. Olsson, T., & O Brien, P. (2008). The CSS: The Ultimate Reference (1st ed.). SitePoint. Tittel, E., & Noble, J. (2010). HTML, XHTML & CSS For Dummies (For Dummies (7th ed.). For Dummies. Wyke-Smith, C. (2007). Stylin with CSS: A Designer s Guide (2nd ed.). New Riders Press.

{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

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

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

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

ITNP43: HTML Lecture 4

ITNP43: HTML Lecture 4 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

More information

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

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

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

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

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

C A S C A D I N G S T Y L E S H E E T S :

C A S C A D I N G S T Y L E S H E E T S : C A S C A D I N G S T Y L E S H E E T S : BACKGROUND Background Color To specify a solid background color, use the background-color property. Color values used for the background-color property can be

More information

HTML5 and CSS3 The Future of the Web Programming CSS. Sergio Luján Mora

HTML5 and CSS3 The Future of the Web Programming CSS. Sergio Luján Mora HTML5 and CSS3 The Future of the Web Programming CSS Sergio Luján Mora 1 Content Introduction Linking HTML and CSS Rules, selectors, and properties Text properties Background Links Box model Layout Introduction

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

JJY s Joomla 1.5 Template Design Tutorial:

JJY s Joomla 1.5 Template Design Tutorial: JJY s Joomla 1.5 Template Design Tutorial: Joomla 1.5 templates are relatively simple to construct, once you know a few details on how Joomla manages them. This tutorial assumes that you have a good understanding

More information

Appendix H: Cascading Style Sheets (CSS)

Appendix H: Cascading Style Sheets (CSS) Appendix H: Cascading Style Sheets (CSS) Cascading Style Sheets offer Web designers two key advantages in managing complex Web sites: Separation of content and design. CSS gives developers the best of

More information

Contents. Introduction... 2. Downloading the Data Files... 2

Contents. Introduction... 2. Downloading the Data Files... 2 Creating a Web Page Using HTML Part 3: Multi-page Management and Uploading INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.1 Summer 2009 Contents Introduction... 2 Downloading

More information

Creating Web Pages with Dreamweaver CS 6 and CSS

Creating Web Pages with Dreamweaver CS 6 and CSS Table of Contents Overview... 3 Getting Started... 3 Web Page Creation Tips... 3 Creating a Basic Web Page Exercise... 4 Create a New Page... 4 Using a Table for the Layout... 5 Adding Text... 6 Adding

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

CSS for Page Layout. Key Concepts

CSS for Page Layout. Key Concepts CSS for Page Layout Key Concepts CSS Page Layout Advantages Greater typography control Style is separate from structure Potentially smaller documents Easier site maintenance Increased page layout control

More information

Further web design: Cascading Style Sheets Practical workbook

Further web design: Cascading Style Sheets Practical workbook Further web design: Cascading Style Sheets Practical workbook Aims and Learning Objectives This document gives an introduction to the use of Cascading Style Sheets in HTML. When you have completed these

More information

MCH Strategic Data Best Practices Review

MCH Strategic Data Best Practices Review MCH Strategic Data Best Practices Review Presenters Alex Bardoff Manager, Creative Services abardoff@whatcounts.com Lindsey McFadden Manager, Campaign Production Services lmcfadden@whatcounts.com 2 Creative

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

Garfield Public Schools Fine & Practical Arts Curriculum Web Design

Garfield Public Schools Fine & Practical Arts Curriculum Web Design Garfield Public Schools Fine & Practical Arts Curriculum Web Design (Half-Year) 2.5 Credits Course Description This course provides students with basic knowledge of HTML and CSS to create websites and

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

Code View User s Guide

Code View User s Guide Code View User s Guide 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication

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

GUIDE TO CODE KILLER RESPONSIVE EMAILS

GUIDE TO CODE KILLER RESPONSIVE EMAILS GUIDE TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 Create flawless emails with the proper use of HTML, CSS, and Media Queries. But this is only possible if you keep attention

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

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

CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS

CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS CREATING WEB PAGE WITH NOTEPAD USING HTML AND CSS The following exercises illustrate the process of creating and publishing Web pages with Notepad, which is the plain text editor that ships as part of

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

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

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

Website Builder Overview

Website Builder Overview Website Builder Overview The Website Builder tool gives users the ability to create and manage their own website, which can be used to communicate with students and parents outside of the classroom. Users

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

Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS

Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web

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

Interactive Data Visualization for the Web Scott Murray

Interactive Data Visualization for the Web Scott Murray Interactive Data Visualization for the Web Scott Murray Technology Foundations Web technologies HTML CSS SVG Javascript HTML (Hypertext Markup Language) Used to mark up the content of a web page by adding

More information

Advanced Editor User s Guide

Advanced Editor User s Guide Advanced Editor User s Guide 1601 Trapelo Road Suite 329 Waltham, MA 02451 www.constantcontact.com Constant Contact, Inc. reserves the right to make any changes to the information contained in this publication

More information

ECDL / ICDL Web Editing Syllabus Version 2.0

ECDL / ICDL Web Editing Syllabus Version 2.0 ECDL / ICDL Web Editing Syllabus Version 2.0 Purpose This document details the syllabus for ECDL / ICDL Web Editing. The syllabus describes, through learning outcomes, the knowledge and skills that a candidate

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

DREAMWEAVER CS5.5: USING STYLE SHEETS

DREAMWEAVER CS5.5: USING STYLE SHEETS Medical Library/Department of Information & Communication Sciences WHAT ARE STYLE SHEETS? DREAMWEAVER CS5.5: USING STYLE SHEETS Style sheets are collections of rules that define the styles of a document.

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

LaGuardia Community College 31-10 Thomson Ave, Long Island City, New York 11101 Created by ISMD s Dept. Training Team. Overview

LaGuardia Community College 31-10 Thomson Ave, Long Island City, New York 11101 Created by ISMD s Dept. Training Team. Overview Overview Dreamweaver gives you many options when it comes to setting the properties for your webpages. Within the "Page Properties" dialog box, you can set the appearance of your page, name your page and

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

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

Responsive Web Design: Media Types/Media Queries/Fluid Images

Responsive Web Design: Media Types/Media Queries/Fluid Images HTML Media Types Responsive Web Design: Media Types/Media Queries/Fluid Images Mr Kruyer s list of HTML Media Types to deliver CSS to different devices. Important note: Only the first three are well supported.

More information

Basics of Web Design: HTML5 & CSS Author: Terry Ann Felke-Morris, Ed.D.

Basics of Web Design: HTML5 & CSS Author: Terry Ann Felke-Morris, Ed.D. Chapter 1 Internet and Web Basics The Internet and the Web Web Standards and Accessibility Information on the Web Web Browsers and Web Servers Internet Protocols Uniform Resource Identifiers and Domain

More information

Create Your own Company s Design Theme

Create Your own Company s Design Theme Create Your own Company s Design Theme A simple yet effective approach to custom design theme INTRODUCTION Iron Speed Designer out of the box already gives you a good collection of design themes, up to

More information

Mobile Web Site Style Guide

Mobile Web Site Style Guide YoRk University Mobile Web Site Style Guide Table of Contents This document outlines the graphic standards for the mobile view of my.yorku.ca. It is intended to be used as a guide for all York University

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

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

Google Sites: Site Creation and Home Page Design

Google Sites: Site Creation and Home Page Design Google Sites: Site Creation and Home Page Design This is the second tutorial in the Google Sites series. You should already have your site set up. You should know its URL and your Google Sites Login and

More information

How to Create an HTML Page

How to Create an HTML Page This is a step-by-step guide for creating a sample webpage. Once you have the page set up, you can add and customize your content using the various tags. To work on your webpage, you will need to access

More information

Click on the links below to find the appropriate place in the document

Click on the links below to find the appropriate place in the document Index Click on the links below to find the appropriate place in the document Masthead Masthead is the large line of colour at the top of the Service Manager Screen. The Masthead also includes; The Customer

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

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

Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D

Chapter 7 Page Layout Basics Key Concepts. Copyright 2013 Terry Ann Morris, Ed.D Chapter 7 Page Layout Basics Key Concepts Copyright 2013 Terry Ann Morris, Ed.D 1 Learning Outcomes float fixed positioning relative positioning absolute positioning two-column page layouts vertical navigation

More information

Full report on all 24 clients

Full report on all 24 clients 1 of 6 3/15/2011 11:05 AM Campaign Monitor - Home Features Pricing Customers Resources Support Our Story Blog Sign Up Login Create an Account Tips & Resources Designing and building emails Designing an

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

Base template development guide

Base template development guide Scandiweb Base template development guide General This document from Scandiweb.com contains Magento theme development guides and theme development case study. It will basically cover two topics Magento

More information

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification

Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification W3C Recommendation 07 June 2011, edited in place 12 April 2016 to point to new work This version: http://www.w3.org/tr/2011/rec-css2-20110607

More information

Website Development Komodo Editor and HTML Intro

Website Development Komodo Editor and HTML Intro Website Development Komodo Editor and HTML Intro Introduction In this Assignment we will cover: o Use of the editor that will be used for the Website Development and Javascript Programming sections of

More information

Dreamweaver: Styling and Layout Using CSS

Dreamweaver: Styling and Layout Using CSS Dreamweaver: Styling and Layout Using CSS ii How to Use This Book The Exercises This handbook accompanies the taught sessions for the course. Each section contains a brief overview of a topic for your

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

Using and creating Crosstabs in Crystal Reports Juri Urbainczyk 27.08.2007

Using and creating Crosstabs in Crystal Reports Juri Urbainczyk 27.08.2007 Using and creating Crosstabs in Crystal Reports Juri Urbainczyk 27.08.2007 Using an creating Crosstabs in Crystal Reports... 1 What s a crosstab?... 1 Usage... 2 Working with crosstabs... 2 Creation...

More information

KOMPOZER Web Design Software

KOMPOZER Web Design Software KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web

More information

Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades.

Virtual Exhibit 5.0 requires that you have PastPerfect version 5.0 or higher with the MultiMedia and Virtual Exhibit Upgrades. 28 VIRTUAL EXHIBIT Virtual Exhibit (VE) is the instant Web exhibit creation tool for PastPerfect Museum Software. Virtual Exhibit converts selected collection records and images from PastPerfect to HTML

More information

Lesson Review Answers

Lesson Review Answers Lesson Review Answers-1 Lesson Review Answers Lesson 1 Review 1. User-friendly Web page interfaces, such as a pleasing layout and easy navigation, are considered what type of issues? Front-end issues.

More information

Лваполо. Customization

Лваполо. Customization Лваполо Customization Table of contents Introduction to Customization... 1 Main Benefits of Techinline Customization:... 1 Reference Guide... 1 Client Box Setup... 4 Logo... 5 Caption... 5 Caption Style...

More information

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.

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

Getting Started with Google Sites

Getting Started with Google Sites Getting Started with Google Sites Getting Started with Google Sites 1 Background Information Google Sites is an online application that makes creating a team web site as easy as editing a document. With

More information

Dreamweaver Domain 2: Planning Site Design and Page Layout

Dreamweaver Domain 2: Planning Site Design and Page Layout Dreamweaver Domain 2: Planning Site Design and Page Layout Adobe Creative Suite 5 ACA Certification Preparation: Featuring Dreamweaver, Flash, and Photoshop 1 Objectives Identify best practices for designing

More information

HTML, XHTML and CSS for Web Designers & Developers

HTML, XHTML and CSS for Web Designers & Developers HTML, XHTML and CSS for Web Designers & Developers Course ISI-1254 - Five Days - Instructor-led - Hands on Introduction This course will give any web programmer an extra edge of effectiveness on the job.

More information

Website Development. 2 Text. 2.1 Fonts. Terry Marris September 2007. We see how to format text and separate structure from content.

Website Development. 2 Text. 2.1 Fonts. Terry Marris September 2007. We see how to format text and separate structure from content. Terry Marris September 2007 Website Development 2 Text We see how to format text and separate structure from content. 2.1 Fonts Professionally written websites, such as those by Google and Microsoft, use

More information

Web Developer Jr - Newbie Course

Web Developer Jr - Newbie Course Web Developer Jr - Newbie Course Session Course Outline Remarks 1 Introduction to web concepts & view samples of good websites. Understand the characteristics of good website Understand the importance

More information

Basic tutorial for Dreamweaver CS5

Basic tutorial for Dreamweaver CS5 Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to

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

Web Design Standards

Web Design Standards Web Design Standards Contents Roles and Responsibilities... 3 Design Guidelines... 4 Page Layout... 4 Font and Styles... 4 File Types... 5 Page Names... 5 Images... 5 Academic Departments Required Content...

More information

HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk

HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk HTML and CSS Elliot Davies ed37@st-andrews.ac.uk April 10th, 2013 In this talk An introduction to HTML, the language of web development Using HTML to create simple web pages Styling web pages using CSS

More information

Dreamweaver. Introduction to Editing Web Pages

Dreamweaver. Introduction to Editing Web Pages Dreamweaver Introduction to Editing Web Pages WORKSHOP DESCRIPTION... 1 Overview 1 Prerequisites 1 Objectives 1 INTRODUCTION TO DREAMWEAVER... 1 Document Window 3 Toolbar 3 Insert Panel 4 Properties Panel

More information

Version 4.0. Unit 3: Web Design. Computer Science Equity Alliance, 2011. Exploring Computer Science Unit 3: Web Design 102

Version 4.0. Unit 3: Web Design. Computer Science Equity Alliance, 2011. Exploring Computer Science Unit 3: Web Design 102 Unit 3: Web Design Computer Science Equity Alliance, 2011 Exploring Computer Science Unit 3: Web Design 102 Introduction The Web Design unit builds on the concepts presented in the previous units by having

More information

Level 1 - Clients and Markup

Level 1 - Clients and Markup Level 1 - Clients and Markup The design for the email we ll build In this level The skills you ll need to compete Power Moves HTML and CSS Media queries Signature Move Using external resources An HTML

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

CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5

CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 CREATING HORIZONTAL NAVIGATION BAR USING ADOBE DREAMWEAVER CS5 Step 1 - Creating list of links - (5 points) Traditionally, CSS navigation is based on unordered list - . Any navigational bar can be

More information

Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7

Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7 Version 4.0.1 Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7 HOW THE SYSTEM WORKS... 7 THE TWO MAIN HTML EMAIL DESIGN OPTIONS FOR NEWZAPP...

More information

Web layout guidelines for daughter sites of Scotland s Environment

Web layout guidelines for daughter sites of Scotland s Environment Web layout guidelines for daughter sites of Scotland s Environment Current homepage layout of Scotland s Aquaculture and Scotland s Soils (September 2014) Design styles A daughter site of Scotland s Environment

More information

Microsoft Expression Web Quickstart Guide

Microsoft Expression Web Quickstart Guide Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,

More information

FARRIS COM200, T113. COM200: Introduction to Web Page Design FINAL EXAM Review

FARRIS COM200, T113. COM200: Introduction to Web Page Design FINAL EXAM Review COM200: Introduction to Web Page Design FINAL EXAM Review 1. Choose the organization listed below that takes a proactive role in developing recommendations and prototype technologies related to the Web.

More information

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING

EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353

More information

Designing portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development

Designing portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development Designing portal site structure and page layout using IBM Rational Application Developer V7 Part of a series on portal and portlet development By Kenji Uchida Software Engineer IBM Corporation Level: Intermediate

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

Cascading Style Sheets Written by: Steven D. Anderson, Ph.D.

Cascading Style Sheets Written by: Steven D. Anderson, Ph.D. Cascading Style Sheets Written by: Steven D. Anderson, Ph.D. Resources WestCIV Complete Style Guide: http://www.westciv.com/style_master/academy/css_tutorial/index.html Tizag.com: http://www.tizag.com/csst

More information

CSS Template Tutorial. Please take your time to visit http://www.freecss.info

CSS Template Tutorial. Please take your time to visit http://www.freecss.info CSS Template Tutorial Please take your time to visit http://www.freecss.info Table of Contents Step 1 Setting up. page 3 Step 2 Coding the basics.page 5 Step 3 Coding and slicing the header. page 9 Step

More information

Citywide User Experience Design Guidelines: NYC.gov Style Guide. Final 1.2 - Public 11/8/2013

Citywide User Experience Design Guidelines: NYC.gov Style Guide. Final 1.2 - Public 11/8/2013 CITYWIDE GUIDELINES Citywide User Experience Design Guidelines: NYC.gov Style Guide 1.0 Overview Final 1.2 - Public 11/8/2013 City of New York Department of Information Technology and Telecommunications

More information

A Guide to. HTML5 and CSS3

A Guide to. HTML5 and CSS3 A Guide to HTML5 and CSS3 ZENVA 2014 ZENVA is a company that creates high quality training material for developers and entrepreneurs covering the topics of app, game and web development with a strong focus

More information

Chapter 3: The Schoolwires Editor

Chapter 3: The Schoolwires Editor : The Schoolwires Editor By the end of this chapter, you will be able to: Insert and format text. Insert and format images. Insert and format tables. Insert links. Use ActiveBlocks to enhance your pages.

More information