70-480: CSS Jump Start

About this course

all right well good morning good afternoon good evening depending on where you happen to be in the world currently joining us this is adding style with CSS jumpstart I am a

Christopher Harrison and I’m joined today by Helen Zhang Helen if you want to go ahead and introduce yourself yeah sure mush liquors fur I work at Microsoft and

I am a startup developer evangelist working out of San Francisco so I so I work with top-tier startups out of the Bay Area to basically help them on board onto a sure help them develop great apps

for our platforms and I also you know just generally spread the word of this product telling star to us about how they can get access to software and services from Microsoft and in my spare

time I’m volunteer CS teacher and I guess both in work and in life I’m a really huge JavaScript junkie okay fantastic welcome welcome and as for me I am

Christopher Harrison I’m a longtime MCT spent about 15 years as a Microsoft certified trainer and recently about six months ago actually Microsoft said hey you want to come work for us too they

said yeah sure why not and so I packed up the family moved up here I actually got started with technology back and my father brought home a victory graduated on a Commodore

64 yes OS ever and basically I’ve just kind of turned that into a career I’m a Content developer focused mostly on office 365 and web development and then outside the office you can find me out

running somewhere spending time with my wife or foreleg and child in the meantime let’s go ahead and talk about what we’re going to talk about so we’ve got six modules today and module one is

sort of the ubiquitous getting started with CSS where we want to talk about what CSS is the basics of how to apply it how to bring in external stylesheet and so forth and then that will lead us

pretty naturally into module 2 where we’re going to take a look at how to identify individual element or individual blocks of of elements Peachtree is going to be our

page three module three even is going to be page layouts and that’s where we’re gonna talk about really just how to layout your pages how to put different things into different spots how to

handle positioning and how to handle the the boxes as they work inside of CSS module four is going to be media queries and focusing in on how to automatically resize things or make things show make

things hide based on the size of the based on the size of the display make sure that you know when you’re going in and designing everything that will actually work on a mobile phone for

example module five is going to be transitions transformations which is going to be a lot of really cool things that you can do with CSS not JavaScript as far as making things kind of

highlight or move things around and so forth and then finally we’ll close it all off taking a look at CSS preprocessors because one of the things that you’re going to notice is that CSS

can sometimes be a little bit verbose it’s not a good way to put it yeah we’re both and I would also say finicky I should okay finicky I like that word finicky and so the pre processes are

there to try and help you out there cool now now that we’ve talked a little bit about us and a little bit about what we’re going to talk about let’s talk a little bit about you and kind of what

the expectations are so we sort of expect that you’ve done some level of HTML we’re not going to teach HTML today and we also expect that you’ve probably done maybe a little bit of CSS that

maybe you’ve kind of opened up bootstrap and went oh what in the world is this and they’re trying to figure all of that out or maybe you’re you’re supporting a site and you’re just trying to kind of

navigate the land so maybe you played around a little bit with CSS but we’re not setting a very high level on CSS knowledge that this really is going to be in introduction to CSS and also along

those lines it’s definitely worth mentioning we’re not going to cover every last CSS property we would be here all of today and tomorrow and the day after that and the day after that and

probably the day after that trying to cover all of the individual properties so we’re not going to do that so we really are focused in on some of the bigger properties and really a lot of

how CSS is going to is going to function because that’s the stuff that that you really need to kind of learn the individual properties that’s a lot of key value pairs that you can go look up

later on so that’s really going to be our focus if you are looking to dig a little bit deeper or to try and find a little bit of prerequisites I would recommend the html5 CSS fundamentals mva

that bob tabor did and then there’s also a Microsoft course two zero four eight zero which is programming in html5 with JavaScript and CSS that that you can check out beyond that since you guys

have joined today you’re a part of a 2.5 million user community which is pretty cool on Microsoft Virtual Academy it’s a great place to go in find all sorts of great training you can earn your 50

points for watching this you’ll notice the there at your code and then the little URL that you can go to to punch all of that in fantastic so what do you say we actually get started yeah all

right cool so let’s go ahead and take a look at at CSS there’s the camera that I want let’s take a look at at CSS and now he takes it away and talked about exactly what CSS is is all about here so

we’re gonna start off with kind of what CSS why you want to use CSS what what’s important about it then we’ll roll on into element selection will actually spend a lot of time today both in this

module and in the next module talking about how to identify individual elements how to identify types of elements how to identify elements based on their state where they happen to be

and so forth so that way I can say hey this is how I want you to display this is where I want you to display maybe I don’t want you to just like things like that so we’ll go in and

