Get started with CSS in 8 minutes! 🎨

hey hello again friends today I'm going to explain how we can get started working with CSS so sit back relax and enjoy the show CSS is an acronym for cascading style sheets we're able to apply CSS properties to color style or otherwise decorate our HTML markup there's three different ways in which we can apply CSS inline internal and external we'll begin with inline suppose we have an H1 header tag with the title of this is my website let's create a few paragraphs we need a pair of paragraph tags we need some sample text I'll type lorem then tab I'll copy this paragraph then paste three additional paragraphs so we have a total of four to apply some CSS styling to one of these elements for example the body of our document we'll select the opening tag set the style attribute to B we can list one or a few CSS properties let's change the background Dash color of our body to be black the background is now black let's change the font color of the H1 heading style equals color that's for the font color let's pick White then we'll do this for the paragraphs this is an example of inline CSS within the opening tag of one of your elements you can change the style attribute then list one of many CSS properties another method of applying CSS is internal as in an internal style sheet I'll undo these style attributes to apply an internal CSS style sheet within the head of our document we need a pair of style tags whatever elements you would like to apply CSS to you would list that within the style tags if I would like to Target the body of my document I would type body then a set of curly braces list your properties between the set of curly braces let's change the background Dash color of the body of my document to be black let's change the H1 heading H1 curly braces then I will list some CSS properties color white then let's change the paragraphs P curly braces we're selecting all of the paragraphs color white so that's an internal style sheet within the head of your document you need a pair of style tags list the element you would like to select add a set of curly braces then list one or many CSS properties let's remove the internal style sheet now we'll create an external style sheet external style sheets are probably the most popular method because we can make a style sheet that's reusable to create an external style sheet within our website folder we're going to create a new document I'll name this document style dot CSS we need to link this style sheet to our HTML file we can do that within the opening head tag by using a link tag we need to set the relationship attribute to b style sheet we're letting the web browser know that we're linking a style sheet then we need an href attribute set to the relative file path of our style sheet that are right next to each other I only need the file name including the extension style.css we have now linked this style sheet to this HTML file using this external style sheet we can select specific elements from our HTML file and apply CSS properties we will select the body of our document body curly braces I would like to change the background Dash color to be black let's change the color of the H1 header tag color colon White then the paragraphs P curly Braces Color colon White if you do need to apply CSS properties to one specific element such as this first paragraph We can create an ID within the opening tag ID equals think of some unique name I'll name the first paragraph P1 let's do this with the other paragraphs the second paragraph will be P2 the third will be P3 the fourth will be P4 I'm going to delete these lines to select an element by ID you'll use a hashtag then the ID so P1 what would I like the color to be let's change the color to red I'll select another ID P2 curly braces I'll change the color to be orange P3 color will be yellow P4 color will be green you can also apply CSS Properties by a Class A group within each of these paragraph tags I will add the attribute of class the first paragraph will be odd it's an odd number the second paragraph will be even the third paragraph will be odd the fourth paragraph will be even to apply any CSS to a class Guild type dot then the name of the class any elements within the odd class let's change the color to be red the first and the third paragraphs are both red because they belong to the odd class we applied the color red to anything within the odd class by using dot then the name of the class let's change any elements within the even class to be blue if we're selecting a class we type dot the name of the class even in this case we'll change the color to be blue the second paragraph is blue along with the fourth they're both part of the even class another nice thing about external style sheets is that you can apply them to more than one HTML file let's create a second HTML file I'll name the second file page 2.html to generate some boilerplate HTML within vs code you can type exclamation point then tab I'll open page 2 with live server this is page two I'm just going to copy all of this and make a few changes paste everything within page two let's change the title to be this is page two and we have three paragraphs this time we have our index file and page two to link an external style sheet to page two again we need that link tag set the relationship attribute to B style sheet then the href attribute will be the relative file path they're right next to each other I only need the file name style.css now when I save and refresh the page we have applied all of our CSS from the style sheet to page 2.html external style sheets are reusable so they're pretty nice and convenient alright everybody so that is an introduction to CSS with CSS you can change the font the color add decorations we'll get more into that soon you can apply CSS inline with an internal style sheet or external style sheet and that is an introduction to CSS foreign

Channel: Bro Code

Views: 11,685

Keywords: CSS tutorial, CSS course, HTML CSS, HTML, CSS

Id: uzF1Doc3cZQ

Length: 8min 0sec (480 seconds)

Published: Thu Sep 21 2023