CSS 2: Layouts. Getting Ready: Downloading Files for this Tutorial. Fixed-Width Layouts

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "CSS 2: Layouts. Getting Ready: Downloading Files for this Tutorial. Fixed-Width Layouts"

Transcription

1 CSS 2: Layouts This lesson will walk you the process of building a fluid layout for a webpage using CSS, based on Tutorial 8 on the Max Design Website - Visit this site to see the whole tutorial and to view other CSS tutorials. Getting Ready: Downloading Files for this Tutorial For this lesson, all you need is a page written in HTML where you can practice writing CSS. You can download practice files at: Right-click on the files needed and choose "Save Link As" to download to your "public_html" folder in EdShare (or any other folder where you want to store your web files). 1. start_index.html 2. catposter_sm.png Fixed-Width Layouts Fixed-width layouts are set to a fixed value (pixels): The wrapper has a fixed width, and all the elements have widths measured in pixels or percentages. The designer has percise control over placement of elements and the width of objects. Therefore, the design of the page will always remain the same no matter the user's screen resolution. Fixed-width layouts are fast and easy to produce, cutting down on time spent on testing and taking multiple resolutions into account. Position and shape of elements are predictable. Centering your design is recommended if you want to avoid excessive white space to the right of the design. "Choosing between a fixed-width layout and another type is a question of how much freedom the designer is willing to give the user. The former entails that design decisions are more in the hands of the designer than the user, while the latter entails that components like fonts, images and columns will scale fluidly according to the user s preferences." - smashingmagazine.com/smashing-book-1/the-art-and-science-of-css-layouts CSS 2: Layouts - 1

2 Fluid/Liquid Layouts Fluid (Liquid) Layouts use percentage values: Elements inside the container are defined in percentages and therefore adjust their size accordingly to the shape of the user's browser window. This style of layout is highly adaptable, making the most of existing real estate in the browser's viewport. Content is then expands or contracts proportionally to fill the space. Understanding relationships between elements is key - width of a child element measured in percentages is determined by the parent element. Elastic Layouts "A pixel is an unscalable dot on a computer screen, whereas an em is a square unit of font size. Font sizes vary, and the em is a relative unit that adjusts to users text-size preferences (Elastic Design, Consequently, designers size fonts in em units relative to the font-size value of their parent elements. By using ems for both layout blocks and text elements, designers are able to make a Web layout scale consistently, maintain optimal line length for the body copy and create realistic zoom effects. The result: when the user increases the font size, the layout stretches automatically, just as you would expect from an elastic object." Sources/Recommended Reading: CSS 2: Layouts - 2

3 CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. 1. Margin - Defines the amount of space to the border of an element from its parent container. 2. The margin does not have a background color, it is completely transparent. 3. Border - A border that goes around the padding and content. The border is affected by the background color of the box 4. Padding - Clears an area around the content. The padding is affected by the background color of the box 5. Content - The content of the box, where text and images appear Sources: w3schools.com/css/css_boxmodel.asp innovativephp.com/css-liquid-layout-tutorial-for-designing-blog-post-page Learn more about the CSS box model and positioning: CSS 2: Layouts - 3

4 Semantically marked up code A div element <div> divides a page into specific content areas, each with a unique ID selector name. The basic building block of the CSS layout is the div - an HTML element that acts as a container for text, images, and other page elements, allowing the designer to use CSS to style each content area. In this example, our page will contain five seperate divs: one large "container" element to hold the four other areas, including a sidebar, a header (located at the top of the page), content, and a footer (located across the bottom of the page). These ID names are commonly used. It's important to remember that when you name your div areas, the names are based on their meaning, rather than their appearance. Add Container <div> First, we need to add the <div> which wraps around the entire page's content to hold all of our subsquent <div> elements together. 1. Highlight all the content in the <body> in code view, but not the tags themselves. In this example, highlight from the <h1> to the closing paragraph tag right before the closing body tag. CSS 2: Layouts - 4

