Cascading Style Sheet (CSS) Tutorial Using Notepad. Step by step instructions with full color screen shots
|
|
|
- Shona Fletcher
- 7 years ago
- Views:
Transcription
1 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 use it? Cascading Style Sheets (CSS) is a style sheet language describing the appearance (formatting) of an html document like background images, font styles and sizes. It is used; to decrease the amount of source code on a page allowing faster download speeds; to improve different web browser compatibility; to enable multiple pages to share the same formatting; an increased range of formatting options and quicker synchronized updating of multiple web pages. For this reasons html formatting has been phased out (depreciated) and is being replaced by CSS. This tutorial uses the MS notepad editor to create an external Cascading Style Sheet file (.css) This tutorial will enable you to create an external style sheet document and link it to your web pages. You will learn how CSS is written and is applied to your html document. To follow these instructions you need a basic knowledge of HTML (Hyper Text Mark-up Language) or have completed the 3 Basic HTML Tutorials you can download from our web site at: NEW: Responsive CSS & HTML Layer Tutorial, Free PDF Download. Now available at:
2 Table of Content An Introduction to CSS: CSS Selectors How CSS is written Locations to place your CSS code... 4 Step 1: Creating a Style Rule using a Tag Selector Open your index.html file Creating a style rule for the body tag placed within the head section Trouble shooting Creating a style rule for the headline <h1> tag... 7 Step 2: Creating a Style Rule using a Class Selector Creating the new class style rule Applying (linking) your class style rule View of the update web page: Trouble shooting if class style is not working: Step 3: Creating a Style Rule using an ID selector Creating the new ID style rule Applying the ID style rule View of updated web page Trouble shooting if ID style rule is not working Adding to our ID style rule Step 4: Creating an External Style Sheet Open a new notepad file Saving the notepad file as a Cascading Style Sheet Copy and pasting style rules into the style sheet Deleting style rules and tags from index.html Inserting the style sheet link into index.html Trouble shooting Step 5: Updating your Photo Page to show CSS formatting Insert style sheet link into the photopage.html Applying class and ID selectors to photopage.html Other useful CSS Style Rule Properties and Values Other Tutorials available from All Creative Designs Copyright CSS Tutorial Notepad by Peter Krisch 2 of 29
3 An Introduction to CSS: 1. CSS Selectors There are 3 different types of CSS formatting in use called selectors: A. A class selector; which can be applied to any element (i.e. tables, rows, cells, images etc.) on your web page is identified and prefixed by a dot, followed by the name you have given to your style rule;.mybanner B. A tag selector (type element selector) will automatically change a specified tag as <body> for example to the CSS formatting anywhere on your web page. It is not prefixed but uses the tag itself without brackets; body C. An advanced or ID selector allows you to create individual styles by combining two or more styles and can be applied to an html element like a table. The same ID selector should only be applied once on your web page. It is prefixed by the hash key; #content_table a:hover 2. How is CSS written? CSS code is written in a statement called a style rule and starts by defining your type of selector (i.e. class, tag or ID) followed by your formatting referred to as a declarations enclosed in braces. (Opening and closing braces are located above and to the left of the Enter key.) An example of a CSS style rule using a tag selector: body { background-image: url(titlebgwateraqua.jpg); margin: 0px; } The declaration is divided into the component (property) you want to format and the value you want to use. In the example above the margin is the property followed by a colon and 0px (pixel) is the value finished by a semi-colon. This rule would set the body background to show the image and eliminate the body margins. Writing CSS and HTML is not particularly difficult, but it has to be very exact to work properly. Any small mistake like an added space or a missing semi-colon can cause errors in your script. Be consistent when using uppercase and lowercase letters, use identical spelling. Even with some practice you are bound to make some typing mistakes, but error checking will become increasingly easier. Copyright CSS Tutorial Notepad by Peter Krisch 3 of 29
4 3. Locations to place your CSS code There are 3 different locations to place CSS code: A. CSS rules can be placed inline (within the body section of your html document) the same way as html formatting. But these inline styles are avoided as they would repeat and add to your source code in the same way as html formatting does. Also updating any style rules on your web page(s) would be very time consuming. B. By placing style rules in the head section of your html document you can apply them without repeating and are able to update values a lot quicker. C. CSS code placed in a separate, external style sheet which can be linked to any page in your web site makes the task of updating numerous web pages easy. In the following step we will replace the html formatting used on the index page created in the Basic HTML Tutorials with new CSS style rules. You can also download images and html documents used in this tutorial at: If you are using a copy of your own web site follow instructions to open your index.html in notepad. Step 1: Creating a Style Rule using a Tag Selector 1. Open your index.html file Open your index.html file we created in Part 3 Navigate to your index.html file and single right click, select Open with and left click Notepad. If notepad does not appear on list, locate it under Choose program (See Figure 1) Copyright CSS Tutorial Notepad by Peter Krisch 4 of 29
5 The index.html file we created in the Basic HTMLTutorial Part 3: (See Figure 2) 2. Creating a style rule for the body tag placed within the head section Type the text shown in green under the title tag into the head section of your index file. Style rules are placed between your opening style <style type= text/css > and closing style tags </style>. Then select the html formatting (blue color) in the body tag and press delete on your keyboard. Do not copy and paste any html or CSS code (tags and style rules) from this PDF or other text editors like MS Word or your script might not work properly. <title>your Web Page Title</title> <style type="text/css"> body { background-image: url(titlebgwateraqua.jpg); topmargin: 0px; } </style> </head> <body background= tilebgwateraqua.jpg topmargin= 0 > (See Figure 3 on next page) Copyright CSS Tutorial Notepad by Peter Krisch 5 of 29
6 Make sure of identical spelling and keep the bracket of the body tag intact when deleting html formatting: In your notepad index.html document click file in top menu bar and click save. In windows explorer (My Computer) navigate to your my_first_web_page folder and double left click your index.html file to view your updated web page. The web page should look identical to before. 3. Trouble shooting Your background image disappeared and there is a gap showing at the top of your web page. Possible causes: 1. Missing or incorrect quotes and brackets in style tags 2. Opening or closing braces { } missing or incorrect 3. Missing or mistyped colon or semi-colon at end of line 4. Misspelled image file name 5. Wrong file extension for image i.e..jpg instead of.gif 6. Images are not saved in the same folder than your index.html file 7. Used double typed single quotes/apostrophes instead of inverted commas/double quotes Inverted commas/double quotes on your keyboard Your back ground image is showing but there is a gap at the top of the page: Your CSS style rule is working, but there is a mistake in the margin line. Your back ground image is not showing but there is no gap at the top of the page: Your CSS style rule is working, but there is a mistake in background-image line. Copyright CSS Tutorial Notepad by Peter Krisch 6 of 29
7 4. Creating a style rule for the headline <h1> tag We haven t used any html formatting in the index file for the <h1> tag, so by default in internet browsers the headline font face is Times New Roman, about 24pt in size and colored black. The new style rule using a tag selector will change the font face (type) to Arial, increase the size to 28px and change the text color to white. The value of color (here white) is defined by the # hash key followed by 6 capital letters F. Hexadecimal color code is explained on the next page. Beneath your first style rule add code shown in green. <title>your Web Page Title</title> <style type="text/css"> body { background-image: url(titlebgwateraqua.jpg); topmargin: 0px; } h1 { font-family: Arial; font-size: 28px; color: #FFFFFF; } </style> </head> (See Figure 4) In your notepad index.html document click file in top menu bar and click save. Copyright CSS Tutorial Notepad by Peter Krisch 7 of 29
8 In windows explorer (My Computer) navigate to your my_first_web_page folder and double left click your index.html file to view your updated web page. If your web page is still open in your browser just click refresh. (See Figure 5) Trouble shooting is the same as before and make sure you are always looking at a refreshed version of your web page. Possible font-families which can be displayed in any internet browser are limited to: Times New Roman, Verdana, Arial, Helvetica, Courier, sans-serif and Geneva. Specifying color by Hexadecimal Code: The combination of Red, Green, and Blue color values (RGB). Where FF stands for maximum and 00 for minimum (zero) values. RED GREEN BLUE FF Maximum value for RED and zero values for GREEN and BLUE result in a strong red color. color: #000000; = black color: #00FF00; = green color: #FFFFFF; = white color: #0000FF: = blue color: #FFFF00; = yellow color: #FF0000; = red color: #6600CC; = purple color: #FF3366; = pink color: #CCCCCC; = light grey color: #666666; = dark grey Find out more about web safe colors at: Copyright CSS Tutorial Notepad by Peter Krisch 8 of 29
9 Step 2: Creating a Style Rule using a Class Selector In this step we will wrap a paragraph <p> tag around our text on the home page (index.html) and create a style rule using a class selector to format it. The advantage of using a class selector instead of a <p> tag selector as we have done in the step before is; A <p> tag selector would automatically apply the same formatting to any text between any <p> tags on the whole web page. A class selector is more suitable as we can apply it to different <p> tags of our choice or to other html tags like table rows <tr> and cells <td>. 1. Creating the new class style rule In your index.html notepad file insert the new CSS code shown in green below, remember to use the prefix a dot typed before the name you choose for your class style. In this example the name is very descriptive naming property values of the actual class style. Remember not to use spaces and special characters in your style name. <title>your Web Page Title</title> <style type="text/css"> body { background-image: url(titlebgwateraqua.jpg); topmargin: 0px; } h1 { font-family: Arial; font-size: 28px; color: #FFFFFF; }.p-arial12w { font-family: Arial; font-size: 12px; color: #FFFFFF; } </style> </head> Do not save follow instructions on next page. Copyright CSS Tutorial Notepad by Peter Krisch 9 of 29
10 2. Applying (linking) your class style rule Delete opening <font color= white > tag above your text and closing </font> tag then replace with opening paragraph <p> and closing paragraph </p> tag. Now we going to apply the class style by adding to the opening paragraph <p class= p-arial12w > tag. Make sure of identical spelling with the name you have given your class style in the head of the document. Notice that there is no dot in front of your style name when it is applied to the <p> tag. Delete <font> tags and replace with <p> tags and apply your class style: <td> <font color= white ><p class="p-arial12w"> Type some text<br /> What is html? The abbreviation stands for Hyper Text Markup Language.<br /> The computer language used to create hypertext documents, allowing connections<br /> from one document or Internet page to numerous others.<br /> HTML is the primary language used to create pages on the World Wide Web.<br /><br /><br /> </font></p> <a href=" target="blank">google Link</a><br/><br /> (See Figure 6 on next page) Do not copy and paste any HTML or CSS code (tags and style rules) from this PDF or other text editors like MS Word or your script might not work properly. You can copy correctly working HTML and CSS code from other notepad files. Copyright CSS Tutorial Notepad by Peter Krisch 10 of 29
11 In your notepad index.html document click file in top menu bar and click save. In windows explorer (My Computer) navigate to your my_first_web_page folder and double left click your index.html file to view your updated web page. If your web page is still open in your browser just click refresh. (See Figure 7 on next page) Copyright CSS Tutorial Notepad by Peter Krisch 11 of 29
12 3. View of the update web page: 4. Trouble shooting if class style is not working: Make sure your class style has been properly applied to the <p> tag. Trace errors to the different properties and relating values that are not working within the style rule if only part of it is working. For example: Font face has changed but not the font size indicates an error in the font-size: 28; line. If suddenly none of your CSS formatting is showing there is a problem with the <style> tags being broken or deleted. Make sure you are always looking at a refreshed version of your web page! Change the style rule values to suit your taste (web page). Use safe fonts* and colors as mentioned before and adjust the font size to your liking. The class style we created can also be applied by adding class= p-arial12w to different html tags like a row <tr> or cell <td> tag. Example: <tr class= p-arial12w >. *(which means most different internet browsers like MS Internet Explorer, Google Chrome, Firefox and many more are able to display theses safe web fonts and colors) Copyright CSS Tutorial Notepad by Peter Krisch 12 of 29
13 Step 3: Creating a Style Rule using an ID selector 1. Creating the new ID style rule As mentioned before an ID or advanced selector allows you to create individual styles by combining two or more styles and can be applied to an html tag like a table <table> or table row <tr>. It is prefixed by the hash key. The same ID selector should only be applied once on your web page. This example uses an ID selector to change the appearance of page links on our home page (index.html) and will add more functionality. Type new CSS code between <style> tags in green and remember the hash key as a prefix: <style type="text/css"> body { background-image: url(titlebgwateraqua.jpg); topmargin: 0px; } h1 { font-family: Arial; font-size: 28px; color: #FFFFFF; }.p-arial12w { font-family: Arial; font-size: 12px; color: #FFFFFF; } #pagelinks a:link { font-family: Arial; font-size: 14pt; color: #FFFFFF; padding-right: 5px; padding-left: 5px; } </style> This will change the page links <a> Home and My Photos on the index page to font face Arial, color to black, adds padding on both sides and enlarges the font size to 14pt. Do not save yet, read instructions to apply the ID style rule on next page. Copyright CSS Tutorial Notepad by Peter Krisch 13 of 29
14 2. Applying the ID style rule Link the table row containing your page links with the ID selector by adding the code shown in green. Notice that there is no # hash key as a prefix and no a:link (denoting a link) in the CSS code applied to the table row below. </tr> <tr id="pagelinks"> <td width="700"> <a href="index.html">home</a> <a href="photopage.html">my Photos</a> </td> <td width="200"> </td> </tr> (See Figure 8) In your notepad index.html document click file in top menu bar and click save. Copyright CSS Tutorial Notepad by Peter Krisch 14 of 29
15 In windows explorer (My Computer) navigate to your my_first_web_page folder and double left click your index.html file to view your updated web page. If your web page is still open in your browser just click refresh. 3. View of updated web page (See Figure 9) 4. Trouble shooting if ID style rule is not working Nothing is working: Make sure you are always looking at a refreshed version of your web page! Check braces and quotes are in place. Make sure there is a prefix # (hash key) starting the style rule residing in the head of the index page. In the body part make sure the name of your ID style rule has been typed identical (without hash key prefix) and is applied to the right opening <tr> tag. If only part of the style rule is working: Trace errors to the different components and relating values that are not working within the style rule. For example: Font face has changed but not the font size indicates an error in the font-size: 14; line If suddenly none of your CSS formatting is showing there is a problem with the <style> tags being broken or deleted. Copyright CSS Tutorial Notepad by Peter Krisch 15 of 29
16 5. Adding to our ID style rule In the next step we include a style rule to change the color of the page links when the mouse pointer hovers over them (a common feature in web sites to emphasize hyper links). Beneath your first ID selector add the new style rule shown in green..p-arial12w { font-family: Arial; font-size: 12px; color: #FFFFFF; } #pagelinks a:link { font-family: Arial; font-size: 14pt; color: #FFFFFF; padding-right: 5px; padding-left: 5px; } #pagelinks a:hover { font-family: Arial; font-size: 14pt; color: #0000FF; padding-right: 5px; padding-left: 5px; } </style> There is no need to apply this ID style rule to the table row <tr> as it is already linked by <id = pagelinks > to any additional and/or combined ID style rules using the same name. (See Figure 10 on next page) You can copy and paste HTML or CSS code within the same html document or between different pages (documents) when using the notepad editor. It is possible to copy and paste text (not tags or style rules) from other text editors like MS Word and paste this text in between html tags only. For example: <p> Copied and pasted text </p> Copyright CSS Tutorial Notepad by Peter Krisch 16 of 29
17 In your notepad index.html document click file in top menu bar and click save. In windows explorer (My Computer) navigate to your my_first_web_page folder and double left click your index.html file to view your updated web page. If your web page is still open in your browser just click refresh. (See Figure 11on next page) Copyright CSS Tutorial Notepad by Peter Krisch 17 of 29
18 Trouble shooting is the same as in step 3.4 Because we applied the ID selector style rule only to a specific table row, the hyper links on the rest of the page still share the default html values for a link <a> tag. Which are; Times New Roman for font type, font size 12pt and color is blue. (See Google and Contact Me links above) To create an external style sheet follow instructions on next page. At this stage it is recommended that you save a copy of your index.html file to a different folder in your Documents as a back-up. Copyright CSS Tutorial Notepad by Peter Krisch 18 of 29
19 Step 4: Creating an External Style Sheet We now have created CSS style rules using the three different selectors and placed them in the head section of our index.html file. This makes them accessible anywhere on this web page, but not to the My Photos page. It is possible to copy and paste our style rules into the head section of this page or into any other page in your web site. The drawback of this method is that every separate page has to be updated individually to change any formatting consistently. To avoid this we will create a separate, external style sheet containing all our style rules and then link it to any page by only including a short link statement in the head section of each page. 1. Open a new notepad file In your index.html notepad file go file in top menu bar and select New. (See Figure 12) This will open an untitled new notepad document. See next page for further instructions. Copyright CSS Tutorial Notepad by Peter Krisch 19 of 29
20 2. Saving the notepad file as a Cascading Style Sheet 1. In the Untitled Notepad file go to file and select Save As 2. Navigate to your web site root folder 3. Select All Files under Save as Type drop-down list 4. Type a name for your style sheet followed by the file extension.css Our example is called my-styles.css 5. Click Save Remember not to use spaces and special characters in your style sheet name. (See Figure 13) Copyright CSS Tutorial Notepad by Peter Krisch 20 of 29
21 Open and empty style sheet: (See Figure 14) Minimize your style sheet (my-styles - Notepad) and open your index.html file in notepad. 3. Copy and pasting style rules into the style sheet Select all style rules but not the style tags and right click on selected text then click Copy. (See Figure 15) Copyright CSS Tutorial Notepad by Peter Krisch 21 of 29
22 Maximize (or reopen) your my-styles Notepad (See Figure 16) Right click at top of page and click paste. (See Figure 17) Make sure last closing brace is in place and there are no copied style tags. If everything looks correct: Go to File in my-styles Notepad and click Save. Copyright CSS Tutorial Notepad by Peter Krisch 22 of 29
23 4. Deleting style rules and tags from index.html Maximize or open your index Notepad: Select all style tags and rules then right click on top of selected text and click Delete. Make sure you leave <title> tag and closing </head> tag intact. (See Figure 18) Do not save follow instruction on next page. Copyright CSS Tutorial Notepad by Peter Krisch 23 of 29
24 5. Inserting the style sheet link into index.html Into the space between title and closing head tag type link statement: <title>your Web Page Title</title> <link href= my-styles.css rel= stylesheet type= text/css /> </head> Notice the closing forward slash at the end of the link statement. In your notepad index.html document click file in top menu bar and click Save. In windows explorer (My Computer) navigate to your my_first_web_page folder and double left click your index.html file to view your updated web page. If your web page is still open in your browser just click refresh. Your web page should look as before, if not see trouble shooting on next page. Copyright CSS Tutorial Notepad by Peter Krisch 24 of 29
25 6. Trouble shooting Your CSS formatting has disappeared: (See Figure 21) This error was caused by missing quotes in the link statement: <link href= my-styles.css rel= stylesheet type= text/css /> Other possible causes: Misspelled your style sheet name or forgot file extension.css The my-styles.css file is not saved in the same folder as the index.html You completed the my-styles.css file but haven t saved it yet Broken or deleted closing </head> tag Step 5: Updating your Photo Page to show CSS formatting 1. Insert style sheet link into the photopage.html Insert the same link statement as you have done in the index.html page. You can copy and paste the link from the index page into the photopage or type the link. (See Figure 22) Copyright CSS Tutorial Notepad by Peter Krisch 25 of 29
26 In your photopage.html - notepad file click File in top menu bar and click Save. In windows explorer (My Computer) navigate to your my_first_web_page folder and double left click your photopage.html file to view your updated web page. If your web page is still open in your browser just click refresh. (See Figure 23) If no CSS formatting is showing follow trouble shooting on page before. You will notice that the headline <h1> and body <body> show our CSS formatting as we used tag selector style rules, which will change headline and body appearance automatically. For our class and ID selector style rules to work we will have to apply them to the photopage.html. See instruction on next page. Copyright CSS Tutorial Notepad by Peter Krisch 26 of 29
27 2. Applying class and ID selectors to photopage.html In your photopage notepad file apply your class and Id selector style rules as shown below. (See Figure 24) In your photopage.html - Notepad file click File in top menu bar and click Save. In windows explorer (My Computer) navigate to your my_first_web_page folder and double left click your photopage.html file to view your updated web page. If your web page is still open in your browser just click refresh. Repeat step 5.1 and 5.2 to any other web pages in your web site. (See Figure 25 on next page) Copyright CSS Tutorial Notepad by Peter Krisch 27 of 29
28 The photopage.html is now showing all CSS formatting. (See Figure 25) Click your Home Page link and toggle between pages. The Finished Project. Open your my-styles style sheet, alter values and save. Try out more style rule properties and values on next page. Copyright CSS Tutorial Notepad by Peter Krisch 28 of 29
29 Other useful CSS Style Rule Properties and Values These properties and values apply to Class, ID and Tag selectors. font-style: italic; Set text to italic font-weight: bold; Set text to bold background-color: #000000; Set background color to black border: thin inset #FFFFFF; Apply thin inset border, color = white border: medium ridge #FF0000; Apply medium ridged border, color=red border: thick double #CCFF00; Apply thick double border, color= yellow text-align: left; Align text to left side text-align: right; Align text to right side text-align: center; Center text text-align: justify; Justify text text-decoration: none; Stops links from being underlined padding-top: 3px; Adds padding at the top (of cell) padding-bottom: 3px; Adds padding at bottom (of cell) cursor: pointer; Shows a mouse pointer (over images) height: 140px; Sets height in pixel width: 700px; Sets width in pixel Other Tutorials available from All Creative Designs NEW: HTML Div Layers & Responsive CSS Download Tutorial and Project Files HTML Web Page Tutorial using Notepad, PDF Download Page Part 1 Free PDF HTML Tag Tutorial using Notepad, Download Page Part 2 Free PDF HTML Tag Tutorial using Notepad, Download Page Part 3 Web Design Tutorial using KompoZer, PDF Download Page Picasa Photo Editing Tutorial, Free PDF Download Page SEO Tutorial Basic Search Engine Optimization PDF Download Page A Video Editing Tutorial using MS Movie Maker Download Page Copyright CSS Tutorial Notepad by Peter Krisch 29 of 29
{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 Basics. Cindy Royal, Ph.D. Associate Professor Texas State University
Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates
Dreamweaver CS4 Day 2 Creating a Website using Div Tags, CSS, and Templates What is a DIV tag? First, let s recall that HTML is a markup language. Markup provides structure and order to a page. For example,
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...
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
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
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 A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions)
CREATING A NEWSLETTER IN ADOBE DREAMWEAVER CS5 (step-by-step directions) Step 1 - DEFINE A NEW WEB SITE - 5 POINTS 1. From the welcome window that opens select the Dreamweaver Site... or from the main
CHAPTER 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
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
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?
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
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
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
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
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
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
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
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 2
Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 2 CSS stands for Cascading Style Sheets, these allow you to specify the look and feel of your website. It also helps with consistency.
Web 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
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
HTML, CSS, XML, and XSL
APPENDIX C HTML, CSS, XML, and XSL T his appendix is a very brief introduction to two markup languages and their style counterparts. The appendix is intended to give a high-level introduction to these
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
Web Building Blocks. Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.
Web Building Blocks Core Concepts for HTML & CSS Joseph Gilbert User Experience Web Developer University of Virginia Library joe.gilbert@virginia.edu @joegilbert Why Learn the Building Blocks? The idea
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
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
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
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
Introduction to Web Design Curriculum Sample
Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic
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
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
Advanced Drupal Features and Techniques
Advanced Drupal Features and Techniques Mount Holyoke College Office of Communications and Marketing 04/2/15 This MHC Drupal Manual contains proprietary information. It is the express property of Mount
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) W3C standard for defining presentation of web documents (way documents are displayed or delivered to users typography, colours, layout etc) Presentation separated from content
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
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING
EUROPEAN COMPUTER DRIVING LICENCE / INTERNATIONAL COMPUTER DRIVING LICENCE WEB EDITING The European Computer Driving Licence Foundation Ltd. Portview House Thorncastle Street Dublin 4 Ireland Tel: + 353
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,
Advanced Web Design. Zac Van Note. www.design-link.org
Advanced Web Design Zac Van Note www.design-link.org COURSE ID: CP 341F90033T COURSE TITLE: Advanced Web Design COURSE DESCRIPTION: 2/21/04 Sat 9:00:00 AM - 4:00:00 PM 1 day Recommended Text: HTML for
Caldes CM12: Content Management Software Introduction v1.9
Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge
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
How to code, test, and validate a web page
Chapter 2 How to code, test, and validate a web page Slide 1 Objectives Applied 1. Use a text editor like Aptana Studio 3 to create and edit HTML and CSS files. 2. Test an HTML document that s stored on
HTML TIPS FOR DESIGNING
This is the first column. Look at me, I m the second column.
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
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
About webpage creation
About webpage creation Introduction HTML stands for HyperText Markup Language. It is the predominant markup language for Web=ages. > markup language is a modern system for annota?ng a text in a way that
How to Properly Compose E-Mail HTML Code : 1
How to Properly Compose E-Mail HTML Code : 1 For any successful business, creating and sending great looking e-mail is essential to project a professional image. With the proliferation of numerous e-mail
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
HTML5 and CSS3 Design with CSS Page 1
HTML5 and CSS3 Design with CSS Page 1 1 12 2 3 3 4 45 5 6 6 7 7 HTML5 and CSS3 DESIGN WITH CSS Styles in HTML Documents Styles provide a method of creating consistent formatting of elements throughout
Web Design 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
COMMON CUSTOMIZATIONS
COMMON CUSTOMIZATIONS As always, if you have questions about any of these features, please contact us by e-mail at pposupport@museumsoftware.com or by phone at 1-800-562-6080. EDIT FOOTER TEXT Included
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
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
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
Building Your Website
Building Your Website HTML & CSS This guide is primarily aimed at people building their first web site and those who have tried in the past but struggled with some of the technical terms and processes.
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
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
Introduction to XHTML. 2010, Robert K. Moniot 1
Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document
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
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,
An Attribute is a special word used inside tag to specify additional information to tag such as color, alignment etc.
CHAPTER 10 HTML-I BASIC HTML ELEMENTS HTML (Hyper Text Markup Language) is a document-layout and hyperlink-specification language i.e., a language used to design the layout of a document and to specify
Short notes on webpage programming languages
Short notes on webpage programming languages What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is a markup language A markup language is a set of
ITP 101 Project 3 - Dreamweaver
ITP 101 Project 3 - Dreamweaver Project Objectives You will also learn how to make a website outlining your company s products, location, and contact info. Project Details USC provides its students with
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
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
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
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
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
Website 101. Yani Ivanov. Student Assistant / Web Administrator
Website 101 Yani Ivanov Student Assistant / Web Administrator Information Technology for Environmental Research Area of the Hawai`i NSF EPSCoR Program Covered Topics Introduction to HTML What is it and
Contents. Introduction... 2. Downloading the Data Files... 2
Creating a Web Page Using HTML Part 3: Multi-page Management and Uploading INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.1 Summer 2009 Contents Introduction... 2 Downloading
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
Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL
Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL K5 CMS The K5 Content Management System (CMS), previously known as Kwik-Az Updating, is a small downloadable program that permits
Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7
Version 4.0.1 Table of Contents THE DESIGNER S GUIDE TO CREATING NEWZAPP DRAG AND DROP TEMPLATES... 6 THE NEWZAPP SYSTEM... 7 HOW THE SYSTEM WORKS... 7 THE TWO MAIN HTML EMAIL DESIGN OPTIONS FOR NEWZAPP...
Table of Contents Find out more about NewZapp
Table of Contents Why is email display an issue in email marketing?... 2 Expert Email Design... 3 Desktop PC and Apple Mac email applications... 4 Web and mobile device email readers... 5 Creating your
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
CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide
CONTENTM WEBSITE MANAGEMENT SYSTEM Getting Started Guide Table of Contents CONTENTM WEBSITE MANAGEMENT SYSTEM... 1 GETTING TO KNOW YOUR SITE...5 PAGE STRUCTURE...5 Templates...5 Menus...5 Content Areas...5
Web Development 1 A4 Project Description Web Architecture
Web Development 1 Introduction to A4, Architecture, Core Technologies A4 Project Description 2 Web Architecture 3 Web Service Web Service Web Service Browser Javascript Database Javascript Other Stuff:
USD WEB SERVICES ADOBE DREAMWEAVER CSS DEVELOPMENT
WEB SERVICES ADOBE DREAMWEAVER CSS DEVELOPMENT INFORMATION TECHNOLOGY SERVICES UNIVERSITY OF SAN DIEGO DEVELOPED BY JOY BRUNETTI BRUNETTI@SANDIEGO.EDU X8772 APRIL 2006 TABLE OF CONTENTS DREAMWEAVER CSS
KOMPOZER Web Design Software
KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web
WEB 140 WEB DEVELOPMENT TOOLS
WEEK 2 Objectives: Website basics Planning a Website Setting up a site in KompoZer Resources: WEBSITE BASICS Websites and pages can have many forms but there are some basics that are generally on all sites
Skills and Topics for KidCoder: Beginning Web Design
Skills and Topics for KidCoder: Beginning Web Design Our Self-Study Approach Our courses are self-study and can be completed on the student's own computer, at their own pace. You can steer your student
Web Publishing Basics 2
Web Publishing Basics 2 HTML and CSS Coding Jeff Pankin pankin@mit.edu Information Services and Technology Contents Course Objectives... 2 Creating a Web Page with HTML... 3 What is Dreamweaver?... 3 What
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
Jadu Content Management Systems Web Publishing Guide. Table of Contents (click on chapter titles to navigate to a specific chapter)
Jadu Content Management Systems Web Publishing Guide Table of Contents (click on chapter titles to navigate to a specific chapter) Jadu Guidelines, Glossary, Tips, URL to Log In & How to Log Out... 2 Landing
Creating a Web Page Using HTML, XHTML, and CSS: The Basics
Creating a Web Page Using HTML, XHTML, and CSS: The Basics Mary L. Lanigan, Ph.D. Copyright 2010 Third House Inc. 1 Preface In this module, you will create a web page. The web page will look like a mini-resume.
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,
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 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
How to Edit Your Website
How to Edit Your Website A guide to using your Content Management System Overview 2 Accessing the CMS 2 Choosing Your Language 2 Resetting Your Password 3 Sites 4 Favorites 4 Pages 5 Creating Pages 5 Managing
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
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
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
Joomla Article Advanced Topics: Table Layouts
Joomla Article Advanced Topics: Table Layouts An HTML Table allows you to arrange data text, images, links, etc., into rows and columns of cells. If you are familiar with spreadsheets, you will understand
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
Web Development CSE2WD Final Examination June 2012. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards?
Question 1. (a) Which organisation is primarily responsible for HTML, CSS and DOM standards? (b) Briefly identify the primary purpose of the flowing inside the body section of an HTML document: (i) HTML
A send-a-friend application with ASP Smart Mailer
A send-a-friend application with ASP Smart Mailer Every site likes more visitors. One of the ways that big sites do this is using a simple form that allows people to send their friends a quick email about
New Perspectives on Creating Web Pages with HTML. Considerations for Text and Graphical Tables. A Graphical Table. Using Fixed-Width Fonts
A Text Table New Perspectives on Creating Web Pages with HTML This figure shows a text table. Tutorial 4: Designing a Web Page with Tables 1 2 A Graphical Table Considerations for Text and Graphical Tables
Umbraco v4 Editors Manual
Umbraco v4 Editors Manual Produced by the Umbraco Community Umbraco // The Friendly CMS Contents 1 Introduction... 3 2 Getting Started with Umbraco... 4 2.1 Logging On... 4 2.2 The Edit Mode Interface...
Creating Personal Web Sites Using SharePoint Designer 2007
Creating Personal Web Sites Using SharePoint Designer 2007 Faculty Workshop May 12 th & 13 th, 2009 Overview Create Pictures Home Page: INDEX.htm Other Pages Links from Home Page to Other Pages Prepare
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
HIT THE GROUND RUNNING MS WORD INTRODUCTION
HIT THE GROUND RUNNING MS WORD INTRODUCTION MS Word is a word processing program. MS Word has many features and with it, a person can create reports, letters, faxes, memos, web pages, newsletters, and