take a look at all of that well take a look at the different ways that we can actually apply CSS to a page and that will actually lead us perfectly into CSS inheritance now chances are you’ve

checked out another mva and one of the things that you’ve probably picked up about MBA in general is that MBAs do tend to be demo heavy today’s not going to be an exception to that we are gonna

have an awful lot of demos because you’re developer right yes and I’m a developer and you’re all developers and one of the big things about being developers we need to see it yeah you

know you need to actually see how it works so there is gonna be a lot of demos the one little capsule we’re gonna have a bit this morning is there’s a little bit of ground work that we need

to lay out first before we can get to a demo so if you’re sitting there and you’re watching and you’re going hey can we see a demo trust me there’s gonna be plenty of demos

we’ll get there it’s just gonna take a couple of minutes to kind of roll through a little bit of background stuff first so oh let’s get in and take a look then at what CSS is all about so CSS of

course stands for cascading style sheets all right well the cascading part we’ll talk about in a few minutes let’s focus in on the style sheet part for right now the style sheet part is this is a

language that we can use now to lay out whatever it is that we might want and of course the most natural coupling is with HTML now you might be wondering alright well wait a minute Christopher I

can actually fire up HTML and and I can actually just say something like this that maybe did you do actually apparently I’m gonna do it this way because I don’t have a zoom it started

yet but that’s okay so maybe I could go in and I could say bold and I could say hello like that and I can close off my bold tag like that well that’s style right yeah I mean

it’ll make the hello bold it’ll make the hello bold but it’s not a really good way to do things not if you want to for instance repeat this or you know apply just

different elements or if you want to change it even yeah that’s exactly yet because what we’ve now said is that hello has to be bolt that’s it and and so the first big problem is what happens

if you want to change that or what happens if you want to be able to change that based on the device so maybe I want that to be bald on a mobile phone but I don’t want that to be bold on a desktop

or maybe I don’t want that to be bald when it’s printed out well I’ve said this is going to be bold that’s it period end of discussion there’s nothing else that that’s gonna be but bolt the

other big problem that I have is have I told you anything else about this little hello do you know anything else about that hello nothing nothing you know that it’s gonna be bold and that’s it yeah is

that a title is that a greeting is that a header for an article yeah I kind of think it’s important but even that I mean I’m not sure exactly and that’s the problem

so you don’t know if it’s if it’s important or not I don’t know if it’s important or not the browser isn’t gonna know if it’s important the screen reader isn’t gonna know it’s important and a

search engine isn’t going to know it’s important that obviously a lot of time is spent on SEO search engine optimization and SEO is extremely important and one of the things that I

always try to highlight is if you’re doing good things that’s going to naturally start to move your page on you know a lot of people spend time focused in on performance and performance is

important but really if you write good code first you’re gonna find more often than not that the good code is the best performant code so if you just focus in on hey how can we make this code work

really really well read really well that’s generally speaking automatically going to be the fastest way to write it same exact thing when you’re talking about search engine optimization is that

if you design your page as well they’re typically going to be optimized in search engines why because the search engine is gonna understand what that page is about so if I can tell a search

engine hey that’s a header it now has more information that can operate on and it has a better understanding of where to put that page in regards to or in relation to other

pages for particular queries so not only do we want to focus in on this is how we want to display it but we also want to focus in on exactly what that information is and that’s where that

separation of concern comes into play so rather than just simply saying hey we want this to be bold let’s let HTML put together the structure of the document so let’s let HTML tell us this is what

the head is this is what the article is this is what the section is this is where our navigation is let HTML do things like that and then let’s let something else handle the logic that’s

of course gonna be JavaScript and let’s let something else handle the formatting and display and that’s where CSS is going to come into play that nice clean separation of concern so rather than

going in and having a bold here maybe we go in and we use a header tag or maybe we go in and we do an h1 tag and I understand that h1 of course is going to give you formatting but each one is

still going to be understood as that’s a header and we could of course take that with style and adjust that yeah so yeah so focus our HTML on describing our data focus our CSS then on how we want to

display that data and that’s why CSS is important all right now let’s talk a little bit about the basics now the nice part about CSS in general is it is a relatively easy language to understand

that would say that you’re going to notice that it’s really broken down into two basic sections that we’ve got selectors and then we’re going to have the key value pairs so our selectors are

basically what do we want to apply this to and so this could be an individual element this could be groups of elements this could be elements of a particular type this could be elements in different

locations but it’s what do we want to apply this to then it’s going to be what property do we want to set and to what value do we want to set it to so now that we figured