5 2. From the Insert Panel, select the Insert Div Tag button. 3. In the Insert Div Tag dialog box, type container in the ID text box. 5. Click on OK. Follow similar steps to add the header, sidebar, content and footer <div> elements: Add Header <div> 1. Highlight the heading 1 now located after the opening container <div> tag - make sure to select the whole element including the closing tag. 2. From the Insert Panel, select the Insert Div Tag button. 3. In the Insert Div Tag dialog box, type header in the ID text box. 4. Click on OK. Add Sidebar <div> Since we don't have content for our sidebar we will just insert an empty <div> called sidebar. 1. Place your cursor on a new line right after the closing header </div> tag. 2. From the Insert Panel, select the Insert Div Tag button. 3. In the Insert Div Tag dialog box, type sidebar in the ID text box. 4. Click on OK. CSS 2: Layouts - 5

6 Add Content <div> 1. Highlight all the content from below the sidebar <div> to the closing paragraph tag right above the closing container </div> tag. 2. From the Insert Panel, select the Insert Div Tag button. 3. In the Insert Div Tag dialog box, type content in the ID text box. 4. Click on OK. Add Footer <div> 1. Place your cursor on a new line after the content's closing </div> tag and before the container's closing </div> tag. 2. From the Insert Panel, select the Insert Div Tag button. 3. In the Insert Div Tag dialog box, type footer in the ID text box. 4. Click on OK. CSS 2: Layouts - 6

7 New CSS Rule - #container To add width, margin and other styles to the container <div>, we need to declare a new CSS Rule. 1. Click on the New CSS Rule icon in the CSS Styles Panel. 2. In the New CSS Rule dialog box make sure the following settings are set: - Selector Type: choose ID from the drop-down menu. - Selector Name: type container (same as the <div> ID name) - Rule Definition: the stylesheet attached to your HTML document should already be selected. If this is your first CSS rule, choose New Style Sheet File to begin a new external style sheet. 3. Click on OK. CSS 2: Layouts - 7

8 #container - Box Category In the dialog box appears, choose the Box category in the menu to the left. - Width: type 90 for the value then choose % from the drop-down menu. - Margin: uncheck Same for all and type the following values: Top: 10 px (select pixels from the drop down menu) Right: auto Bottom: 10px Left: auto Writing this in code looks like: #container { width: 90%; margin: 10px auto; In this case we will use a width of 90% so the CSS declaration used is: "width: 90%". Any width could be used, including 100%, which would force the content to the left and right edges of the viewport. To center the div in the viewport, we apply "auto" margins to left and right. To move the div away from the top and bottom of the viewport we use a margin of 10px. These can be combined into one shorthand CSS declaration: "margin: 10px auto". This will apply a margin of 10px to the top and bottom and auto margins to the left and right. CSS 2: Layouts - 8

9 #container - Background Category In the Background category, you may specify a background style for this specific <div>. In Background Color: type #FFF or select a color by clicking on the color picker. The CSS code for our container style so far looks like: #container { width: 90%; margin: 10px auto; background-color: #FFF; #container - Border Category In the Border category select the following or similar options: - For Style check Same for all then type Solid - For Width check Same for all then type 1 px (select pixels from the drop down menu) - For Color check Same for all then type #333 or select a color by clicking on the color picker. The CSS code for our container style: #container { width: 90%; margin: 10px auto; background-color: #FFF; border: 1px solid #333; CSS 2: Layouts - 9

10 To preview the changes first click Apply and make additional changes if necessary. Once satisfied with the styles for #container click OK. New CSS Rule - #header 1. Click on the New CSS Rule icon in the CSS Styles Panel. 2. In the New CSS Rule dialog box: - Selector Type: choose ID - Selector Name: type header - Rule Definition: leave your default style sheet selected 3. Click on OK. #header - Background Category In the Background category type #DDD in the Background-color field or select a color by clicking on the color picker. #header - Box Category In the Box category, go to Padding, check Same for all (should be checked by default) and type.5 em (select ems from the drop down menu). CSS 2: Layouts - 10

11 #header - Border Category In the Border category select the following or similar options: - Style: uncheck Same for all then for bottom choose Solid - Width: uncheck Same for all then for bottom type 1 px (select pixels from the drop down menu) - Color: uncheck Same for all then for bottom type #333 or select a color by clicking on the color picker. The CSS code for our header style: #header { padding:.5em; background-color: #ddd; border-bottom: 1px solid gray; Descendant Selectors Inside the top header there is an <h1> element. We want the words to sit.5em in from the top and left edge of the <div>. Browsers add different amounts of padding above an <h1>, so it is easiest to remove all padding and margin from this h1 and let the <div> provide the padding. This is achieved by using a descendant selector - "#header h1 { CSS 2: Layouts - 11

