• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS_tutorial_1
 

CSS_tutorial_1

on

  • 588 views

 

Statistics

Views

Total Views
588
Views on SlideShare
588
Embed Views
0

Actions

Likes
0
Downloads
7
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS_tutorial_1 CSS_tutorial_1 Document Transcript

    • Beginner CSS Tutorial: Text Selectors 1 I. SAVING YOUR HTML FILE AND GETTING ACQUAINTED WITH TEXT SELECTORS 1. Make a folder on your desktop. Call it “CSS_tutorial_1” 2. Create a new file in Dreamweaver. Select: - blank page - Page type: html - Layout: <none> - click “create” We do not want to use a template for this because we are building the CSS from scratch. 3. Go to “File” > “Save as” and name your Dreamweaver document “text_selectors_1.html”. Save it in your “CSS_tutorial_1” folder on your desktop. 4. Look at the upper left-hand corner of your screen. There are three buttons: “Code”, “Split”, and “Design”. Click on “Split”. 5. Your workspace is now split in half. The top part is the code area, and it already has some code in it. The bottom area is blank; this is the design area. We will be working back and forth between the two. 6. Take a look at the code. It should read like this: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xht- ml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” /> <title>Untitled Document</title> </head> <body> </body> </html> What is this?? This is the doctype (“document type declaration”). It tells your website to recognize the browser so that your layout is presented correctly. It informs the validator which version of (X)HTML you’re using, and must appear at the very top of every web page. DOCTYPEs are a key component of compliant web pages: your markup and CSS won’t validate without them.
    • There are different types of doctypes; however we won’t get too deep into this right now. If you’re inter- 2 ested in learning more about them go to: http://www.alistapart.com/articles/doctype/ The most important thing to know is that you absolutely need this code—do not delete it! 7. Look at line 5 of the code: <title>Untitled Document</title> This is where you name your document. This has nothing to do with the name you save it with—what you type in here is what shows up at the top of the browser window. For now, type in: <title>Font Tags 1 :: GD4</title> You can also name your file here: Notice the title shows up at the top of the window next to “Title” and is also reflected in the code. I want you to be comfortable going back and forth between your layout mode and code mode. The more you understand what is happening the code, the more likely you will be able to think in terms of your markup for layout. 8. Look at line 8 in your code: <body> Type in the following so that after the body tag your code looks like this: <body> <h1> this is a headline 1 tag </h1> <h2> this is a headline 2 tag </h2> <h3> this is a headline 3 tag </h3> <p> this is a paragraph tag </p> <a href=”#”> this is a link </a> </body> </html>
    • 9. Click “refresh” in the CSS Styles panel (top right of the Dreamweaver interface). Now look below 3 your code in the design window. It should look like this: You just wrote your first lines of code! Dreamweaver automatically defaults these “styles” if you define your text as an h1, h2, p... and so on. Lets define some rules for these tags so we’re not limited to this font choice and color. II. SAVING A CSS FILE AND DEFINING RULES 1. Look at your screen. In the upper right-hand corner, there should be a panel called “CSS Styles”. It looks like this: In the upper right-most corner of that panel, click and hold on this icon. And drag down to “new”. Now, you should get a window that looks like this:
    • 2. You are adding a new CSS rule to your document. Do the following: 4 - Selector Type: select “Tag” (don’t worry about “classes” or “IDs”—we’ll cover these later). - Tag: click and hold the two arrows to the right of the field. Drag down to select “h1”. You are defining the “h1” (headline 1) tag. - Define in: select “(New Style Sheet File)” - click “OK” 3. Dreamweaver is going to ask you to save your styles before defining any rules. Think of it this way: CSS is a separate file from your html file. Your html file only holds the specific content for your web page (such as text and images), whereas the CSS file defines all the RULES for all your site’s pages (the font sizes, color, and layout). Your CSS file needs to be saved in the same folder as your html file in order for your html file to know where to get it’s “rules” from. Here’s another way to think of CSS: if you have a seven page website, you only need one CSS file to govern all the pages. It’s like using style sheets in InDesign: one set of rules govern all the pages of a book. Get it? Now, let’s save your CSS file before defining any rules. Name your CSS file: “text_selectors_1.css” and save it in your “CSS_tutorial_1” folder. You will only have to do this once. The next time you want to add a rule, it will be much easier. 4. Once your “text_selectors_1.css” is saved, a window should automatically pop up that looks like this:
    • Dreamweaver hasn’t forgotten that you originally wanted to define your <h1> tag. The window 5 automatically opens up in the “Type” category. Do the following: - Font: select “Arial, Helvetica, sans-serif” - Size: select 24 pixels - Decoration: select “none” (this is so that if you decide to make it a link later on it won’t put an ugly underline under your headline) - Color: key in: ff7d00 Now look at what happened to your text! Notice that the code above has stayed exactly the same... but your html files recognizes the rule you just made for your <h1> tag. 8. Let’s edit the <h1> tag a little bit more so you can get more comfortable with the CSS interface. Make sure that your <h1> tag is selected (highlighted) at the top of your CSS panel. If it isn’t, just click on it once. Below, look for “Properties for h1”. It looks like this:
    • In the properties window, there are three icons in the lower right-hand corner: 6 If you rollover each one and hover for a while, you’ll see each represents the following: = “attach style sheet” = “new CSS rule” = “edit style” = “delete CSS rule” Click on the pencil icon (“edit style”). The window for “CSS Rule Definition for h1” will pop-up. You used this window before when we initially set up the rules for h1. 9. Look at the list to the left, under “Category”. These are all the different rules you can set for your font tags. Let’s modify our headline a little: (you can click “apply” in the lower right to preview the changes...) Category: Type - Size: 20 - Case: uppercase - Color: #333333 Category: Background - Background Color: #99CC00 Category: Block - Letter Spacing: 1 pixel - Text Align: center Category: Box - Width: Auto - Height: 30 - Padding: Top: 8 pixels Category: Border - Top: dotted, 1 pixel, Color #333333 - Right: dotted, 1 pixel, Color #333333 - Bottom: dotted, 1 pixel, Color #333333 - Left: dotted, 1 pixel, Color #333333
    • Click “OK”. Your <h1> should now look like this: 7 10. Now, let’s look at your CSS document to see how these rules translate to code. At the top of your Dreamweaver file, there should be two tabs; “text_selectors_1.html” and “text_selectors_1.css”. Click on “text_selectors_1.css” to see your CSS document. Your rules should look something like this: @charset “UTF-8”; h1 { font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #333333; text-align: center; letter-spacing: 1px; text-transform: uppercase; background-color: #99CC00; height: 30px; width: auto; padding-top: 8px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #333333; border-top-width: 1px; border-top-style: dotted; border-top-color: #333333; border-right-width: 1px; border-left-width: 1px; border-right-style: dotted; border-left-style: dotted; border-right-color: #333333; border-left-color: #333333; } Take a closer look at all the “rules”. If you read them carefully, they make sense. Important things to note: - there is a “;” after each line - colors are always preceded by the “#” sign - “width: auto;” (line 11) means that the box behind the title will scale and shrink to the browser size (we will test this).
    • III. DEFINING RULES FOR ALL YOUR TEXT 8 1. In the CSS panel, select “text_selectors_1.css” and in the properties window click “New CSS Rule” (page with “+” icon) 2. In “New CSS Rule” pop-up window select the following: - Selector Type: select “Tag” - Tag: h2 - Define in: “text_selectors_1.css” - click “ok” 3. Set up the following categories: Category: Type - Font: Arial, Helvetica, sans-serif - Size: 18 - Decoration: none - Color: #666666 Category: Block - Text align: center Click “ok” 4. Repeat step 1, and for “New CSS Rule” pop-up window select the following: - Selector Type: select “Tag” - Tag: h3 - Define in: “text_selectors_1.css” - click “ok” 5. Set up the following categories for h3: Category: Type - Font: Georgia, Times New Roman, Times, serif - Size: 12 - Decoration: none - Case: Uppercase - Color: #333333 Category: Block - Letter spacing: 2 pixels - Text align: left
    • 6. Now set up the following categories for p: (repeating steps 1 + 2) 9 Category: Type - Font: Verdana, Arial, Helvetica, sans-serif - Size: 12 - Decoration: none - Color: #666666 Category: Block - Text align: left 7. Now set up the following categories for your link (the tag is “a”): (repeating steps 1 + 2) Category: Type - Font: Verdana, Arial, Helvetica, sans-serif - Size: 12 - Decoration: none - Color: #003366 Category: Block - Text align: left 8. Your page should look like this: Notice the following: - None of your html has changed at all! - click on the “text_selectors_1.html” tab. Now look at your CSS code. It should look like this:
    • @charset “UTF-8”; 10 h1 { font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: #333333; text-align: center; letter-spacing: 1px; text-transform: uppercase; background-color: #99CC00; height: 30px; width: auto; padding-top: 8px; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #333333; border-top-width: 1px; border-top-style: dotted; border-top-color: #333333; border-right-width: 1px; border-left-width: 1px; border-right-style: dotted; border-left-style: dotted; border-right-color: #333333; border-left-color: #333333; } h2 { font-family: Arial, Helvetica, sans-serif; font-size: 18px; color: #666666; text-align: center; } h3 { font-family: Georgia, “Times New Roman”, Times, serif; text-transform: uppercase; font-size: 12px; color: #333333; text-decoration: none; letter-spacing: 2px; text-align: left; } p { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #666666; text-decoration: none; } a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #003366; text-decoration: none; } Notice how each tag’s rules are defined between the open and closed “{ }”
    • IV. TESTING YOUR WORK 11 1. Click on the tab “text_selectors_1.html” to go back to your html file. 2. Now let’s look at your work in a browser. Look for the globe icon at the top of your Dreamweaver window: Click and hold on the globe icon, select “Preview in Firefox”. Dreamweaver might ask if you want to save your file, save it if you haven’t already. Your site should preview in Firefox. Notice how your h1 box scales and contracts if you play with your browser window size. Also notice that your cursor changes over the link—however, the color of the link does not. Next, we will define different states for hyperlinks. V. DEFINING DIFFERENT STATES FOR HYPERLINKS USING THE PROPERTIES WINDOW There’s two ways to define the different “states” of your links in Dreamweaver. I will show you both. 1. Look at the properties window at the bottom of your screen. It looks like this: Click on the button that says “Page Properties.” It will open up a window that looks like this: Look at the left-hand side of the window, under the word “category.” Click on the word “Links.”
    • 2. Clicking on the word “Links” will bring you to this screen: 12 Notice in the center of the screen you can select link color, visited, rollover, active.You can select different colors for the active and inactive “states” for your links. You can also define if your links have an underline or not. This is one of the few times you will ever need to use the property window, and in terms of CSS, this is technically considered “cheating” as you have not built in CSS rules for the different states of your hyperlinks. Let’s look at what this did to your html code: Yuck! What is this? Dreamweaver hardcoded your links into the html, messing up your nice clean markup. Let’s move on to create those rules in CSS in order to keep your html document as clean as possible. VI. DEFINING DIFFERENT STATES FOR HYPERLINKS IN YOUR CSS DOCUMENT 1. In Dreamweaver, look at the top of your window. Click over to the CSS tab. Your workspace should now look like this: Notice the highlighted section that reads as the following: a { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px; color: #003366; text-decoration: none; } This defines how a link is displayed on your site. However, it DOES NOT define the different states of your link (hover, active, visited) like you can define in the properties window.
    • Underneath your “a” style, key in the following in the CSS document: 13 a:link { color: #003366; text-decoration: none; } a:hover { color: #0955ef; text-decoration: none; } a:visited { color: #9bef09; text-decoration: none; } Notice that the above rules don’t include fonts, sizes, etc. This is because your “a” tag already defines this... this is the beauty of Cascading Style sheets. It follows a hierarchy of rules. Now, switch over to your Dreamweaver site “text_selectors_1.html”. Go into your code and manually delete the following: (all the “stuff” that Dreamweaver added when you defined your rollover in the properties window.) Be careful—only delete the code in between the gray arrows. Test your site. You should now have the colors you selected for the different states of your links. If it doesn’t work, clear your cache and try it again. If that doesn’t work, check to make sure your code (in CSS) in keyed in correctly. In the next tutorial, we will work with Class and ID selectors. Quick reference: Basic HTML Tags Tag Description <html> Defines an HTML document <body> Defines the document’s body <h1> to <h6> Defines headers 1 through 6 <p> Defines a paragraph <br> Inserts a single line break <hr> Defines a horizontal rule <a:link> <a:hover> <a:visited> Defines link states <!--> Defines a comment