Cascading Style Sheets CS7026
|
|
|
- Caroline Preston
- 7 years ago
- Views:
Transcription
1 Cascading Style Sheets CS7026
2 Applying CSS There are three ways of applying CSS to HTML: Inline Internal External 2
3 Inline Styles Inline styles are put straight into the HTML tags using the style attribute. They look something like this: <p style="color: red">text</p> This will make that specific paragraph red. But remember - the ideal is that the HTML should be a stand-alone, presentation free document, and so inline styles should be avoided wherever possible. 3
4 Internal Styles Internal styles are used for the whole page. Inside the head tags, the style tag surrounds all of the styles for the page. <html> <head><title>css Example</title> <style type="text/css"> p { color: red; a { color: blue; </style>... 4
5 Internal Styles This will make all of the paragraphs in the page red and all of the links blue. Similarly to the inline styles, you should keep the HTML and the CSS files separate, and so we are left with... 5
6 External Styles External styles are used for the whole, multiple-page website. There is a separate CSS file, which will simply look something like this: p { color: red; a { color: blue; 6
7 External Styles If this file is saved as mystyle.css' then it can be linked to in the HTML like this: <html> <head> <title>css Example</title> <link rel="stylesheet" type="text/css href= mystyle.css" />... 7
8 Syntax Whereas HTML has tags, CSS has 'selectors'. Selectors are the names given to styles in internal and external style sheets. Selectors 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 (NOT an 'equal' sign). 8
9 Syntax Each property:value pair is known as a declaration. Semi-colons separate the declarations. Do not leave spaces between the property value and the units! "marginleft:20 px" (instead of "margin-left:20px") will work in IE, but not in Firefox or Opera. 9
10 Syntax body { font-size: 0.8em; color: navy; This will apply the given values to the font-size and color properties to the body selector. So basically, when this is applied to an HTML document, text between the body tags (which is the content of the whole window) will be 0.8 ems in size and navy in colour. 10
11 Lengths and Percentages 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 and it is worth familiarising yourself with these before continuing. 'em' (such as font-size: 2em) is an element approximately equal to the height of a character. 'px' (such as font-size: 12px) is the unit for pixels. 'pt' (such as font-size: 12pt) is the unit for points. '%' (such as font-size: 80%) is the unit for percentages. 11
12 Lengths and Percentages Other units include 'pc' (picas 1/6 of an inch), 'cm' (centimetres), 'mm' (millimetres) and 'in' (inches). When a value is zero, you do not need to state a unit. For example, if you wanted to specify no border, it would be border: 0. 12
13 Lengths and Percentages Note: A web page is not a static, absolute medium. It is meant to be flexible and the user should be allowed to view the web page how they like, which includes the font size AND the size of the screen. Because of this, it is generally accepted that 'em' or '%' are the best units to use for font-sizes, rather than 'px', which leads to non-resizable text in most browsers, and should be used sparingly, for border sizes for example. 13
14 Colours or Colors CSS brings 16,777,216 colours to your disposal. They can take the form of a name, an 'rgb' (red/green/blue) value or a 'hex' code. red Is the same as rgb(255,0,0) Which is the same as rgb(100%,0%,0%) Which is the same as #ff0000 Which is the same as #f00 14
15 Colours There are 17 standard predefined colour names. These are aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. Transparent is also a valid value. The 3 values in the rbg value are from 0 to 255, 0 being the lowest level (e.g. no red), 255 being the highest level (e.g. full red). The values can also be a percentage. Hexadecimal is a base-16 number system. We are generally used to the decimal number system (base- 10, from 0 to 9), but hexadecimal has 16 digits, from 0-9 and a-f. 15
16 Colours The hex number is defined by a hash character (#) and can be three or six digits in length. Basically, the three-digit version is a compressed version of the six-digit (#f00 becomes #ff0000, #c96 becomes #cc9966 etc.). The three-digit version is easier to decipher (the first digit, like the first value in rgb, is red, the second green and the third blue) but the six-digit version gives you more control over the exact colour. 16
17 'color' and 'background-color' Colours can be applied by using color and backgroundcolor (note that this must be the American-English 'color' and not 'colour'). A blue background and yellow text could look like this: h1 { color: yellow; background-color: blue; These colours might be a little too harsh, so you could change the code of your CSS file for slightly different shades: 17
18 'color' and 'background-color' body { font-size: 0.8em; color: navy; h1 { color: #ffc; background-color: #009; You can apply the color and background-color properties to most HTML elements, including body, which will change the colours of the page and everything in it. 18
19 Text You can alter the size and shape of the text on a web page with a range of properties, outlined below: font-family font-size font-weight font-style text-decoration text-transform Text Spacing 19
20 font-family This is the font itself, such as 'Times New Roman', 'Arial' or 'Verdana'. The font you specify must be on the user's computer, so there is little point in using obscure fonts. There are a select few '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 it does have. This is useful because different computers sometimes have different fonts installed. 20
21 font-family So font-family: arial, helvetica, for example, is used so that similar fonts are used on PC (which usually has arial, but not helvetica) and Mac (which may not have arial, and so helvetica, which it does normally have, will be used). Note: if the name of a font is more than one word, it should be put in quotation marks, such as fontfamily: "Times New Roman". 21
22 font-size The size of the font. Be careful with this - text such as headings should not just be a paragraph in a large font; you should still use headings (h1, h2 etc.) even though, in practice, you could make the font-size of a paragraph larger than that of a heading (not recommended for sensible people). 22
23 font-weight This states whether the text is bold or not. The most common values are font-weight: bold or font-weight: normal. In theory it can also be bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800 or 900, but some browsers aren t so sure about this malarkey so it's safer to stick with bold and normal. 23
24 font-style This states whether the text is italic or not. It can be font-style: italic or font-style: normal. 24
25 text-decoration This states whether the text is underlined or not. This can be: text-decoration: overline, which places a line above the text. text-decoration: line-through, strike-through, which puts a line through the text. text-decoration: underline SHOULD ONLY BE USED FOR LINKS because users generally expect underlined text to be links. This property is usually used to decorate links, such as specifying no underline with text-decoration: none. 25
26 text-transform This will change 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 I'll leave for you to work out. 26
27 Text body { font-family: arial, helvetica, 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; 27
28 Text Spacing The letter-spacing and word-spacing properties are for spacing between letters or words. The value can be a length or normal. The line-height property sets the height of the lines in an element, such as a paragraph, without adjusting the size of the font. It can be a length, a percentage or normal. 28
29 Text Spacing 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. This is a format usually used in print, and rarely in digital media such as the web. 29
30 Text Spacing p { letter-spacing: 0.5em; word-spacing: 2em; line-height: 1.5em; text-align: center; 30
31 Margins and Padding margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element. h2 { font-size: 1.5em; background-color: #ccc; margin: 1em; padding: 3em; 31
32 Margins and Padding You will see that this leaves one-character width space around the secondary header and the header itself is fat from the three-character width padding. The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left are the selfexplanatory properties you can use. 32
33 The Box Model Margins, padding and borders (later) are all part of what's known as the Box Model. in the middle you have the element box (let's say an image), surrounding that you have the padding box, surrounding that you have the border box and surrounding that you have the margin box. It can be visually represented like this: The box model can be applied to every element on the page. 33
34 Borders Borders can be applied to most HTML elements within the body. To make a border around an element, all you need is border-style. The values can be solid, dotted, dashed, double, groove, ridge, inset and outset. border-width sets the width of the border, which is usually in pixels. There are also properties for bordertop-width, border-right-width, borderbottom-width and border-left-width. Finally, border-color sets the colour. 34
35 Borders 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 (the h2 element) that is 3 pixels wide on the top and bottom and 10 pixels wide on the left and right (these having over-ridden the 3 pixel wide width of the entire border). 35
36 Putting It All Together You should download the HTML file cssintro.htm and add the line linking the HTML file to the CSS file. <link rel="stylesheet" type="text/css href= mystyle.css" />... The code that follows covers all of the CSS methods in this lecture. If you copy and paste this into notepad and save it as your CSS file and look at the HTML file then you should now understand what each CSS property does and how to apply them. The best way to fully understand all of this is to mess around with the HTML and the CSS files and see what happens when you change things. 36
37 CSS Code body { font-family: arial, helvetica, sans-serif; font-size: 80%; color: black; background-color: #ffc; margin: 1em; padding: 0; /* By the way, this is a comment */ p { line-height: 1.5em; 37
38 CSS Code (cont.) h1 { color: #ffc; background-color: #900; font-size: 2em; margin: 0; margin-bottom: 0.5em; padding: 0.25em; font-style: italic; text-align: center; letter-spacing: 0.5em; border-bottom-style: solid; border-bottom-width: 0.5em; border-bottom-color: #c00; 38
39 CSS Code (cont.) h2 { color: white; background-color: #090; font-size: 1.5em; margin: 0; padding: 0.1em; padding-left: 1em; h3 { color: #999; font-size: 1.25em; 39
40 CSS Code (cont.) img { border-style: dashed; border-width: 2px; border-color: #ccc; a { text-decoration: none; strong { font-style: italic; text-transform: uppercase; 40
41 CSS Code (cont.) li { color: #900; font-style: italic; table { background-color: #ccc; 41
42 Lab Exercise Go and add some style to your table. Play with font, colours, borders, etc 42
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
{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:
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?
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,
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
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
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
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
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
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 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
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,
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
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...
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
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
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
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 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
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,
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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,
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
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
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
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
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
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
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
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.
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
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,
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Introduction to Web Development
Introduction to Web Development Week 2 - HTML, CSS and PHP Dr. Paul Talaga 487 Rhodes paul.talaga@uc.edu ACM Lecture Series University of Cincinnati, OH October 16, 2012 1 / 1 HTML Syntax For Example:
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
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
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
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.
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.
Web publishing: An introduction to CSS
Web publishing: An introduction to CSS 1 1 How to Use this User Guide 1.1. The Exercises This handbook accompanies the taught sessions for the course. Each section contains a brief overview of a topic
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
Table of Contents Find out more about NewZapp
Table of Contents Why is email display an issue in email marketing?... 2 Expert Email Design... 3 Desktop PC and Apple Mac email applications... 4 Web and mobile device email readers... 5 Creating your
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
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
Web Design for Programmers. Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission
Web Design for Programmers Brian Hogan NAPCS Slides and content 2008 Brian P. Hogan Do not reproduce in any form without permission Quick Disclaimers This is a crash course! Many topics are simplified
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
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
Chapter 1. Introduction to web development
Chapter 1 Introduction to web development HTML, XHTML, and CSS, C1 2010, Mike Murach & Associates, Inc. Slide 1 Objectives Applied 1. Load a web page from the Internet or an intranet into a web browser.
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
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
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
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
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:
Wykład 2_2 TINT. Kaskadowe arkusze stylu Tabele, zastosowanie znaczników div. Zofia Kruczkiewicz
Wykład 2_2 TINT Kaskadowe arkusze stylu Tabele, zastosowanie znaczników div Zofia Kruczkiewicz 1. Zewnętrzne arkusze stylów dla tabel i tła 1.1. Kod html strony www z p. 1 stosujący zewnętrzne arkusze
8 STEPS TO CODE KILLER RESPONSIVE EMAILS
8 STEPS TO CODE KILLER RESPONSIVE EMAILS THAT WILL MAKE YOUR EMAILS BEAUTIFUL 3 BUILD RESPONSIVE EMAIL STEP BY STEP Steps to create a simple responsive email template. (fluid image, main content, two
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
USD WEB SERVICES ADOBE DREAMWEAVER CSS DEVELOPMENT
WEB SERVICES ADOBE DREAMWEAVER CSS DEVELOPMENT INFORMATION TECHNOLOGY SERVICES UNIVERSITY OF SAN DIEGO DEVELOPED BY JOY BRUNETTI BRUNETTI@SANDIEGO.EDU X8772 APRIL 2006 TABLE OF CONTENTS DREAMWEAVER CSS
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
C:\wamp\www\webdok\07bootstrap\bootstrap-3.2.0-dist\css\bootstrap.css 2. juli 2014 13:18
/*! * Bootstrap v3.2.0 (http://getbootstrap.com) * Copyright 2011-2014 Twitter, Inc. * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/license) */ /*! normalize.css v3.0.1 MIT License