out oh okay this is what we want to focus our attention on this is what we want to manipulate the next question then becomes well what do we want to excuse me what do we want to manipulate

on that exactly how do we want to make that look do we want to move it somewhere else do we want to make it bold do we want to change the color things like that so that’s the basics of

our CSS syntax and the thing that you’re going to notice is that this syntax is going to be true pretty much universally so regardless of where it is that you happen to be applying the CSS so if you

put it into a section on a page which we’re gonna take a look at if you put it into an external file it’s still always going to be the exact same the leaves place where you’re not going to have a

selector which we’ll see in a couple of minutes is if we on an element happen to say style equals so we’re not gonna have a selector there because it’s gonna be on that particular element instead what

we’re gonna do is we’re just gonna take our property value pairs and put those into there okay so now let’s talk about finding those elements now I mentioned earlier that we’re going to spend a lot

of time on element selection we’ve got an entire module coming up on element selection for right now we’re just going to take a look at the basics and those three basics are finding all items of a

particular type of a class life talk about what class is and then finally based on an ID but let’s start off by talking about an element so an element service you might guess is going to

apply to the element and so all we have to do inside of our CSS is simply say whatever the name of that element happens to be and one very cool thing that you can do in the syntax and I

don’t have it on the slide so you can also actually list multiple elements with commas so I could say well if I want that to apply to all h1 and to tans then I can just simply H 1 comma

H 2 comma H 3 and whatever else it is that that you might want so all of our h2 elements in this case would then have three different properties set on them so our font family our font weight and

our color now I mentioned earlier we’re not going to go through every single property because not only would that take forever I think that would be a little bit boring yeah I think a lot of

these are self explanatory just from looking at it yeah generally speaking they are self explanatory now you know one of the things though and and I find this sometimes with like font weight and

then font decoration is it’s not always as clear as you might hope this is where the intellisense and Visual Studio really shines yeah that the intellisense for CSS is spectacular

so that way if you’re not sure what you’re looking for just start typing a few characters chances are just like Helen said because a lot of them are self explanatory you’ll find the one

that you’re looking for so just type a few characters and then go oh okay that’s the one that I want and then let the intellisense sort of guide you from there

exactly I think the one that is confusing though is color color is one of the ones that we have here for the h2 element and color you might think color should just apply to whatever the

element is you know if it’s it if it’s like a box that would apply to the box but it’d mean it usually just applies text exactly yeah and that’s that’s the one that I think gets a lot of people in

the V&A yeah yeah so it you would think it might be font – color yeah exactly but it’s color if you if you put the the color thing the color property on body it I’ll

just apply to all the text in the body right I won’t make the it you know change the background color for instance exactly but there is a background color property exactly yes I won’t get to yeah

exactly exactly I also want to highlight real quickly here on this and kind of use this as a little side teaching is you’ll notice that we’ve got font family and one of the cool things that you can

do with CSS and this a little bit advanced we’re not going to dig too far into it is you can actually push down your own fonts so if you have a true type font you want to

that down you actually have have that ability so funds are obviously a very big thing the there are a couple little catch is about trying to push down your own font and and things like that so

whenever you are going to be choosing the font you want to give the browser the ability to fall back to something else so if it doesn’t have a particular font that you might want give it

something that it can fall back to and that’s exactly what font family is going to do here is that with font family what I’m gonna do is specify okay we’ll want to use four Danna if you don’t have

verdana then let’s fall back to some other sans-serif font which is basically going to be just like that so it’s not going to have so for example if I had an L so that would be a serif so it’s got

my little feet sans serif is just gonna have the little out yeah sort of the simplest way I think to describe yeah I think serif fonts you can associate with the newspapers or basically print things

and then San serif is you know what you normally see San serif fonts online they’re a bit easier to read things are greens yeah yeah they’re a little bit easier digital wise yep okay so element

that’s going to apply to every single each tip now when it comes to like an h2 tag that’s probably just fine you know because you’re probably going to be using those for headers and you probably

want all of your headers to look the same so h2 just globally say yes we want that to work for everything that’s gonna be perfect but how about a div tag do you think that you’re gonna globally be

wanting to set things for all div tags or all span tags everywhere it’s a bit too general you’re gonna use those everywhere on your page exactly so we want to be able to rather than just

simply saying I want all div tags to look a particular way we want to be able to identify particular types of div tags because it’s gonna be based on how we’re currently using them so we might be

setting up a navigation section with a div tag so I might say div but I want this for my navigation or we might be setting up a sidebar and I’m gonna be using a div tag for that so we want to

