Learn about working with CSS Code in this Adobe Dreamweaver CS3 Essentials training video series.


More DIY videos at 5min.com

Video Transcription

Before we move on to creating that new page, I want you to see what has been happening behind the scenes when we created these styles. So let's first Save this, and I am going to choose the Split screen button. Now I have got my image selected, so I can see my image in the Image Source. If I click here on my h1 tag, all I see here is the h1 tag, I don't actually see anything that tells me about the style. That's because style information, when you save it internally in a document, appears like this at the top of your page. So this is the very top of my HTML document, the DOCTYPE information. This tells the browser it's a HTML file, the Head section. If your have any meta tags, they are here, my title; and yes, I didn't give this one a title yet, bad, bad habit, but sometimes when I am just doing quick files, I don't bother with that. But what I want you to really pay attention to here is the style type now, text/css, and that everything from here down to this close style tag is the CSS we have just created. You see there is the h1 tag, being defined with the font family, Verdana; that's the font we selected. Font size, large. That's the hexadecimal code for the color we chose. For image, we set a boarder that was thin, solid, and here again, you see a hexadecimal color code. I don't want to spend a lot of time on the code right now. In fact, I am going to close it up for those of you who are cringing just at the thought of code. We will spend more time on that in a later lesson. But I wanted you to see that when you choose to create an internal style, it's saved at the top of your HTML file. Remember, when you create a new style, you have the option of creating it in this document only, and that tells Dreamweaver to create the style internally within the page that you are working on. In a moment we will create a new external style sheet and you will see how you can save the same style in a second document, and then attach those styles to any or all of the pages in your website. So let's Cancel out of this for now, and let's go ahead and close out of our css-test. I think we are ready to start working on our first CSS layout together.