Intro to CSS ________________________________________________________ Style = rule for describing how to format a piece of HTML Style Sheet = a set of canned styles that you want to apply Can Use For: Fonts Borders Background Colors and Images, Margins Layout And More Why CSS Styles are important - W3C has already phased out the <font> tag. - Because you don’t want to make font changes on 2,000 web pages by hand when the client decides to change from Times to Arial, right? - faster download times using CSS for layout - more fluid design process using CSS for layout Class, Tag, and Advanced Styles 1) Class Style (for individual text, etc.) – like MS Word Styles for text you select file begins with period and then word (example: .celeb_names). 2) Tag Styles (global, throughout page, preferred)- example h1 tag file begins with alphabetical character (example: headline1, background) 3) Advanced Styles (collection of other styles) - for example used with divs (we’ll discuss later) for layout of sections of a page file begins with # (example: #header, #main_content, #sidebar) External Versus Internal Styles (See Diagram, Next Page) 1) External pages -You attach the CSS rules page to whatever pages you want to affect. This external page is not an HTML page, and the extension is .css. Use link icon. 2) Internal Rules -Listed in the <head> tag -Only applies to that single page, so not terribly useful for web sites w/ more than one page (we don’t generally use internal rules—we use external pages). Turning Internal Styles Into External Styles If you DO have a page with a bunch of internal styles that you like, worry not--you can export them as external styles by choosing FILE>EXPORT>EXPORT CSS STYLES. Add the .css file extension in the dialogue box to save the file. Same Style Sheet for All Pages If you are going to use the same style sheet for all pages in a site, you can keep a style sheet in the root directory or in a folder for styles (example: mystyles.css). INTERNAL STYLES EXTERNAL STYLES <head> mystyles.css page1.html Page2.html Page3.html CSS Tutorial (from the Missing Manual book, p. 208) This tutorial introduces basic styles. For CSS layout, see next tutorial. ________________________________________________________ Preparation 1) Download files from www.sawmac.com/dw8 (tutorials > CSS Tutorial) 2) Preferences: - CSS Styles (deselect ―Open CSS Files When Modified‖) - General (select ―Use CSS‖ instead of HTML) - Layers (select ―Nesting‖—so a cell can appear inside another cell) 3) Open story1.html (see how it’s basically in tables, but we’re going to add CSS) 4) Open CSS Panel ________________________________________________________ Tag Styles Create Tag style for the p tag (will affect all type after a p tag): 1) New Style > Tag, p, New Style Sheet (call it headlines.css and save it in the DWCSS folder). 2) Type > Georgia, .8 ems, Line Height: 150% Create Tag Style for h1 tag: 1) New Style > Define in the new external style sheet > Tag: h1 2) Choose Verdana, 2 ems, Color: 669999 3) Choose background and give it a color if you like, such as FFFFCC. 4) Choose Border and deselect ―same for all.‖ Give it a top and bottom dash border at 3 pixels and color 666666 Edit a Style 1) Go to CSS panel and click ―All.‖ Then, double click the p tag. When it opens, change the tag to type 1 ems. 3) Another way: Use the Properties section of the CSS Styles panel to edit styles, too. Expand below the panel (see third button on the lower left). Select any of the properties and change them, or click ―Add Property.‖ For example, select ―margin-left‖ from pop-up and make it 10 px. Class Styles Type Create a style to highlight the name of famous people (remember class styles only apply to the text or objuect you hand choose in a page, not to a tag): 1) New Style > Class Style > name it .celebrity (class styles always have a dot first). Add it to the existing external style sheet (automatically Dreamweaver does this). 2) Type > Weight: bold, Color: CC0000. 3) When you close, nothing is affected. You have to select the text, then go to properties inspector and select .celebrity in the styles. Images Make the photo float right and text flow around it. Even though you could do this with the <img> tag, that would change all images this way—instead, we’ll use class style and apply by hand individually. 1) New Style > Class Style > Name it .photo 2) Box > Float: Right, Margin: Top, Bottom, and left 15. OK. 3) When you’re done, select the photo, go to properties inspector, and give it style selection .photo. Contextual Selectors (or descending selectors) What to do with the sidebar text. We could do the <td> tag, but that would fill in all the table cells the same way. We could do class, but then we’d have to do it all by hand. Instead, we’ll use a contextual selector. We will create a class style called .sidebar, apply it to the sidebar cell, and then create contextual selectors to define how the <h2> and <ul> tags should look—but only when they’re inside a cell affected by the .sidebar style. First, create the Class Style and apply it to the sidebar <td> 1) New Style > Class Style > name it .sidebar. 2) Box > Padding: Same for all – 10 3) Select the <td> - in properties inspector, select .sidebar Second, create contextual selectors: 1) New Style > Advanced > .sidebar h2 (this means that the style you’re about to create applies to the h2 tag, but only when it appears inside the .sidebar style (not outside). 2) Font: verdana, size 1 ems. 3) New Style > Advanced > .sidebar ul 4) Create the properties you want. Link external style sheet to new pages 1) Open story2.html 2) In CSS panel, click the link icon and browse to the headline.css page for selection. 3) All tag elements change immediately. You must apply the class elements by hand. However, once it’s set up, then the pages can all be changed merely by changing the .css. page. It’s a beautiful thing. P.S. divs can be positioned with advanced styles, as we will see in our next tutorial.