be able to identify different types of div tag and that’s where class comes into play that a class is going to give us the ability to

to identify elements of a particular type and the way that we’re going to identify that type is by adding on a class so there’s gonna be two moving parts here the first moving part is

going to be inside of CSS now you’re going to notice here on the syntax that our syntax is slightly different from what we had before that previously we just simply said name of the tag

now what you’re gonna notice is I’ve got a little dot there and my dot indicates that this is going to be a class so that needs to be inside the CSS by the way you are going to notice that a lot of

the demos are going to simply use color especially early on just because it’s such an easy way to identify when you’re trying to do element selectors that hey look this applied or in the case of

inheritance that this is the one that actually won out so we’ll do a lot with that with color with some of the early demos but in any event so we’ll make that red so that’s

the first part inside of CSS the second part is going to be inside of the HTML you’ll notice right there that we’ve got class equals title now the grand advantage to a class here is that

classes are reusable so it’s possible that maybe this title is going to be four different sidebars so I’ve got a sidebar here I’ve got a sidebar over here I want to title up top I want a

title up top so I can go in and reuse that in multiple places and I can flag hey this is going to be a title let me go erase all of my ink there we go perfect so we’ve got our CSS we’ve got

our HTML and thus the result is going to be hello CSS now the problem with doing something like this is that that might be even still a little bit too day that

maybe I’m going to be using title in a couple of other places well fortunately I can say I only want a class to work on a particular tag type and the way that we do that

it’s just by putting in that little tag name right at the very beginning so now you’re gonna notice that I’ve got div dot title so that’s only going to apply to div tags so inside my HTML example

you’ll notice that I’ve got a span tag here and I’ve got a div tag here so the result when this is all printed out is you’ll notice that that will apply to my dim but it’s not going to apply to my

span so my span is going to be whatever the default color is but my dim tag will actually have our hello div and that is one of the little annoying parts sometimes about CSS is if something

isn’t working the way that you expect it to work generally speaking it just doesn’t do anything where sometimes it you know a little move something somewhere else but it doesn’t give you

an error message and this sort of goes back to you know old old old days that one of the things the browser is going to try and do is look at what you’ve given it and try to make a best effort

and not give you an error message if it isn’t able to figure out exactly what you want so it’s just gonna try and give you the best that that it possibly can we will notice a little bit later when

you get into like the the f12 tools that the f12 tools are really helpful in trying to track down exactly what’s applying where and maybe try to troubleshoot exactly why particular

style isn’t applying or not applying okay now the problem with class is the fact that again it can be still a little bit too vague so maybe on a page there’s one little spot that I need to go in and

highlight but only just that one spot that’s it this is where ID comes into play ideas only going to work on one specific element and it’s going to be that element with the ID attribute set

on it and that has to be unique has to be unique a little side note here and I think this is worth mentioning for anybody who’s maybe going to be

doing manual forms and things like that is I get a lot of questions about what’s the difference between name and ID and it’s it’s it’s a good question ID is what we can use with JavaScript

and with CSS name is what’s going to be sent back up to the server now if it turns out that you didn’t put in a name then in that case the ID would be set up to the server but if you do have a name

that’s what’s gonna be sent up to the server so let’s say for example that again you know we’ve got a we’ve got a form so I’ve got my my little text box and on the server I’ve got some variable

name that I’m gonna be expecting so maybe I’m just expecting that to be let’s say username Muse you yeah yeah yeah yeah let’s try that again there we go you s e R and a ye can spell user

names see ya I had to go alright okay now here’s the thing is that’s on the server side and I may not have the ability to go in and change that on the server so that always has to be user

name but I may need to or have a desire to change that on the client side so that way when I go into my JavaScript and I want to be able to manipulate that and kind of play around with that I may

want to be able to change that and not impact anything on the server and this is quite common in bigger shops where you’ve got a web designer and you’ve got the programmer that’s handling the

behind-the-scenes part so my web designer can sort of do whatever it is that they want but they’re not going to impact the programmer so they can change the ID and that’s what’s going to impact

the client and as long as they keep the name the same that’s still all gonna be good so I always just kind of like to highlight that sort of a little bit of a tangent there but I always like to

highlight that because that ID name question always comes up yeah so okay in any event the last little thing to mention here is just the syntax you’ll notice pound for

an ID so dot for class pound for an ID or hash I guess for an ID and I will be the first to admit I I get those backwards quite a bit I don’t know if you do that a lot evening getting the

pound sign and oh the pound sign and the dot exactly yeah that a lot of times I’ll say oh yeah I want a class I’ll put a hashtag in front of that yeah I think that’s usually the first thing I check

