What is Inline CSS?

Kalob Taulien
A free video tutorial from Kalob Taulien
Web developer and coding instructor
4.5 instructor rating • 20 courses • 248,684 students

Lecture description

Learn what the difference between inline, internal and external CSS is. 

Learn more from the full course

Build Responsive Real World Websites with CSS3 v2.0

Learn CSS3 Flexbox, CSS3 Animations, Transitions, Transformations and Responsive Web Design. Make beautiful websites!

12:57:25 of on-demand video • Updated July 2020

  • Real-world skills to build real-world websites. Including several mini projects!
  • Learn the basics, then learn Advanced Selectors, Gradients, Transformations, Transitions, Animations, Flexbox and Responsive Web Design!
  • Get my e-book "CSS Masterclass" for free. It's a 180 page CSS3 eBook with interactive code examples all available on CodePen
  • Get helpful support in the course Q&A
  • Downloadable lectures, code and design assets for the entire project
English [Auto] OK there are three ways to write C Ss. The first way is inline which is what we're going to learn this lesson the second way is internal which we've spoke about already and we've actually seen a little bit of. And the third way is external which is technically the preferred way. So let's go ahead and get started with int.. So now we know that CSL does all this styli it makes their pages beautiful. It actually makes our Web sites you know people want to look at them without C S S our Web sites are ugly. So to write in line CSSA we have the style method. Remember we did this in a few lessons where we did the H-1 we changed the color to blue. Yeah it's not this one. This is internal instead what we're going to do is we're going to write it's right inside of our HTL tag. So if we go in here and we use the style attribute and we say let's say color is blue. Save that. Go to our page and refresh all of a sudden our color is blue or if we want to change the font size to add and all 80 pixels go back to a page refresh. Look at that we've got a huge huge font so that is all there is to in lines. Yes. Now there are hundreds and hundreds of ways to change your CSSA depending on what kind of elements you're working with like block or inline block or flex or anything like that. And we're going to get into all of that much later. Don't have to worry about that. But this is the easiest way to add he has asked one element while you're writing to him so often what I will do is I will write my C S S inline like this. Are using the style attribute and once I have a style that I want to work with that I'm happy with. I'll either put it into an internal style or I'll move it into an external file. I will get into internal or external in the next two lessons but this is essentially where you start off. Cause you don't know how something is going to look unless you go and change the styling right. So I always do the style attribute the in line kind of styling and you know that's really all there is to it. So your task for this video is I want you to write an H to element and then I want you to just change the color. But you can even just copy exactly what I have. I'm not going to give you the code for this one though because I want you to actually write this out in future lessons. You're going to get all the code don't worry about that. But right now I want you to be able to write this out because it's a little bit different it's not like the typical HMO that we generally write you know where it's just like oh something is strong. Well great. OK. So that's bold. In this case we could be doing something like style font weight as bold and that would be how we do it through C S S seems like a lot more work but I'll show you a few tricks and help you understand why is actually a lot better to use US than it is to use e-mail for the most part. So go ahead create an H-2 and just change the color to blue go preview your page. And once you have got that figured out once you've got nice blue text on your page we'll see in the next video.