Create Basic CSS Stylesheet in Dreamweaver


Hello I’m Todd Shelton and welcome. We are going to do a quick tutorial on how to create a CSS style sheet from scratch in Dreamweaver. So in order to do that I already have my Dreamweaver opened, and Dreamweaver will look the same in Windows and Mac operating systems. There might be a few shortcut keys it might be different like the command or the control, but mostly I’ll be using mouse clicks in these tutorials. So in order to create a stylesheet inside of Dreamweaver from the beginning all you have to do is create here in the Welcome screen you see a Create New and it’s CSS and as you see it automatically creates one, but what happens if we don’t have the welcome screen up. It’s very easy I will actually leave that up and I will create an HTML page now goto file, new, and it’s going to ask us what we want to create. A blank page CSS, double click on that in and automatically starts our CSS page. So in these tutorials I’m just going to leave that with the basic CSS at the top, and we can come down here. The first thing we want to do is think about, and you already should have thought about how to design your page layout, so on we’re going to act like our page has a header, a link section, a content section and a footer section. So in order to make our CSS we’re going to have to make a header section, a links section, footer section and content section that basically are layout. The first thing we need to do is think about our selectors. The top section I want to be called a header I know I’m only going to use a header once in my web page, so I’m going to use a pound sign, which is basically the id in HTML and we will get into that when we import our external stylesheet in another tutorial. In this tutorial we’re going use of the pound sign selectors will be header. Now, I always close all my selectors and elements right off the bat. That way I don’t have to worry about where the closing brackets are, so here I have my selecter, which is header and inside of that, inside some these brackets will be all my properties in values. In my header lets say I want the background color, double click on that, I’m showing you the shortcuts in this, inside of Dreamweaver. Now the background color, you can pick your own color we will say it is a light very gray, and you always want to finish off every line with the semi-colon. that’s how you end the line. So we can add something else we can have a border to it, and we can say it’s thick and that’s and that’s all we have to do we can add a background color. We will say it is red and we will end it with a semi-colon. OK so right here inside this CSS you see we have this collector called header and as the ID which is the pound sign. we will refer to that later but that’s how you refer to an ID inside HTML and then you have the properties, which is Background Color and you have the value. Now there’s a lot of different properties inside of CSS as you can see and as soon as you hit enter in Dreamweaver a box pops down and it is a code completion box. You can see how many properties there are inside CSS. OK there’s more developing every day. Each property has different values that you can put into it like color, or different color values. Border as seen in this pop up has a lot of different values that you can use. Say that was thick. So basically that is how you create a selector and the values and properties for our CSS. We know that we’re only going to have one link section call this link section. We know what I have one content section and one footer section The reason why I keep saying we are only have one footer section and one content section. That is the reason why we are using the pound sign right here. It gets referred to one time per page in CSS. I will show you that in the HTML tutorial. So if we want a picture to be displayed on the right side of the page and we know we’re going to do that a lot throughout HTML page. We will use a class like we did in this statement statement. so we can use this CSS selector many times throughout the HTML page. That is basically it so let’s go and save this to the desktop and call it testStyle.css. All CSS pages and files will end with CSS. Now our CSS is done and will go ahead and start on the next tutorial on how to bring in an external stylesheet inside of HTML. This is just the basic fundamentals of CSS and how to create a stylesheet. in Dreamweaver and then we’re going to learn how to do a lot more later on but I just wanted to show you how to create one.

31 Comments

Add a Comment

Your email address will not be published. Required fields are marked *