Applying CSS. There are three ways of applying CSS to HTML:
|
|
|
- Rosamund Watson
- 7 years ago
- Views:
Transcription
1 Basic CSS
2 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: value and most properties can be applied to most HTML tags
3 Applying CSS There are three ways of applying CSS to HTML: Inline Internal External The preferred approach is to have the HTML document be presentation free, and so inline and internal styles should be avoided whenever possible.
4 Inline In-line styles are placed straight into the HTML tags using the style attribute. For example, the following style attribute of the paragraph tag will make the whole paragraph red: <p style="color: red">content</p>
5 Internal Internal styles affect a whole page. The style element is put inside the head of the document, and it specifies all of the styles for the page. The following internal style specification will make all of the paragraphs in the page red and all of the links blue: <head> <title>css Example</title> <style type="text/css">p {color: red;} a {color: blue;}</style> </head>
6 External External styles are used for the whole, multiple-page website. They are put in a separate CSS file and linked to the HTML files.
7 External The external style sheet can look something like this: p {color: red;} a {color: blue;} It doesn t need any special additional syntax Can be written in a text editor like Notepad, and saved as something.css
8 Linking External CSS Once the external style sheet is completed, it can be linked to the HTML document like this: <head> <title>css Example</title> <link rel="stylesheet" type="text/css" href="something.css"> </head>
9 CSS syntax Instead of tags, CSS has selectors. Selectors are the names given to styles in internal and external style sheets. We will focus on HTML selectors, which are simply the names of HTML tags and are used to change the style of a specific tag. For each selector there are properties inside curly brackets, which simply take the form of words such as color, font-weight or background-color. A value is given to the property following a colon and semi-colons separate the properties.
10 Example body {font-size: 12px; color: blue;} This will apply the given values to the font-size and color properties of the body selector. So when this is applied to an HTML document, all text between the body tags (which is all text in the window) will be 12 pixels in size and blue in color.
11 Length values There are many property-specific units for values used in CSS, but there are some general units that are used in a number of properties. em is an element approximately equal to the height of a character (font-size: 2em). px is the unit for pixels (font-size: 12px). pt is the unit for points (font-size: 12pt). % is the unit for percentages (font-size: 50%). Furthermore, cm is for centimeters, mm for millimeters and in for inches.
12 Zero value When a value is zero, you do not need to state a unit. For example, if you want to specify no border, use border: 0.
13 Preferred Units A web page is meant to be flexible. Users should be allowed to view the web page however they like, which includes the font size and the size of the screen. Hence, it is generally accepted that em and % are the best units to use for font sizes, heights and widths rather than px. px leads to non-resizable text in most browsers, and should be used sparingly, for example in border sizes.
14 Colors CSS has 16,777,216 different colors. They can take the form of a name, an rgb (red/green/blue) value or a hex (hexadecimal) code. red Is the same as rgb(255,0,0) Is the same as rgb(100%,0%,0%) Is the same as #ff0000 Is the same as #f00
15 Colors There are many predefined color names, like: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. transparent is also a valid value.
16 Colors The three values in the rgb value range from 0 to 255, 0 being the lowest level, 255 being the highest level. These values can also be expressed as a percentage. Hexadecimal is the base-16 number system. Hex numbers are defined by a hash character (#) and can be three or six digits long. The three-digit version is a compressed version of the six-digit (for example, #f00 becomes #ff0000) The three-digit version is easier to decipher but the sixdigit version gives you more control over the exact color.
17 Colors Colors can be applied using color and backgroundcolor A blue background and yellow text would look like this: h1 {color: yellow; background-color: blue;} Usually, you don t want to use harsh, contrasting colors h1 {color: #ffc; background-color: #009;} is better. You can apply the color and background-color properties to most HTML elements, including body, which will change the colors of the page and everything in it.
18 Text You can alter the size and shape of the text on a web page with the following properties: font-family font-size font-weight font-style text-decoration text-transform
19 font-family This specifies the font, such as Times New Roman, Arial or Verdana. The font you specify must be on the user s computer, so you shouldn t use obscure or fancy fonts. There are some safe fonts (the most commonly used are Arial, Verdana and Times New Roman), but you can specify more than one font, separated by commas. The purpose of this is that if the user does not have the first font you specified, the browser will go through the list until it finds one that it does have. This is useful because different computers can have different fonts installed.
20 font-family For example, font-family: arial, helvetica, will assure that similar fonts are used on PC and Mac (the two fonts look similar, and PCs usually have arial but not helvetica, and Macs usually don t have arial, but have helvetica). If the name of a font is more than one word, it should be put in quotation marks, such as font-family: "Times New Roman".
21 font-size Specifies the size of the font. Headings should not be regular paragraph text in a large font: you should use h1, h2 etc. Likewise, if you want to make regular paragraph text larger, don t use headings: use font-size.
22 font-weight Specifies whether the text is bold or not. Can take values normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900 However, some browsers don t display this. Also, it can get confusing and annoying to have many different font weights, so it s best to stick with only bold and normal. font-weight: bold font-weight: normal
23 font-style Specifies whether the text is italic or not. font-style: italic font-style: normal
24 About font weight and style Instead of font-weight and font-style, you can also use the <strong> and <em> tags in the HTML document. Generally, font-weight and font-style are used for changing a longer piece of text (like a paragraph or the whole page), and <strong> and <em> are used for changing a short piece of text (like a word or phrase).
25 text-decoration Specifies an whether the text is underlined or not. text-decoration: overline places a line above the text text-decoration: line-through puts a line through the text text-decoration: underline underlines the text; this should only be used for links because users generally expect underlined text to be a link The text-decoration property is usually used to decorate links, in particular specifying no underline with textdecoration: none.
26 text-transform Specifies the case of the text. text-transform: capitalize turns the first letter of every word into uppercase. text-transform: uppercase turns everything into uppercase. text-transform: lowercase turns everything into lowercase. text-transform: none makes no transformation.
27 Example body {font-family: arial, helvetica, sans-serif; font-size: 0.8em;} h1 {font-size: 2em;} h2 {font-size: 1.5em;} a {text-decoration: none;} strong {font-style: italic; text-transform: uppercase;}
28 Text spacing The letter-spacing and word-spacing properties are for spacing between letters and words. The value can be a length or normal. The line-height property sets the height of the lines in an element (like a paragraph) without adjusting the size of the font. It can be a length, a percentage, or normal. The text-align property will align the text inside an element to left, right, center or justify. The text-indent property will indent the first line of a paragraph to a given length or percentage. It is more common to separate paragraphs by a blank space than by indentation, since indentation is usually used in print, and rarely in digital media.
29 Example p { letter-spacing: 0.5em; word-spacing: 2em; line-height: 1.5em; text-align: center; }
30 Margins and padding margin and padding are two commonly used properties for spacing-out elements. A margin is the space outside of an element. Padding is the space inside an element.
31 Example If we change the code for h2 to the following, we see that this leaves a one-character-wide space around the header and the header itself is bloated by the three character-wide padding. h2 { font-size: 1.5em; background-color: #ccc; margin: 1em; padding: 3em; }
32 Borders Borders can be applied to most HTML elements. To make a border around an element, use border-style. The values can be solid, dotted, dashed, double, groove, ridge, inset, outset. border-width sets the width of the border, which is usually in pixels. There are also properties for border-top-width, border-right-width, border-bottom-width and borderleft-width. border-color sets the color of the border.
33 Example h2 { border-style: dashed; border-width: 3px; border-left-width: 10px; border-right-width: 10px; border-color: red; } This will make a red dashed border around all HTML secondary headers (h2 s) which is 3 pixels wide on the top and bottom and 10 pixels wide on the left and right (these override the 3 pixel wide width of the entire border).
{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:
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
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?
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
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
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
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,
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...
Simply download Beepip from http://beepip.com and run the file when it arrives at your computer.
Beepip User Guide How To's: How do I install Beepip? Simply download Beepip from http://beepip.com and run the file when it arrives at your computer. How do I set up Beepip? Once you've opened up Beepip,
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
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
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
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
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
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
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
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
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
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
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
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
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
Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define:
Stylesheet or in-line CSS CSS attributes, used in stylesheets or in-line, can define: body, div, p, h1 - h6, hr, table, thead, tr, th, td, blockquote, address, ol, ul, dl, dt, dd span, a, font class e.g..stylename
Colgate University Website Content Style Guide
University Website Content Style Guide Website Color Palette Maroon #862633 Dark Orange #e7810b Blue #365777 Gray #58595b Light Orange* #e39615 NOTE: No other colors are to be used within colgate.edu.
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
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
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,
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
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
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
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
HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout
CALIFORNIA STATE UNIVERSITY, LOS ANGELES INFORMATION TECHNOLOGY SERVICES HTML5 and CSS3 Part 1: Using HTML and CSS to Create a Website Layout Fall 2011, Version 1.0 Table of Contents Introduction...3 Downloading
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
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
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
Page layout & typography. graphic design
Page layout & typography graphic design first impressions lecture goals To help you better communicate the purpose of your web pages by visually emphasizing the most important features and relationships
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,
LEAGUE OF WOMEN VOTERS NAME & LOGO GUIDELINES
Updated 3/15/2013 4:07 PM LEAGUE OF WOMEN VOTERS NAME & LOGO GUIDELINES The League of Women Voters logo, like our name, is our identity. It conveys the full collective power of the LWV mission to the public,
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
customer community Getting started Visual Editor Guide! www.pure360community.co.uk
Getting started! 1 Contents Introduction... 3 Visual Editor Options... 3-5 Advanced Tips... 6-7 Do s and Don ts... 7-9 Testing Messages... 10 2 Welcome The Visual Editor tool is the ideal resource for
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
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
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
Coding Standards for Web Development
DotNetDaily.net Coding Standards for Web Development This document was downloaded from http://www.dotnetdaily.net/ You are permitted to use and distribute this document for any noncommercial purpose as
Cascading Style Sheets
Cascading Style Sheets 20 novembre 2000 Introduction = CSS syntax = Browsers = XML Conversion Tools = Document Storage Systems = DTD Development Tools Introduction CSS2 is a style sheet language that allows
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
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
How To Create A Web Page On A Windows 7.1.1 (For Free) With A Notepad) On A Macintosh (For A Freebie) Or Macintosh Web Browser (For Cheap) On Your Computer Or Macbook (
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
CS134 Web Site Design & Development. Quiz1
CS134 Web Site Design & Development Quiz1 Name: Score: Email: I Multiple Choice Questions (2 points each, total 20 points) 1. Which of the following is an example of an IP address? [Answer: d] a. www.whitehouse.gov
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
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
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
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
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
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
Web Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05
Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.03.05 Layout Page banner, sidebar, main content, footer Old method: Use , , New method: and "float" CSS property Think
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
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
Graphic Design Basics. Shannon B. Neely. Pacific Northwest National Laboratory Graphics and Multimedia Design Group
Graphic Design Basics Shannon B. Neely Pacific Northwest National Laboratory Graphics and Multimedia Design Group The Design Grid What is a Design Grid? A series of horizontal and vertical lines that evenly
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
Responsive Email Design
Responsive Email Design For the Hospitality Industry By Arek Klauza, Linda Tran & Carrie Messmore February 2013 Responsive Email Design There has been a lot of chatter in recent months in regards to Responsive
Intro to Web Design. ACM Webmonkeys @ UIUC
Intro to Web Design ACM Webmonkeys @ UIUC How do websites work? Note that a similar procedure is used to load images, etc. What is HTML? An HTML file is just a plain text file. You can write all your HTML
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
Cascading Style Sheets (CSS)
6 Cascading Style Sheets (CSS) Objectives To control the appearance of a Web site by creating style sheets. To use a style sheet to give all the pages of a Web site the same look and feel. To use the class
Eloqua Email 101. What is this and why should I read it?
DR Who? Definitive Results is a boutique marketing consulting firm based out of Leesburg, Virginia that specializes in helping Marketers accelerate their efforts using the technologies available to them
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
Style Guide Provided courtesy of Innovative Emergency Management Inc.
Style Guide 1. Introduction Louisiana.gov is an enterprise approach for state agencies to work together to provide citizen-centric digital government services and information. Key to achieving this goal
Creating the Surf Shop website Part3 REVISED
Creating the Surf Shop website Part3 REVISED Part 2 Recap: You should have the navigation completed for the website before starting Part 3. 1)Create a new DIV in index.html. It should come after banner
Tips and tricks with Text boxes in Mahara
Tips and tricks with Text boxes in Mahara This tutorial assumes that you know how to drag a Text box block down to your page content area. Contents 1. The parts of a Text box... 2 2. What each of the buttons
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
Joomla Article Advanced Topics: Table Layouts
Joomla Article Advanced Topics: Table Layouts An HTML Table allows you to arrange data text, images, links, etc., into rows and columns of cells. If you are familiar with spreadsheets, you will understand
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
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
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
ODS for PRINT, REPORT and TABULATE
Paper 3-26 ODS for PRINT, REPORT and TABULATE Lauren Haworth, Genentech, Inc., San Francisco ABSTRACT For most procedures in the SAS system, the only way to change the appearance of the output is to change
GUIDE: How to fill out the Excel spreadsheet Introduction There is a total of 31 fields Purpose of this guide General Notes: Very important:
Complete E Commerce Solutions GUIDE: How to fill out the Excel spreadsheet Please make sure to read this entire document, otherwise you will not fill out the spreadsheet correctly. Introduction The most
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
Cascading Style Sheets
Cascading Style Sheets DESIGNING FOR THE WEB Third Edition SAMPLE DOCUMENT Cascading Style Sheets DESIGNING FOR THE WEB Third Edition Cascading Style Sheets DESIGNING FOR THE WEB Third Edition Håkon
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...
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
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
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
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
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
Microsoft Word 2010 Basics
Microsoft Word 2010 Basics 1. Start Word if the Word 2007 icon is not on the desktop: a. Click Start>Programs>Microsoft Office>Microsoft Word 2007 b. The Ribbon- seen across the top of Microsoft Word.
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
Print all 18 Chapters - CSS Basics
Or you can also use the @import method as shown below Print all 18 Chapters - CSS Basics CSS Basics.com Chapter: 1 - Introduction to CSS A CSS (cascading style sheet) file allows you to separate your web
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
Using Adobe Dreamweaver CS4 (10.0)
Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called
How to Manage Your Eservice Center Knowledge Base
Populating and Maintaining your eservice Center Knowledge Base Table of Contents Populating and Maintaining the eservice Center Knowledge Base...2 Key Terms...2 Setting up the Knowledge Base...3 Consider
Making Responsive Emails
Making Responsive Emails Who Am I? Justine Jordan Wearer of Many Hats, Litmus @meladorri @litmusapp #CSSsummit litmus.com/lp/csssummit Sample HTML, slides, templates, frameworks, and other goodies. Disclaimer:
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
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
COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING
COMMONWEALTH OF PENNSYLVANIA DEPARTMENT S OF Human Services, INSURANCE, AND AGING INFORMATION TECHNOLOGY GUIDELINE Name Of Guideline: Domain: Application Date Issued: 03/18/2014 Date Revised: 02/17/2016
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
How to craft a modern, mobile-optimized HTML email template. Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012
How to craft a modern, mobile-optimized HTML email template Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012 Our old email template Pros Simple Lightweight Worked as plain-text Rendered OK
When older typesetting methods gave
Typographic Terms When older typesetting methods gave way to electronic publishing, certain traditional terms got carried along. Today we use a mix of old and new terminology to describe typography. Alignment
New Perspectives on Creating Web Pages with HTML. Considerations for Text and Graphical Tables. A Graphical Table. Using Fixed-Width Fonts
A Text Table New Perspectives on Creating Web Pages with HTML This figure shows a text table. Tutorial 4: Designing a Web Page with Tables 1 2 A Graphical Table Considerations for Text and Graphical Tables
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
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.