for when something’s not working I’m just like I I must have selected it wrong exactly yep yeah okay now we’ve talked it off a lot I think it’s about time to start rolling into a demo

there’s a one last little thing that we got to talk about though and then we can do a demo I promise we’ll get to a demo all right but first let’s talk a little bit about how we’re going to apply all

of this style and as it turns out there’s three different ways that you can apply a style sheet to or style to a page or to an element the first way when this generally speaking is the preferred

way is to link to it so you’ll notice that it’s a link relevance equals style sheet type equals text back CSS and then wherever that reference happens to be now the nice part about doing that is

once again that nice clean separation of concern so that way my Styles over here my HTML is over here my JavaScript is over there so that nice clean separation of concern so that way when I’m focusing

on the HTML I can focus in on the HTML and then when I’m focusing on the style I can focus in on the style on top of that this is also going to give you reuse so that way I can use that on

multiple pages all right well what happens if maybe there is a style but I only want it on one page maybe or actually doing or their or maybe you’re just looking to go in and

play around a little bit then maybe I don’t want to create a full separate CSS file that maybe I’m just doing a little proof-of-concept I’m just doing a little bit of white boarding and I just want to

be able to test something and just kind of see how something is gonna work real quickly well you’ll notice that you can actually just toss style into the head section on a page and it’s gonna be that

standard CSS syntax that we saw before where I’ve got my selector curly brace curly brace and then the individual values inside of there so just put that right there into the page and then

finally last but not least you can also if you want put style directly on to an element and that’s just simply gonna have those property value pairs right inside of there now I know some of you

are probably already wondering well what happens if it turns out that we have something in a style sheet that’s external something inside of a page and then something on an individual file

you’re probably wondering that and I’m with you we’re gonna get to that see see there’s your little teaser I promise we’re gonna get to that but first let’s actually get in and start doing a little

bit of a demo I think it’s time don’t you yeah actually see the CSS in action yeah exactly all right let’s see and I’m going to

apologize and this is gonna be my my one apology you are gonna notice I’m sort of down upon here I I really should come up with like a fantastic story involving ninjas or something but I actually just

lost a battle with a wineglass which is really what happened there so if you notice my typing is a little slow there’s there’s my apology I mean the tragic gumbo loss I think is a good

start yeah that is a good story I had this fantastic pot of gumbo cleaning wine glass over here wine glass shatters and of course the the glass holster wound up in the gumbo so the gumbo was

lost that was tragic that was tragic will be holding a memorial service later this week for the gumbo so please send free late powder okay um in any event my house was smelling contesse

as well alright let’s go ahead and let’s set up a basic webpage here now you’re gonna notice that in all of our demos we’re gonna be doing basic HTML here so we’re not going to be doing

MVC we’re not going to be doing flask we’re not going to be doing PHP we really are focused in on just the CSS but one big thing to highlight is of course you can use CSS with MVC with

flask with PHP with node so it’s going to apply everywhere but one of the big things that we wanted to try and do is keep it as simple as possible and so really just HTML yeah so I don’t think

any of your demos have MVC in them no they don’t even have JavaScript in them because I just want you to know that you know all the styling CSS exactly just CSS all CSS all the time okay so any

event let me go in web and let’s go in in CSS demos and I’m just gonna highlight mine just to separate them from yours Kristopher demos there we go perfect

yeah let’s hit OK and by the way we are gonna be throwing all of these up on to github and we’ll go ahead and share about the the little github link a little bit later but all of these will

be available for you to use creating projects perfect okay so let me just go in and say add new item and HTML and let’s go ahead and call this my index page and let’s get rockin and rollin

here all right now for right now I’m just gonna put the style right inside of here and the reason that I’m going to do that is just for simplicity sake because I’m going to be kind of bouncing back

and forth between the style and the HTML so just to avoid going back and forth from file to file to file I’m just gonna do it inside of here and then in a couple of minutes we’ll go off and and

and move that somewhere else so let’s just go in and say style which is felt like that cool so now let’s go in and create a little div tag and of course since this is

is a development class we’re required hello world hello word ah there we go also a real thing hello word you’re creating your first Word document there you go you know hello word yeah that

would work all right and now control that five and I’m just gonna use the snap feature here maybe where’s my browser come here there we go okay and let me also kind of zoom in on

that real quick all right so I’m just gonna use the snap feature here and Windows 7 was was my idea there we go so there’s our page over here on that side and there’s our HTML so like we

