CSS Tutorial Part 1: Introduction: A. Adding Style to a Web Page (3 options):
|
|
|
- Chester Fleming
- 7 years ago
- Views:
Transcription
1 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 (e.g., I want my paragraphs to have blue text with double-spacing and a purple background). To make all paragraphs have the style just mentioned, you d add the following CSS code (I ll explain what each line means in detail later): p { background-color: purple; color: blue; line-height: 200%; A. Adding Style to a Web Page (3 options): You can add a style to your web page in 3 different ways: Method 1. By including the style inline (e.g., in the tag itself in your html document), e.g.,: <body> <p style = background-color: purple; color: blue; line-height: %200; > This is a blue paragraph with a purple background color </p> Method 2. By including the style in the head section of the web page, e.g.,: <head> <meta charset= utf-8" /> <title> The web page </title> <style > p { background-color: purple; color: blue; line-height: 200%; </style> </head> **Method 3** By attaching a style sheet to your web page, and then placing all your styles in that new style sheet. To do this, you first create a brand new file (not a web page, a brand new completely blank file). You put in this brand new completely blank file they style(s) you want (e.g.,: p { background-color: purple; color: blue; line-height: 200%; Once the file contains a style, save it as blablabla.css. The blablabla part can be some other name, if you prefer, but the.css must be just that. Now you ve got to attach the style file to your html file. If you skip this step, the styles you ve created in the css file won t be applied to the web page you ve created. To attach the css stylesheet to the web page, in the head section, add a link to the style as such: <head> <meta charset= utf-8" /> <title>the web page </title> <link rel="stylesheet" href="blablabla.css"> </head> 1
2 All 3 methods will work. Method 1 allows for quick and easy changes to style, and method 2 has the advantage of keeping your styles within the same file as your html code, but can lead to very big html files, and but can get hard to keep track of when making changes. Method 3, however, is my preferred method. Method 3 allows you to create a style sheet separate from your web page(s). Once the style sheet is created, you can include it in as many web pages as you wish. Thus, if you have a web site with a large number of web pages, and you want to change the look of the entire web site, you just need to change one style sheet. In addition, you can create a number of different style sheets with very different styles. Then you can completely change the look of your web page simply by changing which style sheet you link to it. For an example of how completely you can change the look of a web page simply by changing its style sheet, visit: Thus, for our tutorials and class project, I will insist you use a separate style sheet as specified using Method 3 and place most of your styles in the stylesheet. B. Creating Styles: Now you know how to include a style. But you don t know how to create a style. So we d better learn that. You must apply a style to html tags, so first create or download an html page: Step 1 (for method 3): Create a separate CSS file. Step 2: Open a new file in notepad++/wrangler Save it with a.css extension (I will call mine tutorial.css, but you can call it whatever you like) (Note that this is still for method 3 to attach our style to the html page) Attach the CSS file to your html file. You must attach the css file to the html file or the styles won t show up. 1. Open the HTML file in notepad++/wrangler 2. In between the <head> and the </head> tag, add the following line (with your file name): <!DOCTYPE html> <html> <head> <meta charset= utf-8" /> <title>all Things Giraffe</title> <link rel="stylesheet" href="tutorial.css"/> </head> Note: You can attach the same CSS file to more than one html file. That way the style you create for one html file can be used on other html files as well. B.1. Creating styles for Tags: Note: you can add style to 3 different types of elements: 1. The pre-existing tags on your page (e.g., <p>, <h1>,<body>,<ol>, etc.) 2. ids you create on your web page 3. classes you create (we ll see these later) We ll discuss 2 and 3 further later. For now, we shall just add styles to the pre-existing tags. You add style to everything on the page by creating a style for the body: Step 4: Open the tutorial.css file in textedit/notepad. Let s start with a style for our paragraphs: To style a specific tag, we use that tag, and then put the style in between { and, e.g., 2
3 p { style goes here Styling with color: There are 17 basic colors. These are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow. There are actually 147 other colors that html and css recognize as standard names of colors (e.g., BurlyWood, PapayaWhip, OliveDrab (I m not making this up)). But if you really want unlimited color choices, you ll need to learn more about RGB values, and specifically hex values. We ll talk about colors later. For now, let s stick with the basics so we can see what s going on. Changing text properties: Step 5: Change font color: To change the font color, modify the style as such: p { color: olive; Save the css file. Load the HTML file (the web page) into the browser. The color of the font in paragraphs (and paragraphs only) should have changed to olive color. If it didn t either your style has been defined incorrectly (did you remember the semicolon at the end of the line?) or the style sheet has been attached to the html page incorrectly. Step 6: Changing font family: To change the font family (e.g., arial, Helvetica, times new-roman, comic, etc.), add the following the the paragraph s style: p { color: olive; Save the css file. Load the HTML file (the web page) into the browser. The font in the paragraphs should have changed to arial or Helvetica font. (If not, make sure you ve got a semi-colon at the end of each line and a dash between font-family.) A note about font-family: You can specify font-family to be any font you want. However, you want to stick with common fonts because the font must exist on everyone s computer. In the above example, we specified the font to be: font-family: arial, Helvetica, sans-serif; In this case, the browser will try to display arial. If arial doesn t exist on the computer, then it will try Helvetica, and if that doesn t work, it will use a default sans-serif font. THE FONT MUST EXIST ON THE PERSON WHO LOOKS AT YOUR WEB PAGE S COMPUTER, not yours. Yes, there are ways around this, but for now be aware that once you put your web page on a web server somewhere (other than on your computer), other people s browsers will download your html and css code onto their computer. They are not downloading an image of the web page in your browser, just the html and css code you ve written. Then the browser on their computer will try to display the page as you ve specified. However, it only has access to the fonts that are on the other person s computer. Example: So say you pick an unusual font, like maridregia. Maridgregia is a really cool font with kitten pics for letters. However, your computer is the only computer in the entire world that has maridgregia on it (since it s a made-up font name, that would pretty much be the case). Now you post your web page to a server and 3
4 someone downloads it. They, of course, don t have maridregia on their computer, so when the browser goes to display the text, it will be displayed with the browser s default font, which is usually Times New Roman. If you do decide to go with an unusual font, make sure you include a few back-up fonts (like the above example with Helvetica and sans-serif as back-up fonts) so that if the user s computer doesn t have the unusual font you specified, it will use the more common back-up font you chose. Step 6: Changing font size: To change the font size, add the following the the paragraph s style: p { color: olive; font-size: small; Save the css file. Load the HTML file (the web page) into the browser. The font may (or may not) have changed in size if the web page s default font size is small, you may not notice a difference. To make sure you can actually see a difference, let s add a style for the h1 tags in your css style sheet: h1 { font-size: 625%; Save the css file. Load the HTML file (the web page) into the browser. You should definitely see a difference in the font size of the h1 elements now! A note about font-size: You can specify font-size as: xx-small x-small small medium large x-large xx-large smaller larger px (avoid using!!) % % is percent of the default size. So, for instance, if the default size is small, setting: font-size: 200%; would result in the font being set to twice as big as the small font. smaller and larger set the font size to be smaller than the default font size and larger than the default font size, respectively. px is the font size in pixels. You probably want to avoid using this. People with low vision often increase the font size on their web pages or apps so they can read it more easily (they use control +. Try it some night when your eyes are getting tired). With px, the font size is set and won t increase, whereas when setting the font size using small or 200%, the font size will increase. In essence, px sets the font size absolutely, so those with low vision can t adjust it, whereas the other options set the font size relatively (relative to the default size), so if we change the default size, we change all the font sizes set relatively as well. Step 7: Changing font style: To change the font style, add the following to the h1 style: 4
5 h1 { font-size: 625%; font-style: italic; Save the css file. Load the HTML file (the web page) into the browser. The h1 element s font should be italic. You can also set the font style to: normal oblique (no one uses this one it looks just like italic) Step 8: Changing font weight: To change the font weight, add the following to the h1 style: h1 { font-size: 625%; font-style: italic; font-weight: bold; Save the css file. Load the HTML file (the web page) into the browser. The h1 element s font should be bold. You can also set the font weight to: normal bold bolder lighter (same weight as normal) (same weight as bold) Step 9: Changing font famly (to Times new roman): Let s make sure the font family of our h1 elements is Times new roman. To do this, we must put quotes around Times New Roman so that it is interpreted as one word. Add to the h1 style: h1 { font-size: 625%; font-style: italic; font-weight: bold; font-family: times new roman, serif; Save the css file. Load the HTML file (the web page) into the browser. You may not see a difference in the h1 elements because the default font is times new roman. Changing text properties and line height: Step 10: Change text alignment: Let s change the text alignment of the h1 elements to the right: h1 { font-size: 625%; font-style: italic; font-weight: bold; font-family: times new roman, serif; text-align: right; 5
6 And let s change the text alignment of our paragraphs to be lined up on the left: p { color: olive; font-size: small; text-align: left; Save the css file. Refresh the html file in the browser. You should see a different alignments the h1 element should be aligned to the right, and the paragraphs should be left. You can also set text-align to: center left right Step 11: Change text indent Text indent changes the indent of the first line of an element (e.g., think paragraphs the first line is often indented a bit). Let s do that: p { color: olive; font-size: small; text-align: left; text-indent: 25px; Save the css file. Refresh the html file in the browser. You should see a different alignments the h1 element should be aligned to the right, and the paragraphs should be left. Aside: Text-decoration If you make something on your web page blink, I will hurt you, but here s how it s done with css: Add to a style: text-decoration: underline; You can also set the text decoration to be: blink (I think, meaning I really hope!!! this has been deprecated on most browsers now) overline line-through underline (this one can quickly become confusing, because links on your web page are usually underlined, so if you set other text to be underlined, people looking at your web page will assume that text is a link as well. Text indent changes the indent of the first line of an element (e.g., think paragraphs the first line is often indented a bit). Let s do that: Step 12: Change line height: This controls the height between two lines of text in a paragraph. In this case we re using 120% of the default height between two lines. To specify line-height for the paragraph style, add: p { color: olive; font-size: small; text-align: left; text-indent: 25px; line-height:120% 6
7 Save the css file. Reload the html file in your browser and see the results of line-height. Feel free to play with it a bit. Borders, Margins, Padding, Background Images Adding a border and border styles: Add a border: You can modify a border s style, width, and color. You can also specify that a tag s style only has a border on one, two, or three sides. Try adding a border around your h1 elements: h1 { border-style: solid; border-width: 4px; border-color: green; Save the css file and look at the html file in the browser. You should see a green border around your h1 elements that is 4 pixels wide and solid. Other border styles include: solid, dotted, dashed, double, groove, ridge, inset, outset. Border width is specified in pixels, and can be anything you like. You can also use preset widths, but I almost always use pixel widths (e.g., border-width: 3px; (note there s no space between the 3 and the px)): thin medium thick Border color can be any of the standard colors, or you can specify the color using hex values or rgb values (which we will discuss later). Adjusting a border on one side: You can also add a border or set border properties on individual sides. So, for instance, youcould say: h2 { border-bottom-style: dashed; border-bottom-width: 2px; border-bottom-color: purple; You could also say: h3 { 7
8 border-top-style:dotted; border-right-style:solid; border-bottom-style:dotted; border-left-style:solid; Feel free to try this and see how it looks. Adding Padding and Margins: Padding and margins are different. To clarify the difference: Padding is the space between the text and the border (inside the element). Margin is the space between the border and the other elements on the page (outside the element) You can adjust both separately, and again, you can set the padding and margin for the top, left, bottom, and right separately. h1 { border-style: solid; border-width: 4px; border-color: green; padding-left: 10px; padding-right: 10px; padding-bottom: 10px; padding-top: 40px; margin: 0px; With this style, you should see padding inside the border between the border and the text, and you should see no margins between the border and other elements. Special Note: Margins: auto; for centering Sometimes you want to center an element. For instance, you may create a header or a special paragraph that you want centered on the page. To center an element (not just text, but an entire element) you can set the margins to auto. This will automatically adjust the margins on both sides to be equal, so that the element stays centered even when you resize your browser. To try this, first set the width of an element to be a specific size (in pixels). To do this you d use: width: 500px; Include this in a style you create for some element (I ll use h2): h2 { width: 500px; border-style: solid; border-width: 5px; border-color: green; padding: 15px; margin: auto; Try including this in your css stylesheet. Load your html page into a browser and see what your h2 elements look like. Resize the browser. See how the h2 elements stay centered? 8
9 Adding background color and image: Add a background color: You can also add a background color to individual elements by using the style: background-color. h1 { border-style: solid; border-width: 4px; border-color: green; padding: 10px; margin: 0px; width: 800px; background-color: #F39642; Now the whole h1 should have a background color Add a background image: Color is cool, but images are cooler. You can add a background image to the style of a tag. To do this, go find a good background image on the web. Make sure you place the image in the same folder as the css file you re working on (or follow the rules for getting the browser to locate the image. Now add it to your element: h1 { border-style: solid; border-width: 4px; border-color: green; padding: 10px; width: 500px; margin: auto; background-color:#f39642; background-image: url(savannahbg.jpg); The h1 elements should now have a background image. The default is for the background image to tile or repeat again and again across and down in the background (like tiles on your bathroom wall). If you use a small picture as your background image, you ll see this. Background-repeat: If you want a background image (that other elements float on top of), but you don t want it to tile, or you only want it to tile in one direction, you can set the background-repeat property. If you only want the background image to show up once, you d specify that you don t want it to repeat using no-repeat: background-repeat: no-repeat; If you specify a repeat, you might want to set the background image s position using background-position: background-position: left top; You can use the following to set the background image s position: left top left center left bottom right top right center right bottom center top 9
10 center center center bottom And you can set the background image s position using x% y% (the top left is 0% 0% and the bottom right is 100% 100% background-position: 20% 40% Or if you want to specify using pixels: background-position: 50px 100px; If you wish to have the background image tile (repeat), but only in one direction, you can use: or background-repeat: repeat-y; background-repeat: repeat-x; You can use background-position to specify the position for the repeat-x and repeat-y as well. Adding default style to the entire page: Modifying the body s style: If you want your entire web page to have a default background color, specific font, font color, etc. you can style the body tag. For example you d add to your css style sheet the following style: body { background-color: brown; font-size: small; Now the default for the entire web page is to have a brown background with a small font that s arial. You can override this default by styling specific elements. Color using Hex Values: RGB Values: First, on the computer, colors are represented using RGB values. RGB stands for red-green-blue values. So when representing color as a series of numbers, the first number is the amount of red, the second is the amount of green, and the third is the amount of blue. Each amount is represented with 2 digits. So an RGB value might look like this: # represents the amount we want red to glow on the computer, 01 represents the amount we want green to glow, and 99 represents the amount we want blue to glow. The above color is purplish, with a bit more blue than red in the purple. As another example: # represents the amount red should glow (not at all!), 99 represents the amount of green that should glow, and 11 represents the amount of blue that should glow (not much). Thus this color is pretty much a solid green. And another example: #
11 Has no red glowing, no green glowing, and no blue glowing, nothing is glowing, which means that there is no color whatsoever. With nothing glowing, the color we d see would be black. Hex numbes: In the above example, I only used the digits 0 through 9 to represent each number. However, to represent color using RGB values, we use hex numbers. In our counting system, we count as follows: 0,1,2,3,4,5,6,7,8,9 and then we go to two digits: 10 In hex counting, we keep going past 9: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F and then we go to two digits. Just as 8 is greater than 7 and 0 is the smallest single digit number and 9 is the largest single digit number in our counting system, 8 is greater than 7, A is greater than 9, and F is greater than E in the hex counting system. Equally, 0 is the smallest single digit number and F is the largest single digit number in the hex counting system, So now to represent RGB colors using hex numbers (So red, green, and blue are still each represented with 2 digits): #FF00FF Has A LOT of red glowing, no green glowing, and A LOT of blue glowing, giving you a bright pure purple color. Another example would be: #CA210D Has CA red glowing, which is a lot of red, 21 green glowing, which isn t much green, and 0D blue glowing, which isn t much blue (just like 09 wouldn t be a lot of blue). Thus this color is a pretty bright, but not completely pure, red color. #21F3DA Has very little red glowing (21) a lot of green (F3) and a lot, but not quite as much blue glowing (DA). Thus the color would be Bluish Green. Final color note: RGB colors are light-based colors, not pigment based colors. You spent kindergarten playing with pigment-based colors, and in doing so you learned that the primary colors are red, yellow, and blue, and if you mixed yellow and blue you got green. We are now dealing with light based colors. The primary colors are now red, green, and blue (didn t see that coming, did you?). Even more oddly, if you mix red and green you get yellow in light based colors (really didn t see that one coming.) Yep, if you ve got: #FFFF00 You ve got all the red glowing, all the green glowing, and no blue glowing, so what you see is yellow. Try it. I m not kidding. Equally, if you have: #FFFFFF You have all the red glowing, all the green glowing, and all the blue glowing at full force. Everything glowing at its brightest in light based colors results in white. 11
{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:
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
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
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
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
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
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
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?
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 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 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
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
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
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
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,
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
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
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
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
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
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
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
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,
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
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
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
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
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
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
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
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
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
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
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,
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.
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
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
Introduction to Cascading Style Sheets
Introduction to Cascading Style Sheets Welcome to the CSS workshop! Before you begin this workshop you should have some basic understanding of HTML and building web pages. What is CSS anyway and what will
Web Design 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
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
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
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
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
Web Design and Databases WD: Class 5: HTML and CSS Part 2
Web Design and Databases WD: Class 5: HTML and CSS Part 2 Dr Helen Hastie Dept of Computer Science Heriot-Watt University Some contributions from Head First HTML with CSS and XHTML, O Reilly Hmm I need
CSS 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
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
Slicing and Coding the Navigation Background in CSS
CSS Template Tutorial Please take your time to visit http://www.freecss.info Table of Contents Step 1 Setting up. page 3 Step 2 Coding the basics.page 5 Step 3 Coding and slicing the header. page 9 Step
Caldes CM2: Marketing Emails Support Document v1.12
Caldes CM2: Marketing Emails Support Document v1.12 Caldes Enterprise software can be used to send out marketing email. Due to the nature of these being bespoke designs, Caldes make a one off charge to
Email Campaign Guidelines and Best Practices
epromo Guidelines HTML Maximum width 700px (length = N/A) Maximum total file size, including all images = 200KB Only use inline CSS, no stylesheets Use tables, rather than layout Use more TEXT instead
Development Perspective: DIV and CSS HTML layout. Web Design. Lesson 2. Development Perspective: DIV/CSS
Web Design Lesson 2 Development Perspective: DIV/CSS Why tables have been tabled Tables are a cell based layout tool used in HTML development. Traditionally they have been the primary tool used by web
HTML and CSS. Elliot Davies. April 10th, 2013. ed37@st-andrews.ac.uk
HTML and CSS Elliot Davies ed37@st-andrews.ac.uk April 10th, 2013 In this talk An introduction to HTML, the language of web development Using HTML to create simple web pages Styling web pages using CSS
Basic tutorial for Dreamweaver CS5
Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to
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
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
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
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
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
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
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
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
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
Getting Started with WebSite Tonight
Getting Started with WebSite Tonight WebSite Tonight Getting Started Guide Version 3.0 (12.2010) Copyright 2010. All rights reserved. Distribution of this work or derivative of this work is prohibited
Making Responsive Emails
Making Responsive Emails Who Am I? Justine Jordan Wearer of Many Hats, Litmus @meladorri @litmusapp #CSSsummit litmus.com/lp/csssummit Sample HTML, slides, templates, frameworks, and other goodies. Disclaimer:
Website Development Komodo Editor and HTML Intro
Website Development Komodo Editor and HTML Intro Introduction In this Assignment we will cover: o Use of the editor that will be used for the Website Development and Javascript Programming sections of
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
HTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
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
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.
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
HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL
![HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL](/thumbs/40/20611446.jpg "HTML CSS Basic Structure. HTML Structure [Source Code] CSS Structure [Cascading Styles] DIV or ID Tags and Classes. The BOX MODEL")
HTML CSS Basic Structure HTML [Hypertext Markup Language] is the code read by a browser and defines the overall page structure. The HTML file or web page [.html] is made up of a head and a body. The head
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
How to craft a modern, mobile-optimized HTML email template. Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012
How to craft a modern, mobile-optimized HTML email template Jason Samuels, NCFR IT Manager DrupalCamp Twin Cities May 2012 Our old email template Pros Simple Lightweight Worked as plain-text Rendered OK
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
Excel Formatting: Best Practices in Financial Models
Excel Formatting: Best Practices in Financial Models Properly formatting your Excel models is important because it makes it easier for others to read and understand your analysis and for you to read and
We automatically generate the HTML for this as seen below. Provide the above components for the teaser.txt file.
Creative Specs Gmail Sponsored Promotions Overview The GSP creative asset will be a ZIP folder, containing four components: 1. Teaser text file 2. Teaser logo image 3. HTML file with the fully expanded
The Essential Guide to HTML Email Design
The Essential Guide to HTML Email Design Index Introduction... 3 Layout... 4 Best Practice HTML Email Example... 5 Images... 6 CSS (Cascading Style Sheets)... 7 Animation and Scripting... 8 How Spam Filters
WBU PowerPoint Guidelines
WBU PowerPoint Guidelines Guidelines on how to make the use of PowerPoint and other visual presentations accessible to audience members who have a vision or print impairment Published by the World Blind
Digital Marketing EasyEditor Guide Dynamic
Surveys ipad Segmentation Reporting Email Sign up Email marketing that works for you Landing Pages Results Digital Marketing EasyEditor Guide Dynamic Questionnaires QR Codes SMS 43 North View, Westbury
Sizmek Features. Wallpaper. Build Guide
Features Wallpaper Build Guide Table Of Contents Overview... 3 Known Limitations... 4 Using the Wallpaper Tool... 4 Before you Begin... 4 Creating Background Transforms... 5 Creating Flash Gutters... 7
Web Design I. Spring 2009 Kevin Cole Gallaudet University 2009.03.05
Web Design I Spring 2009 Kevin Cole Gallaudet University 2009.03.05 Layout Page banner, sidebar, main content, footer Old method: Use , , New method: and "float" CSS property Think
Creating 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
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
Email Creator Coding Guidelines Toolbox
Email Creator Coding Guidelines Toolbox The following information is needed when coding your own template from html to be imported into the Email Creator. You will need basic html and css knowledge for
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
Tips and tricks with Text boxes in Mahara
Tips and tricks with Text boxes in Mahara This tutorial assumes that you know how to drag a Text box block down to your page content area. Contents 1. The parts of a Text box... 2 2. What each of the buttons
FETAC Certificate in Multimedia Production. IBaT College Swords. FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3
IBaT College Swords FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3 Lecturer: Cara Martin M.Sc. Lecturer contact details: cmartin@ibat.ie IBaT 2009 Page 1 Cascading Style Sheets
Scoop Hosted Websites. USER MANUAL PART 4: Advanced Features. Phone: +61 8 9388 8188 Email: scoop@scoopdigital.com.au Website: scoopdigital.com.
Scoop Hosted Websites USER MANUAL PART 4: Advanced Features Phone: +61 8 9388 8188 Email: scoop@scoopdigital.com.au Website: scoopdigital.com.au Index Advanced Features... 3 1 Integrating Third Party Content...
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
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
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
Designing HTML Emails for Use in the Advanced Editor
Designing HTML Emails for Use in the Advanced Editor For years, we at Swiftpage have heard a recurring request from our customers: wouldn t it be great if you could create an HTML document, import it into
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
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
How to make a custom Joomla template!
How to make a custom Joomla template! Part 2 NOTE: This Tutorial has been donated by a Thomas Nielsen. This work is licensed under a Creative Commons Attributon NonCommercial ShareAlike 2.5 License. Lets
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
Working with the Ektron Content Management System
Working with the Ektron Content Management System Table of Contents Creating Folders Creating Content 3 Entering Text 3 Adding Headings 4 Creating Bullets and numbered lists 4 External Hyperlinks and e
DOING MORE WITH WORD: MICROSOFT OFFICE 2010
University of North Carolina at Chapel Hill Libraries Carrboro Cybrary Chapel Hill Public Library Durham County Public Library DOING MORE WITH WORD: MICROSOFT OFFICE 2010 GETTING STARTED PAGE 02 Prerequisites
ODS for PRINT, REPORT and TABULATE
Paper 3-26 ODS for PRINT, REPORT and TABULATE Lauren Haworth, Genentech, Inc., San Francisco ABSTRACT For most procedures in the SAS system, the only way to change the appearance of the output is to change
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,