12 padding: 0; margin: 0;". New CSS Rule - #sidebar 1. Click on the New CSS Rule icon in the CSS Styles Panel. 2. In the New CSS Rule dialog box: - Selector Type: choose ID - Selector Name: type sidebar - Rule Definition: leave your default style sheet selected 3. Click on OK. #sidebar - Box Category In the Box category: - Width: type 12 for the value then select em from the drop-down menu - Float: choose left - Padding: type 1 and select em Since the element is floated, a width must be given. Padding creates white space within this <div>. The CSS code for the sidebar: #sidebar { float: left; width: 12em; padding: 1em; CSS 2: Layouts - 12

13 New CSS Rule - #content 1. Click on the New CSS Rule icon in the CSS Styles Panel. 2. In the New CSS Rule dialog box: - Selector Type: choose ID - Selector Name: type content - Rule Definition: leave your default style sheet selected 3. Click on OK. #content - Box Category 1. In the Box category: - Padding: type 1 and select em from the drop-down menu - Margin: uncheck Same for all and type the following values: Right: 10 px Left: 13 em 2. Adding a left border: Borders (and background colors) are useful to visually separate areas of content. 3. Setting a max-width: Standards-compliant browsers will not allow the content area to go wider than the width you specify - keeping the line length comfortable to read no matter how large the screen resolution. The CSS Code for our header style so far looks like (added or changed items in bold): #content { margin-left: 13em; margin-right: 10px; padding: 1em; max-width: 36em; border-left: 1px solid gray; CSS 2: Layouts - 13