mentioned the way that style works if you want an element all you have to do is to simply say the name of the element Curly’s and then right inside of here key value pair so let’s just go in and

change the the font so I’m going to say font family and I’m gonna use Comic Sans MS here I would never recommend that you ever actually use Comic Sans ms but the reason that I’m using it is really just

because of the fact that you’ll notice it it’s a very visible change so sort of like changing the color you know that’s very visible the moment you change something to comic sans ms that’s pretty

obvious yeah oh it’s also worth noting that for put the style in the head part of the HTML document and if you are doing in page CSS that is where you should put it absolutely yep absolutely

okay so there it is that’s all there is just simply name of the element and away you go from there but if I wanted to go in and specify particular again type then what I could

do is I could say title and then again curly and then maybe we go in and we say color colon and let’s go in and change something to blue now if I save this and I hit refresh

you’re gonna notice no changes because of course I don’t actually have an element with a class on so let’s go in and say div and let’s say class equals I love that bit of intellisense you’ll

notice that it actually right there no title there we go and I can now go ahead and say title I’ll just kind of keep it nice and easy and I’ll hit save and I’m gonna hit refresh now when I hit refresh

here you’re going to notice of course that title appears that we were expecting and you’ll also notice that it’s below and that we were also kind of expecting the

of course you’ll notice that I had class and I had my little class down here but one of the other things that you might notice about that text what font does it use it Comic Sans it’s using Comic Sans

why is that well what is cascading or I I start give away the answer there what does CSS stands for cascading style sheet there you go cascading style sheets so your styles will cascade so we

said that we want our div tags all div tags globally to use Comic Sans MS I said that I wanted something with that class to be blue so what’s happening is that it’s applying all of those styles

together all right now give me one second here I just need to fire up my file explorer here just because I want sumit and zoom in zoom it’s because it’s

a great little presentation tool and I’m going to bring up the f12 tools here because I love being able to go in and actually select the items and we can see this in action here so let me just kind

of zoom that around and I’m gonna click on the little element selection button right there and then let me click on title and once I click on title if I come over here what you’re gonna notice

inside of our style section is we’ve got our div tag here and we’ve got our title class here so it’s actually showing me every single style that it read to make that happen so why is it comic sans ms

well it’s comic sans ms because we told div tags to be comic sans ms and why is it blue well because of the fact that we said that class title was going to be blue so that’s how all of that’s going

to come together now you might be wondering at this point all right well now we’ve seen that if you say well I want the fun to be this and the color to be this then we’ll combine everything

what happens if something said do red for example and some said to blue Oh conflicts conflicts all right well fortunately we’ve got a whole

section on conflicts I tease the slide let’s actually do it now let’s talk about CSS inheritance and conflicts and I think the easiest way to describe this is really in two very simple steps last

right wins and whatever closest describes the item wins yeah okay now we’re gonna break all of that down but if you keep those two things in your head you’ll be just fine and I think

every case all right so cascading like we said it’s right there in the name conflicts are expected but conflicts only arise if something says do one thing and something else on that exact

same property said do something else so if it happened to be one thing said to do read another thing to do blue that’s a conflict in our case that wasn’t a conflict because we said we

wanted the font to be something and we said we wanted the color to be something no conflict there so those are simply combined so the question then becomes all right well what about inside of a

conflict well step one last right wins and everything is going to be applied in order so the first thing that’s actually gonna be applied and it’s reverse on my slide because I was trying to show

whatever the most powerful was its reverse on my slide here it’s going to apply first we’ll do it that way there we go the external stylesheet then it’s going

to apply the style section and then it’s going to apply the style attribute or if you like to be kind of a more positive person then the style attribute takes precedence and then it’s the style

section and then it’s the external style sheet so let’s do this let’s actually get in and do a demo here and kind of see that in action perfect all right so let me maximize that and let me sneak on

into here and I’m gonna say and I want a stylesheet and actually you know I’m gonna be kind of a good developer here I’m gonna create a brand new folder and I’m gonna say styles and

I’m gonna add it into their stylesheet perfect and let’s just call this index kind of match the name of the page there we go all right and now what I’m gonna do inside of here is I’m gonna say pound

title so if you remember we had a class already called title and see I told you I was gonna do it at some point dot title there we go told you I was gonna do it and let’s go

ahead and say color colon and let’s say red so just kind of review here you’re gonna notice blue here red there so let’s kind of see what happens let me make sure that I linked this and I love

this about Visual Studio just simply drag drop and flanked what yep just like that so it’s already got everything it doesn’t put in the type equals and that’s fine you really don’t actually

