- Inline Styles
- Use the style attribute in any XHTML tag.
- Example
<h1 style="color: red; font-family:Verdana, sans-serif;">Hello World</h1> - Not very practical since each tag could be customized differently. If you saved the same style for the given tag, this would still be problematic if an edit needed to be done, would have to visit each and every XHTML element that you wanted to adjust the style
- Embedded Styles
- <style type="text/css">
stylesheet information </style> - Option 1: CSS ID Selectors, it must be unique ID value for the document it
resides in. Typically used for DIVISION tags <DIV>
- <h1 id="leader">
- #leader {
color: red;
font-family: Verdana, sans-serif;
}
- Option 2: CSS Type/Element Selectors (XHTML tag). Change the style for all tags in the document
- h1 {
color: red;
font-family: Verdana, sans-serif;
}
- h1 {
- Option 3: CSS Class Selectors, solves the problem of the ID selector
having to be unique for the document it
resides in. Class can be applied to different types of elements.
Typically used for XHTML tags
- <h1 class="leader">
- .leader {
color: red;
font-family: Verdana, sans-serif;
}
- <style type="text/css">
- Linked Styles (External Stylesheet)
- similar to using the same image on multiple pages, change the image and its is updated in all the linked pages
- <link type="text/css" rel="stylesheet" href="styles.css" media="screen" />
- References:
CSS vs Frames
- Question by Rick: With frames, Ican set up links/buttons on one side that when clicked, the
opposing frame loads another page. How does this work using CSS without having
the other page include the menu, the header, the footer, etc. Can a div tag
hold "content.html" until a nav button is clicked, at which point "content2.html"
is loaded in the div?
Answer by Tom Sherman: Not possible. The entire page will reload. What you want to use is an IFRAME. - Quasi-frames with CSS: A layout with a different flavor by Tom Sherman
CSS and Faux Columns
- Problem: CSS elements only stretch vertically as far as they need to. So if you have an image which has a height of 200 pixels and its contained in a division tag <div>, the <div> will only expand down the page 200 pixels.
- Solution is to use the clear property when using floating <div> elements
- How to clear a float
- Option 1: in the parent division element <div> add overflow: auto;
- Option 2: add a break <br> within the float <div> and a class
of clear
- .clear {clear: both;}
- <br class="clear" />
- Option 3: add another division element and call the clear class
- .clear {clear: both;}
- <div class="clear"></div>
- References
- Peter-Paul Koch's Clearing floats article
- Transcending CSS by Andy Clarke. ISBN: 0-321-41097-1. Clearing floats without added markup on p. 307.
- see CSS for Designers with Molly Holzschlag and Andy Clarke, lynda.com video, Chapter 9: CSS Floats, Video Section: Clearing floats video
- Faux Columns by Dan Cederholm from A List Apart
- also see Create Faux Columns in Styling Web Pages with CSS by Tom Negrino and Dori Smith
CSS Units
CSS Background
- "XHTML provides the structure of the document; CSS defines the presentation of the content, telling the Web browser how it should display the content to the user. For example, you use CSS to define the font of the text on the page, and where the text appears on the page." (Styling Web Pages with CSS by Tom Negrino and Dori Smith, ISBN-13: 978-0-321-55557-1, p. 1)
- Use CSS for presentation and HTML for content
- CSS rule - two parts: the tag selector (or selector) and the declaration block
h1 {font-size: 1.5em;}
- h1 is the selector
- {font-size: 1.5em;} is the declaration block
- how it works - all <h1> HTML tags will be displayed in the web page with a text size of 1.5em, where an em is the width of the letter M for the given font.
- declaration block is made of one or more declarations
- {property: value;}
- the semicolon indicates the end of the declaration, not the end of the entire declaration block
- can apply multiple selectors to a single declaration block
h1, h2, h3 {
font-weight: bold;
color: green;}
- Tag Selector Class
- used to collect elements into sets
- used for special treatment of one or more tag selectors
- <p class="bodytext">When your customers...</p>
- .bodytext {font-family: Arial, Helvetica, sans-serif;}
- what this is saying, any element in the XHTML document which is assigned a class="bodytext" will have this font-family.
- If you just want the p tag to have this font-family then use
p.bodytext {font-family: Arial, Helvetica, sans-serif;}
- Note, can have multiple instances of a given class in a document
- can have multple names in the class, known as multi-classing
example
<li class="first urgent"></li>
can be selected use .first {} or .urgent {}
- Tag Selector ID
- <p id="copyright">Copyright 2008</p>
- #copyright {color: gray; font-style: italic; text-align: center;}
- could also say p#copyright {color: gray; font-style: italic; text-align: center;}
- to select an id using CSS use the # character followed by the id name. Note the id name must be unique for the document. The id must be assigned in the XHTML markup as well as in the CSS style.
- The IDs are used to mark sections of a document
- IDs are case sensitive
- Group Selectors - ability to add multiple XHTML element names to a single CSS rule. The XHTML elements must be comma delimited and not ending with a comma.
- CSS Descandant Selectors
- Descandant selectors are identified by a space after the ID name (element descriptor)
- #sidebar p {font-style: italic;} // all p elements who are a descandant of an id=sidebar will have an italic font-style
- Reference
CSS Conflict Resolution - Specificity
- Inline Style Attribute, ID, Class, element
- The inline style attribute wins a conflict with ID, Class and element
- The ID wins a conflict with Class and element
- The Class wins a conflict with element
- The last element mention will win a conflict with a previous element
- Inheritance elements have no specificity
- h1 {background: green !important;}
- !important will override/trump all other conflicts
- use to diagnose problems with conflicts
- sloppy CSS coding if you keep !important in your published CSS web page. Best to resolve the conflict by increasing the Specificity of the element
CSS Naming Convention
- Principals for ID namig of a document/web page
- in the stylesheet the ID name is preceded by the hash mark (#)
- in the XHTML document the ID name is part of the tag name, for example <p id="container">
- first letter of the ID name cannot be a number and cannot contain spaces
- ID Name based on content rather than presentation or positioning (header, footer, etc.)
- build a structural heirarchy
- #container page container usually a division tag <div>
- #branding used for a header or banner to brand the site
- #branding-logo used for a site logo
- #branding-tagline tagline to define the site's purpose
- #nav used to contain a navigation device
- #content used for content rather than for another purpose
such as navigation
- #content-main the main content area
- #content-(whatever) could include any form of content including #content-related, #content-quote, etc.
- inner element comes second in the name, for example the outer element is #nav and the inner element is main then the full name is #nav-main or #navMain
- Andy Clarke with Malarkey - What's in a name (pt2)
CSS Layout - Box Model
- Layout is two steps, 1) size of the box, that is the width and height of an XHTML element such as a <div> tag and 2) the position (static, relative, absolute, and fixed) of the XHTML element with its position properties (top, right, bottom, left)
- Box Model
- All HTML elements can be considered as boxes. In CSS, the term 'box model' is used when talking about design and layout. ( w3schools box model in CSS)
- Create boxes from <div> tags and position on the page. The boxes are containers which help provide structure to the page.
- The CSS Box Model by Chris Coyier
-
- sets the shape of an element
img {clip: rect(top, right, bottom, left)}
- picture of the CSS Box Model Hierachy
- Free Web Template: Two Column Layout with Header and Footer
- Dynamic Drive - CSS Layouts - Liquid Layouts
How to set the background color of an HTML tag using a CSS rule?
p {background-color:rgb(255,0,255);}
- see W3Schools - set the background color
CSS Positioning
- Four types of positioning: static, relative, absolute and fixed
- static
- "The box is a normal box, laid out according to the normal flow. The 'top', 'right', 'bottom', and 'left' properties do not apply." W3C Choosing a positioning scheme
- absolute
- absolute positioning is used to position an element in a specific place in a document
- point of reference is the web browser viewport (main HTML tag), unless the absolute positioned element is contained within another element (such as a <DIV>) that has a position other than static, then that element is used as the point of reference for positioned elements.
- to create a new instance of normal flow, add another positioning element
- absolute to its positioning context
- Absolutely positioned boxes have margins, they do not collapse with any other margins. see W3C Choosing a positioning scheme
- Stretching positioned elements - issues using both width 100% and left and right
offset properties. In a nutshell - using both width 100% and offset properties
will create scroll bars in the web browser
- "...when you have any block element absolutely positioned or not, and your applying padding, borders, or margin to it, and then give it a width of 100 percent on top of those properties, you won't end up with the results that you expect. This has to do with how percentage measurement works. If you recall from Chapter 7, a percentage width is determined by the width of an element's parent. So if the parent element has a width of 700 pixels, for example, your element with 100 percent width will also have a width of 700 pixels, and then the lengths for margin, borders, and padding are applied on top of that width, and your element overflows the boundaries of its parent. If the parent element is the <body> element, and the 700 pixels measurement happens to be the width of the browser's viewport, you'll wind up with your element with 100 percent width causing horizontal scroll bars, because it is too big to fit in that 700-pixel width. By stretching elements with opposing offset properties, the resulting width is whatever is left over after margin, borders, and padding are already applied, thus avoiding scroll bars." (Beginning CSS, p. 406 by Richard York, ISBN: 978-0-470-09697-0)
- fixed
- subcategory of absolute positioning
- the point of reference for a fixed positioned box is the web browser viewport
- used to keep the element stationary even when your scrolling content or resizing the browser window
- relative
- moves the element relative to where it would be in normal flow.
- moves relative to itself
- relative is NOT moving the element in relationship or relative to another positioned element
- static
- Offset properties: top, right, bottom, left
- accept a length value or a percentage value
- used to fine-tune the element's position
- References
- w3schools - CSS Positioning Properties
- z-index property
- w3schools - CSS z-index Property
External Style Sheets
- Linking
- Step 1: add link tag to HTML page
- use the link tag and place within the head tag
<link rel="stylesheet" href="styles.css" type="text/css" />
- Step 2: create a text file (styles.css) with the CSS rules and save in the
same directory that the HTML page was saved in.
p {
font-family: "Courier";
font-size: 80%;
font-weight: bold;
/* http://faculty.unlv.edu/facultyWeb/colors.html */
/* color: rgb(0,0,255); /* blue */ */
color: rgb(193, 2, 2); /* Scarlet */
background-color:rgb(153, 153, 153); * Gray */
}
- Reference
- InDelv.com - Using Cascading Style Sheets on Your Web Site
- Step 1: add link tag to HTML page
- Importing
Block-Level Elements and Inline Elements
- block-level delments can contain other block-level elements and inline elements.
- Inline elements cannot contain block-level elements
- Block-Line Elements
- address, blockquote, div, fieldset, h1 thru h6, hr, legend, p, pre, ul, ol, li, dl and dd
- Reference: Logical Style by Ross Shannon
CSS and XHTML DIV tags with Google Earth API, Google Maps API and NAVTEQ MapTP AJAX API
- Templates
- Google Maps Template (test with IE6, IE8, FF3) - gmTemplate.html
- Google Earth Template
- NAVTEQ MapTP Template
- NAVTEQ MapTP Notes
- MapTP uses geographic coordinate system, namely WGS'84 in M.m (decimal minutes) format. See
Map24 AJAX API 1.2.8 Geographic Coordinates also see the
MapTP Zone FAQ - Which
coordinates format is used by the Free MapTP AJAX API? Geographic coordiantes are represented
as decimal minutes.
- UNLV Lat 36°6'35" Long 115°8'30". NAVTEQ Decimal minutes (conversion using sunearthtools.com Lat 2166.5 Long 6908.5
- JSDoc Documentation Map24.MapApplication
- Set Start Map View with MapTP AJAX API 2.3
- Map Controls with MapTP AJAX API 2.3
- Video: MapTP AJAX API Overview Update
- MapTP uses geographic coordinate system, namely WGS'84 in M.m (decimal minutes) format. See
Map24 AJAX API 1.2.8 Geographic Coordinates also see the
MapTP Zone FAQ - Which
coordinates format is used by the Free MapTP AJAX API? Geographic coordiantes are represented
as decimal minutes.
- Option1: Full Page, Dynamic Size DIV Tag
- CSS Notes
- <div> tag
- Used to group page elements
- Horizontal Widths
- Absolute and Fixed Positioned Elements
- "When elements are positioned absolutely, they all take on the shrink-to-fit sizing behavior, for both width and height." (Beginning CSS, p. 402 by Richard York, ISBN: 978-0-470-09697-0)
- Expand-to-fit sizing is accomplished by specifying opposing offset properties on the same absolutely positioned element
- "For example, to stretch content horizontally for the entire width available to it, you specify both the left and right offset properties to imply width. Or if you want to stretch an element vertically for all the space available to it, you specify both the top and bottom offset properties to imply height. The term imply is used here because you don't actually specify width or height. Dimensions are implied because you expect specifying both the left and right offset properties on the same absolutely or fixed positioned element to stretch the element. If you want both horizontal and vertical fluidity on an absolutely positioned element, you specify all four offset properties on the same element. Unforunately...IE6, and earlier do not support this useful feature..." (Beginning CSS, p. 404 by Richard York, ISBN: 978-0-470-09697-0)
- IE 6 workaround: "...IE 6 does not support stretching an element via specifying opposing offset properties on the same element...a dynamic expression is used to emulate the effect of opposing offset properties in IE 6. You simply include the dynamic expression feature, which references a small snippet of JavaScript. documentElement refers to the <html> element, and offsetHeight is a property that is used to get the <html> element's, well, offset height, which for you and me means the height of the browser's viewport." (Beginning CSS, p. 412 by Richard York, ISBN: 978-0-470-09697-0)
- Static and Relative Positioned Elements
- To make the <div> tag fill the entire width of the web browser, use the width attribute and assign a value of 100% or auto. It appears the default behavior of the DIV tag is to auto-expand to the width of the browser window.
- If you assign a border:1px; and padding: 4px; to the <div> tag then a horizontal scroll bar will appear. Reason, the width of the <div> tag will inherit the width of its parent <body> tag which already takes the full width of the web browser window. We now add 5px (1px border + 4px padding) to each side of the <div> tag, thus we have an extra width of 10px and the reason why the web browser adds the horizontal scroll bar.
- "The output that you see in Figure 7-36 is probably pretty puzzling to you, in that you more than likely expected the <div> element to fill up all the space horizontally and vertically without scroll bars appearing. There is a horizontal scroll bar because of how percentage measurement works; the width of the <div> element is made to be the same width as the width of its parent element, the <body> element. Now before you take into consideration padding or borders, the <div> element already takes up the whole width of the <body> element. Once 5 pixels of padding, and 1 pixel of border are added for each side, the <div> element becomes 12 pixels bigger than the width of the <body> element, causing it to overflow horizontally, and also a horizontal scroll bar to appear." (Beginning CSS, p. 255 by Richard York, ISBN: 978-0-470-09697-0)
- Absolute and Fixed Positioned Elements
- To make the <div> tag fill the entire height of the web browser
- "One fundamental concept that is essential to making the fixed header, footer, and side columns techniques work has to do with how absolutely positioned elements handle sizing. In Chapter 7, you learned that block elements have a width that is expand-to-fit by default. Block elements such as <h1>, <div>, <p>, and so on, expand to fill the space available to them horizontally, and expand vertically in the shrink-to-fit fashion, that is, only enough to accommodate the content contained within them. When elements are positioned absolutely, they all take on the shrink-to-fit sizing behavior, for both width and height." (Beginning CSS, p. 402 by Richard York, ISBN: 978-0-470-09697-0)
- "To use absolute positioning to emulate fixed positioning for a header, you need a way to make an absolutely positioned element use the other method of sizing, expand-to-fit. The CSS specification just so happens to support just such a feature, and specifying opposing offset properties on the same absolutely positioned element does it. For example, to stretch content horizontally for the entire width available to it, you specify both the left and right offset properties to imply width. Or if you want to stretch an element vertically for all the space available to it, you specify both the top and bottom offset properties to imply height. The term imply is used here because you don't actually specify width or height. Dimensions are implied because you expect specifying both the left and right offset properties on the same absolutely or fixed positioned element to stretch the element. If you want both horizontal and vertical fluidity on an absolutely positioned element, you specify all four offset properties on the same element." (Beginning CSS, p. 404 by Richard York, ISBN: 978-0-470-09697-0)
- The DIV tag will expand to the height of the text/image within it.
This is a problem when we use the DIV tag for Google Earth API,
Maps API and/or NAVTEQ MapTP. The DIV tag is created and doesn't
have any content, then later with the onload event is fired, does
the Map get placed in the DIV tag. This ends up creating a narrow
window which does NOT expand to the height of the DIV tag.
(see Google Groups - Google Earth Plug-in -
Window Height 100%
- Roman's solution: add height:100% to the HTML and BODY tags. Also add height:100% to the container DIV. Then in the Map DIV give a height:100%. IE6 Problem - a vertical scrollbar is added to the right of the browser window and I don't know how to get rid of it. Try using height:92% for HTML and BODY tags, this removed the right vertical scrollbar from the browser window in FireFox3
- Use CSS container DIV with position static and an inner DIV
with position absolute with top, right, bottom, left offsets
of some value (won't work if
the offsets are not included)
#container {
position: static; /* default element positioning, top, right, bottom and left properties have no effect with static positioning */
margin: 0em;
padding: 0em;
}
#contentMap {
position: absolute;
top: 0em;
right: 0em;
bottom: 0em;
left: 0em;
border: 1px solid black;
padding: 0px;
margin-left: 0px;
}
- Create a container <div> tag that is set to 100% of page height and then add any interior <div> tag(s) also with the page height set to 100%. The interior <div> tag(s) should fill up the container <div> tag and the height of these interior <div> tag(s) should be equal. Be Careful When You Size Your DIVs by Larisa Thomason
- used to divide the document into separate, distinct sections. It may be used strictly as an organizational tool, without any sort of formatting associated with it. (HTML & XHTML, 4th Edition by Chuck Musciano and Bill Kennedy, p. 62. ISBN 0-596-00026-X)
- References
- Mike Williams - Google Maps API Tutorial - Using a percentage height for the map div
- Be Careful When You Size Your DIVs by Larisa Thomason
- CSS Layout by HTMLSource
- <div> tag
- Examples
- Earth API - divFullPageEarth.html
- Maps API - divFullPageMaps.html
- MapTP AJAX API - Java Applet - divFullPageMapTP.html
- CSS Notes
- Option 2: Add Company Logo and Full Page, Dynamic Size DIV Tag
- Earth API -
divLogoFullPageEarth.html
- It appears you cannot do a CSS z-index overlay on Google Earth Plugin but have to use a KML screen overlay instead. For a workground see Using IFrame Shim to (partly) cover a Java applet
- Google Earth API Samples - Screen Overlay
- Google Earth API Samples - Screen Overlay (Frame)
- Maps API -
- divLogoFullPageMapsIE.html
- Company Logo using CSS <div> positioning: divLogoFullPageMaps.html
- Company Logo using Google Maps API GScreenOverlay: divScreenOverlayLogoFullPageMaps.html
- MapTP AJAX API -
- MapTP AJAX API - Java Applet. Applet will overlay on top of the CSS z-index logo divLogoFullPageMapTP.html
- MapTP AJAX API - Static View. Supports the CSS z-index logo divLogoFullPageMapTPstatic.html
- Earth API -
divLogoFullPageEarth.html
- Option 3: Search Box, Logo and Full Page, Dynamic Size DIV Tag
- Option 3: Logo, Top Header and Full Page, Dynamic Size DIV Tag
- CSS Notes
- Examples
- Earth API - divLogoHeaderFullPageEarth.html
- Maps API - divLogoHeaderFullPageMaps.html
- MapTP AJAX API - divLogoHeaderFullPageMapTP.html
- Option 4: Logo, Top Header, Left Sidebar and Full Page, Dynamic Size DIV Tag
- CSS Notes
- Examples
- Earth API - divLogoHeaderLeftNavFullPageEarth.html
- Maps API - divLogoHeaderLeftNavFullPageMaps.html
- MapTP AJAX API - divLogoHeaderLeftNavFullPageMapTP.html
Google AJAX API Playground for JavaScript and CSS
- Google Code Playground
- Google Video - The Google AJAX API Playground
CSS References
- cssbeauty.com
- csszengarden.com
- css.maxdesign.com.au/listutorial
- westciv.com/style_master/house/
- veerle.duoh.com/index.php/blog/links/
- ilovejackdaniels.com/cheat-sheets/css-cheat-sheet/
- css-discuss.org wiki
- CSS Resources - A List Apart
- BlueRobot - The Layout Reservoir
- W3Schools CSS Tutorials
- CSS guru, Eric Meyer has a good reference of CSS
- CSS Zen Garden
- University of Minnesota Duluth - Information Technology Systems & Services - Web Design References: Cascading Style Sheets
- Free Ebooks from Easy Share
- HTML 4 For Dummies 5th Edition by Ed Tittel and Mary Burmeister
- Building Web Sites for Dummies by Doug Sahlin and Caludia Snell
- Web Design for Dummies 2nd Edition by Lisa Lopuck