14 Removing Top Margins Browsers use different amounts of margin above paragraphs and headings. It is safe to remove all top margins, as long as there are bottom margins to keep the paragraphs and headings separate from elements below them: p {margin: 0 0 1em 0 New CSS Rule - #footer 1. Click on the New CSS Rule icon in the CSS Styles Panel. 2. In the New CSS Rule dialog box: - Selector Type: choose ID - Selector Name: type footer - Rule Definition: leave your default style sheet selected 3. Click on OK. #footer - Box Category To style the footer, we first need to set it to "clear: both" in the Box category. This is critical, as it will force the footer below any floated elements above. For some Padding, enter.5 em. #footer { CSS 2: Layouts - 14

15 clear: both; padding:.5em; CSS Validation and Testing your Webpage Just like validating the HTML, all style sheets should be tested to see if its up to standards by validating them with a CSS validator. Websites should be tested in many browsers on different computers and devices to make sure that no possible audience is missing out on the information you are trying to communicate. Validating your CSS: Pre-Made CSS Layouts in Dreamweaver When creating a new site in Dreamweaver, you can create one that already contains a CSS layout. Dreamweaver comes with several different CSS layouts you can choose from. Additionally, you can create your own CSS layouts and add them to the configuration folder so that they appear as layout choices in the New Document dialog box. 1. Select File > New. 2. In the New Document dialog box, select the Blank Page category. (It s the default selection.) 3. For Page Type, select HTML. 4. For Layout, select the CSS layout you want to use. The Preview window shows the layout and gives a brief description of the selected layout. Note that there are layout options for HTML5 as well. CSS 2: Layouts - 15

16 5. Select a location for the layout s CSS from the "Layout CSS" drop-down menu. Choose "Create New File" if this is a new site with no existing CSS or "Link to Existing File" if you have a style sheet already started for your site. (When you select the Link to Existing File option, the file you specify must already have the rules for the CSS file contained within it.) (Optional: You can also attach CSS style sheets to your new page (unrelated to the CSS layout) when you create the page. To do this, click the Attach Style Sheet icon above the Attach CSS file pane and select a CSS style sheet.) 6. If you selected "Create New File,", click Create, and then specify a name for the new external file in the Save Style Sheet File As dialog box. If you selected Link to Existing File from the Layout CSS in pop up menu, add the external file to the Attach CSS file text box by clicking the Add Style Sheet icon (chain link icon), and browsing for the external style sheet file. When you re finished, click OK, then Create in the New Document dialog box. Note: Internet Explorer conditional comments (CCs), which help work around IE rendering issues, remain embedded in the head of the new CSS layout document, even if you select New External File or Existing External File as the location for your layout CSS. NEW in Dreamweaver CS6: Fluid Grid Layouts If you want to build a site that is truly "responsive," Dreamweaver now offers a WYSIWYG solution for designing different layouts (depending on browser size) for the same page. For a detailed demo video for how to get started with Dreamweaver's Fluid Grid Layouts, watch: CSS 2: Layouts - 16

17 Pre-Made CSS Layout Inspiration Online Here are some possible websites that allow you to download their templates and modify them for your own specific content. However, you will want to notice if they ask you to put a link back to the creator of the design. - Open Source Web Design : - Free CSS Templates : - Open Web Design.org : - Layout Gala: - Free HTML5 Templates: Web Design Resources & Further Learning Visit our curated list of resources, tools and articles to improve your web skills: Contact Information St. Edward's University Instructional Technology Training Watch our screencasts online: Register for more free workshops: Need time to work on your website with assistance from a Trainer? Come by the training room during Innovation Creation Lounge hours. CSS 2: Layouts - 17

18 CSS Shorthand Cheat Sheet by Example leigeber.com Margin & Padding margin-top: 0; margin-right: 5px; margin-bottom: 10px; margin-left: 15px; (auto, 0, px, pt, em or %) margin:0 5px 10px 15px; (top right bottom left) margin-top: 10px; margin-right: 20px; margin-bottom: 0; margin-left: 20px; margin:10px 20px 0; (top right/left bottom) margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; margin:0 auto; (top/bottom left/right) margin-top: 50px; margin-right: 50px; margin-bottom: 50px; margin-left: 50px; margin:50px; (top/right/bottom/left) Border border-width: 5px; (thin, thick, medium or set value) (default = medium) border-style: dotted; (solid, dashed, dotted, double, etc) (default = none) border-color: blue; (named, hex, rgb or 0-255) (default = value of elements/ elements parent color property) border:5px dotted blue; border-right-width: 2px; border-right-style: solid; border-right-color: #666666; border-right:2px solid #666; border-top-width: 3px; border-right-width: 2px; border-bottom-width: 3px; border-left-width: 2px; border-width:3px 2px; Background background-color: #CCCCCC; (named, hex, rgb or 0-255) (default = transparent) background-image: url(images/bg.gif); (url or none) (default = none) background-repeat: no-repeat; (repeat, repeat-x, repeat-y or no-repeat) (default = repeat) background-attachment: scroll; (fixed or scroll) (default = scroll) background-position: top left; (top, right, left, bottom or center) (default = 0% 0%) background:#ccc url(images/bg.gif) no-repeat 0 0; Font font-family: Verdana, Arial, Helvetica; (Verdana, Arial, Times New Roman, etc) (default = browse based) font-size: 12px; (xx-small, medium, x-large, set value, etc) (default = medium) font-weight: bold; (normal, bold, bolder, lighter, or inherit) (default = normal) font-style: italic; (normal, italic or oblique) (default = normal) font-variant: normal; (normal or small-caps) (default = normal) line-height: 1.5; (normal, px, pt, em, num or %) (default = normal) font:italic bold 12px/1.5 Verdana, Arial, Helvetica; List list-style-image: url(images/bullet.gif); (url or none) (default = none) list-style-position: inside; (inside or outside) (default = outside) list-style-type: square; (circle, disc, square, etc) (default = disc) list-style:square inside url(images/bullet.gif); Color Aqua: #00ffff to #0ff Black: # to #000 Blue: #0000ff to #00f Dark Grey: # to #666 Fuchsia:#ff00ff to #f0f Light Grey: #cccccc to #ccc Lime: #00ff00 to#0f0 Orange: #ff6600 to #f60 Red: #ff0000 to #f00 White: #ffffff to #fff Yellow: #ffff00 to #ff0

19 Website Evaluation Checklist So you ve got a website up and running - now it s time to go through and look at your finished site to add or adjust the finishing touches. This list is also helpful to go through periodically as your site grows and changes over time to keep your site working and manageable. 1. Clean up your code. First things first! Check that your site is meeting W3C standards using their validator ( Correct the errors the validator finds it even tells you on what exact line of code the error is on! 2. Take a step back to evaluate your layout. Pull up your site online and step away from the computer. Does the overall design of your site look nicely balanced or is the page cluttered with too much text, images and video? While space is precious, you can get away with a busy site if your design is clean. Do you need to re- think your layout? * Don t fear whitespace! Use spaces between content and images to prevent your site from looking smashed together. You can have a tightly packaged site while still not looking like a tabloid. * What does your site look like at various resolutions? On a tablet or smartphone? 3. Re- read your copy. Is your site saying what you mean it to say? Are there areas you may need to clarify? Are there long blocks of text that no one would ever read online? Consider if the writing is web- friendly while still conveying what you need to get across. 3b. Re- examine your images. Do your images relate to the page s topic? Do they take up too much space and crowd out important text? Should you add or change a picture? 4. Check your loading time. Are loooooong pages or giant graphics taking too long to load? You may need to consider scaling back and moving stuff around if your pages scroll on forever or if every image you use is gigantic.

20 5. Where s your navigation? The most user- friendly navigation is a system that is clear and consistent across every page of your site. If it s a list of links in a bar across the top of your page, it should stay there. Keep your navigation easy to see and readily clickable. * Can you find your way around? Is information readily available to your visitors? 6. Test your links! Do all of your links work? It can be very irksome when links on a site are broken. A periodic check to make sure that your site s links work will prevent disappointed visitors and make you look better in Google s eyes (search engines want to see your links work). 7. Revisit content on a regular basis. Due to the nature of your site, it may require more frequent updates than others. However, don t make the web 1.0 mistake of putting up a website and never changing it again. Returning visitors will expect recent additions or news, so give it to them! From an SEO (search engine optimization) perspective, the more you update your site, the more frequent your visits from search bots who are responsible for finding the websites that return in online searches like Google s.

Diane s CSS Cheatsheet

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

More information

Welcome! Please sit in alternating rows

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

More information

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

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

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

More information

Cascading Style Sheets CS7026

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

More information

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

Dreamweaver CS6 Lab 2

Dreamweaver CS6 Lab 2 Dreamweaver CS6 Lab 2 Using an External Style Sheet in Dreamweaver Creating the site definition First, we'll set up the site and define it so that Dreamweaver understands the site structure for your project.

More information

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

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

More information

APPENDIX B: CSS QUICK REFERENCE 1

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

More information

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

CSS Tutorial Part 1: Introduction: A. Adding Style to a Web Page (3 options): CSS Tutorial Part 1: Introduction: CSS adds style to tags in your html page. With HTML you told the browser what things were (e.g., this is a paragraph). Now you are telling the browser how things look

More information

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

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

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

More information

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

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

More information

Dreamweaver - Formatting your page with CSS

Dreamweaver - Formatting your page with CSS Dreamweaver - Formatting your page with CSS Creating your first website Part 4: Formatting your page with CSS Now I ll show you how to format text on your page using cascading style sheets (CSS). Learn

More information

border margin (transparent, doesn't work great with IE) div width/height

border margin (transparent, doesn't work great with IE) div width/height > > > > CSS Positioning, Box Model LP TP fdjdkjdakfjadksjfdkjkdsjfdksajfkdjfdkasfdkfxeril ullaore veleniam illaoreetum nulluptat am il eliquamet etummy nummy nosto doluptatisl ex et, commolore do odolestie

More information

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

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

More information

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

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

Web Design - Css Layout (Page 1)

Web Design - Css Layout (Page 1) Web Design - Css Layout (Page 1) A CSS layout is made up of a set of nested div tags (rectangular containers), as seen below. We will give each div tag an ID so that we can target it with a CSS style of

More information

CSS WEB DESIGN WITH DREAMWEAVER

CSS WEB DESIGN WITH DREAMWEAVER CSS WEB DESIGN WITH DREAMWEAVER By Michael L Curry WEBSITE http://michaelcurry.com/default.aspx?p=73&n=articles-on-web-design-topics DESCRIPTION This is an advanced web design article that builds on the

More information

The CSS Box Model. Practical Exercises

The CSS Box Model. Practical Exercises Practical Exercises Overview The CSS Box Model is fundamental to understanding how to use the range of page layout tools that CSS has to offer. By treating all page elements as boxes with dimensions, borders,

More information

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

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

More information

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

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

In-class Assignment 2

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

More information

TRAINING & REFERENCE HTML5

TRAINING & REFERENCE HTML5 TRAINING & REFERENCE murach s HTML5 and CSS3 (Chapter 5) Thanks for downloading this chapter from Murach s HTML5 and CSS3. We hope it will show you how easy it is to learn from any Murach book, with its

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

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

Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts

Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade. Exercise: Creating two types of Story Layouts Recreate your Newsletter Content and Layout within Informz (Workshop) Monica Capogna and Dan Reade Exercise: Creating two types of Story Layouts 1. Creating a basic story layout (with title and content)

More information

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

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

More information

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

Formatting Web Pages Using Cascading Style Sheets

Formatting Web Pages Using Cascading Style Sheets HOUR 6 Formatting Web Pages Using Cascading Style Sheets What You ll Learn in This Hour:. How to create each of the three style types: classes, redefined HTML tags, and advanced styles. How to apply styles

More information

How to create and edit a CSS rule

How to create and edit a CSS rule Adobe Dreamweaver CS6 Project 1 guide How to create and edit a CSS rule You can create and edit a CSS rule in two locations: the Properties panel and the CSS Styles panel. When you apply CSS styles to

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

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

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

More information

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

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

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

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

More information

Dreamweaver CS6 Manual

Dreamweaver CS6 Manual Dreamweaver CS6 Manual Joan Weeks SLIS Computer Labs Mgr. March 2013 Topic 1 What is Dreamweaver CS6? Dreamweaver CS6 is a complete website development tool that gives you the ability to create multiple

More information

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

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

More information

CAS 111D: CSS Tutorial

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

More information

Expression Web Lab Exercises

Expression Web Lab Exercises Expression Web Lab Exercises Expression Web Quick Start Tutorial Heavy Metal Show Car By Aseem Badshah Heavy Metal Show Car Tutorial Page 1 Information in this document, including URL and other Internet

More information

(replace with your username).

(replace with your username). Web Design and Databases Lab L4 - Week 4 1) Getting started. Download lounge.zip and save it under public_html. Make sure it is uncompressed properly and in a sensible directory and all subdirectories

More information

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

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

More information

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature

Responsive Web Design for Teachers. Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Exercise: Building a Responsive Page with the Fluid Grid Layout Feature Now that you know the basic principles of responsive web design CSS3 Media Queries, fluid images and media, and fluid grids, you

More information

3Creating CSS. Column Layouts. For all the benefits of using CSS to create your page layouts more. Crafting a Two-Column CSS Layout 35

3Creating CSS. Column Layouts. For all the benefits of using CSS to create your page layouts more. Crafting a Two-Column CSS Layout 35 3Creating CSS Column Layouts Crafting a Two-Column CSS Layout 35 Setting Up the Page Structure 36 Building the Header and Navigation 41 Containing the Content 44 For all the benefits of using CSS to create

More information

Dreamweaver CS6 Basics

Dreamweaver CS6 Basics Dreamweaver CS6 Basics Learn the basics of building an HTML document using Adobe Dreamweaver by creating a new page and inserting common HTML elements using the WYSIWYG interface. EdShare EdShare is a

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

Lab6: Creating a Web page with Macromedia Dreamweaver

Lab6: Creating a Web page with Macromedia Dreamweaver Lab6: Creating a Web page with Macromedia Dreamweaver I. Introduction When you need to find a specific recipe or when you want to visit somewhere you ve never been to before, what do you do? Most of you

More information

September 4, 2013 CIS 1151 CLASS LECTURE NOTES

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

More information

CSS Tutorial. By Lily Olson

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

More information

Expression Web 4 Advanced Lab Exercises

Expression Web 4 Advanced Lab Exercises Expression Web 4 Advanced Lab Exercises An Advanced Expression Web 4 Tutorial Beaches Around the World By Aseem Badshah Edited by Dave Burkhart (Part 3: Beaches Around the World series) Information in

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

Application Note. Building a Website Using Dreamweaver without Programming. Nan Xia. MSU ECE 480 Team 5

Application Note. Building a Website Using Dreamweaver without Programming. Nan Xia. MSU ECE 480 Team 5 Application Note Building a Website Using Dreamweaver without Programming Nan Xia MSU ECE 480 Team 5 11/16/2012 Table of Contents Abstract... 3 Introduction and Background... 3 Keywords... 3 Procedure...

More information

Dreamweaver 8 Basics

Dreamweaver 8 Basics Dreamweaver 8 Basics Software: Dreamweaver 8 Platform: Mac/PC Overview Dreamweaver is a great tool for producing Web sites. It provides an array of options and functions that speed up the development process

More information

450 Study Guide Chaps 1-6

450 Study Guide Chaps 1-6 Name: Class: Date: 450 Study Guide Chaps 1-6 Multiple Choice Identify the choice that best completes the statement or answers the question. 1. An HTTP response is sent from a. the web server to the application

More information

ART 170: Web Design 1

ART 170: Web Design 1 Week Six Lessons We will review the ways you can make animations in Fireworks We will make sure that your previous HTML/CSS exercises are in your shared Drop Box folder. We will go through a demo of how

More information

Topic 3: Cascading Style Sheets (CSS) Learning Objectives. By completing this topic, the learner should be able to:

Topic 3: Cascading Style Sheets (CSS) Learning Objectives. By completing this topic, the learner should be able to: Topic 3: Cascading Style Sheets (CSS) Learning Objectives By completing this topic, the learner should be able to: Knowledge and Understanding 1. Describe how CSS is used to control the presentation style

More information

Visual elements and graphics

Visual elements and graphics Visual elements and graphics Horizontal rules in HTML Borders and padding in CSS Graphics Picture formats The HTML img tag Image links Background images Image maps Accessibility and best practices 4-1

More information

Tutorial 4 Creating Page Layouts with CSS. HTML and CSS 6 TH EDITION

Tutorial 4 Creating Page Layouts with CSS. HTML and CSS 6 TH EDITION Tutorial 4 Creating Page Layouts with CSS HTML and CSS 6 TH EDITION Objectives Set display properties Create a reset style sheet Define a background image Set background image properties Use browser extension

More information

CSS MAGIC. In the early 90s, HTML was not. Better HTML with Cascading Style Sheets COVER STORY. Save Work, Save Time

CSS MAGIC. In the early 90s, HTML was not. Better HTML with Cascading Style Sheets COVER STORY. Save Work, Save Time Better HTML with CSS MAGIC (CSS) help you polish up your websites without taking a crash course in programming. BY KRISTIAN KISSLING www.sxc.hu In the early 90s, HTML was not expected to do anything apart

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

Expression Web 3 Lab Exercises

Expression Web 3 Lab Exercises Expression Web 3 Lab Exercises Expression Web 3 Quick Start Tutorial Beaches Around the World By Aseem Badshah Edited by Dave Burkhart (Part 2: Beaches Around the World series) Information in this document,

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

WEBDESIGN WITH CSS. Cascading Style Sheets. Martina Semlak

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

More information

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

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

More information

Kentico CMS, 2011 Kentico Software. Contents. Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1

Kentico CMS, 2011 Kentico Software. Contents. Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1 Contents Mobile Development using Kentico CMS 6 2 Exploring the Mobile Environment 1 Time for action - Viewing the mobile sample site 2 What just happened 4 Time for Action - Mobile device redirection

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

Cascading Style Sheets

Cascading Style Sheets Cascading Style Sheets CMPS 183 - Spring 2003 Hypermedia and the Web Reference: Cascading Style Sheets - The Definitive Guide by Eric Meyer Why CSS? HTML was originally designed as a structural markup

More information

Using Adobe Dreamweaver CS4 (10.0)

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

More information

Adobe Dreamweaver CC 14 Tutorial

Adobe Dreamweaver CC 14 Tutorial Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site

More information

Open a new file in notepad/textedit Save it with a.css extension (I will call mine tutorial.css, but you can call it whatever you like)

Open a new file in notepad/textedit Save it with a.css extension (I will call mine tutorial.css, but you can call it whatever you like) CSS Tutorial Part 1: First: Create a separate CSS file. Open a new file in notepad/textedit Save it with a.css extension (I will call mine tutorial.css, but you can call it whatever you like) Second: Download

More information

SharePoint Basic Editing. Text. Creating List

SharePoint Basic Editing. Text. Creating List Text Putting Text on the Page 1. Entering text on the web page is just like typing in a word processing document. Lines will wrap within a paragraph. 2. Enter = Paragraph Break (leaves a blank line) 3.

More information

Expression Web Lab Exercises

Expression Web Lab Exercises Expression Web Lab Exercises Expression Web Quick Start Tutorial Beaches Around the World By Aseem Badshah (Part 2: Beaches Around the World series) Information in this document, including URL and other

More information

Using the CSS Box Model for Page Layout

Using the CSS Box Model for Page Layout What You ll Learn CSS Features in Dreamweaver 8 Elements of the Using the CSS Box Model for Page Layout How to manipulate: Borders Margins Padding Different Ways of applying styles: External style sheet

More information

Table of contents. Advanced CSS Animator DMXzone.com

Table of contents. Advanced CSS Animator DMXzone.com Table of contents Table of contents... 1 About Advanced CSS Animator... 2 Features in Detail... 3 What people say about Advanced CSS Animator:... 10 The Basics: Creating Pupup Effect on Mouse Over... 12

More information

ICE: HTML, CSS, and Validation

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

More information

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

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

Microsoft FrontPage. 1. Introduction

Microsoft FrontPage. 1. Introduction 1. Introduction Microsoft FrontPage is a full featured HTML editor. A Web site is a group of HTML pages and graphics that are interconnected with hyperlinks. A FrontPage Web site is a site created in FrontPage.

More information

LeadSquared landing pages are now responsive

LeadSquared landing pages are now responsive LeadSquared landing pages are now responsive What is a responsive landing page g Technically It is an approach to web design aimed at crafting sites for an optimal viewing experience easy reading and navigation

More information

Expression Web 4 Tutorial

Expression Web 4 Tutorial Expressions Web 4 Tutorial This is a basic look at the interface and workings of Expression Web. Here is the opening screen. It is divided into five windows which include; 1. A folder window top left 2.

More information

HTML and CSS Session Two

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

More information

INFORMATICA GENERALE 2015/2016 LINGUAGGI DI MARKUP CSS

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

More information

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

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

If your site has already been set up and the theme added on the Drupal server, you are able to add content to the site.

If your site has already been set up and the theme added on the Drupal server, you are able to add content to the site. Updating a Site in Drupal If your site has already been set up and the theme added on the Drupal server, you are able to add content to the site. You should be able to find your site at a URL similar to

More information

Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan

Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan Building a Horizontal Menu in Dreamweaver CS3 Using Spry R. Berdan In earlier versions of dreamweaver web developers attach drop down menus to graphics or hyperlinks by using the behavior box. Dreamweaver

More information

How to make a Skin for da Journals Tutorial

How to make a Skin for da Journals Tutorial How to make a Skin for da Journals Tutorial http://darkaion.deviantart.com With this tutorial I wanna explain the basic objects needed to make a Cascading Style Sheet (CSS) for the deviantart Journal.

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

Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9.

Sample Table. Columns. Column 1 Column 2 Column 3 Row 1 Cell 1 Cell 2 Cell 3 Row 2 Cell 4 Cell 5 Cell 6 Row 3 Cell 7 Cell 8 Cell 9. Working with Tables in Microsoft Word The purpose of this document is to lead you through the steps of creating, editing and deleting tables and parts of tables. This document follows a tutorial format

More information

Introduction to Cascading Style Sheets

Introduction to Cascading Style Sheets Introduction to Cascading Style Sheets

More information

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

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

More information

Part 2 -- Cascading Style Sheets

Part 2 -- Cascading Style Sheets 2006 Edward H. Trager Part 2 -- Cascading Style Sheets A cascading style sheet allows you to add style --or what is often called graphic design-- to the content of your XHTML document. Cascading style

More information

Sponsored by: Nashville Technology Council. Instructor Manual

Sponsored by: Nashville Technology Council. Instructor Manual Sponsored by: Nashville Technology Council Instructor Manual 1 www.my1stcode.com Introduction to CSS Part 1 Designed and Implemented by Joumana Rahime 2 Course Objectives Learn the foundations of CSS Introduction

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

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

The HTML Editor INFORMZ USER GUIDE: Version 1.0 January 13, 2013

The HTML Editor INFORMZ USER GUIDE: Version 1.0 January 13, 2013 INFORMZ USER GUIDE: The HTML Editor Version 1.0 January 13, 2013 ABOUT THIS GUIDE This guide provides an overview of the HTML editor used by Informz. This guide does not cover all aspects of the editor,

More information