Video Transcript

Hi my name is Brian. I'm a web and graphics specialist and today I'm going to show you how to replace your HTML elements using CSS. Alright so I have my web page open here on the right in a web browser and I have the associated HTML markup in a text editor on the left and also I have a CSS document in another text editor file right here. So in order to link your CSS to your HTML markup you have to have this link line right here in your head tag. Just make sure you use your file name here so I have it in a CSS folder and the name of the file is Style.css, just make sure that that is the same and without this link file your CSS won't work so make sure you have it. So here's what I'm going to do. I have two paragraphs here. This is my first paragraph and this is my second paragraph with that text and what I'm going to do is I'm going to hide one and show the other okay. So each of these paragraphs have a class on it, the first one has class of paragraph one. The second one has a class of paragraph two. So I'm going to go into my CSS and I'm going to target those classes. So in order to target a class in CSS you start it off with a period and then use the class name so .paragraphone and I'll just open and close the brackets and then .paragraphtwo and then open and close the brackets and then within those brackets you can set rules. So one of the rules I'm going to set for paragraph one is display colon none, paragraph I'll set display colon block. So display none will hide that first paragraph and display block will display the second paragraph with a line break before and after. So let's save that CSS, go to my web page and hit refresh and there we go now I have this is my second paragraph displaying and the first paragraph is gone. So now let's replace that second paragraph with the first paragraph in CSS. So I'm going to go back to the file here and for paragraph one I'm going to set display block and for paragraph two I am going to set display none, hit save, refresh my web page and there we go, I just replaced my second paragraph with my first paragraph. So that's how you do it, that's how you replace HTML elements using CSS. My name is Brian and thanks for watching.