Jeff Pankin Information Services &...
Transcript of Jeff Pankin Information Services &...
![Page 1: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/1.jpg)
Intermediate Web Publishing:
Working with Styles
Jeff Pankin
Information Services & Technology
![Page 2: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/2.jpg)
Web Publishing Basics
Contents Introduction .................................................................................................................................... 2
In this class you will:.................................................................................................................... 2
Set the Preferences ..................................................................................................................... 2
General .................................................................................................................................... 2
Invisible Elements ................................................................................................................... 2
New Document ....................................................................................................................... 2
Preview in Browser ................................................................................................................. 2
Define a Site ................................................................................................................................ 3
Set up Dreamweaver to Upload Files ......................................................................................... 3
Note: Dependent files refer to page images and linked stylesheets.......................................... 4
How to View Your Pages on the Web ......................................................................................... 4
Create the First Web Page .......................................................................................................... 4
The index.html web page so far… ............................................................................................... 5
Cascading Style Sheets (CSS) ........................................................................................................... 6
About Styles ................................................................................................................................ 6
Basic CSS Syntax .......................................................................................................................... 7
The CSS Panel .............................................................................................................................. 9
Create a Tag Style ....................................................................................................................... 9
The Rule Definition Dialog Box ................................................................................................. 10
Editing Styles ............................................................................................................................. 10
Text Properties for h1 ............................................................................................................... 10
Create a Class Style ................................................................................................................... 11
To Center Text ........................................................................................................................... 11
Apply a Class Style to a Tag ....................................................................................................... 11
Apply a Class Style to Selected Text .......................................................................................... 11
Link to an External Style Sheet ................................................................................................. 12
Background Properties ............................................................................................................. 12
The Box Model .......................................................................................................................... 13
More about the box model ................................................................................................... 14
Some shortcuts for box property values .............................................................................. 14
Understanding Float ................................................................................................................. 15
![Page 3: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/3.jpg)
Web Publishing Basics
Float Exercise: ........................................................................................................................... 16
Understanding Position ............................................................................................................ 17
Advantages of Absolute Positioning ..................................................................................... 18
Disadvantages of Absolute Positioning................................................................................. 18
Advantages of Using Float Layout......................................................................................... 18
Disadvantages of Float Layout .............................................................................................. 18
Some ways to think about web page layout ............................................................................. 19
Creating a Page Layout with CSS Positioning ............................................................................ 20
Positioning using Float .............................................................................................................. 21
Creating a Float Layout ............................................................................................................. 21
Descendant Selectors................................................................................................................ 22
continued .............................................................................................................................. 22
Format the Menu ...................................................................................................................... 24
Pop-up Menus ........................................................................................................................... 24
Creating a Print Style Sheet ...................................................................................................... 25
Validating your CSS ................................................................................................................... 25
Resources .................................................................................................................................. 26
Copyright © 2010 by Massachusetts Institute of Technology. All Rights Reserved.
![Page 4: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/4.jpg)
Web Publishing Basics
![Page 5: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/5.jpg)
Web Publishing Basics
Introduction
In this class you will:
review the basics of working with styles to establish the look-and-feel throughout a site
use Dreamweaver to create, edit, apply and manage styles
use styles with background images
use CSS positioning for the layout of a web page
use CSS to design menus
Set the Preferences
Win: Edit menu > Preferences Mac: Dreamweaver menu > Preferences
General
Check Use <strong> instead of <b> and <em> instead of <i> Uncheck Use CSS tags instead of HTML tags
Invisible Elements
Check all
New Document
Default document: HTML Default extension: .html Default Document Type (DTD): XHTML 1.0 Transitional
Preview in Browser
set up the Firefox browser as primary browser
![Page 6: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/6.jpg)
Web Publishing Basics
Define a Site
We define a site in Dreamweaver to identify the location of our web files. This allows Dreamweaver to track and automatically update links when we change a file name or move a file. Also, when we define a site we can use Dreamweaver's secure FTP to move our files to our Athena locker.
Step 1 - create or choose a local root folder Step 2 - in Dreamweaver choose Site menu > New Site Step 3 - name your site (could be anything; best practice: use same name as root folder) Step 4 – use the Browse icon to show Dreamweaver your local root folder
Set up Dreamweaver to Upload Files
1. From the Site menu choose Edit Sites. 2. Select the desired site, and click Edit.... 3. Click on the Advanced tab -- if not already there -- and select Remote Info from the
Category list on the left. 4. On the Remote Info dialog, select or enter the following then Click OK.
Below are the settings for Dreamweaver for both Windows and Macintosh computers. Full instructions for configuring connections with Dreamweaver are also available online at…
http://itinfo.mit.edu/article.php?id=7980.
FTP Host sun.dialup.mit.edu
Host Directory example path for department locker /afs/athena.mit.edu/org/c/chemistry example path for personal locker /afs/athena.mit.edu/user/p/a/pankin/www Note the use of the first two letters for user name but first letter only for org name.
Login Kerberos username
Password Leave blank
Use Passive FTP Check this option.
Use Firewall Uncheck this option.
Use Secure FTP (SFTP) Check this option.
Click the Expand/Collapse button to switch to a split view of your Remote files and Local
files. Click to return to the normal Files panel view.
![Page 7: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/7.jpg)
Web Publishing Basics
In the split view click on the small plug icon to connect. You can now move files securely between the remote site and your local site.
Note: Dependent files refer to page images and linked stylesheets.
How to View Your Pages on the Web
When you have uploaded your pages, you can go see them in a browser by typing the url. Your url will follow the convention shown here:
Organization url: http:// web.mit.edu/org name (e.g. http://web.mit.edu/watercolor/a1 or http://web.mit.edu/ist)
Personal url: http://web.mit.edu/yourusername/www
(e.g., http://web.mit.edu/pankin/www)
Create the First Web Page
1. Create a new Basic HTML page 2. Open the file "source.txt" 3. Copy the text and paste into your new document 4. Format headings and blockquote 5. Add a title 6. Save as index.html 7. Preview, upload, view live page
![Page 8: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/8.jpg)
Web Publishing Basics
The index.html web page so far…
![Page 9: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/9.jpg)
Web Publishing Basics
Cascading Style Sheets (CSS) Originally the web was used by academics to share scientific papers. HTML tags were designed to give structure to these papers. As the web came to be used commercially developers wanted to use fonts, color and other kinds of formatting. Internet Explorer and Netscape added the <font> tag to their browsers to allow formatting to be embedded in HTML documents. The World Wide Web Consortium (W3C) the international standards body for the web created styles and stylesheets in 1996 at the time they released the standards for HTML 4.0. Stylesheet definitions provide consistent formatting for a web page or an entire site. After introducing CSS, the W3C recommended that certain formatting tags in HTML (e.g., the <font> tag) be phased out and replaced by styles.
About Styles
1. A style is a collection of formatting (e.g., bold, blue, 24px). By applying a style to
content all the formatting in the style is applied at once.
2. When the formatting of a style is changed all content with that style gets updated automatically.
3. Styles may be located in the <head> of a web document available only to that
document. Or they may be kept in a separate file and used by some or all the pages in a web site.
CSS gives more control over font size, background images, placement of items, layout of pages and the way links function! Also we can apply styles to one area and not another. Without the use of CSS browsers may interpret html individually.
![Page 10: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/10.jpg)
Web Publishing Basics
Basic CSS Syntax
I. A style definition contains three parts: a selector, a property and a value.
selector {property: value}
h1 {color: red}
selector 1. the name of a tag (tag) 2. a name you create (class) 3. the name of a div (id)
h1, p, body .mystyle, .align-table #header #nav
property the attribute you wish to change font-size, font-family, color
value what the attribute will change to 24px, “times new roman", blue
A class style names begin with a period. An id styles begins with a # (hash mark). Values with more than one word are in quotation marks.
II. This is the format for styles placed in the <head> of an html document. Include the bold html tags. <head>
<style type="text/css"> h1 {color: red}
</style> </head> Styles placed in a cascading stylesheet document (.css extension) require only the style, not the html tags.
body {font-family: arial,”times new roman”} h1 {color: red} h2 {color: blue}
Styles in the head of a document are only available in the document where they are located. Styles in a .css document may link to any html document.
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
![Page 11: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/11.jpg)
Web Publishing Basics
III. A single style declaration may include multiple selectors separated by commas. h1, h2 {color: red} A single style declaration may include multiple property/value pairs separated by a semicolon. h1 {color: red; font-family: arial}
IV. A tag style affects all content using that style. If the h1 tag is defined to be red then every use of h1 will be red. A class style is:
1. given a user defined name which begins with a period 2. applied to content as needed
Example: a style named .red may be applied to any content – single characters, phrases, sentences and any individual tag.
V. Tag style formatting is applied when the tag is used. Class style formatting must be applied by you.
To apply a class style to a block level tag add the class attribute to the open part of the tag. <p class="red">Welcome to the MIT Watercolor Club Home Page</p> To apply a class style to inline content surround the content with the <span> tag and add the class attribute to the open part of the span tag. <p>Welcome to the <span class="red">MIT Watercolor Club</span> Home Page.</p>
Drop the period from the name of a class style when it is applied.
![Page 12: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/12.jpg)
Web Publishing Basics
The CSS Panel
You can control all styles activity through the CSS panel. Close the Files panel to allow more room in the panel area for the CSS panel.
Create a Tag Style
(at cursor location)
![Page 13: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/13.jpg)
Web Publishing Basics
The Rule Definition Dialog Box
The Rules Definition Dialog box is a convenient place to choose properties and attributes for a style definition. Clicking a category brings into view properties associated with that category.
Editing Styles
1. Double click any style name to open Rule Definition dialog for that style. 2. Edit one of your styles and click the Apply button to see your changes in the window
behind the dialog box. 3. Edit a style in the CSS panel.
Text Properties for h1
Property Value
Font Verdana, Arial, Helvetica, sans-serif
Size 30px
Weight leave blank [Note: only Bold has been implemented in browsers]
Style leave blank [Note: only Italic has been implemented in browsers]
Variant leave blank [Note: won't show in Dreamweaver; Preview in Browser to see]
Line Height leave blank [Note: HTML does not provide a means to control this property]
Case leave blank
Decoration underline confuses with link none – we'll use with link to take out underline to create button
Color choose from picker or enter # six digit code
![Page 14: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/14.jpg)
Web Publishing Basics
Create a Class Style
1. Create a new class style named .copyright 2. Choose - Size: 12 pixels, Style: italic, color: maroon 3. Exit the dialog box and apply the style .copyright
To Center Text
Use the property value pair “text-align: center" in the Block category. Note: This is a block level property. It will not work if text is selected.
Apply a Class Style to a Tag
To apply a class style to a tag, click on the tag and select the style from the pop-up menu on the Properties panel.
Tag selector bar <p.copyright>
Code View <p class="copyright">Copyright 2007 MIT </p>
Apply a Class Style to Selected Text
To apply a class style to selected text, select the text and select the style from the pop-up menu on the Properties panel.
Tag selector bar <span.copyright>
Code View <span class="copyright">MIT</span>
![Page 15: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/15.jpg)
Web Publishing Basics
Link to an External Style Sheet
To link to an existing stylesheet open the Style popup menu on the Properties Panel and choose Attach Style Sheet.
Background Properties
Choose Background from the category list.
Property Value
Background-color use the color picker pop-up or type in a color code [e.g., #3388FF]
Background-image select an image for the background – default position is upper left corner
Background-repeat repeats the background image throughout the page or on the X or Y axis
Background-attachment use fixed to prevent the image from scrolling
Background-position (X) left, center, right or amount in pixels
Background-position (Y) top, center, bottom or amount in pixels
![Page 16: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/16.jpg)
Web Publishing Basics
The Box Model
To ensure consistency across browsers, the w3c developed standards for the way browsers should interpret margins, borders and padding of an element. These standards are referred to as the Box Model. http://www.w3.org/TR/CSS2/box.html The basic idea is that every element has a margin, border and padding on the top and bottom as well as the left and right. Each of these may be styled differently using the appropriate property name.
Things to know about the Box Model:
all elements have the option to display borders, padding and margins - they are set
to 0 by default
margins are transparent, picking up the color of their enclosing element
top and bottom margins are merged using the higher margin value or to the size of
one value if they are the same size
there is a shorthand for designating different sides
![Page 17: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/17.jpg)
Web Publishing Basics
More about the box model
content The content area holds the content of the element.
padding Padding creates visual space around the content.
border Border surrounds the content and padding and gives a visual boundary.
margin Margin surrounds the border, padding and content and allows for space between the element and other elements.
a background color or image will show under content and padding but not the margin
padding and margins may be set in pixels, percents or ems
border size may be set in pixels or by the keywords thin, medium or thick
border styles include solid, dotted, dashed, double and others
Some shortcuts for box property values
to specify sides for margin or padding
padding: 10px; [top right bottom left all 10px] padding: 10px 5px [top and bottom 10px, left and right 5 px] padding: 10px 20px 5px [top 10px, left and right 20px, bottom 5px]
zero a value of zero does not require a measurement type
border border: solid 2px green [solid, green border 2px thick on all sides] border: solid [solid black 3px border on all sides]
Note: values may be in any order.
For more info on css-shorthand see: http://www.dustindiaz.com/css-shorthand/
![Page 18: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/18.jpg)
Web Publishing Basics
Understanding Float
Things to know about Float:
elements on a web page are placed in the document flow from top to bottom
block elements have a line break between them and span the width of the screen
an element with the float property is removed from the normal flow and placed on
the left or right
floated elements sit over other block elements and won't disrupt their flow
(although may re-route it)
content which follows a floated element in the code moves up but respects the
floated element's boundaries and flows around it
the clear property ensures that a floated element will be placed under (or clear of)
other block elements
a floated element must have a width unless it's an image
![Page 19: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/19.jpg)
Web Publishing Basics
Float Exercise:
1. Add the image franklin.jpg to the paragraph About the Director. 2. Float the head shot to the left. Add padding right and bottom. 3. Create a sidebar using a div and float it to the right of the first paragraph. Add
padding and margin left and bottom. 4. Format the div.
![Page 20: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/20.jpg)
Web Publishing Basics
Understanding Position
Things to know about Positioning:
elements on a web page are placed in the document flow from top to bottom
block elements have a line break between them and span the width of the screen
inline elements flow left to right and lines expand vertically if more content is added
there are four values for position: static, absolute, fixed, and relative
the properties top, right, bottom, and left are used to position an element
positioning an element means removing it from the normal flow
static places element in the normal flow; this is the default so it's used to override another positioning value
absolute places an element anywhere on the page determined by top, bottom, left and right values; placement is relative to the sides of the page or the containing element
fixed places an element anywhere on the page determined by top, bottom, left and right values; placement is relative to the browser window and does not move when the page is scrolled – other content moves underneath it
relative normal flow is set then position is offset by value for top, bottom, left or right from its location in normal flow
Use top, bottom, left and right to position an element from an edge. Use width to set the width of the content area.
![Page 21: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/21.jpg)
Web Publishing Basics
More about positioning for layouts:
to layout a page with CSS developers use either positioning or floats, each has its advantages and drawbacks
absolute positioning allows precise placement but is more difficult and inflexible
the use of floats is the most widely used layout method
CSS positioning uses divs instead of table cells
a div contains content, marks a logical grouping and is treated as a block with a line break before and after
a div is created for each major section i.e., header, nav, content, sidebar and footer
sometimes a div may be wrapped around several divs (a wrapper or container) allowing some formatting to be set once in the wrapper
each div is usually given a unique id which allows for individualized styling
Advantages of Absolute Positioning
"absolute" control of where things are placed
the structural order of content does not matter (useful for placing content before navigation which is good for accessibility and search engine optimization)
Disadvantages of Absolute Positioning
if you are not careful positioned content can overlap other content
it's difficult to place the footer to adjust for column height
Advantages of Using Float Layout
can be simpler than positioned layout
more widely used
avoids need to set top property for footer on each page to accommodate varying amounts of content
Disadvantages of Float Layout
may require moving content around in code
may be less effective for accessibility and search engine optimization
![Page 22: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/22.jpg)
Web Publishing Basics
Some ways to think about web page layout
Fixed (Frozen)
1. page content width remains the same regardless of widow size 2. may be left aligned or more typically centered 3. allows more precise control of design but may not use browser window width
effectively 4. width set at either 760px for 800x600 screen/resolution size or 950px for 1024x760
screen/resolution size Liquid (Elastic)
1. content width expands or contracts based on browser width and/or font size 2. a bit more challenging to achieve but makes better use of the browser window width 3. widths are fixed but defined in ems so a change in font size will change the width, which
allows user to adjust font size Jello* (something between Fixed and Liquid)
1. content area is fixed width set in center 2. margins are made liquid by using auto value for margin width 3. change in browser window width expands or collapses margins until it begins to cover
fixed width content 4. has similar advantages to fixed layout in terms of precise design control
* attributed to Mike Purvis, 2005 - www.positioniseverything.net/articles/jello-expo.html
We will create a Jello layout using floated elements.
![Page 23: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/23.jpg)
Web Publishing Basics
Creating a Page Layout with CSS Positioning
There are several considerations before designing your web page layout. 1. Will you use a fixed width or liquid design layout, or something in-between?
Your audience may view your pages on different sized monitors, using different resolutions, with different sized browser windows. Some may be viewing your pages with a text-only browser or on a mobile device with a very small screen. A liquid design allows web content to expand or contract gracefully into whatever size space it is given. Part of designing liquid layouts is through the use of relative units for widths and font size (e.g., em or %). 2. Which browsers and which browser versions will you support?
At MIT we write code to work in the IS&T supported browsers. If you expect your site to be viewed by people outside of MIT or around the world you may need to consider older browsers.
Note: IS&T supported browsers include Internet Explorer v. 7, 8, Safari v. 4 and Firefox v.3.
3. What is the minimum screen resolution you will support?
Many people in the world may still have monitors with an 800x600 pixel screen resolution. At MIT most people probably have screen resolutions of 1024x768. This means that a page in a browser maximized to full screen WITHOUT the need for a horizontal scroll bar.
Allowing for the edges of a browser called "chrome" – we would use a maximum width of 760px for an 800x600 resolution or 950px for a 1024x768 screen resolution.
We will write for a 1024x768 screen width.
![Page 24: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/24.jpg)
Web Publishing Basics
Positioning using Float
Creating a Float Layout
This layout uses a containing block, a sixth div around the five content divs which forms what is often called a wrapper.
1. Create divs for each of the five content areas – header, navbar, sidebar, main, footer. 2. Add the id attribute to name each div. 3. Arrange the divs in the correct order. 4. Type the content for the footer div. 5. Set an appropriate width for each div. (you decide) 6. Float the divs into position. 7. Keep the footer in the normal flow - #footer {clear: left} 8. Center the wrapper - #wrapper {margin-left: auto; margin-right: auto} 9. Continue formatting – change #wrapper background; adjust margins within the wrapper
![Page 25: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/25.jpg)
Web Publishing Basics
Descendant Selectors
Things to know about Descendant Selectors:
when a tag is located inside another tag it is called a nested tag
the outer tag is called the parent tag, the inner tag is called the child
multiple tags inside the parent are said to be siblings
two tags right next to each other are said to be adjacent siblings
In the following example the divs #first and #second are parents. The h1, paragraph, ul and li elements are children. These elements are said to be nested. <div id="first"> <h1>This is a heading 1.</h1> <p>This is the first paragraph.</p> <p>This is the second paragraph.</p> </div> <div id="second"> <ul>
<li>This is a line item.</li> <li>This is a line item.</li> <li>This is a line item.</li>
</ul> </div> Here the h1, h2 and paragraph elements are children of the parent div element. Here is a tree diagram of this block.
li
body
div
div
h1 p p ul
![Page 26: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/26.jpg)
Web Publishing Basics
<div id="first"> <h1>This is a heading 1.</h1> <p>This is the first paragraph.</p> <p>This is the second paragraph.</p> </div> <div id="second"> <ul>
<li>This is a line item.</li> <li>This is a line item.</li> <li>This is a line item.</li>
</ul> </div>
CSS rule What gets styled #first {color: red} all text in the div "first" will be colored red
#first p {color: red} all text with a <p> tag in the div "first" will
be colored red
#second ul li {color: red} all li elements - within a ul element - within the div "second" will be colored red
![Page 27: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/27.jpg)
Web Publishing Basics
Format the Menu
1. add the menu items as an unordered list Home, Events, Research, Directory, Contact Us 2. add an a tag around each line item – add a space inside the link 3. create a style for #nav ul
a. list-style-type: none b. margin and padding set to 0
4. create a style for #nav a a. display: block [allows the anchor tag content to stretch to full width] b. format padding, size, font, border c. text-decoration: none [removes the underline]
5. create a contextual style for the link (default) and visited states of your anchor tag a. #nav a:link, #nav: a:visited b. format only the things which will change during the hover state - text and
background color 6. create a contextual style for the hover state of your anchor tag
a. #nav a:hover b. format what will change when the mouse hovers over the menu choice
Pop-up Menus
Pop-up menus are complex to build. They may use CSS only or a combination of CSS and JavaScript. Fortunately, there is little need to build a menu system from scratch. There are several web sites which offer full or partial solutions for pop-up menus which are free to use, sometimes requiring only attribution in a comment in your code. There are a few sources for pop-up menus worth investigating. Son of Suckerfish [an old standard – second iteration of Suckerfish] http://www.htmldog.com/articles/suckerfish/dropdowns/ Ultimate Dropdown Menus [grab the code and use – free for non-profits] http://www.udm4.com/ Just to Learn about Pop-up Menus http://www.tanfa.co.uk/css/examples/menu/tutorial-v.asp All pop-up menu implementations set up menu content as a nested, unordered list and reformat the tags to appear as blocks. An excellent tutorial on lists and menus is located at Max Design http://css.maxdesign.com.au/listamatic/index.htm
![Page 28: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/28.jpg)
Web Publishing Basics
Creating a Print Style Sheet
It is often desirable to create a style sheet which will be applied to a web page as it is printed. This would give the style your content more appropriately for printing and possibly remove some content from being printed at all. Here are some typical styling changes for print.
change the background color to white
specify font sizes in points – more typical for print
change to serif fonts which are easier to read on the printed page
hide navigation, search bars, non-essential images so they do not print o add to style of area to hide – display: hidden
remove positioning and specific widths if necessary to improve the flow The process for creating a print style sheet is as follows...
1. save your current style sheet with a new name 2. make the necessary changes to styles which already exist 3. to hide elements from printing (e.g., images or divs) add the property {display: none} 4. in the head of your document add a second link tag which specifies media="print"
<link href="printstyle.css" rel="stylesheet" type="text/css"
media="print" />
Validating your CSS
The w3c offers a validation service online which allows you to check for errors in your CSS syntax. The url for this service is http://jigsaw.w3.org/css-validator. You can point to a CSS file already on the web by clicking the By URI tab. Or, you can upload your CSS file or simply paste your CSS code directly into the box under the By direct input tab. If you have errors, check the line number of the CSS to troubleshoot. Question: Why is it important to validate your code?
![Page 29: Jeff Pankin Information Services & Technologyist.mit.edu/sites/default/files/services/training/Web...Basic CSS Syntax I. A style definition contains three parts: a selector, a property](https://reader033.fdocuments.in/reader033/viewer/2022051904/5ff5c91574005c64081a10b9/html5/thumbnails/29.jpg)
Web Publishing Basics
Resources
Books Dreamweaver 8 (or CS4 or CS5) The Missing Manual - David Sawyer McFarland, 2006, O'Reilly Media, Inc. Spring into HTML and CSS -Molly E. Holzschlag, 2005, Addison Wesley Head First HTML with CSS & XHTML - Eric Freeman and Elisabeth Freeman, 2005, O'Reilly Media, Inc. CSS The Definitive Guide - Eric A. Meyer, 2006, O'Reilly Press Eric Meyer on CSS: Mastering the Language of Web Design - Eric A. Meyer, 2002, New Riders Web Sites at MIT MIT Web Publishing Reference Pages - http://web.mit.edu/ist/web/reference/index.html MIT Web Publishing - http://web.mit.edu/ist/topics/webpublishing/index.html MIT DCAD - Departmental Consulting and Application Development http://web.mit.edu/ist/dcad/ Element K at MIT - http://ist.mit.edu/services/training/wbt Web Publishing Intermediate Class Resources – web.mit.edu/pankin/www/resources Web Sites outside of MIT A List Apart - http://www.alistapart.com/ HTML Dog - http://www.htmldog.com/ W3C Schools - http://www.w3schools.com/default.asp Web Monkey – http://www.webmonkey.com Lynda.com - http://www.lynda.com/ YouTube - http://www.youtube.com/