Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Tutorial 5 – Learning CSS CSS is a web-technology that has been around for quite some time, however, only in recent years has it become a widely accepted practice for web design. CSS stands for Cascading Style Sheets and it allows web designers to manage design elements site wide. In the previous activities, we were adding colors and alignments to specific areas of web pages. Imagine if we ran a company whose main company color was blue. What if the board of directors got together and changed that color to red? If a web designer created these pages the normal way of changing each page, we would have to manually go through all the pages and change the color from blue to red. Sounds pretty tedious…right? This is where CSS comes in and makes web development really unique. Let’s start this exercise: As you can see, this is a pretty basic HTML page. The only additional things we have done to this page are adding a picture and putting the picture as well as some text inside of a div class. This can be done by selecting the text and selecting “div class” on the insert menu. Now let’s add some CSS attributes to this page! Go to File and Select “New…” Select a CSS document Once you have selected it don’t make any changes yet (Dreamweaver make this part really easy). Just simply save it, and know the location where you have saved it at. Now go back to your main document that you have created.
  2. 2. From your “index.html” page, Click the “Attach Style Sheet…” button Now click on the “Browse…” button and select your file. For this tutorial, we will add this CSS sheet as a link, but feel free to mess around with either setting. Now click “OK” As you can now see, the name of your file should be on the right hand side under the CSS panel. Now let’s add some properties for our CSS page. Click on the “New CSS rule” button
  3. 3. This window is the gateway to all your CSS development. It gives you the 3 types of definitions in CSS. As the window describes, the 3 type types of CSS Rules can apply to: Class – Using this type of CSS will change all tags that fall within a certain section of the HTML code. Tag – This will change the appearance of any HTML element. For example the <p> element can be changed to a predefined size or color. Advanced – Different types of advanced CSS which can include the state of your links (normal, active or clicked) For the first example, let’s choose “tag” and from the drop down box, let’s choose the “p” element
  4. 4. You are now brought to another window that will let you alter the different attributes of the <p> tag. Let’s make the Font Arial the color Red and the Text 18pt . Once you had made these changes, click “OK” to accept.
  5. 5. Now look at our HTML page! All the different lines of text that had the <p> tag have now been changed to our specifications. To change the attributes again, you will now see a “p” in the CSS panel underneath the name of your CSS page. Double click that to make additional changes. Now let’s go back and make another CSS rule, except this time, we’ll make it a class that we are going to call “.text” (In these tutorials, we are adding a “.” to the beginning of each class make to make the differentiation that they are a class in the HTML page) Now click “OK”
  6. 6. Let’s add the following properties: Font – Courier New, Courier, monspace Size – 24 pixels Color – Green (#00FF00) Click Ok once you have made the changes WAIT A SEC! Why aren’t my changes made yet? The reason is that your HTML needs to specify what area of the page we want affected by the new CSS class that we just defined. If you click the div tag that is holding the text, you will see something really neat: Dreamweaver is giving you the choices that you can apply. Choose the “text” class and your text will now be changed to meet the criteria specified earlier.
  7. 7. You can now see that the page has been changed according to what we specified the “.text” class to be!
  8. 8. For the last part of this CSS tutorial, let’s take a look at the Florida TSA image located at the bottom portion of the page. We know that there are three types of alignment – Left, Center and Right. For the sake of this example, let’s say that we want to put our image in the area between left and center. It doesn’t seem that something like this would be possible…but that is not the case with CSS. Let’s do the following: Create a new CSS rule Call the rule: “.picclass” Once the CSS Rule Definition page comes up, let’s add the following attributes: On the left side, click on the Box tab and change the “Left Padding” to 100px
  9. 9. Our final page is now complete, based on what we went over in the tutorial, it should look something like this: Continue playing with CSS and make your pages look drastically different. The key point about using CSS is that these attributes can apply to all the pages in a website. So rather than make changes individually, you can link to a CSS page, and only have to make changes one time rather than one time per page. Hopefully this tutorial will help you get your feet wet with CSS!