Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
CSS enables you to control the look and layout of a web page much more precisely than you could with HTML alone, but it can be time-consuming to learn. In this workshop, expert developer Candyce Mairs makes styling a quick and easy process, walking you through the process of adding content to a web page and using CSS to position that content. Candyce explains CSS positioning concepts like the CSS box model, floats, and clears and demonstrates how HTML and CSS work together to create the look of your web page. By speaking the same language as the browser, you can learn to work with the browser to place content accurately and easily.
What I want to do now is talk about some basic CSS principles. Mainly, what is a selector, a property, and a value? I'll be referencing these terms throughout the course, so I want to make sure you understand what it is I'm talking about. So let's create a new HTML page and add some CSS properties and values to it. Now if I go to the File menu you can see the shortcut for my system is Ctrl + N for a new page. So I can go ahead and use that, every editor has some kind of a shortcut, and I'm going to go ahead and Save this.
This particular page I'm going to name, CSS-properties, because that's what we're going to be addressing. Now, CSS can be added within multiple locations. I'm going to add it directly onto our web page right here underneath the meta information. Now to simplify things, I'm going to get rid of these four meta tags that CoffeeCup automatically added. I'm doing that, so you can see what it is I'm doing just a little bit easier, and I'll move down a line here.
So, what I want to do is add some CSS properties or CSS styles to my webpage. And in order to do that I need a style tag, if its going to be added directly to this page. And my style rules go in between those two. Now, I don't really have any content on the page specifically. So, I should probably add some content. So, I'll add an H1, H2 and a paragraph.
So, H1, H2 and a P tag. And I'lll put some text in between these. So we're going to end up with each of these, describing what it is. So this one's going to say, this is a heading one, this is a heading two and this is a paragraph, very simple. Just so we have some content in order to style it. So this is a paragraph, very original of me.
(LAUGH) Okay, so let's say I want to take this H1, and make it look nicer than it does by default. If I go over to Preview and put this into Firefox, it's not looking the most attractive, so I want t customize this. What I'm going to do is make each one of these a separate color, and I'll make them Arial font. So how can I go about doing that? And while we're doing that, I can talk about the terminology with regards to CSS.
So we'll create the first one. Now, the first one, I'm going to adjust is the Header 1 tag, and this tag is going to end up being changed, so I put a left and right curly bracket. And then I'm indenting this next line. Now technically, this is a called a Selector. So whatever goes in front of the left curly bracket is called a Selector in CSS. The next piece I need to do is Properties and Values.
And within my code area, the Code tab within Coffee Cup, I do have the ability to see the CSS Properties and this is listing of all the CSS 2, these are all the new CSS 3 properties. Be careful of this one, browsers are not fully supporting all of the CSS 3 properties, so I'm going to stay in CSS 2. What I want is to adjust the font family, so I'll drag that out, and I'm just going to change it to Arial. Now normally, you would put a sequence of fonts in here with a comma in between, but just to simplify this, I'm just going to use one for now. Now I also want to adjust the Color of my text, so I'll set the color, and I'll make this one blue.
Instead of using a Hex value, I'll just use a simple word. And I'm going to copy that and down below I'm going to paste it two more times and just adjust it. Now that's my header 1 tag, it's going to be blue. Let me adjust the header 2 and make it green. And then this one will be for my Paragraph tag, and I'm going to adjust this color, make it red. So we have a little rainbow assortment of text.
I'll go ahead and Save that and put it into the browser. Now when I go to put this into the browser, it looks much different than it did before. So now that I have this setup, the CSS rule is adjusting our text. Notice my heading, 1 and 2 are still bold, because that's what HTML does to a heading tag. But my paragraph is not bold, because the Paragraph tag in HTML does not make anything bold. Now my font family is the same for all three.
But this is the selector. So the selector is a P, an H 2 or an H 1. This piece is known as the property. And notice the properties are shown in a different color from the values. So this is my value for this specific property, and these properties are all predefined in CSS. So you must use specific properties. Just like you use specific HTML tags.
So that is Selectors, Properties and Values within CSS. Whether we're working in formatting, such as we just did here working with text, or we're working with positioning, the CSS concepts are identical. So those are a few details about CSS and its selectors, properties, and values that we'll be using throughout this course.
There are currently no FAQs about Exploring CSS Positioning.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.