Apidays New York 2024 - The value of a flexible API Management solution for O...
Â
CSS_tutorial_1
1. 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.
2. 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>
3. 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:
4. 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:
5. 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:
6. 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
7. 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).
8. 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
9. 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:
11. 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.â
12. 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.
13. 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