Intro to CSS - Colt's Code Camp

hello hello hello everyone its colt welcome today we're talking about CSS specifically an introduction to CSS so for complete beginners people who really have never touched CSS I'm going to try and go through all the essentials the very very essentials but it's a it's a pretty large topic and it's something I'm going to be teaching over the course of at least six or seven different videos so this is video one on CSS so if you're following along with my Colts code camp course this is our first CSS video we've been doing a bunch of HTML we've made it to a much more exciting section in my opinion if you're here just to learn CSS it will help if you know some basic HTML so today is a CSS intro we need to talk about what CSS is how we actually include it there are multiple ways we'll start writing some will learn about element selectors and some properties like color background width height then there's a bunch more we'll take a look at but then tomorrow we're gonna focus more on CSS selectors and specificity the Cascade and then we'll have a video on color which is surprisingly it's not complex but there's a lot of options for color and CSS we'll talk about the box model will work with text and web fonts and google fonts responsive design and break points flex box animations transitions keyframes lots of topics to talk about but for now an introduction to CSS so CSS is cascading style sheets that's what it stands for and I always like to explain it this way using grammar HTML is the nouns it's the what the things on the page and then CSS is decorating or describing those nouns so the huge carrot carrot is the HTML CSS could be the huge orange yellow orange yellow I've guessed two colors the huge orange and yellow would be CSS the carrot is HTML let's put it another way with HTML we're describing the basic skeleton the structure the content but not at all what it looks like so on this easel we've just got a deer that has not been styled in any way and then on the right-hand easel we've got HTML so still there's a deer there but now it's full-color there's a background there's paint splotches it's larger I think maybe it's not larger it's different that is what CSS helps us do on mdn Mozilla developer Network they describe it as a declarative language that controls how webpages look in the browser so that's the basic goal of CSS here are a couple of examples this is always kind of fun of pages that have HTML we've got the structure the deer skeleton here and then I'll put some CSS in give it a moment same structure same elements same buttons the same words but things are completely different looking we've got a gradient for the background we've got different fonts that have been included sizes borders box shadows there if you can see that around here the buttons have different colors the inputs are different sizes the spacing is different everything is centered here's a couple more examples this is a little bit more radical so if I get rid of the CSS I'm scrolling around by the way this would be some sort of layout this is not something I wrote just kind of a fun demo from code pen if I get rid of this CSS here let's see what we end up with okay well not a whole lot we've just got a bunch of little I think they're SVG elements they're little smushed circles and they're all black and white here's another one so CSS is not just about colors and fonts and all of that it's also what we use to layout our webpages so this is a layout that starts out horizontal so you can see different columns and then if I shrink this screen down they eventually will stack vertically and if I get rid of that CSS we will lose the colors we'll lose that I don't know if you can see that there's a transition here where they slowly shrink down there's a bit of an animation as I resize so if I get rid of that all that CSS goodbye this is what we end up with same content it's still there none of those styles so it's not just colors and fonts and borders and that sort of thing CSS is what we use to lay a page out so here's a much more dramatic example this is a pretty cool grid layout of different shoes and that's all done with CSS 4 I get rid of this we're just gonna have a bunch of images of shoes this is what we end up with just a bunch of large images and black and white text it looks completely different but the structure is still there the underlying content it's just not decorated so CSS plays a very very important role in making attractive usable webpages so it's not just about decorating or changing the color but it's about building interfaces that make sense to other users at least hopefully if we know what we're doing so before we start writing any Styles we need to understand how we actually run them it's not really running CSS but it's how we include CSS or include styles in an HTML document there are three main options and as you can see here from this slide two of them are not really recommended or I don't recommend the first two but I'm gonna show them to you because you should know that they exist and you should know why I don't recommend them so let's start with this first option writing styles in line okay so to help explain this I have a sample document that I'll be working in you can download this code as well as the completed I'm doing air quotes because I do need to warn you our code at the end of this video is not going to be very pretty we'll be able to style things and select and change colors but we won't have learned quite enough to make something stunning so just keep that in mind okay so this is a Wikipedia page or a slimmed-down Wikipedia page on ocelots a smallish Wildcat they're pretty cool cats anyway right now no Styles at all and I'm going to start by showing you inline Styles very briefly if I wanted to change the color of let's say this h2 right there okay so I am going to do that I'll find it and it's right here h2 I can directly write my Styles inline in my HTML with this particular element like this style equals and then something like color purple now there's a lot of issues with this approach but let me just show you that it does actually work what sucks about this is that often we want to make all h2s or multiple h2s purple or we might want to style all links the same way on our webpage so if we had to inline the color purple or whatever we were doing for every single element that is a lot of work and then if you want to change it it's even more work and then if you want to share that between different pages of your website we might have the contact page we might have the signup page sign out I guess sign out it's not usually a page but a store page contents all that stuff we might want and we probably want similar styles we want all our links to be the same size or the same font the headings the same color if we're in lining everything that is very tricky it's a lot of duplicated code and just a nightmare to maintain okay so we're not going to do that instead we're going to write our CSS separately not inline and there are two ways of doing this the first one is a style element which is definitely better than writing inline Styles but not as good as an external style sheet the style element looks like this we have a style tag opening and closing you're supposed to say type equals text slash CSS you can get away without that most of the time at least and we need to include this this parts important it must be included in the head of the document although most browsers also will let you ignore that they assume that you meant to put it in the head okay so we can write this in our HTML document directly in the head like right here style and I can now write CSS Styles directly in here now what do we write what our CSS styles are rules well here is the basic pattern for everything that you do in CSS we have some selector we will be focusing a lot on selectors tomorrow but essentially we have to decide what we are trying to style every h1 on the page the second h1 on the page well there should really only be one h1 so that's a bad example every link on the page every other link the second link this one link that has a particular name on it or something called an ID we have a lot of different things we can select based off of then we have curly braces and in those curly braces we set our CSS rules which are a pretty name like color a colon and then a value like purple so here's an example this will make all h1 elements on the page have a color of purple or this will make all image elements on the page have a width of 100 pixels and a height of 200 pixels so notice this pattern something up here we will be focusing a lot more on that something a selector curly braces and then as many key value pairs a property name and a property value pair separated by a colon and then we have semicolons at the end of each rule each ruled declaration here we call this whole thing a set of rules or a rule set the terminology doesn't really matter but we select something curly braces do something set a property with a corresponding value now there are many many CSS properties far more than you'll be able to well far more than I'm able to keep in my head at once and remember a lot of what you end up doing in CSS is mastering the basics and then mastering the art of googling the stuff that you don't remember or that you may not use all that frequently there are lots of niche things that can be very useful but maybe not all the time but for now we'll just work with color so in here I can set h2 that is my selector hopefully this is large enough give them a color of purple so again same pattern we just saw but this has to go inside of a style element or in a separate style sheet which is what we will be preferring but this is another option let's go back to our page and refresh and you can see now that all h2s there's only two on this page but they are both purple so this is already an improvement over doing it in line because I would have had to go to both h2s this one right here and this one where are you right there and I would have had to say style equals color purple and if I wanted to change them I wanted to make both of them teal I would have to change it here and I would have to change it on every other h2 if I had 100 h2s on this page that's a lot of changes with this CSS syntax where I select some element type all h2s do this it's much easier can make them all purple all at once now of course there are lots of styles that you may want to add to your page but not to every single element not to every h2 or every image there are lots of different ways of getting more specific and nuanced in what you are selecting but we're just at the intro section this is our first CSS video so we're focusing on element selectors we select by element name now this is better a style element is better than what we were doing by in lining Styles but it still is not great because if I wanted to have a second page a jagwire HTML page or a lion or tiger or sand cat and look at how adorable those guys are or a palace Palace Palace cat also very adorable Wildcat anyway that's very cute if I wanted to have another page with the same styles I want all h2s to be purple and maybe I've set you know 20 or 30 different things or maybe thousands of different CSS properties if I wanted to share that with a style elements I would have to copy this entire thing and duplicate it in every other page every HTML page for each of those other cats and then I would have to try and keep them in sync if I needed to change one of them I decided instead of purple we have a different shade of purple or a new custom brand color or whatever it is I would need to update every HTML page which is why style tags or style elements are okay but they're not as good as a completely separate external stylesheet what that means is writing our CSS code in a CSS file and we can require or include that CSS document in any other HTML page that we may want to use it in so I can have one style sheet I can write my Styles in one place and then apply or use those Styles on a hundred different HTML documents if I wanted to so I'm gonna delete this and instead we are going to write a CSS file to write a CSS file just make a new file I'm going to do it in the same folder as my also HTML and I'm going to give it some name that ends in dot CSS so we have dot HTML for an HTML file dot CSS for a CSS file so I like to just go with app dot CSS or Styles dot CSS or main eventually you may have larger apps where you may not just have a single stylesheet you might have forms dot CSS and button dot CSS but for now let's just go with app dot CSS here's my CSS file it's empty and I'm gonna add in another rule very similar to what we just did all h2s I'll give them a different color this time how about orange we'll be able to see that I'll save this file and I have to include it if I don't include it we're not gonna see any of that stuff none of that code and that CSS which is just temp one property making these guys purple or orange rather that won't work until I include my app dot CSS file in this ocelot HTML file to do that we use a special element called a link element usually I just do this in vs code I'll type link and hit tab this needs to go in the head the head is all the meta information any resources like style sheets or fonts that were including basically the stuff that does not show up as content so a style sheet is a perfect example of that we want it here it's important but the style sheet itself is not content that shows up it is the adjectives that describes our content so we need to set a link element a rel attribute set to style sheet you can get away without this a lot of the time the browser will figure out what you're trying to do but to be totally correct it should be there and then we have href which needs to be the path to access our file so in our case it's app dot CSS we're in the same directory if I had a Styles folder and I had app dot CSS in there I would need to make sure to reference the full path to get there from this file ocelot dot HTML all right so we have that in there I'm going to refresh my page and it is working I'm now getting orange on etymology and taxonomy my to h2s so now we have one stylesheet app dot CSS whatever I write in here I can include in any other HTML document and those Styles will be applied across all those documents alright so now we've seen three different ways of writing styles definitely recommend number three here and really the second option is way way better than option one so two and three are the better choices but I would almost always write styles externally in a standalone style sheet I wouldn't use a style element except if you're just trying to test something out very quickly and you don't want to have to make a new file okay so we've talked about this basic pattern that we use all the time and CSS we have some selector which right now we've really just been selecting things based off of the element type we will see other selectors but let's focus on the property portion so inside those curly braces we have different properties that we can set like color we've already seen at least one or two colors purple and orange we also have things like width and height we even have fancier things like setting a border in this case the selector I'm using this is not something that we're going to learn today but you can probably figure out how it works by looking at it we are selecting all inputs that have a type set to text attributes and we're not selecting every single one we are targeting every other so every second one and we give them a red border that has two pixels wide and a solid line instead of dashed or dotted so we'll see more selectors we'll learn about how they saw work for now we're doing things like image or h1 I just wanted to show you that we can get fancier but we're going to start with these different properties border width height color there's a whole reference on mdn called CSS reference that is going to show you all of the properties you have access to there are tons of them a couple of these things actually aren't properties here some of these are things like different selectors they're called pseudo selectors if you see those colons there but for the most part there are a couple hundred properties in CSS that we can set things like opacity what else do we have in color is in here we have text a line text indent font size carat color margin these are all things that will cover eventually I want to start with just a couple let's go with color and we'll also talk about background so background is somewhere on here I'll also pull up border background right there specifically I want to focus on background color so background color allows us to set a color for the background of some elements it looks like this background - color and for now we're only going to stick with these named colors I'm gonna do a separate video on color systems and CSS as you can see there's quite a few different options just to set the background color so we're gonna focus on named colors of which there are quite a few in CSS here's a reference these are all built-in colors that we can use we reference them by name antique White's aquamarine bisque blanched almond there's quite a few of them as I scroll down these are not typically used in a real application because most companies most websites have their own color scheme with their own custom shades and hues of colors not just you know what is this 200 or so we're not limited to these specific colors but in this video we are going to stick with them so let's pick one how about Dodger blue actually let me pick a lighter one a background color is there like a light pink maybe this Oh a light pink okay so we're gonna give the what should we do maybe just the entire body we'll give it a light pink background color so let's try that I can select body technically this would select all bodies on the page but there's only one body in a valid HTML document background - color and then I'll do light pink you can CVS code is Auto completing that for me let's refresh and there we go I've got a light pink background we can also do things like let's select this h1 and give it a background color so h1 so it would apply to all H ones background-color let's go with sure aqua let's see how that looks we're not going for attractiveness at this point and you'll see that the background goes all the way across so an h1 is a block-level element which means that it takes up an entire block it pushes everything off onto the next line it needs to live on it's very own mind at least by default I'll show you that you can actually change that anyway there's a background color I can do multiple properties I could give it a text color which is just color if we do that light aqua color maybe I don't know this is gonna be hideous let's go with magenta let's see how that looks we do need a semicolon here vs code is actually going to put that in there if I leave it off at least sometimes it will notice here if I don't have a semicolon right there it gets mad at me it gives me this underlined here saying that's what's it's a semicolon expected so we need to have a semicolon after every property that we set even if it's just one inside of this block between the curly braces we still need to have that in there don't rely on vs code to add it in for you I'm saving and it adds it in but it won't always get it right so there we go we now have a background color for the h1 and a text color we can style all of the links why don't we do that so the links are anchor tags and I'm going to give them all I don't know what should we do a color of white is that going to be too light and it's kind of hard to read isn't it maybe we'll also make them a larger font size so I'm just kind of throwing out properties we are going to have a designated video to talk about fonts and text but there's a property called font size now the reason we're going to have a designated video is that there are many different units we can use I'm gonna stick with pixels so I'm gonna give that a font size every link maybe 30 pixels that should make it significantly larger so you can see our text here the paragraph is whatever the default font size is I didn't touch it and our links are now 30 pixels which happens to be larger yes not very attractive but it works next up we'll see another property called border this is something we'll also come back in a separate video when we talk about the box model but for now I'll show you how to set a border with a color on any element that you want let's do a border around Neul on this page so an unordered list will add a border so there's three of them and that would be a ul that we're selecting whoops the name of the element all you l's and I could start with a background color just so you can identify where they are let's go with a black background color refresh my page so we've got a ul there we've got a ul there and we've got a ul there and maybe instead of a ul I think I have a header element in here right there I've got a footer element so why don't I do this for the footer element I'll give this footer element a border so I'm gonna change that to be footer just any CSS or any HTML element and then instead of a background color I'm going to give it a black border to start and the way that border works at least the option I'm showing you is that there are three pieces we have to specify first of all is the width of the border so I'll do three pixels then we have the style of the border is it a solid line and we'll start with solid and then the color and we'll go with black to start so those three things in that order well save refresh the page and now my footer has a border around it as you can see so we can change that we could do I don't know how about 10 pixels refresh the page it's a lot thicker I can do aid I can never remember these if it's dashed yeah there's - I think there's dotted it's not the most attractive well none of this is so I'm going to go back to solid and then you could change the color to be whatever you want let's do teal okay so that is the very basics of border next up we'll talk about when and height so in this folder I have an image Kitty under-bed JPEG I'll add that image in where should I do that maybe after the h1 I'll add an image tag said it had to have a source of Kitty under-bed jpg let's take a look there's my cat under the bed all right so I want to set the width of this image it's a little bit large or the height and there's a property for that so I'm going to select all images and set a height let's go with 100 pixels and see what that does for us okay it's pretty small you can see also that the image does shrink down appropriately so it scales down I'm not just squashing the height and then leaving the width as the original width let's go to maybe 300 pixels how does that work yeah that's a little better I can also set the width if I wanted to to be how about 800 pixels let's see what happens there now it is squashing things when I set an explicit height and a width it is going to follow those instructions so whatever the proportions of this image were originally I can't remember if it's I don't think it was square I'll comment this out which by the way these are comments in CSS we've got our slash and a star and the star followed by a slash I just used the shortcut in vs code command slash toggling it on and off so if we go back yeah it wasn't quite a square whatever that ratio is will be preserved if I'm setting the height or if I'm setting the width it will stay that same proportion but as soon as I set both of them the browser will follow whatever I tell it to do here so I could make this you know 100 pixels tall I get a very squashed kitty but I'm not going to do that we'll go back to probably just 300 pixels there and why don't we also add a border let's do a 3 pixel solid man is black gonna look good nothing's gonna look good but let's see yeah that looks ok so there's our border maybe just for a variety sake I'll do 8 - border ok so now we've seen a couple different properties right we've seen color background color height width font size border I'm gonna show one more which is called display display is a special property I'll go pull it up here on the reference see if I can find it alphabetically or just search for it display right there display allows us to decide or define whether an element is treated as a block or inline element now there are quite a few options for the value that we set with display we're not going to worry about most of them I'm just going to show you what happens if we set this h1 here all h1 to have a display of inline so right now an h1 by default is a block level element but now that I've set it to be an inline element and i refresh pretty drastic change it no longer takes up its own line you can see that h1 there and this image is also an inline element and we end up with our image and this ocelot h1 sharing the space down here we have a paragraph which is a block level element let me just verify that that's what we've got going on yes so if I made all paragraph tags display inline you'll see that we end up with all of our text like that multiple paragraphs here are no longer on their own lines they just smushed together and how we've got ocelots h1 our image and then text from the paragraphs all together inline the other version that we can do the other thing I'll show you now is that we can take something like an anchor tag which is an inline element it does not take up its own block as we can see and I can set that to be display block not black but block and now every single anchor tag takes up its own line all the way across the page not something we probably want to do but we can and then one other option I'll show you is display:none which will hide all anchor tags at this point so they're not displaying so we don't see them so I'm gonna undo that anyway probably comment that out so you have a reference if you want to look at this code and there's a lot more to this display property but I think that's all we'll do for now and that's a pretty basic overview of the flow of CSS you select something so far we've always been selecting just an element name but there's a lot more to do and to cover which we'll do tomorrow and then inside of these curly braces we specify properties with a corresponding value so a property name colon value color orange background color light pink font size border height width display of course there are hundreds of properties it gets a little bit overwhelming if you try and memorize them all you will learn the important ones and the ones that you commonly use just by using them enough the more rare ones your just Google that's what all of us do unless I'm sure there are some CSS experts who have everything memorized but most developers are going to Google a lot and find inspiration and figure out you know how do I set this one property or what is the syntax for a box shadow or what's the syntax to set a a gradient a radial gradient I could never remember that stuff I just look it up but the basics font size color background color display width height and quite a few more properties you'll use frequently enough that you'll just learn them through use if you're interested I've got a little bit of a homework assignment exercise that do this at home to get more practice activity and it looks like this there's a folder in the download in the description for this video if you download that one file unzip it there's a homework folder and inside there's an index.html which when you open it up will look just like this there are no styles then there is a main dot CSS and it is empty except for a bunch of comments but it's not doing anything it's also not even included in the HTML file so there are steps I'd like you to go through the first one is including the CSS file main CSS in index.html and then there are different styles I'd like for you to write so I've given you the colors if you need to use colors the actual color names here you can also just change them to be whatever color she wants but just to show you what it would look like it's still going to be hideous but this is the end results so if we step through some of this give the body a background of lights teal blue and a steel blue border so lights teal blue and then that is regular steel blue I tell you how wide to make it then we've got make all the h2s dark blue make all íl iment s-- light yellow and forty pixels make all superscript elements orange red and twenty pixels so you can see this is what it starts as here that's what it ends up as to give the h1 a background of aquamarine and make it an inline element so you can see it's in line here give the ordered list a two pixel wide orange red dashed border that's right there make the image 300 pixels wide and make it take up a whole line of space so notice how the image is behaving here we've got this span afterwards they're sharing a line now they're not and then make the horizontal rule I totally screwed that up there we go disappear using CSS so there is a horizontal rule an HR I'd like you to make that go away it's not here anymore but don't delete it from the HTML don't touch the HTML accepts to include main CSS and then here's a bonus something we have not talked about you'll have to do some research if you're new to CSS make all Ally elements uppercase text through CSS don't touch the actual allies over here it looks like this it's all caps it looks like we kept the caps lock key on the HTML is not in caps I mean there are some capitalized letters but this is all done through CSS you'll need to Google how to do that if you don't know okay so very basic intro to CSS we have seen how to connect a CSS file using a link element we've seen the basic syntax where we type something a selector or curly braces and then various properties with a colon separating the property name and value semicolon after each pair we can have multiple pairs and that's it for now like I've mentioned a couple times we have a ton more to cover we've got selectors and specificity we need to talk about why CSS is called cascading style sheets we need to talk about all sorts of color stuff and hexadecimal colors RGB colors the Alpha Channel HSL colors and gradients we need to talk about the boxed model and margin and padding and border we need to talk about styling text and web fonts and including icons and google fonts responsive design and breakpoints flexbox for layout animations lots and lots of stuff coming up this is just an intro anyway I'm gonna stop talking now thanks for watching hope everyone's doing well staying safe and staying sane I'll see you tomorrow

Channel: Colt Steele

Views: 13,931

Rating: 4.9938836 out of 5

Keywords:

Id: jNwCMTQ9ico

Length: 34min 7sec (2047 seconds)

Published: Tue Mar 31 2020