need that yeah it’s EF is default exactly yep so let’s go ahead and save that let’s bring back up my browser and what you’re gonna notice is that sure enough my title is still blue why is it

blue the reason that it’s blue is because that was set on the external file we said on the actual HTML file that we want that to be blue here so blue is going to win and you’ll also

notice that if I go back in and I select that in the f12 tools they love this about the f12 tools then we can actually see that there we go in action down below so you’ll notice down below

there’s our motive okay that we were expecting and right here are the two classes and I can see where those were applying from and you’ll also notice that does give me a little score things

as well and if you want to get really really technical there are score things that apply it with CSS but I always think it’s just simpler last write wins and whatever

best describes the element just stick to that and and that’s going to make your life a whole lot easier but you’ll notice right here that’s crossed out so we can see the browser

sucked the browser saw that external file the browser saw hey we want the color to be red but it said wait a minute no no something else wins and it’s gonna have that blue win so you’ll

notice that the red is all crossed out blue wins yeah and what’s nice about the f12 tools is if you deselect you know the title color attribute you know what would happen yep exactly so just like

he’ll eventually let’s actually just do that so let’s take away that little title right there and now you’ll notice that it changes to red so it’s a nice way that you can go in and play around

with things to to kind of see that in action kind of test to see how things would would work and you’ll actually notice there are tools I want to say the name of the tool is side waffle I think

that’s the name of the tool I but I haven’t heard of side by side waffle so it’s it’s a little add-on that you can go get John Galloway loves side waffle it’s a little add-on that you can go get

it does an awful lot of like little add-on tools with CSS and things like that and I want to say that one of the features for side waffle is that it will

give you the ability to go in and play around with this and have it automatically update inside a visual studio so kind of a slick little tool there I want to say its side waffle but

I’m gonna check at add at break okay all right in the meantime let’s go back in and kind of keep playing around here so you’ll notice again that that external that internal let me also do do this

real quick I’m going to just say manage nougat packages and just because I I’m willing to bet that somebody listening is playing around with bootstrap and one of the things about bootstrap is that

bootstrap can be very overwhelming and because there’s you know a billion different classes that are inside of there I don’t think I’m exaggerating by that much but there’s like a billion

different classes and so forth and so a lot of people will see bootstrap and they’ll just start to go oh my gosh I I don’t know what to do with all of this and they

they get very overwhelmed when they want to go in and play around with the style that bootstrap is going to to provide well here’s the thing is the styling that bootstrap is using is doing CSS so

all of the same rules apply so let’s say that right here I dragged out the bootstrap min CSS there we go and down below I said div class equals and let’s say

Jumbotron and let’s say div and hello bootstrap there we go and let’s go in and say bootstrap okay and so you’ll notice that we get that little gray background we get the the font and all

of that all of that is coming in from bootstrap in the Jumbotron class we can overwrite that so if I want the text inside of Jumbotron to be blue for example fine then all I would have to do

is to simply say style and then dot Jumbotron and then right inside here I can just say color : blue let’s save that let’s come back over here hit refresh and you’ll notice that it’s blue

and again if you want that in an external file let’s just cut that real quick and let I’m just gonna put it into my style section I’m kind of keeping it separate from from the other one style

sheet and I’m gonna say bootstrap demo there we go and let’s just paste that inside of there there we go save and let’s just do a drag and drop here and you’ll notice I just need to make sure

that it’s after last right wins so I’m just putting it after the original bootstrap there’s my custom one let’s go in hit save let’s come back over here hit refresh now you’ll notice it’s still

a blue so when it comes to bootstrap and and I’d be remiss if I didn’t mention the fact that we’ve got an awesome bootstrap mva but when it comes to bootstrap bootstrap

can be over very overwhelming because of all the different classes but at the end of the day what is it CSS and all the same rules still apply yeah I think we should also mention that

there’s another way to over write CSS properties overrides CSS properties and it’s not recommended okay do you know what I’m talking about go for it it’s the it’s the important property so so

for instance if you know you have two two properties that are in conflict and one is maybe high or one is not exactly the last right if you put in excavation work important after the property it

will become more important and overwrite that style this is this is not a good practice you should not use this but it is one of the one of the ways that you see a lot of people overriding styles I

I would see that getting very messy very yeah use it sparingly preferably not at all but it is it is there okay it’s worth mentioning yeah okay cool all right now let’s kick on back to two

slides here we’ve got just one last little conflict here that’s that’s worth highlighting and that’s in the case of an element so what happens if maybe we had something that was set for a div tag

