CSS Tutorial: Inline, Internal & External CSS | Web Development Tutorials #14
CSS Tutorial: Inline, Internal & External CSS | Web Development Tutorials #14
► Source Code \u0026 Notes: https://codewithharry.com/videos/web-…
►This video is a part of this Complete Web Development in Hindi Course Playlist: • Web Development Tutorials For Beginne…
►Click here to subscribe - / @codewithharry
►Checkout my English channel here: / programmingwithharry
Best Hindi Videos For Learning Programming:
►Learn Python In One Video - • Python Tutorial In Hindi 🔥
►Python Complete Course In Hindi - • Python Tutorials For Absolute Beginne…
►C Language Complete Course In Hindi -
• C Language Tutorials In Hindi
►JavaScript Complete Course In Hindi -
• JavaScript Tutorials In Hindi
►Learn JavaScript in One Video - • JavaScript Tutorial
►Learn PHP In One Video - • Learn Php In One Video In Hindi - हिं…
►Django Complete Course In Hindi -
• Python Django Tutorials In Hindi
►Machine Learning Using Python - • Machine Learning Tutorials For Beginn…
►Creating \u0026 Hosting A Website (Tech Blog) Using Python - • [Hindi] Web Development Using Flask a…
►Advanced Python Tutorials - • Intermediate/Advanced python Tutorial…
►Object Oriented Programming In Python - • Object Oriented Programming Tutorials…
►Python Data Science and Big Data Tutorials - • Python Data Science and Big Data Tuto…
Follow Me On Social Media
►Website (created using Flask) - http://www.codewithharry.com
►Facebook - https://www.facebook.com/CodeWithHarry
►Instagram - https://www.instagram.com/codewithharry/
►Personal Facebook A/c - https://www.facebook.com/geekyharis
Twitter - https://twitter.com/Haris_Is_Here
Content
0.167 -> All right guys, In previous video we have seen what is CSS, why CSS is used
4.972 -> all this things we have seen
6.674 -> But here we will see more about it, and we'll see how CSS is
12.346 -> actually implemented and used
15.149 -> Here i will close all the files
18.085 -> I'll create a new file and name it "tut 13.html"
23.157 -> And along with naming "tut13.html"
28.195 -> i will put a boiler plate of my html
31.665 -> and after putting html boiler plate,
34.601 -> i will write here CSS tutorial, okay
40.274 -> Great, now i have written CSS tutorial, now i will show you the techniques to implement CSS on our page okay
48.983 -> Now here if you remember, i created a harry.css
53.22 -> and here i created harry.html and harry.css
56.557 -> we won't consider Javascript, we will only see links of html and css
60.961 -> Here i will close harry.html and harry.css
64.165 -> Just because it was a tut, i will create a tut13.css in some time
68.068 -> But before that i will write a paragraph here and before that i will write heading
72.573 -> "This is CSS tutorial" and after that
78.312 -> i will write a paragraph, "This tutorial will teach you everything you need to know about HTML/CSS", okay
91.792 -> So this i wrote here, oops i made a mistake here, no problem
95.896 -> I will do Go live and after that my live server if VS code will run
101.035 -> and my this file will open live, so any changes i make will be reflected here without reloading
107.541 -> pretty much this is what this extension does
110.511 -> So what i will do here is, inline CSS, so i told you there are 3 ways to implement CSS in any HTML
118.752 -> So here one i told you, Style
122.056 -> If i make style like this, "style = "color : red", and save it, so here you will see
130.798 -> so it's color will be red, that means i wrote 1 line CSS and changed the style
136.437 -> till now you will feel that it is best technique but i will tell you this is not the best one
143.11 -> and why it is not the best technique i will tell you
146.78 -> if you use inline CSS and wrote all the styling, so your HTML will become so messy that you won't handle it
155.956 -> So for now listen to me and i say we only use internal and external CSS okay
163.33 -> So here we will come to internal CSS
165.532 -> so this was our inline CSS, we have written it on 1 line only and property has changed, i can do one more thing here
171.505 -> i can add a background color also, assume i added background color yellow
175.442 -> so i can write many properties on 1 line, like you can see, and see the background color has become yellow
181.582 -> and along with this i can do many more things, but i won't go there
185.052 -> now here i will only take you to next step and say add style tag inside the head, like this
193.327 -> i wrote style, so my style tag is added
196.13 -> now what i will do is first of all add selector, i will say paragraph okay
200.701 -> after this what i will do is write, "p" and after this "color : black;" okay
208.275 -> i wrote paragraph a color black, at one place i'm saying color red, at another i'm saying color black
213.18 -> you will ask which one of them will come in effect
216.683 -> which CSS will it take, so see here what this will do
222.422 -> this is give priority to inline CSS, okay
225.325 -> inline CSS is given priority over internal CSS
229.229 -> but i remove inline CSS from here
231.598 -> i won't remove it basically i will comment it out
234.568 -> and before commenting it out, i will do this and i will remove this style tag only
241.308 -> So see here, as soon as i removed style tag it's color should be black and see it's color became black
247.347 -> now it's color was already black, so let's change it's color to something else
252.92 -> we will make it purple, if we make it purple so see here it's color becomes purple
258.892 -> and now you understand how this works okay
263.063 -> so this was our internal CSS, so now what is external CSS?
267.634 -> So i will tell you a thing that i can add more properties also, so if i make background color
272.706 -> assume if make "background color : seagreen"
277.444 -> so i can see it, see here we got seagreen obviously
280.981 -> it is not looking good, but again here i'm only telling you
283.95 -> now i'm not trying to make a beautiful website, i'm only teaching concepts okay
289.656 -> so now what we will do is add a style sheet here and where we will add that style sheet
296.296 -> we can add that style sheet like this
300.6 -> we will write link and : css
303.036 -> and automatically our code is autocomplete using emmet
307.741 -> and we can link any style.css sheet
312.212 -> here i will make "tut13.css" named CSS file
317.017 -> i will make it here
319.152 -> "tut13.css" and inside it i will write paragraph's "color :", make it, which color i should make, i will make it
332.466 -> i will make it greenyellow okay and i saved it
336.169 -> see here as soon as i save it, it's color became greeyellow
339.906 -> is this means that external sheet takes precedence from internal CSS, No i will tell you what happens here
348.315 -> the link which i put, the styling i used, it will bring content of tut13.css here, so write this
357.257 -> or else i will copy this content here, same thing
361.161 -> So i hope you understand this thing and i will bring this up again
367.767 -> you understood this also, the tut13.css which i made, i had to include it here while making
376.543 -> and the properties which i will add in this, assume i put background color here, i will put "background-color : hotpink"
384.351 -> and VS code helps you a lot to choose all the colors here, and see hotpink came here
390.257 -> and this hotpink background color if i put it there
394.06 -> if here i changed it's color like this, i will show you if i hover over this i get a picker so easily i can select any color okay
405.071 -> So i hope this is clear to you all
407.641 -> what is internal CSS, external CSS and inline CSS?
411.344 -> now guys what happens here is, if you wrote any CSS afterwards it will take precedence
416.75 -> I will give you a example, i placed my tut13.css file here and then i gave this color, okay
424.19 -> now see here what will happen i have opened this side by side
427.827 -> i have to show you this, i gave here color greenyellow and gave background-color hotpink but it is not working
435.068 -> greenyellow is not coming and my background pink is also not coming but if i bring this stylesheet down okay
443.176 -> i brought it down, i haven't save it till
445.845 -> now here background is green but when i save it see what happens, i saved it
450.417 -> see background became pink, so the thing which is written afterwards will take more order
455.055 -> and here you all keep this in your mind
458.525 -> the thing which you wrote afterwards in internal and external css will take more order
463.93 -> but if you want that first CSS should take more order
467.934 -> so here you can write "important" in ":"
473.74 -> see like this put important here, now no one can stop it's background color to become seagreen
478.178 -> because you made it important okay
480.346 -> So if you want this to take precedence so make it important
484.584 -> so this is important, we will talk more about which thing takes precedence over which in CSS
489.989 -> but for now inline CSS will take more precedence
494.227 -> and after that between internal and external the precedence will be the one which is afterwards that means the property which is at the end
500.233 -> because it will override old property
502.569 -> So in this case this background color and this color is overriding but because we have put important
509.242 -> this thing cannot be overridden afterwards also
513.413 -> so important means no one can override me, and here if you
517.917 -> have included "link rel = "stylesheet" href = "tut13.css", so rest all of the things which are in this tut13.css which is written afterwards
527.594 -> that will come as the same, so i hope you understand this thing
532.532 -> i will tell you not to go deep inside this internal working, just understand this that browser collects all the sheets and all the styles at one place
543.576 -> and parse your markups and after that put style on them
547.247 -> the thing which comes afterwards is overridden if important tag is not used
551.751 -> if you put important here, so it becomes important like here my background color become seagreen
559.525 -> So i hope you understand this thing, what are 3 types of CSS, how are they used, and in coming days we will study properties of CSS
567.767 -> we will see one by one how the things are done in CSS
571.504 -> for now, i will say this that you access this playlist if you haven't done it yet and bookmark it and save it by clicking here
579.545 -> If you are liking and enjoying this videos so do like it
583.249 -> Thank you soo much guys for watching this video
and I will see you next time [ ♬ ]
587.086 -> [ ♬ ]
Source: https://www.youtube.com/watch?v=ArUL-He_AN0