and for a class and you know what was supposed to be red one was supposed to be below what are we doing that case and the best way to describe this is whatever best describes the element so

if I just say globally I want to all div tags to be something that’s going to apply first and then if I say I want classes to be or a particular class to be something that’s going to apply

second and then the ID is going to apply third again last right wins or if we want to be kind of the more positive way what’s going to be more important ID is more important and then class and then

element or if we break this down and actually just you know look at it just do a demo like demos let’s go in and just do a demo so let me do this I’m going to just sneak right down here and

I’m just gonna say div and I’m gonna say class equals title and I’m gonna say ID equals green you know this is our conflict here well we’ll make it you know

conflict with exclamation point all right so let’s um for right now just go in and say color : red and let me go like this okay I’m gonna put you on the spot are you ready for this uh maybe

maybe okay so our little conflict text here so you’ll notice that right now I’ve got a div on it and I’ve got my class equals title so you’ll notice on div I’ve got red you’ll notice my class

title I’ve got blue what color do you think conflict is gonna be it wouldn’t I mean it would be whatever is closest so I don’t I would say hello there you go and it’s gonna be blue so sure enough

our conflict is blue now let’s go in and add on our ID as well I love intellisense there we go let’s go in and say color : green and then we’ll come back over here and now

if I hit refresh what you’re gonna notice is that it’s green so for the element then for the class then for the ID ID is going to win so whatever best describes the element now the easiest

way to handle conflicts I think in general is try to avoid them whenever possible just because it can get very messy very quickly if if you’re not careful and again if you’re ever not

sure the f12 tools do such a great job of showing you exactly what’s going on there and again you’ll notice kind of the scores at the end there so that had the highest score which is why that one

but again I was think it’s simpler just element class ID just sort of keep that and and the rest is is pretty straightforward from there yeah okay okay so I see a lot of people are asking

about you know is bootstrap the alternative to CSS what is the difference between bootstrap and CSS that’s a great question all right so in a nutshell

bootstrap is a template bootstrap is an out of the box set JavaScript files and CSS that’s going to be designed to help make it easier to lay out a site because it’s just a lot of things automatically

for you so for example let’s come back over here to my little visual studio my very simple little index.html and you’ll notice that with my index.html I’ve got

nothing here that there’s no automatic banner there’s no automatic button style there’s nothing now I can add all of that if I want to but I get nothing here what bootstrap does and let me actually

just create a brand new MVC project just because it’s got that bootstrap automatically there and I think it’s going to be kind of an easy way to to highlight bootstrap so I’m just going to

do that real quick chugga-chugga-chugga-chugga and moving your mouse makes it go faster there we go okay and let me just make sure that that set is my startup did you

do set as startup there we go okay let me launch this so what you’re going to notice is NBC by default uses bootstrap and what bootstrap is gonna do is it’s gonna give me a lot of different

components and a lot of built-in classes that I can use so once this comes up here you’ll notice this huge block right here in the middle that’s the Jumbotron class and so that’s what’s making that

gray that’s what’s making that a a bigger font you’ll notice that the button here that has little rounded corners on it it’s got that blue background and again that’s because of

yet another class inside of bootstrap and you’ll actually notice if I did this content and bootstrap CSS here is all of the different classes that have been defined inside of bootstrap and all of

the different defaults that it’s going to set on all of the different elements inside of there so bootstrap isn’t a replacement for CSS bootstrapping uses CSS bootstrap is an out-of-the-box set

of CSS classes and defaults and otherwise that you can use and what’s also nice about bootstrap is the fact that it is it’s it’s an open standard I think it’s the best way to put it was

put out there by Twitter and so there’s a great community around bootstrap and you can find all sorts of different bootstrap themes out there so you can just drag and drop that out onto your

project and poof it will automatically look like that theme now at that point the natural question might become wait a minute if bootstrap is gonna do all of this for me why am I gonna stop and

learn CSS well because if you want to tweak something you’re still gonna need to know CSS so using bootstrap doesn’t take away the need to know CSS it makes a lot of things easier

but you are still gonna need to know CSS so that way you want to go in and tweak one little thing that you know how to do that I think that’s sort of the best way that I can describe yeah it’s not versus

CSS exactly I mean bootstrap at the end of day all the styling is done by CSS law right your shape most the styling is done by CSS but I mean it’ll do the heavy lifting for you but any tweaks you

want to make you’ll still have to do that using CSS exactly yep exactly cool well with that when I say we are we take a break yeah all right we’ll see you back here soon yeah couple

minutes about ten minutes so we’ll see you guys then