Introduction to Basic HTML & CSS for WordPress Users | Alexander Oni | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Introduction to Basic HTML & CSS for WordPress Users

teacher avatar Alexander Oni, Web Developer & Cyber Security Expert

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

42 Lessons (4h 29m)
    • 1. Promo

    • 2. Introduction to the Course HTML and CSS for WordPress

    • 3. Quick Win

    • 4. What are HTML and CSS?

    • 5. Major Update 1 Inspect Element Tool

    • 6. Major Update 2 Gutenberg

    • 7. The Basic Structure of an HTML Page

    • 8. Exercise 1

    • 9. Block vs Inline Elements

    • 10. Spans and Inline Styling

    • 11. Exercise 2

    • 12. Colors

    • 13. Font Styling

    • 14. Lists and DIV Element

    • 15. Backgrounds

    • 16. Margins Vs Paddings

    • 17. Borders

    • 18. Hyperlinks and Image Tags

    • 19. Caching

    • 20. Child Themes

    • 21. Major Update 3 Additional CSS

    • 22. The Style.Css file

    • 23. The CSS Code Structure

    • 24. HTML and CSS Putting them Together

    • 25. Classes and IDs

    • 26. CSS Specificity

    • 27. CSS Specificity Part 2

    • 28. Important Note

    • 29. Project 1 - Changing the Background of the theme

    • 30. Using Different Backgrounds

    • 31. Project 2 - Changing the Font Styling of the Theme

    • 32. Adding Fonts from Google

    • 33. Text Properties

    • 34. The Display Property

    • 35. Project 3 - Changing the size of the Logo

    • 36. Project 4 - Styling the List Items

    • 37. Exercise 4

    • 38. Project 5 - Adjusting the Hover Effects

    • 39. Introduction to Basic CSS Animation

    • 40. The !important Tag

    • 41. Thank You

    • 42. Working with the Gutenberg Page Builder

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Are you a WordPress user who struggles to make basic styling changes to your website? Do you get frustrated when you try to change the size of your text or maybe the background color of your website? Or are you simply curious about the structural and design code used to produce those pages on your WordPress website? Well look no further because this course is exactly for you.

There are many WordPress users who want to know how make simple changes to their website so they don't have to spend money hiring web developers to do so. The problem is that while they want to learn, there are no CSS courses online that teach students the basics of HTML and CSS specifically for WordPress websites.

This course is designed specifically for WordPress users like you with no programming experience. You will learn the basics of HTML and CSS but from a WordPress perspective. 

Course Curriculum:

In the first section, you will be given a brief overview of HTML and CSS and also what web inspectors are. 

We will cover the basics of HTML in the second section. You will lean:

  • The basic structure of an HTML page

  • The differences between inline and block elements

  • Spans and inline styling

  • Backgrounds

  • Margins, borders and paddings

  • and much more

By the end of this section, you would have gained invaluable background on the basics of HTML and how they it used to develop a web page. You would also have learned to apply some styling to your content using HTML tags.

In the third section, we will focus squarely on CSS. You will first learn how to create child themes from your parent theme and how they generally work on WordPress websites. You will then learn about the basic structure of a CSS code and why CSS is such a powerful tool for designing websites. You will also learn about classes & IDs and also the extremely important rules of CSS specificity.

By the end of the CSS section, you will have learned enough about CSS to begin to edit real WordPress themes.

Section 4 is where all the fun starts. Having already gained the basic knowledge of both HTML and CSS, you will learn how to apply the knowledge to make design changes to a wide variety of WordPress themes in a series of projects. You will also learn about different types of CSS properties and we will round up the course by learning about the basics of CSS animations.

If you are a WordPress user frustrated about not being able to make basic styling changes to your website, you NEED this course. This course exposes you to just about enough knowledge of both HTML and CSS to be able to style your WordPress website all on your own.

I hope you sign up for the course today.


Meet Your Teacher

Teacher Profile Image

Alexander Oni

Web Developer & Cyber Security Expert


My passion is teaching people through online courses in a fun and entertaining manner.  I have been teaching online for about 3 years now and during this period, I have created over 25 different courses on different platforms including my own personal platform - The Web Monkey Academy.

What would you like to learn?

Would you like to learn how to build and manage your WordPress website? Would you like to learn advanced skills that will make you a true WordPress developer? Would you like to learn how you can establish a successful career as a web developer? Would you like to learn the basics of information and cyber security?

 If you want to do any of these things, just enroll in the course. I'm always improving my courses so that they stay up to dat... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Promo: are you? A what? Press user who gets frustrated whenever you're trying to make simple design changes to website. Maybe you're just trying to change the fun science and your text. Maybe you're trying to change the signs of your logo, make it small on Mick and bigger. Maybe you just want to apply a different background color specifically on your home page. I get it. It can be quite frustrating trying to figure out how to do things like this, especially when you have no bag my knowledge of extreme Ill or CSS. Now, granted, there are many causes out there they can teach about each similar, CIA says. The problem is is that none of them teach you how to apply that knowledge specifically on a WordPress trip site. Hi, my name is Alex, and I want to welcome you to this course introduction to Basic. It's stimulants CSS for what press uses. This is a course targeted specifically at individuals like you who own workers websites who use what press have no background knowledge of external CSS for Moto, learn how they can make simple design changes to their work person up signs the course is divided into three main sections. In the very first section, we will cover the basics of HTML. You will learn about the basic structure off an XML page, and you will also learn how to apply in line styling by using the HTML tags. The next section will cover the basics of CSS. You will learn about the basics Test is called Structure and you will lend Elim Porton Rules Off season Specificity Classes and I DS and CSS selectors. And in the final section, you will learn how to apply your knowledge of HTML and CSS to make simple design changes to real WordPress themes. You will be exposed to five different projects each conference specific tasks like changing the background off a theme, changing the front style in the size of the logo standing the list items and also a Justin cover effects. He will also be given a brief introduction to basic CSS animation, with which you can apply cool effects to your Kastrup site. By the end of this course, you'll have gained a solid foundational knowledge of both extreme Ellen CSS, and you will be able to make simple design changes to WordPress website now who are might teach this course. Well, I am an experienced what president fell apart. My specialties are in what prayers? HTML and CSS and I have been involved with building upsets for the past eight years Now have also been teaching online for about two years. So I definitely have both experience and knowledge to teach this course. The course comes with a little bit back, monocle and see. So if for any reason you're not satisfied, you can always ask for a refund. No questions asked. No problem. If you are a WordPress, users who uses WordPress and you want to learn how to make simple this ancient history website. This is the perfect course for you. I hope you signed up for the course today and I hope to see on the inside. But by 2. Introduction to the Course HTML and CSS for WordPress: All right, so welcome officially to the course. And yes, I know I look a little bit different from the promotional video which you may have seen for the cost. That's because the cost was first of all made back in the year 2017. And this particular video you're watching is in the year 2020, December. And as you can imagine, a look quite different. So this is just to welcome you officially to the course and to thank you for Napoleon. And just to give you a formal introduction as towards we expect while taking this course. So this course is of course, the introduction to basic HTML and CSS for WordPress users. So the ideal student should be somebody who wants to be able to learn how to make simple design changes to decide. Maybe you want to learn how to change the size of their texts, maybe change the color font, family, things like that, aisle without having to hire a professional web developer. So if you're such a person, this course is going to be ideal for you, or maybe you're just a Wordpress user and you want to learn the basics of HTML and CSS. This course is also going to be perfect for you. Now, like I said, initially, the course, this course was first of all made back in year 2017. It is now 20-20. And as you can imagine, and there have been some major changes to the way what Chris, our works. So with that being said, some of the tools I used in this course are no longer available, but there are new tools available. And I can guarantee you that you will not have any trouble taking this course. Now please watch, in this same section, please watch two very important lessons titled major updates worn and major update to. In these two videos, I will address the changes that have occurred since the time I originally we could at this video and the present time of the eTwinning 20, those two videos, I'll show you the new tools that you can use and how you can use them. So in the following section, I'm gonna introduce you to a very special web hosting company called a site ground. If you already have web hosting and you're happy with your hosts or you don't need hosting, please skip this section. Don't waste any time. Move on to the fall in section. However, if you're not happy to be your web host and you want to move on to a new web host. I can go into your sad gone. It's an awesome opposed to go with. And they're also offering all my students if free, one month trial host. And so you can sign up with them for free. You don't have to pay anything, you don't even have to provide. Your critical details are sent up and you'll get one month free of charge. If you're interested. You can check out the section where it took about web hosting. But with that being said, the next lecture will now be the first major section for the course where I'll talk about the basics of HTML. So you'll learn how I HTML works behind the scenes to create a structure of your webpage. And then the next section will now be the basics of CSS, where you learn how you can make design changes to your site and your content. And then the third major sexual will now be where we combine what we've learned in the HTML section and this section to begin to make a real design changes on real content are only we'll bump sensor is going to be very, very practical and I'm sure you're going to enjoy at that particular section. And then the final section, there's going to be a very special lesson where I show you how you can apply CSS and HTML changes are with the new Gutenberg page builder, the Gutenberg Pitbull days, Of course, the default native page builder. And that comes with what, Chris, I'll show you how you can walk with Gutenberg in that particular lesson. So welcome once again, if you have any questions, do not hesitate to reach out to me. This is a very, very practical course, so there's going to be quizzes for you to attempt to do. If you have any questions or any challenges, please reach out to me. I'd be more than happy to answer all your questions. If you have a Facebook account, please do join the Facebook group, which I will talk about in the next video. So welcome. Once again, I am Alex and thank you for enrolling. And now let's get started with the course. 3. Quick Win: it is time for a quick exercise. And the objective here is to make sure that we don't have any cash in issues at all and to ensure that our child themes style that CSS is working properly. So what we're gonna do is we're gonna change the background color off our website from white to red. So let's do this. I I'm on Firefox, so I'm going to inspect with Fire Bog right here. And what I'm looking for is the element that covers everything. And you can see right now that we do have a div ID equals page. And when I hover over the Dave, you can say in the background the entire website being covered. So I'm gonna click on the day and to the light you can see over here we have a class dot s I t. E. And we have the background culo off white. So what I'm gonna do right here is I'm just gonna go ahead and copy the rule declaration. Okay, I'm going to copy that, and then I'm going to jump over to my back and I'm gonna go to appearance code to let it all and out in here I am going to create some space and I am going to go ahead and paste that. What I'm gonna do is to change the bag on color here from White. I am going to go with Rad. I'm going to update the file. Now let's go ahead and view the website. That's refresh once again. And now you can see that our bag and color has stoned from white to red. So if you've been able to do this and you're seeing the red background color, congratulations. You are all set to begin setters code in. If you're not saying the red background color, watch the video that I made about cash in Tried to uninstall any cash in plug ins. If you have any disable Europe cash, clear cash and you should be good to go. If you've tried all of that and nothing still walks, please contact me. Let's try to get to the bottom of the issue. But otherwise, if you're seeing a red background color, you're good to go and I will see you in the next class. But actually before before you go, let's go back and we move the background color. Okay? actually let's do that. Let's just go back and we move that bag on color because we don't need it. That was just a test to make sure that our childhood was working. Let's refresh once again. All right. Cool. So do that. And I will see you in the next class. 4. What are HTML and CSS?: okay, Before we can progress in this course, it is important to have at least a basic understanding off. What HTML and CSS are. So starting off with HTML eight Tim Ill stands for hypertext Mac op language. But what exactly does this mean? Well, HT Mill is fondly refer to as the language off the Internet, and this is because every single thin that is on the Internet, whether it's a website, a Web page, a Web application, anything HTML is involved one way or the other. Now it makes up the core structure off every single Web page. Again, it doesn't matter whether you're Google, Facebook on YouTube or on any other website. HTML is always involved in making up the core structure off every single page. Now with CSS. On the other hand, CSS tends for the cascading style shit and just refer to HTML as the language off the Internet. CSS is the designer off the Internet. It's basically responsible for the aesthetics off every single page. So whether it's a background Koloa, a background image or the phone family or the phone style used anything used to make a webpage more attractive, CSS is involved now multiple style shits can be used on a single website, so it's no like for every single upset out there, there is one style she'd been used. No, you can have several style ships making up the design court for a website. Now, in such a situation, where you have multiple style shits have, Aleke is going to come into play. The last style sheet called takes precedence. What I mean by this is this. Okay, let's say, for example, we had three different style sheets used on a particle of upside, and on each one of these three style shits, a different background color for the website is created. So let's say, for example, on style sheet one. The bagman color for the website is chosen to be white for started to its chosen to be blue and then on style shift three. It's chosen to be read in such a situation. The last style sheet called, which is started three. It is its own bad gun called will be used in such a situation. Don't worry. As we progress in the course, you will begin to see this theory in action, and you will understand it. A bit better now 80 Mil and CSS come together to produce a Web page. That's basically what they do, And it's also important to understand that you can actually do some design with HTML without CSS. However, it's a very ineffective and a time consuming process, and you will see why it's always best to just use CSS rather than HTML to do your designing . Now, a fun fact here. I came up with an analogy about three years ago to explain the differences between HTML and CSS and how they walked together to put use over page. This is my analogy. I did not learn this from anyone. No one told me I invented this. So let's say, for example, a website was the human body. Okay, just imagine your human body right now is a website. HTML is going to represent the skeleton offer your human body. That's basically what XML is now. When you apply, see assess. Wait for it, Wait for it, wait for it. The area go. That's exactly what CSS will do to the human body. CSS will make the body more attractive. It's going to add muscles, smile, hair, basically anything they can make the body more attractive. That's exactly what CSS is. So this is our HTML and CSS combined together to put use the perfect web page. I hope you enjoyed my little analogy right here, Phil, for its use analogy to explain the concept of it stimulant ceases to other people. Thank you so much for watching. And of course, I will see you in the next class. 5. Major Update 1 Inspect Element Tool: Alright, so welcome to the first of two major updates of the course. And the course was actually made back in the year 2017. And as I'm speaking to you right now, it's actually December 162020, so more than three years. And as you can imagine, there have been some major changes to what press to web browsers in general. So in this first update, I'm going to be talking to, talking to you about a very important tool known as the Inspect Element tool. Now if you go to any website, it doesn't matter any website. And if you use any browser, it also doesn't matter if it's Firefox or Chrome or brave or Safari. It doesn't matter. Right now, I'm onto my monkey and I am using the Firefox browser. Now, if I right click anywhere on this page, whether it's on an image whitespace the menu. If I right-click anywhere, you will see the Inspect Element tool down here, Navy click in there. What's going to happen is that a new window will pop up that will show you the underlying code that makes up that particular web page. So on the left, right here, you will see the structural. And what's interesting right now is that when you begin to hover down or up along the code on the left, you will see the areas on your web page That's actually affected by the code. Right now, I'm hovering right here, and you can see right now that my logo is highlighted. But then if I begin to maybe scroll down here or down here, you can see right now that the rest of the pages now been highlighted. I can expand this one and then keep on expanding, expanding, different sections are now being highlighted and so on. Don't worry, you will get used to this as we progress. But on the left, you will see the code, the underlined structure on code. And then on the right, right here, when you click on any element, you will begin to see things don't as properties like, you know, the content, display clear all these properties. And then you also see the values for those properties. This is basically what the Inspect Element tool does for you. It provides you with the underlain coordinates structural, that makes up the website of the web page, and then the values of the properties on that website. Again, don't worry, I know this might seem complicated, but we will walk a little bit this and you will get used to it eventually. Now, the major update here is that in the course originally I used a particular extension for the Muslim efforts buzz and known as fire bug. The visa. Why I used this extension was because it provided a slightly better interface. Then what you would get by default when you click on the Inspect Element tool. Unfortunately, fire bug no longer exists. It's been decommissioned basically. And as such, you can no longer use file bug. But with that being said, don't worry because the inspect element to right now works in the exact same way as fire bug. There's just a little slight difference in the interface, but it's nothing to worry about. You will see the similarities between fire bug and the Inspect Element tool. So like I said in this course, I used fire bug, but don't worry, you can simply use the Inspect Element tool provided by default by the Firefox browser. You can use any browser. It doesn't have to be Firefox. This is, for example, cool. It works in the exact same way. You right-click on an element. You will sit, Inspect, link wider, you click in there. And then you will see the exact same kind of window pop up again with the structure on the left and then the values and properties on the right. It works the exact same way. Also, if you prefer, the Brave browser is the exact same way. Right-click, you will see inspect it, click on Inspect. The exact same kind of window pops up. So it doesn't matter what browser you use. It doesn't matter what web page or web site you're on. It. Printer Mod works the exact same way, Are all through. So that's the very, very first major updates to this course. If you have any questions about is of course do. Let me know. Thank you for watching and I'll see you next video where we'll talk about update number two to the course. 6. Major Update 2 Gutenberg: Oh, it is. So welcome to major update number two. And this is going to involve the edit tool that you have with WordPress. Now, originally the Course was made with the classic editor for what Chris, but what can we, what powers today? Most likely you will have heard of the new page builder known as Gutenberg. Now Gutenberg was released, I think originally sometime early 2019. And right now it is the default editor. You will have pre-installed with what quest. So as an example, if I was to open up a post or I wanted to create a post or create a page with WordPress with Gutenberg. This is exactly the structure that you would see. You would see something like this, okay? You would have up here, you would have the ability to add a block, whether it's a paragraph or a heading element and things like that. This is the Gutenberg page builder. How ever? In this course, I primarily used the old classic editor for WordPress. And this is exactly what you have. It's completely different and out highly recommend that you go with the classic editor first. The reason being that it's a lot easier to work with the classic edit tool than the Gutenberg page buildup. So the thing is, in order to switch from the Gutenberg page builder to the classic editor, you're going to need to install this plugin called the classic editorial by what Press contributors is actually very, very popular already over 5 million active installations. So please go ahead install this plugin. And then if you want to walk with the set tends, you can come down here to settings and then write an OK. You go in there. Likely you will now see this option to choose a default editorial. And in this case right now I'll recommend you go with the classic edit top. And then you can also allow users to switch editor, so keep that one on. Yes, you come down here, you simply save the changes. And now if you were to go ahead to add a new post or edit an existing post, you will have the classic editor or walking for you. So I would highly recommend that you install the classic added to and then walk with the classic editor like I did in this course. And then you can go over to the end of the course. Once you've reached the end of the course, I will make a very special video showing you how you can apply your CSS code with the Gutenberg page buildup if you're interested in there, so you can check the end of the course for that particular lesson. One more thing to mention is regarding the theme that I used in this course. I used the classic 2017 theme. And you can also choose to use the exact same thing. It doesn't matter, or if you prefer, you can use our 2018 you can use to maintain maintain. You can use 20-20 or you can even use the 20-20, 150mm. It doesn't matter the code while walking with will be independent of the theme that you choose to walk with. However, I would recommend that you don't walk with third party themes like ocean, WP, or Astra or dv or any of the other themes out there. Stick with the classic themes made by what vest themselves. So again, 201720182019202221. And the reason why I say this is because these themes tend to be the safe themes to walk with, to experiment with When you walk with a third party thing like ocean WP. These kinds of themes tend to have their own CSS code, which might actually offer write the code that you're trained to walk with. So I would recommend you stick with the classic themes made by workers themselves and preferably go with a 27 thin theme that I used in this course. But again, you can use 2018201920202021. It doesn't matter if you have any questions about what a discourse in this video, please do reach out to me. Thank you for watching. I'll see you in the next class. 7. The Basic Structure of an HTML Page: I want you to go to your Broza and open up this site, which is example dot com. All right, So open up, Firefox chrome safari and go to example Duck home. Now what I want you to do is to light click anyway on the Web page, and then you should say something like page source or source or something like that. Click in there on K for Firefox right now, which is what I'm on right now. I'm clicking on the view page source and you should see something like this. OK, so this is basically the code that makes up the Web page that we're just looking at. Let's go ahead and minimize this window right here and perfect. Ah, OK, so now let's take a look at the actual Web page itself. What do you see? Open your eyes and picking everything. First of all, we have what appears to be some sort of a glacier background. That's kind of like the general background you can see. But then we also have what appears to be a container that contains some text, and the container has a white background but also noticed that the corners left right top of on the bottoms as well. They all have some sort of a curve, right. That's very, very important. So the corners off the container are curved. They're sort of rounded rather. Okay, now, for the actual text itself, we have example domain, which is big, and it's bold ID. And then we have the Regula text, which is the This domain is established blah, blah, blah, blah, blah. But then we also have what appears to be a hyperlink that takes us to an external website, which is the more information. So now let's take a look at the actual code itself. Notice of the very top we have HTML OK, that's basically telling you that. Okay, this is an HTML page known as The Money is, though, that we have title example domain. Now, if you look at the very top off the actual tab itself, you will see example domain right there. So this is exactly what this title does. Physical gives a title to the actual tab itself. That's what that's doing. We now have the actual style shit itself. The CSS declarations you can. So we have body being selected, and then we have what appears to be the attributes and their values. We have a background column, and it has a value off hex, a dismal f o fof two. This color is something pretending to gray. The reason why you're not seeing gray or red or blue is because well, even though we can use such values typically for CSS, we use something called the Hex a decimal values for Coehlo. We'll talk about Hex a dismal values a bit later. But consider also have all the attributes, like the margin padding all set to zero. But we also have the fund family, which represents the kinds of phones used for the text and consider we have open Sands. We have Helvetica in the way we have Athletica, Ariel and son Saif. Now you might be wondering, Why do we have five different fund families been declared? Well, the very 1st 1 is the default option, which is the open sense. The rest of the fallback options, just in case the browser with which the Web page has been viewed on doesn't have open sans . The next funded to try to use will be dear Helvetica on the way and then Helvetica and then Ariel and so on and so forth. But take a look at this. We have the Dev Element, which is actually the container continent. This text, you can see we have a with set to 600 pixel State Representative total with this container and then take a look at this. We have a bad ground. Culo off takes a dismal or hash tag with a hashtag f f f just for a quick tip. F f f represents white while hex a dismal or hashtag 00 Brazil represents black. Okay, as we go along, will use these values they can see. That's where we have the white background for the container. Let's go all the way down here. And this is actually where we now have the HTML making up the world page. You can see we have a dead, and then we have our h one, which is example domain. It is exactly what you're seeing here. This is why the example Domain is bigger and it's also bold because it is represented with an H one tag. Very soon. It'll we have in what press where you can use an H one h two h two b for your text. That's what's happening here. But take a look. We also have the P tag group represents paragraph. That's what is used to represent these domain is established to be used for illustrative examples, documents and so on and so forth. And then we also have the A tag which is used to represent the external link, which is more information, and you can actually see the link that the person will be taken to when they click on more information. The link is www dot ie enabled ofour slash domains for slash example. So this is basically both of the HTML and the CSS code that makes up this entire webpage that you're looking at as we progress in the course, we will begin to take a look at more examples like this, but I want you to try something for the fun of it. Okay, let's have some fun. What I want to do right now is to right click again. And then this time around, I want to inspect my element with fire bog. No, I'd So if you're using safari or comb or you don't have fire book, you can inspect element. Now, this is my firebug lite here. So what I want to do, very simply is I am going to hover my mouse all over and I'm gonna click on the very first div that I see. Notice how I hover over that they have. Look at the web page itself. We have yellow and in purple. All right, now I'm gonna click on the day of Just Wants Now notice to the white. Over here we have today, which is the element. And then we have the CSS declarations. We have to bag on Coehlo. We have the bottle radius, We have the margin pattern and then we have the with. Check this out. I am going to change the bag and call right here too. I would take a look at that. Now we have a red background cola for the container and for the with. Check this out. I'm going to say 2000 pixels and take a look at that. It extends all the way to the ends off the window. So I want you to have some fun. Try playing with some of those values. Okay? If you are on safari as an example, I'm just dragged over here. It might be a little bit different. You might have to click twice. So as an example, right here. Right. Click on Dev. You can see we have the matched CSS rules right here. So to change our white as an example you may have you may have to double click twice, and then you cannot maybe say black, for example. And of course, you can see anything that's make this blue instead. Okay, so this is just to give you an idea of how we actually our preview cord set us called using the inspector the inspector element. That's basically how we do so in the world off web development. So don't worry. We're gonna play around a lot more in the future. I just wanted to give you an idea of how HTML and CSS worked together to produce pages and some few little tricks you can play around with using the inspect element. So that's it? Oh, I should mention I should mention very important. The fact that you're making this changes right now doesn't mean anything. Okay? It's not saved. So if you refresh the page, it will revert back to the original. Our code and designs. Don't worry about it. You can feel free to play on with the code. So that's, I think, is much fortune. I will see you in the next class. 8. Exercise 1: Okay, so we're about to begin applying some HTML code to our web pages. And what I want you to do is to go ahead and download the gene dot txt file, which is attached to the spectacle of video. You will find it to me in the resources. Basically, the file just contains the exact text to looking at right now, this is a page I have cold of the gene. And then this is some text that I actually got online. This is actually a real book called Jane, and this is just an except off what the book actually contains. So go ahead and download the text file and then paste the text into your what? Press page. I will recommend it before use use paste the actual text itself. Switch from the visual editor to the text editor. Now it switched to take Saito and then paste the text. I think the texutil does better when actually pasting text for my next and I'll file. So go ahead. Do that. You go also find another file. It's actually an image called Jean Dash Book the P and G. I want you to go ahead and attach that image in between the 1st 2 paragraphs. Sure it should look something like this. I'm just go ahead and said that. So this is exactly what you should have on your Web page limiters. Go ahead and update this and let me view that page. All right, So I am using the WordPress 2016 theme. And this is how your web page should look like. This is how it should look like So if you're using a different theme, it really doesn't matter. Just as long as you have the exact text and you have the book as well. We got in the text. If you wanted to use different texts as opposed to the gene Texas I have right here, you can go ahead and do so. I would recommend, though, that you stick with the Texan providing you at least this way. But when we begin to apply the HTML accord and the CSS code, we can at least make sure that everything matches up to exactly what you're doing as well. So that's a go ahead and do that, and I will see you in the next class 9. Block vs Inline Elements: I hope you're ready for some HTML coding, because in this video we are going to start to do some HTML. So let's get started. And the very first thing I want to do right here is to highlight history of the X gin. Okay, and let's make that a head into. But then notice that the rest of the Texas also a head into and we don't want that. So let me undo this switch to my text editor. All add one little space. We've got the visual and let's repeat the process again. Bucket. So now we've made history of the X gene a head into There is nothing new here. This is something you've done many times before in the WordPress, right? However, if I switch to the text editor all notice that history off the extra now has an opening tag off H two and then the closing tag off H two as well. It's closing because you have the Ford Slash right there that indicates that is a closing tag. This is the basic HTML code in you have and opening tag and a closing tag. And in between those two tags, you have some piece of content but its text on image. So basically, in HTML, you're always going to have an opening tag. You will have some content and then at the end you're going to have the closing tag as well . And the content that you have will be do bickley affected by the canes off tags used to contain the content. So, as an example, if I had the word hello and I had the H three open tag and the clothes and h three tag the word hello will automatically become a head in three coming back here to the page if I decided to go to the about the author right? And open up an H three tag right here, h three and then at the end, I am going to add closing h three tag right there and I'll switch to the visual mode, Scroll down Notice that the about the author is now a head and three, as you can see. So once again, that is basic eight. Timo Cordon right there. Now it is important to realize that h one h two h three I won't roof it to ask block elements in html they're called block elements because they appear on your screen as if they have a line break before and after them. The classic examples of block elements are your pizza ag, which represents paragraphs you have your H one H two all the way to your 86 route represents your headings. You have your U L and O L, which represent lists. You have pre H hour block, cold and also address elements. All these are what we referred to as block elements in HTML, and you cannot have a block element inside off another block element. That is impossible. So let's say, for example, I came all the way back up here right now, right and switch back to text and I said, OK, we have history of the X gene covered in H two tags. But what if I wanted to make off an H three tag instead? All right, coming here and I say, I want to make you in a church three tag and then at the end of off, I'm going to close it. Okay, now let's switch to the visual mold and now take a look at that. It's broken. It's broken because we just tried to add an H three elements inside off an H two elements and that doesn't walk in html. You're gonna end up breaking everything, slumbers and do that, and we're back to normal. Okay? The next thing I want to do right here is to go ahead and bold the name Siddhartha Mukherjee, who is the author? Let's go ahead, highlight his name and I'll make that bold right there. Okay, the if I switch back to text notice that we now have strong tag, the strong open tag and then the closing strong tag as well. This is the html for basically making your text bold. So if you chose any other text on your page and you added the strong tag and in the closing strong tag, it will make that text automatically bold. That's what it does. However, take a look at this If I decided that I wanted to make more care j italic style. OK, I am gonna go ahead and open up my e m tag right there Which is Voight, Alex Close the e m ight. There it and switched visual. And now notice that Mukherjee is now bold but at the same time, it's in the form off date Alec style. So the bold elements and the italic elements are won't referred to as in line elements in HTML. Their effect. Us in line elements because you can have more than one inland element on the same line in your HTML page, and you can have an England elements inside off another in line element. So switching back to the text mode, we had R E M R M elements inside off the strong element as well. So this is what we fit to. As in line elements in HTML. It is also worth annoying that you can have in line elements inside off a block element. Going back to the previous example of history of the X gene. I could actually decide to make off italic or better still, let's make eggs gin italic instead. So I'm gonna come in here and say, E m. And then at the end, right here, let's close the e m the light. Let's switch back to visual and now notice that exigent is now in the form of italics because we've added the island element off em inside off the H three of its of its two element, And that's why we now have exigent looking like that. It's but it's ready, bold, but it's also italic at the same time. It is also worth knowing that whenever you're using your H one tags H two tags, the text will automatically become bold and strong as well. So that's basically the difference between block level elements and in line elements. Block elements appear on their own on its separate line. You cannot have a block element inside of another block element, but with Ellen elements, you can have them all on the same line. And you can have an Ellen Elements in sight off another England elements. And you could also have an inland elements inside off a block element. So that's basically an introduction to text tags and differences between block elements and in line elements. Join me in the next class. We'll take a look. It's pans and in line styling. Thank you for watching. If you have any questions, feel free to reach out to me, and, as always, I will see you in the next class 10. Spans and Inline Styling: Okay, so let's continue with our HTML. And the next thing I'm gonna do is to highlight the Emperor off all maladies. So let's go ahead, Highlight fat. And I am going to change the text caller from the default Black too. Well, let's go with. Ah, read. Let's go with red. All right, now let's switch to the text, Eddie Tool and take a look at this. We have span style equals color. It calls hashtag f f 0000 the Abreu off all maladies and then the clothes and span element . All we have done here is to add the red color to the emperor off all maladies. But what exactly does all these mean? Let's take it one step at a time. First of all, we have the opening span. Element now is pen Element is an in line element, and it's used to target specific contents, which we want to add some styling, too, in this case, because we're targeting the emperor off all malady. Specifically, this pan style comes into play automatically, So if you wanted to change a specific word or even a specific letter if you wanted to add some form of styling, you would use the span element. That's what we have span, and you can see the closing span element right there. What about style? Kahlo? And then this value style, in this case is what referred to s and attributes in HTML. Now on Attributes is used to define the characteristics often html element, and it's always placed inside the elements. Opening tack now all attributes amenable to pots in name and a value the name we fished to the property. You want to set an example being call or text transform or even online, while the value is what you want, the value off the property to be set to. As in the case off the cola property, the Value bean hashtag ff 0000 now on H similar property can have different values. An example being the Align property. It can have a value off left center or even right. It is also worth annoying that every HTML element can have multiple attributes. So, going back here to our example, we have the attributes of style and then the property color and then the value right here. Now I could decide to add yet another property. Let's say, for example, we wanted to make the emperor off all maladies wanted to make it in capital letters, block letters. Now, of course, you could always just come back to visual and then type in block lit as if you want to. But we have an HTML property for that, and the property is text transformed. So here's I'm going to do just after the semi colon, representing the end of the value, I am good to type in text dash transform and then this and then the colon and then the value upper case semicolon at the end. So take a look at that. We f added a new property which is text transform. We have the colon and then we have the value off the property which is upper case and then the closing semi. Colon. Now the vice switch back to visual. Take a look at that. The emperor off all maladies is now in capital letters because we've added the property off text transform and we've given it a value off upper case. So congratulations. You've just lend how to add in line styling to your press content 11. Exercise 2: Did you honestly think you're going to take this course without any quizzes? Well, so to disappoint you. It's time for your very first queens and make sure you do this quays. All right. What I don't want you to do in the quest is to simply recreate exactly what it is that 1/2 over here, you can see that the all would in the Emperor off all maladies is now in Blue Kahlo. And it's also in small letters. So I want you to try and figure out how you can get just the world. All too appears in small letters and also have the blue color. Now, police try as much as possible to do this from the text. Eddie Tool Don't select all and then choose the colorant right here from the tools panel. Use HTML style, and instead, And if I want to know what the hex a dismal value for the blue collar here is, it's basically the reverse off the red color. So the blue polo is going to be hash tag 0000 and then f f OK, that will be the value for the blue collar. So go ahead and try to recreate exactly what it is that you're saying now. In the next few seconds, I am going to reveal what I did to solve this quiz, to get this to look this way. So I would advise you to pause the video right now, try to solve the Queens, and then you can resume the video later once you've solved the Cui's. Okay, all right. So I'm going to reveal the answer right now and have resumed. You've done your best to solve the queen's. Hopefully you able to do so. But here is the solution to the Cui's, and it's basically just recreating the span element at in the style. And then the text transform properties toe all and then simply closing the span element. That's basically all I did. It's right here, so that's basically the solution to the Cui's and let's get on to the very next video 12. Colors: okay, lets briefly talk about colors because that is a very important part off any website now. So far, so good. We've added some colors to some of our texts with added blue collar and red color. But rather than using the conventional blue and red values, we've been using the hex a dismal values instead. Now the reason why hex there's more values are a lot more popular with X Terminal than the conventional names eyes, because with the hex a dismal values, it's easier for you to choose a particular shade off Coehlo. Take, for example, with the red. You have many thousands, even pains of thousands of different shades of red. You probably have dark red light red or white wine where something like that, so it's kind of hard for you. Think of the conventional name off a particular shade off color, you see. But if you have the Hexi decimal value, it's a lot quicker. It's a lot easier for you to simply use that color. So let me bring in Firefox in here, and there is a page which I will attach to the resources you can read more, but over here you have all the colors and believe it or not, they're actually names for all these hex. A dismal values like a doxy until Coie dodge a blue sea green and so on and so forth. So rather than knowing all these conventional names, it's It's a lot easier for Just look at the shade that you're looking for and then simply use the heck sadism all fallow. Now here's the thing. How do you actually get the hex a dismal value off a color that you see online? Take, for example, if I'm on this page right? And I like this particular shade off orange that are looking out on the Firefox. How do I get this value? Well, all buses, I believe all Brussels have something called eight Coehlo Pekka. I'm on Firefox that I do have Thekla pick our extension installed. This is the symbol right here. So if you don't have the Collopy cake and go ahead and install it on Firefox, I believe Safari actually has one, but it's not free. This is what I was able to find for Safari on Mac. It's called the Color Picker by Patrick Thomas. It's to 99 but there might be a free extension, afraid to use on Apple that allows you to choose colors, I don't know. But for Firefox we have the color picker. It's free. So all I have to do right now is to click on the color picker and then those drug my mouse over to the color I want to pick, and now you can see to the left of the top left corner of my screen. You can see the hex, a dismal value change as I drag the mouse over the fox, you can see. And then once I have chosen the particular ah shit of cool, I want all I need to distrust the press escape, and it copies it to the cache memory. That's all I need to do. Notice, though, that just above the hex Abysmal Valley, there is an RGB value off to 15 80 38. That is another way or specifying developer Colon in html, but we're not gonna talk about that. We'll focus on the hex of the hex, a dismal values instead. So that's it. I have gotten the hex of this marvel for this particular shade off orange, a press escape, and I always used to go back to my what press page and then simply use that value like death. So that's basically an introduction to Colors for extreme El and I. Once again, I will attach the link to this particular page. You can read more if you're interested. There are a lot more shades out there. Things like many pages will keep on clicking on next, and you'll keep saying different shades and more shades and so on and so forth. So that's it for colors. Take you so much for watching I will see you in the next class. 13. Font Styling: changing the default font style in off a WordPress theme is one of the more important and popular tasks that people tend to perform on. There would pursue up science. So at some point you might want to change the size off a particular word, maybe change the front weight or even the fund family used throughout your website. So let's take a look at how we can apply some basic front styling to the text that we have on our what press page right here. Let's say, for example, I wanted to change the size off police TSA right here. Let's make bullets are a lot bigger than the west of the text and even make it bigger, then the age to that we have right here. So I'm gonna switch that to text and I'm gonna look for Pulitzer. It's right over here. And of course, I am going to First of all, add my span element. All right, then I am going to say style equals and then in coats and all the property is going to be fund size. This is the property for dictating the size off a particle up, a piece of content and Then I'm going to say that the value right here. Cologne. Let's go with 48 pixels. Right now, pixels is the measurement most mostly used in what place? And the unit is P X. So we have foot it, Biggs. Also, I am going to add my semi colon and then let me just festival close the opening tag and then add the closing span tag right there. All right, so we have Spanish style font size equals 48 pixels. Let's switch this visual. And now you can see Pulitzer is a lot bigger because it is 48 pixels. All right, so let me go ahead now and preview the changes. Okay, let's do that. And you can see police Isil Huge, bigger than the rest of the text. But what if I wanted to make it bold as well? Make it bold like the gene. What can we do? We can make use off another property called the font weight property. So, at the end of footed pixels after the semi colon, I am going to use the new property and say fund Wait, and then the front weight has different values. OK? It can have 304 105 106 107 108 100. You can have other values like light, lighter, normal, heavy it all the pains on the kind off formed family being used different front, different from families have defend I'll wait values. OK, let's go ahead and use 800 in this case. 800 right? This is usually very dark for most fund families, so I'm just close this. Let's preview the changes again, and now you can see Pulitzer is a lot bolder right now because we have used the value off 800. If I bring this down to, let's say 300 instead, let me preview that change again. Let's see. So it's basically back to normal. You can't really go any lighter than this, but then again, it depends on the phone family currently being used. And as a matter of fact, let me inspect my element right here and see the fun family being used so they fund family being used right here is Merryweather. You can see over here it's called Merryweather and in Georgia, and so if at the fall back often families, so let's try changing the form family off Pulitzer, right? I am just close. This first of all, I'll go back in here and I am. Let's use the property off Fun family. It was a fund dash family colon, and let's try something that's very popular and genetic amongst many pillows as Let's go with Tahoma Homa and ah, let's preview the change And there you go. So now you can see Pulitzer is no with the Tahoma phone family, while the rest is in Merryweather. So right now you've learned three different font properties. You've learned about the font size, the front weight and then the font family. There are also other fund properties that affect text directly, such as text, decoration, text transform, which is so previously and as about effect. Let's try the text of decoration. I mean, you see what can we on the line right here? All right, let's say we wanted to on the line about the author right here. Let's underline about the author. Let's go back. Let's look for about the offer. It's right here. So about the author is an H three so I can come in here and simply say, h three and then style equals and then my property here is going to be text dash decoration speculation colon and then the Vela here is going to be underlying All right, my colon and let's go ahead now and ah, preview the changes. And now you can see about the author has been on the line because we applied the property off text circulation and value off on the line. So wanting to know here is whenever you're applying style into your block elements like your H one h two, you do not need the span element span is for in line elements like your text. However, when you're applying style into a block element like H one h dues, you just apply this style attribute directly. No need to use span. Okay. One other thing to mention before I go is regarding other A line elements like you're strong and your e m tags. You cannot apply styling to them because they're the line elements and they already in a way, they are already characterizing the content or the text that they contained. So I can come in here and say strong style equals something, something, something I can do that I can only apply this style attributes to either span elements or block elements like H one excuse and so on and so forth. So that's it for the fund properties. If you have any questions, please feel free to reach out to me. If there is anything that you know clear about, do not hesitate to ask me questions. Okay? So think much fortune. I will see you in the next class. 14. Lists and DIV Element: Let's take a look at how to create lists with HTML now down here, where we have the X gene abilities, we do have what looks like a list off superb powers, telepath et shoot, regeneration, flight, telekinesis and super strength. All right, now, easily. We could just highlight anyone of this items and then simply use the bulleted list button or the numberless button. However, to Kuwait, them in html is very easy. All right, let's switch to the text and it'll now over here. First things first, actually, limb. Just go ahead and make the extra and abilities. Let's make that an H full. All right, let's just make that NH full. All right. Now, to create a list in HTML, you festival have to choose whether or not you want to create an ordered list or and on ordered list. So an on ordered list is the one that has typically, like Barton's in front off the list items and ordered least on the other hand, will have 1234567 You know, stuff like that that's making an ordered list. So let's go ahead and choose the one ordered list. First of all. So I am going to use the tag. You l all right, that stands full and on ordered list and out for each individual list item itself. I am going to use the tag l I ale. I represents a list like, let's go ahead and do the L I full all of them if I and, uh, doing ally for flight like Superman and telekinesis. Let's do the lie there as well. And off course, we have to add the clothes and tags, right? So Well, I and I was gonna go ahead and copy this and then just paste that they could pull faster that weight. And of course, we have to close the UL tags as well. Don't forget that. So what we've done right now is to create an order list and research about visual. Take a look at that. We now have are on order less pretty much what you would do whenever you're highlight any one of the items in here and choose the bulleted list. What if we wanted to create an ordered list instead? Let's go back to text. All will have to do is to switch you l 20 l make that an ordered list. Let's do that. No, El. Switch back to visual and how you can see we have 12345 and so on and so forth. So that's been much have to create and or that or and on order list in Ward Quest. I'm actually gonna go ahead and switch to the own ordered list. You l you l a swell. So later on in the course, when we begin to deal with CSS, I will show you how to use custom images or cost. Um, icons represent your list. Items are not just use the default dots or buttons that comes with our HTML. All right, all right. Now, before I go, let's talk about one more very important element. And in fact, one of the most important elements will be dealing with throughout the entirety of this course. And the element is called the DIV element. Now it Dave is similar to the span element, except for the fact that it Dave is a block element. It's not an in line element. It's a block element, and it's used to group large bits of content together. So when we used a span to take it a very specific word or letter or its sentence. It Dave, on the other hand, can be used to target like a whole paragraph. As an example, you could even take it a whole page using a Dave, and we also use Dave's whenever we want to group set in bits of content or text on the one single container that's been would use a Dev. So let's switch to the text mode back and what I want to do it now is to first of all group the very first paragraph in fact, stunning form history. Off the off the X gene. Let's go ahead and create a new Div. Let's make that Dev and I am going to close the Dev just above the image. All right, so we now have our way First div. With history of the X gene the next day of will stuff from where we have the author's name . So let's add another Dave again right there. So we have a new def and it will end at the end of the paragraph itself, Div. And let's create yet another Dave again, just above the about the author So we have another day of the year and this new deviled end at medical school. Let's close that deaf. So right now we have three dibs so far as you can see, let's add one more day for the X gene abilities. Let's add one more active again. It's It's a new Dev, and we'll just cause it at the very end off the whole page itself. All right, so we now have four different Dave's on our page. So we've grouped up entire What? Press page? Right here to four separate divisions. You could say that. So drumming in the next class well will begin to take a look at how begin style. Ah, Dave's using background colors. Thank you so much for watching. I will see you then. 15. Backgrounds: in the last class. We talked about Daves, and we successfully split all what press page into four different dips. However, I forgot to mention one very important thing. And that is the fact that even though Dave's our block elements, you can actually have a death inside off another death. So think of lives like your what? Press post categories. You can have like a main category. But then, on the live them in category, you can have sub categories. There's pretty much have the same concept. So even though Dave's our block elements, you can have like a parent's Dave and any kind of like a child, Dave and even inside the child that you can have other Dave's as well. So let's do this. Okay, let's switch back to the text Eddie Tool, and I'm gonna go ahead and add a pier and Dave a master deaf, so to say, at very top, let's go ahead now and add that new David the very top. Don't get confused with this other divide here. This one represents the very first days that we have, which which is what? We're close right here, So don't get confused. So we have our main David, the very top, and we have to close it at the very bottom itself. Let's go ahead and close that, Dev and let's update so course. And now we have five Dave's on our page. We have one main Dave, and inside of it we have four other dips. But here is another very important concept, with dips in HTML and CSS. Whenever you apply styling to a div, it's Children. Daves or the content it contains will automatically be affected by that particular style. In and to demonstrate is I am going to introduce a new property called the Background Color . So let's do this. I'm gonna go ahead and add a background color to our parent, Dev. I'm gonna go ahead and say Style equals and then the property is gonna be background color colon, and let's choose a club we can use. I am on one of my favorite websites, ESPN FC, that us? I'm a huge, huge soccer fan or if you're outside the U. S. A big football fan. So which is my color picker right here and ah, let's look for some nice color we can use and ah, let's see, Could we do have an interest in shade off Grey? Here's let just choose. Dad, I'm gonna press escape. Let's go back in here and I'll just go ahead and peace that value right there, Ed, my semicolon at the very end. Very important. Let's update. And now let's view the page and check that out without have, ah, great background for our whole where Page. And because we applied it to the parent death, every other single Dave has now been affected. If, like the whole page has been affected by the death now you might be thinking to yourself. Okay, well, why is it that we still have the white background and you know, the pats? Well, these are the patch looking at is a separate parts off this whole page looking at what we're dealing with over here and this particular window right here on Lee effects What we have inside off this particular our container or you have here to the right is your is your sidebar. Where you have over here, you have my blogging. What? Facebook. That's your header. And at the bottom right here is your footer. We'll talk about how to affect this other areas little on in the course. But for now we're dealing with the page content. So we've added a Bagram culo off greyish black, green blue. Whatever. Hey, want to describe this to our page? Okay, but now let's talk about another very important concept with Dave's and CSS. Listen very, very carefully. If you decided to add a bag on Culliver as well to any off the Children Dave's that bag on call you add will no take precedence over the color, which was here for the parent. Dave. Here's what I'm talking about. Let's go back to edit Page. If I came in here and said, OK, you know what? For the parent, we have this background color. But what if I wanted to give the very first Dave the first child of what it wanted to give it a different background color? Go ahead and paste this and over the bag on Coehlo, I was gonna go ahead and use something very genetic right here. Let's say, uh, Green as an example. All right, now, if I updated video page and I'll take a look at that because we have chosen to give the child Dave, its own background color. That call or the green color is now what takes precedence, even though even though the forced Dave has to defend back on course it it has its back on color from its parents, which it inherited. But now we've also chosen to give it its own background color as well. So that kind of situation, where an element has two different values for the same property, the property that's closest to its it's its own valid analytic presidents. So so the very first day of here has to Bergen colors one from the parent, but one that we've given it because we chose to give it its own background. Kahlo. That color is the one that's going to take over, All right, so going back again, if I decided to give the very last day of right here, it's on bargain color as well. So I'm just pissed at and I said, OK for you, for you. I'm gonna give you a back on culo off blue. That's update. Let's view the page, and I'll take a look at that. That's precisely what happens with CSS. Whenever an element has more than one value for the same property, the property in this case that I've been back on Coehlo. It will simply use the value that it's closest to it in this case, the value off the background color for the child element itself. So this is a very, very important concept to take note often every looking with CSS and HTML in general, if you have any questions, if there's one thing you know clearly about, please reach out to me. Because this is a very, very, very important concept which we're gonna be dealing with throughout throughout the entirety off this course. So I hope you've been able to now identify how Bhagwan calls can be used and the relationship between a parent, Dave and it's Children. Dave, when it comes to styling in HTML. So thank you so much fortune Germany. The next class rail will continue our journey to Lenin XML, thank you for watching 16. Margins Vs Paddings: Okay, let's move on to the next big topic, which is going to be margins and patterns, which are two very important properties Village into its email and CSS. No, Basically, margins and patterns are used for one thing only, and that is to create space. That's basically all they used to fall. However, they create different kinds off spacing with margins. Margins are used to create space between elements. So if you wanted to create space between one Dave and another day of you would use a margin . If you wanted to create space between and H to tag and NH three tag below it, you could use a margin. Patterns, on the other hand, are used to create space between actual content itself and its container. Okay, to better illustrate these concepts, let's make some changes to our page right here. Let's go ahead and edit the page, and what do we have here? What I want to do is to add a new background. Kahlo, too, Our third Dave right here. All right, so let's do that. Let's go ahead and add a style here, and let's say this equals Let's go with a background color and What value do we give this? Let's go with Let's go with red. All right, Red and ah, let us update this. Let's go back. Let's view the page and ah, OK, cool. Let's also add another background color for the fourth day of as well. Let's do that. So where we have about the author, let's add another stale here as well. Let's give that a background color. Ah, of yellow. Let's go with yellow this time. Okay? All right. That's a big once again. It's view the page. So now we have This is a very funny looking painted all the colors, but basically we now have are four days now. Have a separate back on course. We have green, we have ready, we have yellow and we have blue. However instantly you might notice something. There is no space in between the third day of the red background and the fourth death you can see the our borders are matched up against who write each other. As you can see, however, there is some space in between the fifth date with the blue background and the fourth David yellow bag, and you can see the space right here, which also also reflecting the background color off the parent death. Now what's happening here is a little bit complicated at this point of this course because we're talking about some CSS. Corden happened right now, and I spent several hours trying to figure out how best I could explain this concept now. But I eventually decided that the best thing is just to ignore what's happened for now, and you can focus on it later. Okay, so all I want you to pay attention to is the third Dave and the fourth death. Those are the two days we're going to be walking with to explain the differences between margins and patents. Okay. All right. So we have our thought David Yvette background and we have the fourth with the yellow background. If we wanted to create some space between these two days, we're going to use margin now. Here's the thing with margin margin in itself, as a property has four different types, we have the margin top margin, left margin, light in margin bottom. So, basically, you can art space into any of the four. You could say any of the four sides off an element you can add margin either from the top from the bottom to the left or the right. So in this case right now, if we wanted to separate the red a day with yellow Dave, we could either decide to add Imagine to the bottom off the lead, death or at imagine to the top off the Yellow Dev. Either way, some space will be created between the two. So let's do this. Let's go to edit page and let's look for the red Dave. I'm actually gonna christen space right here. Like so we have begun. Calo is lead. I am going to introduce the new property now called Margin and they're gonna say Bottom margin bottom and let's go with 20 pixels. Okay, let's go ahead updates That's view the page. And now you can see we now have our space between the red background and the yellow background. Now, if I right click and do my inspect element of fire bog, let me take this up. Wait here. Ah, ok, let me explain is a bit for the Oppa's. Well, now you can see that we have the main divide here with the Kahlo 8 to 8 F at five and we have our forming Dave's with a different background colors. Let's take a look at the third day for the Bagach alot of Red. You can see next it we have much important because 20 pixels and to the right over here you can see the two properties that we have declared so far for this particular death. We've declared the background culo, and we've declared the margin bottom poverty as well. So over here I could click on 20 pixels and begin to increase, and you can see the space begins to go bigger and bigger and bigger and so on and so forth . So that's basically the margin. Bottom right? What if I decided to now add a imagine top to the yellow background? Let's do that. Let's go back. We have, ah, yellow background here. Let's go ahead and say OK, well, we are also going to give you a margin, but this time is going to be imagine top and it's going to be 20 pixels as well. That's updates. Let's view the page, and there really isn't any difference now, is there? It's pretty much still the same space. So what happens with HTML styling. And in fact, CSS styling is that in a situation where two elements that have margins applied in the opposite direction in this case right now with the Red Dragon has in much and bottom the L A bargain has imagined top. Both margins are basically facing each other right in such an instance. If both of them have an equal amount off margin, only one will be used. The models aren't going to add up, so it's them is not going to say Okay, well, because the Red Dragon has imagined bottom of 20 pixels and the L. A burger and has imagine top off 10 pixels. Therefore, the overall margin between both of them should be 40 pixels, right? Add into 20 pixels person pixels that doesn't work with its Tamil or CSS. In such an instance, only one single value will be used because it is the same, however, in a situation where the values are different. So let's say margin bottom here was 10 pixels and imagine supposed 20 pixels 20 pixels would be the one that will be used because it's off a higher value. All the PPI debt we have a background in Imagine bottom for the red background off 20 pixels. But we also have imagine top for Della Bagram off 20 pixels because they're both when the pixels do of all money between both elements, it's just 20 pixels. However, if we chose to add a different margin, say, 10 pixels for the L A background, the Modern but in both elements with now will be 20 pixels because 20 pixels is the bigger off the Tuvalu's between 20 pixels and 10 pixels. Let's try that. Okay, let's go to edit page and all right, so we have are yellow bag on here. Imagine top 10 pixels. We have the much and bottom A with 20 pixels. Let's go with the yellow background. Okay, let's say this one's good now is not going to be 60 pixels. In fact, let's make it our 100 pixels to make it really obvious 100 pixels. That's update. Let's go back. And now you can see the massive difference between the two Dave's because we have added a new imagine top 40 yellow background off 100 pixel. So that's a very, very important thing to remember with margins. So once again margins are used to create space between elements We've talked about margin, top of talk about, Imagine bottom right. But we can also use Imagine lift in margin light. Let's focus exclusively now on the red background. Notice that the red background do it. Dave. Its borders to the left and the light. Ah, bombed up fight against bottles off the actual parent Dave itself. So if we want to create some space between the Red Dave and the parent Dave, we could use margins as well. Let's go back. So it looks okay, So we have a margin bottom from the pixels. I can ignore that for now. We don't need that anymore. So I'm just gonna go ahead and say, Margin left and I'm going to say 20 pixels update. Let's view the page. Now take a look at that. We now have a margin to the left off 20 pixels. Also, I could also give it a margin right as well. I could give it imagine right off 20 pixels as well or even a different value. Psychos. Imagine, right. Let's start off with 20 pixels. First of all, let's updates view the page, and now you can see that we now have a margin to the right of 20 pixels as well. So once again, margins can be used to provides pace and between elements on your Web page. Let's now switch over to patterns, right? No. One is that with the red background, we have the content bombed up right against its borders. You can see the as the age the end. It's there is no space, and it's like it's like it's almost suffocated, basically. So we could use padding now to create space in between the actual content itself and its red background. So let's try this. Let's go back to edit page Red background. I am going to introduce now patterns. So I'm gonna say pad in and I am going to use a short form. I'm just gonna go ahead and say 20 pixels. All right, Notice? I didn't say pad in top padding bottom part and left Patton, right? I didn't use that. I just had party. Nichols. 20 pixels in sort. A situation like this. What I'm basically saying is that add a pattern of 20 pixels toe all the four sides. That is a shot way off, describing your pattern. So when I don't see a petting top 20 pixels, Pettitte left in pixels per dimension pictures, but the bottom to the pixels, just a padded 20 pixels. That's updates. Now that's view the page. Check that out. Now there is space in between the actual content itself and its red background, so that is the difference between pad ings and margins. Margins are used to create space in between elements, but then, when it comes to quit in space between the actual content itself and its background or its borders, you're going to use padding for that. So this has been quite a lot to digest. Take the time to watch this video all over again. If there isn't. If there's something you don't quite understand, feel free to reach out to me. Ask questions if you're not getting it. Thank you so much. Fortunately, we're gonna spend a lot more time talking about patterns, imagines that progress. But that's it for now. This has been quite a long video. Thank you for watching. I will see you is the next class 17. Borders: So in the last video, we talked about margins and patterns. We said margins are used to create space between elements, while patterns are used to create space between the contents of an element and its surrounding bottle or container. Now we didnt explicitly talk about borders. However, one thing you should know is that every element in HTML has a border. Even if it isn't explicitly defined. It is there. Take a look at our red Dave Aiello. Dave are blue, Dave. You consider the four sides. Those four sides all have their borders again, even though it isn't explicitly defined. It is right there. However, borders typically go with imagines and patterns because they all involve creating space, right? So what I want to do it now is to try to explain to you the concept of relationship between these three different properties. And to do that, I am good to make some changes to lead, divide, hit like let's go ahead, edit the page, and the first thing I want to do is to change the background color from red to white. So let's go with the hex. A dismal Falu F F f now with white whites hex a dismal Valerie's F F f or six efs. You know, you can either go with three F score six efs xml bill recognize either value as white simply with black black can either be three zeros or six zeros. So we have f f f. And I don't do right now is to introduce the border property. All right, so I didn't hear At the very end, I am going to say border now, just like with padding or margins, you can say about a top bore the left, but the light but the bottom. Or you can just define the same Harvell of the border for all four sides. So what I'm gonna do it here is to use a short form, pay very close attention. I am going to say three pixels. First of all, this fellow off three pixel represents the thickness, the with off the border. I'm going to say solid, which represents the style off the border. And then finally, I am going to give it a culo off blue. So what I've done right now is to give three different 33 values to all the four sides of the border So it's both a top, the border, the left hand side, the bottom right hand side. But at the bottom, they're all going to be three pixels in with a solid style and it will be blue. All right, let's go ahead and update that. Now let's view the page. And now you can see we have, ah, blue border surrounding our content. Let's make this a little bit more, I explicit. Let's go back and make the with Let's make it 10 pixels all right from three pixels. Let's go with 10 pixels. Make it really, really obvious. View the page. So now we have 10 pixels. So one way how you can explain the relationship between the patterns, the borders and the margins is that the padding is used to create space between the content and its border. The border is used to create space between the content and its margins. The margin is used to create space between the element and auto elements, so it's basically a form off hierarchy. First of all have padding. Then you have the borders and then you have the margins. That's basically the relationship between these three very important properties. Now Let's go back and try to change the style from solid. Let's go with dashed. All right, dashed updates. View the page. And now you can see this is the dashed style off your borders. We'll talk about bothers a lot more, of course, when we delve into CSS. But right now I just wanted to give you a shot explanation off bodies and its relationship with patterns and margins. So that's it. Thank you so much. Fortunate video, and as always, I will see you in the next class. 18. Hyperlinks and Image Tags: before we round up this section on HTML, we have to talk about high pollings and image tags. Now we know what hyperlinks are. They're basically links to external sites. So what I want to do it, you know, is to show you how to create a high pulling for your text. So let's go ahead and select. Written a biography off the gin right here. Let's like that as a happening that will take us to Amazon. Okay, let me. First of all, go ahead and copy this link. Quit here. Let's go back. Let's edit all page. Now let's look for Has written a biography. Ah, let's see. Where is that? All right, it's over here now, to create a hyperlink, we have to use the A tag A is used to represent high pollings in html. So what we're gonna do right now is to open up a tow egg. No, I but I'm going to add the attributes off H ref, which represents this source. The link off the actual happening itself. It's gonna be equal. And then in coats, I'm going to paste Amazon link. And that's a very long link right there. All right, going to go ahead and close that. And of course, I'm going to close the A take itself just after the gin. So that's going to be four slashing than a So what we've done right now is to quit a high pulling for the text, written a biography off the gene. Oh, I didn't add my a a. Okay, cool. So let's update that. Let's view the page. And now you can see we have written a biography off the gin. Let me go ahead now and click in there, and that takes us to Amazon. But what if we wanted to open up the link in a new tab so that it doesn't open upon the same window or we can do is to add a new attributes which is going toe, which is gonna be called target? All right, so after the H ref attributes are, I'm going to add a new one called Target Target is going to be equal to and then is going to be on the school blank. All right, let's do that. Let's update. Let's view the page again. And now check this autumn and click on the link it takes us to an external to a different happy about. So that's how you can use the A tag to create hyperlinks for your text in its email. And before we go, let's talk about image tags as well. So let's go back. Let's edit the page Now over here we do have our image tag used to showcase the image that we have right here. The image of the book. Let's take a look at what we have in here. First of all, we have something called a Class. We're gonna talk about classes and ideas in the CSS section so for now can ignore that. But take a look. We have source, which represents the actual source off the image. So there is a difference right now between image tags and the high pulling tax with the halfling tags. We use hlf to represent the link, but with images we use, the source attributes s I'll see, and it will paste the link for the actual source of the filed image. We have the old attributes which represents alternative text, and then we also have the width and height properties as well. But you can change this to a different value. We can change the head as well to a defend valley if you wanted to. However, if we wanted to create a high pulling from the image we can do so very easily. I can come in here now and put in the A tag at very fund and then simply say a traf equals and in fact, let's go ahead and simply copy everything that we have in here. Let's copy the A a tree. If tag all the way to Blank and the closing tag right there, let's copy that. And it's used that in here as well. Let's use that. Let's pace that. Okay? And now I'm gonna go ahead and make sure I'm closing the hyperlink itself. That's update. Now let's see what happens. Let's go back to our page. Let's refresh. Let me close this Amazon window. Now, when I click on the image you can see right now it takes us to Amazon. So what we don't right now is to create a high peeling for the image. So whenever you're trying to do this, the hyperlink always comes first before the image tag. So you have the hyperlink, you have its source and then you have you have its length of and then you may be you can have the target property as well. And then the image class damage tag. I'm sorry, the image that comes in next. That's been what how it works. Notice, though, that with the image that we don't necessarily have a closing tag because intact in this case is just afford slash at the end right here. As you can see, we don't have something like this. We don't have the four slash i m g. We don't use that for the image tag. It's a very special tag that doesn't require a the typical closing tag. So this is how you would close your image tie. Just add 1/4 slash at the end off the very last attributes. So that's it for creating high pollings and working with the mix tags as well. If you have any questions, as always, feel free to reach out to me, think is much for watching, and of course I will see you as always the next last 19. Caching: before we begin to perform some CSS style in and we make some design changes, it is important that we discourse the concept off cash in. Now Kachin is a very, very important topic because it can affect your ability to perform changes on your website . So what is cash in? Let's say, for example, you wanted to visit a website, Let's say, for example, Ah, what? Presto calm. Okay, What happens here is before you get to see the contents off the homepage of what? Personal? Calm your Web browser, but that it's Firefox or KUHM. We'll ask the Web server for what personal come to provide it with the contents of the homepage off. What Pistol calm. So your browser goes and says, Hey, can you provide me with the contents of the home page? For what? Personal calm the Web server off. What Krystal Campbell say? Oh, here you go. Here is the content here take and then your bustle takes it and then displays that content on your screen. Doing that transaction that content has been requested will also be stored in a temporary location known as the cash. The idea behind this is should in case you again decide to access the homepage of what Pistol calm rather than your Web browser having to go all the way to ask the Web server Oliver again for the same content, it can simply retrieve the content from the cash. So it's a much faster way off retrieving content. And that's why many S. Seo experts and many people will command you cash in your your website, making sure that the contents of your upside lords fast a little quicker on other people's screens. The downside to this is unfortunately, whenever you perform any CSS changes like changing the bag on call or things like that and you refresh your page, you will not see those changes immediately. It could take another hour or two hours before you see those changes come into effect, and that is because your browsers and your Web holes on your observer. They don't recognize CSS changes when they are in a Kachin state, they don't recognise Jesus changes. So here's the thing. Okay, there are basically three ways how you can cash your what person upside warn is from your Web host. Contact your Web hosting company. Tell them the look Can you show me how I can visible cash it, if any of those in a cash in on my website. Show me how I can disable cash in, for example, with side ground. Side gun has two levels of cash and they have the static cash in and they have a dynamic level cash in. If you're hosting its side ground, contact them. Tell them that you want to disable both of them. They can show you how to do so. Second is if you have any plug in installed on your perception like ah w w three cash or total cash. These are plug ins responsible for cashing. You want to make sure that they are deactivated before you begin. One insists changes. And 3rd 3rd is to clear the cash. Inform your web browsers? Yes, even Firefox and safari and chrome and into the next bullet. They all performed our own cash in as well. So make sure all that cash in is disabled before you begin to performances. Has changes. If you don't clear your cache from Plaza, you can try browsing on a private window. OK, but the clinic cash is pretty easy. This is close as an example. All I have to do here is to click on the gear button right here. The three dots Click in there and then you will see you will see more tools, and then you will see clear blouse and data. Click on click, browse and data. And then over here you will see cached images and files. You can also clear browsing history and download history. Now we clear the cash from from Coombe. Now we Firefox is slightly different. All you have to do with Firefox's you click on the three balls over here, click there and then from here, you want to go to options. Click on options, click on Advanced, and then you will see Networking and click on Network. And then you will see cash to Web content. You can click on Clear now to clear your Web are cached content. Believe me when I say that 90% of the time, whenever you perform any CSS changed and you don't see that change, it is because there is some level of cashing going on somewhere. So these are the three ways how you can prevent cash in from a coin on your website. One is to make sure your Web host do not have any cash in. Two is remove any plug ins. Deactivated applicants you have installed that perform Kachin and three. Make sure your browser's cache in has been cleared. A light. So that's it for cash in If you have any questions about his police, contact me. Thank you so much for watching. I will see you at the next last. 20. Child Themes: one more thing we need to do before we delve into CSS Cordon would be to create a child theme now, if already familiar with child themes and you know what they are. By all means, you can skip this video move onto the next one. However, if you don't have a child theme or you're not even familiar with what tell themes are, then you need to watch this video. So first things first, what exactly is a child theme and why do we even need one, right? Why do we need to tell them? Well right now, without a child theme. If you begin to customize your main thing whether you begin change in the design or you begin at in some extra functionality, you will lose all those customization is when you decide to update the theme. Now we all know how updates, how important updates are obvious, basically helped to patch and security floors and with objects you can get new features, so ah, blades are very, very important. However, if you don't use a child team and you begin customizing your main thing, you will lose all those changes when you update your theme. So with a child theme. A child him allows us to customize our main theme for a so many ways as we want and still keep those changes. When we update the team. That's basically what child teams are, and that's what they used for. So to quit a child thing is very, very easy. We're going to do so using a plug in. Let's go to the back and and the let's on the gold is extremely complicated. Process often stolen a plug in. So the name of the plug in is gold child theme. Child seem configured rate all and it is by Lee Lie Lily Lily. Whatever. L I. L A. A Media. That's the That's the developer. So let's install that lily A. Okay, lets excavate the plug in. Once that's activated, what you want to do is to come down to tools, click on child themes. You also child things right there. Look in there, and what you want to do right now is to create a new child thin Over here on number two, you will have to select the theme that you want to quit a child in four. I have several themes available but I'm going to stick with the 2016 theme. So all I'm going to do is to click on analyze. Once you've done that, you can change the theme directory if you want to. But this isn't important at all. Other committee just lived it as it is for number five. Leave that as it is as well. For number six the same thing. No need to change anything. They just leave it with the default values. Come all the way down here to number seven. Now, over here you can click on the show, hide child theme attributes, and he could decide to provide a custom name for the child theme. So I am going to do so here. I'm going to say Alex thin, right? And they also is, of course, my name. I am the inventor of this theme, so I'm gonna give it my full name. And if you want to, you can customize it even for the idea. One upset Laing que on description tags, things like that. And you could even change division as well. So I'm gonna go with version 99.9. So if the number eight as well this is important, too. If you already have a live website and you've customize your widgets, you've created your menus. One thing that can be affected when you switch things from your main theme to your child Theme would be your widgets and you're on your menu, so tow. Avoid anything going too long. You want to check this box here that sales copy menus, we jets and other customizer settings. So check the books right there and then create a new child theme. I. So now it says child theme. Alex theme has been generated successfully. Importance. Preview your child thing before activating. So let's preview to make sure nothing is broken and it's pretty much the same thing. So I'm just gonna go ahead and say safe and activates. So now if I go to my appearance, click on themes you can see now that my active theme is the Alex theme, which is actually a child theme off 2016. So if I wanted to begin to make some CSS changes, what I'll do has to come down to edit all and now in here, Israel begin to add my CSS code. Make sure it is the style that CSS and make sure over here in the box it is the child that you've created. So this is where we're going to start adding our CSS code to okay, One more thing to mention before I go is with the plug in, but the Charlton configured to plug in. You can decide to deactivate it and even on install it. If you want to, it's done. It's job. It's created the child in force. You can decide to go on to deactivate and uninstall it if you want to. All right, so you don't have to have it permanently installed. However, we got in the actual theme you're using if you're not used in the 2016 theme and using a different theme like, say, let's listen, for example, no social Now, which is a premium theme. Some things already have a box where you can add your costume. CSS changes to, so I want to show you. Just activate this theme. Let's go down to appearance theme options. All right, so with this particular thing right here, which is a social now from my theme show, but they do have a place limb go to stand options Now they do have a box right here called custom See, it says where you can add your own costume ceases called to, so you can decide if your own theme that you're using. If it has a similar feature, you can decide not to use a child him if you don't want to, I will still recommend they had to use a child theme. But if your changes that they're going to make any, they're gonna be very simple changes. Maybe he just want to change the bag on Kahlo, and we will be one more thing that you don't really need to quit a child theme. However, if you're changes are going to be extensive, you definitely need a child things. I just want to make sure that you understand that certain things, especially people themes, already have this particular our box where you can add your own custom. CSS. So that's it. Thank you so much for watching Let's get on now with some CSS code in 21. Major Update 3 Additional CSS: So here's another major update to the course, and it involves ad in the CSS code nanofibers video, I talked about how you can come down here to the theme editor and add your CSS code directly. However, many themes now offer another option for adding your CSS code. And that is if you go to your parents and then customize, you click in there. Down here you will see the additional CSS box. So you can click in there. And a right here, you can add whatever CSS code that you want to add. You do have two different options. And in all honesty, I think this might be a little bit easier for you to navigate. You simply coming here and add your CSS code. And just as an example, limbo say this special text class, for example, curly braces, font. Not, not fun, but color equals red. Just as an example, when you begin to add your CSS code in here, you will have now the option to publish that coats you see glucagon publish and your CSS called should begin to take effect. So you now have these other option or this other method of adding CSS code to your theme. If you have any questions about this, of course do let me know. Thank you for watching. I will see you in the next class. 22. The Style.Css file: I wanted to vote quickly, show you how you can access thes style dot CSS file for any WordPress theme, The style that sets us fell is the main style and file. It's the main file that has all the style and for your theme. But keep in mind that many themes have several style shit. So it's not just our style that CSS that could be headed, Garcia says. You can have foot about CSS and so on and so forth. But the style dot sensors fell is typically the main our style and shit that you what person theme would use. So to access the file, come to appearance, go to edit all and you should see the main style should pop up, which is styled with CSS. So you can see right now this is the main style shit that controls all the style in for the 2016 theme. And you can see all these things over here, which looks like a Greek, I'm sure. But don't worry. You will understand what these things are very soon and just as an example, if I switched my theme here from 2016 to, let's say the shop LA theme Click Select He can see again. I have my style that sensors file popping up, so I believe that the vast majority off themes that you try to access from the editor you will see the styled of scissors file pop up first of all. So once again you can see over here the main style and for the theme. And that's it. I just felt it would be a good idea to show you how to access other style that sisters file for your theme from the word prison back in. So that's it. I will see you in the next class. 23. The CSS Code Structure: alien the course. We talked about HTML and CSS, and while I said that HTML is considered to be the language off the Internet, CSS is considered to be the designer off the Internet. However, in the previous section, I spent a lot of time showing you how to design or style your content using pure extreme ill. We never wrote a single line off CSS. So the question right now is if we can style our website and our content with HTML, why do we even need CSS in the first place? Well, here's the problem with styling with HTML. It is terribly ineffective and time consuming. As an example. Over here I do have an H two light. I have an age to history of the X gene. If I wanted to change the font size off the H two and make it, let's say, 100 pixels. I could easily do that right here, and I'll just say H two style equals than fun Size 60 pixels, right? But what if on another page or another post, I had an H two there as well, and I also wanted that extra to be 66 60 pixels In fact, let's imagine I wanted all my age twos throughout my websites to be 60 pixels with HTML. Ouled practically have to go to every single page or post where there's an H two and then right H two style calls. Fun size colon, 60 pixels. I will have to do that over and over again for every single time. Where there's an h two that ace time consuming that is terribly ineffective with CSS, I can just say OK, every H two tag on my website. I wanted to have a phone size. I want them to have fun size off 60 pixels and I could do that. We just three lines of code and I'm done. That is the beauty off CSS CSS allows us to target multiple elements at the same time, or multiple instances off the same element at the same time. We just a few lines of code I could use yes is to say, I want all my least I temps like those we have down here. We have telepathy, tissue regeneration, I could say I want all my list items throughout the website to have patterns off 20 pixels , a color of red, any phone size off 10 pixels. And just like that, CSX will automatically add all that still in tow, every single page or post way. I have a list item that is the power, and that is the beauty of CSS right in the Basic Structure Offices code is fairly easy. First of all, we'll have to specify the element or the tag that we want to style. In this case, we're take it in all hyperlinks on a website, and as such, we are going to use the A tag. Next, we will introduce the opening curly bracket, which signifies the stat off the Seasons code. And then on the very next line, we will have to specify the property, which we would like to set a value. Four. In this case, we want to specify the value for the color off all our hyperlinks, so we'll have color colon and then the value for the color which is going to be lead in this instance, and then we have a semi colons. At the end, we can entries to go to the next lion and set developed for another property in this case, the font size. So I'm going to set a fun size here off 20 pixels, semicolon at the end once again and to close the CSS code, we're going to introduce the closing curly bracket. Once this is saved, every hyperlink on the website will have a color off red and a fun size off 20 pixels. Congratulations. You've just learned how to write the basic structure off a CSS code. 24. HTML and CSS Putting them Together: Now that you understand the importance of CSS and why we use it, it is time to take a look at the technical, the actual technical deliciously between HTML and CSS and how they work together to produce a web page. And I'm over here on my home page right here with the Blawg. You can see I do have my five posts with the title, the featured image, an excerpt and you can see to the right. I do have my side ball with the widgets right now. If I inspected my ailment with Fire Bog, this is what I'm gonna get right over here. Now, I want you to pay attention, okay? You don't have to open up your web inspector, and it's like that. Okay, We will walk with the web, Inspector. Ah, lot later. One. So don't worry. Just focus when I'm doing. Because this is vital. This is very, very important. All right, over here, I have the basic structure off my webpage. At the very top you can see we have html and then just below its statement, we have head and then we also have body, right? So these are likely to major elements inside off the the main HTML tag itself. But we're not interested in head. We are interested, though in the body the body element. Because that is what represents the actual web page itself. Head in this case represents technical functions and stuff. We don't need to bother yourself about that now, if I expanded the body, notice that we have a death which were already familiar with the day of in this case represents the actual Web page itself. All the content you've seen on your webpages inside of this, Dev, we now have script, script, script. Don't bother yourself about scripts. That's JavaScript. We're not interested in that in this course. But we're interested in is the actual death itself with an i d off page and a class off site. Notice, too, that the body itself has a class. If it has several classes, it has home it as blawg locked in admin bar and so on and so forth. Uh, okay. Now, if I expanded the Dev take a look at that. We have another def inside, with a class off site in a The plot thickens. Okay. If I opened up this other dead again. Okay, Now things are starting to get rather interesting. We have what appears to be in a tag. Okay, We have what appears to be a head. A tag representing what? The head off our website and you can see when I hover over the head. Noticed that my blawg and my weapons block has been highlighted. That tells us that that head are they looking at is what represents our logo. And if we had an actual menu, that many will also be included in the head attack. That's basically how what press works. Okay, that's for the head out. And we also have an i. D. Who? We have a class. Next up, we have another div with an i D off. What content? Notice that when I hover over that, Dave, my entire block page is now highlighted, including the side part of the fight. Take a look at that. However, if I school all the way down here, let's see, You can see that the content still covers all that content where you can see that. Let's keep going down. Where does it stop? Okay. It stops just above my blawg for slash proudly part by what press? I wonder what part of our external structure covers that? Well, it's not a puzzle, it's simply the fota. Now you can see when I hover over my foot, I can see right now that my blawg four slash probably part of what Chris is now highlighted . So, basically at the very top, we have the body inside of the body. We have a Dave, which is the actual men Defoe, Calpine, the entire webpage inside of that day. If we have another day of cold site in a and inside of that, if we now have three major elements, we have the header element representing the very top off the Web page. We have a div representing the actual content of our page, including the main content and the sidebar. And then at the bottom, we have the foot element representing the foot a portion off our website. Huh? Okay. Very interesting. What I want to do right now is to expand the Dave don't. Presents are actual content. I'm gonna expend that and I'll take a look at this. We have to all the elements. First we have another Dev representing the actual content area minus the sidebar. And then we have another day and another element called aside, which actually represents the sidebar and take a look at the classes being used. First, we have class called content area, telling us that Hey, this particular Dave represents the continent. Your sin, which is the block post. They featured image the title. But then this although element right here called aside. But the class off sidebar represents all that. Your sin right in the sidebar. Okay, now, if I expanded this Dave again No, I take a look at that. We now have an element called main. Okay, okay. Let's explore even for that now inside of Maine, we know. Have article, article, article, article, article This five articles represent the five block post that your scene when I lied over the very first article, take a look at what's covered html five with featured image, and then except down here is covered. That's what the very first article represents. The second article route represent the second article right here, the second block post and so on and so forth. Now, of course, if I went further to break down this articles, you would now see where we now have some sort off element representing the title. And then we have another element representing the future. Image will have another element represented to accept and so on and so forth. Interesting. Let's close this. Let's close the primary. Let's focus on the aside element of which represents the sidebar. Yvonne expanded this. Take a look at that. We have sections. OK, let's see when I have over the very first section we have What this search, which had been highlighted next, is what the recent posts. Next is the recent comments, archives categories, section I'm sorry, Mata and so on and so forth. So now you're beginning to see how HTML is used for the structural off our Web page. It is it stable that will say, at the very top of one main Dave, a parent, Dave. Instead of that day, everyone, three major dips the first ever represented the head off the Web page, the second devil represent content that 30 of represented foot and then inside of each one of those days will have a father, a breakdown off content that's basically each similar in action. It's simple. That takes the structural off our page now. CSS, on the other hand, is used to target each one of these elements and tags that we're using as an example. Take a look at this for the sections that we have in our sidebar notice that we have class , class, class, class, class been used. We have I D I D I D I D. What exactly are these ideas on? One of these classes will talk about them in the next video. Okay, but But the classes and ideas are used by X 10 mil so that CSS will be able to talk. It absolutely can style them. Using CSS CSS needs a way to identify the elements that we want to style without all these tags or without this ideas and classes, we will not be able to tell says is to target that element. So basically, all this tags and classes and ideas are used by extend mail we created with each terminal, so that would see, assess, weaken, Tuckett them and style them. That's basically what all those ideas and classes are full. So that's basically the relationship between HTML and CSS with HD Male with structural our page we give tags and classes on I DS and then with CSS, we are able to target those ideas, classes and tags, and we can now style them using CSS. So that's the technical history between HTML and CSS says if you have any questions, feel free to reach out to me. Thank you so much for watching any of you interested. You can even spend some time exploring. Even Father tried to break down all these additional budgets and see just how many more elements you can uncover so that it's thank you so much for watching. I will see you in the next class. 25. Classes and IDs: It is time to talk about one of the most important topics throughout this course, and we're talking about CSS classes and I D is very, very important. But before we delve into that, I needed to do to thins Freston's first to go ahead and create a new page, and you can call the page CSS or something else if you want to, and then check the resources link For this video, you will find a file called CSS dot txt. That file contains all the code that you're seeing right now. So go ahead, download the file, copy all the content and then paste it in the text editor off your page. And when you published a page, this is exactly what you should see. Should be seen something that looks exactly like this. So go ahead, do that, and I'm going to assume you've done so. Let's now talk about CSS classes and I DS right off the bed. You will notice that we have lots of different Dave's and some have their ideas. Orders have classes as well. Some even have two classes, like the Dave here with the first article i d. It has two classes of block article and accept. So what are ideas in water classes? A class in CSS is used to target multiple instances of an element at the same time or different elements at the same time as well as an example With CSS, we could say that I want every single age three tag on my website to have a fun size of 20 pixels. I would see us as we can do that. We can also say that every death that has the class off block article we want that they have to have a background color off Red Weaken. Do so using CSS. Let us see how this would work over here with the idea of the day that has the idea off. First article. It has two classes blood article and accept. And then there is another i d. Here with a Dave that has the second article I D. But has a class of look article. It shares a common class of block article with the IBD divide. Cable doesn't have the except class. We have another div over here with the i d third article that has the two classes of log, article and accept. Let us do this. We are going to say that the two Dave's with the class off, except we want them to have a bag on culo off Red Slows. Do this gonna come down here to appearance, go to edit all. Let's open that in a new tab. But now I'm going to say, Got a daughter is used to represent a class and CSS right. So, class dot except opening curly brackets and then the property, which is background color read semicolon and then the closing curly bracket update the file and that loves view This page that was the first a page and then I'll take a look at that the two days that have the class off, except now half a background color off lead. Because we did so in our head. It'll page we said the close of except should have it back when Coehlo off red. Awesome. But in this example, we take it had a specific kind off element, the element being a div. Okay, but with CSS weaken, tug it different elements at the same time so we can target H threes and even a tax at the same time. Let's come back here to the edit page. Notice we have four H threes. We have the H three over here. With that has the class of article title, brute force attack. There is another HD that the clause of article title as well, Dennis poisoning. And then we have two more vegetables that don't have any classes off their own. All right, We also have several A tags. Hyperlinks, as you can see, one here, one here as well. And there's another one over here as well. Let us do this. Okay. I'm gonna go ahead and give the very first a tag that we have over here the same class as article title. Let us do that. So, over here at the end, off the closing coat for the link itself. I'm going to say class equals coats. And then it's going to be article title. Yeah, Cape. Let's go ahead now and dates. Let's go to Ed. It'll and then going to say are too cool. Don't forget a daughter article title color. It's gonna be yellow. All right, let's go ahead. Update the file. Let's now go back to a page, refresh the page, and now check that out there first to age threes with the class of article title and the first attack with the class off article title and now in yellow, yellow color, All because they share the same class. And we gave that class a property off Colaba develop off yellow. Awesome! Awesome! Awesome. However, there is a slightly different way off writing or with Justin over here. And this is something that you might notice as you progress in your knowledge of success. If I decided to come over here and say, you know what, I'm gonna type in an H three in phones off the actual dot itself and then the class. Okay, let's do this. Update a file. Now go back in here with first a page and now notice that only the age threes and al colored in yellow. And the reason is because what this means over here is that we are now targeting Onley age threes that have the class off article title. We're not targeting any other element out there that has the article title class. You take it in specifically on Lee H threes that have the class of article title. Don't worry. These are some of the things that you will learn. As time goes on, it will become second nature to you. Numbers. Go ahead now and remove that H three. Okay. And update the file once again. All right, let's just come back and make sure, Okay, Cool. Awesome. So we're back to normal again. And you can see right now that we've targeted two different elements. If they get it the h three tag. But we've also targeted the A tag as well. But what if, in an instance, way the A tag had a different class, no debt. As a WordPress user, you are going to be the one that has to figure out how to target these elements. So the theme that you're using might have a different class associated with the A tag and a different class associated with the with the H three tag. But you want them to share the common properties. So let us assume that the attack over here had the class off our article link instead. So two different classes now, but we want them to have the same property. How would you like this in CSS? Let us updates the page once again. So we have article title, and now, article link. What you're gonna do here is to simply come over here and say Coma, thought again to represent a new class and now article dash link. This is how you would add mawr than one more than one class simply at the coma. And then on the next line, you add the new class update the file once again, come over here with first the page and there you go. The attack still has the yellow color because we have no added its own class to the CSS that we've just created. So that's precisely how these things work. I need to mention something very important, though, and this is something you will learn As time goes on. Not every property is applicable to every element. Just because you can give the property off color yellow to an H three tag on a tag doesn't mean that you can give the color property to an image tag as an example, that doesn't make any sense. Likewise, over here in this example, even though we can give properties like the call Oh, and even the phone size to both the H three tag and the A tag. We cannot give other properties, like text our line, for example. So I came over here back to my little page and I said, You know what? No. I want to change the puppeteer from color yellow to text align, and then give it the value off center update the file. Come back over here with first of page and I'll take a look at that. We have successfully aligned our age threes to the center off the page, but we cannot text a line and a tag. It doesn't make any sense. So this is something that you will learn as time goes on. You're gay. Used to the cancer properties applicable to set in elements and vice versa. So this is something you will learn in time. Okay, so that's it for CS four CS classes. We still have a lot to talk about classes. We'll talk about that in the next video. But now let us talk about I ds. All right, let's come back in here now. With classes, we can see that we can target multiple elements at the same time by the classes with an I. D. You're targeting one specific element, and you're targeting that element at that specific instance in this case as an example, the day that we have over here with the idea off first article. This is the only day if there were targets and specifically and even though we have all the Dave's on the same page, we know Target in them. Where to get in on Lee, This very specific David said, that has the i. D off forced article. We don't care about other Dave's and because it's an I D. You cannot use the same I d on the same page, even for a different kind off elements. So I can come in here and say I want to give this H three tag over here the i. D off first article. No ideas are reserved for one specific element. That's what I did is awful. So in a situation where you haven't element, that she is the same class with all those elements, because you wonder particular element to share the same properties. But then you want that same element to have a specific, unique property. That is when you would use its I d. So going back to initial example of are here with the except for the background color off red right now if I come in here and said, you know what I want the divide that has the idea off. First article. I want it to have a background color off blue. Here's what's gonna happen if I come in here right now and I say, You know what? Let's say the hashtag hashtag is used to represent an I D in CSS. So hash tag and then first dash or too cool cold in brackets. Open it up and they're gonna say background color blue. Let me see what's gonna happen. Update the file. Come back in here, refresh the page and I'll check that out. So because we've given the i d off first article a background color off blue, the idea takes precedence. The properties you are signed to the to the I. D. If you are saying the same properties to the class, the idea will always take precedence over the values that you set for the class instead. So even though these very idea that we have over here is very Dev has the i d off first article and also has a class of accept. And we came to a head. It'll and we gave the classic except the back uncle of Red. But then we also give the i d off first at school bargain color off blue. It is the ideas value that will carry more weight. So to say so, That is a very important distinction between classes and I ds and the power that comes with both. So that's it. Force CSS classes and I ds for this particular video. Join me in the next class. Well, we'll continue to talk about CSS classes and I ds thank you for watching. 26. CSS Specificity: Ah, yes, it is time to talk about CSS specificity. And this is going to be the most important video throughout the entirety off this course. So please pay attention because this is going to be very, very important if you are able to understand CSS specificity. Believe me when I say that you've understood about 50% off all that a CSS. Trust me. I have been working with scissors for about 10 years now. And when I tell you that if you can nail and understand CSS specificity, you have understood at least half off all that it's CSS. So this is going to be an absolutely crucial video. Now when you enrolled for this course, you don't want to learn how to create your own pages using Daves or classes or things like that. You enrolled because you wanted to be able to style your theme. You wanted to be able to make basic changes like changing the back on coal or changing the size of your logo and so on and so forth. Now, so far, we have cheated, okay? And when I say cheated, I mean, we've actually created the pages ourselves. We have added our own Dave's. We have used our own classes, things like that, and as a result, we have been able to style such days at our own convenience. We've been able to style such elements because we're the ones who chose the ideas we chose the classes we chose, where to put it, Daves and things like that. However, when you want to style it. What Chris theme. You're not the one who gets to decide what classes are used, what ideas are used, how the structure is. No, a thin has been developed by someone else. And they decided what the ideas that were going to use. Or they decided the names of the classes. They decided the elements that they used. And as a result, if you are going to style such a theme, you have to know how to oval light the styling that the developer already chose. If the developers said, you know what the bag on color for this website is going to be black, you need to be able to understand the element that you need to target, and you need to know how to over light the style in the bag Uncle off black that it developer chose. And this is really a CIA says specificity comes into play. CS A specificity determines the kinds off style and will be chosen when multiple values are offered. That's what C. S A specificity is now the general rule. The general rule off CSS specificity is that the more specific you are with your targets in the stronger develop off your own style and will be as an example we've sent in the previous video how when we gave the same property off background color to the class of an element and then the i d. Off that element we saw how the idea the value of the i d off that element overvote the value off the class because an I d is more specific than a class. Remember that an idea is reserved specifically for worn element, just one element, while a class can be used by several elements at the same time. So, in other words, again, in idea is more specific than the class of an element. And that's why development Eddie will always override developed the class. Okay, we know that. All right, we know that bucket called Let's Do something in here, right? We're going to introduce the use off the Web inspector, and I think it's vital vital that you learn how to use the Web inspector as well, because if you are able to learn how to use one, you're going to save yourself a lot of time and you'll walk will be a lot more efficient. The beauty about Web inspector is that you can apply your code and see its affect real time before deciding whether or not you want to copy that code and then paste it in your editor . So I am on Firefox. I'm going to use my beloved fire bog and all the command of your own PC. Use Viable Gives Firefox If you on safari, you can use the Web inspector that comes with us a fairy. I think that should walk just fine as well. I am going to right Click on this page right click and just to give you a quick tip in him . Usually what person themes tend to have a general standard when it comes to the structural , and it's ever more standard. Whenever you have this kind of Pedro, you have a sidebar either to the left or to the right. And then you have your main are content area. One thing you should know immediately is that you're going to have to Major Debs involved in the structure off such a page. You will have a Dev that controls the left side in this games. Decided that contents, all the articles and the contents. And then you will have another day that controls the side by itself. That's just a very quick tip. Don't worry. We're gonna walk more with that tip as we progress. But let's come over here. I have my Dave i d. Off second article, and I can tell that this is, in fact, the Dave occupying this country. Because when I put my mouse on for the i d off second article, you can see that up content area becomes highlighted. Let us do this. I am going to give that Dave a bag on color. So what I'm gonna do is to come over here to the lights. I'm going to light click, and I'm going to say add rule, right, Advil. Now, by default, the inspector will choose the class before the i d. But but don't overwrite it. I'm going to say hash tag and den second dash article. Okay, press enter to introduce a new line. And I'm good to bring in the property off background color Colon. Let's say pink. Okay. And now you can see Pinkas appeared. That tells of the hotels of that. OK, we've written good code, right? That's good. We have pink. Okay, that's done pink. What if you were walking with a theme that already had the background color off paying for their particular Dave and you wanted to override that value? What can we do? We know in such a scenario, we can say we can use the class of block article because the value off the second article will always override the value off the class off our block article. So what can we do to override these value off pink? What can we do? Well, we can do is to introduce the class as well. No, that is Deve has to selectors. It has the i d. Off second article, but it also has a class off long article. So what I can do is to come over here again, right? Click add rule. I'm going to say hash tag, second Dutch article. And then I am going to introduce the class immediately. No space, no space, just typing dots. And now you can see bloke article as a pit press enter introduced back on color yet again. And this time let's go with orange. I'll take a look at that. Orange has now overridden value off pink because we had now more specific with are targeting the very first declaration, said David. The idea off second article. Give it a bag on color off pink. However, the 2nd 1 with what? Said The Dev with the idea off second article and and the class or block article give it a bag on color off orange. So now, because we have combined the I. D and the class together, that becomes more specific than those using the idea all alone. That is another rule or set of specifics. ISI. The more ideas and classes you using your target and the stronger your value will be. Let's go back again. What if what if the thin you're using already had that value? It already had second article as the I D. And then the class of block article and in the bag uncle off orange. What if this was the value the developer chose to design the theme and you want to overwrite that value? How would you overwrite it now? Of course, if there was a second class available like the first article right here that has a class off except or the third deviated has another class of except we could simply just say hash tag. Second article dot block art school dot Except that would be even more specific than hashtag second article, daughter block article. Right. But in this scenario, we don't have another class. We only have one class and we only had one I d. And both have been used. So how would we override? Sort a value? I want you to think about that for a second. You can post the video. Think hard, think hard from card, but if you can figure it out Well, what you can do is to go one level above the day that you currently on come over hands. Take a look at this. We know that we have three different Dave's first articles, like an Article three article, but they're all contained inside off a parent, Dave. Off content top. The date has an idea of content. Open the class off text content. So what we can do right now is to introduce either the value off the i d off the parent Dave, or the value off the class off the plant. I d right, the print diva. So I can come in here and you can say again, right? Click, add vou. And now I'm going to say dot text dash content and then space. You're going to introduce a space now because we're now target in elements, classes and ideas inside off the parent death. So the space indicates that. Okay, this is going to be elements inside off this particular days. That's why the space is necessary. All right, now I am going to say hashtag second article, press, enter background color off. Ah, let's see, What can we go with your green now? Take a look at that. It is now grin. We didn't even have to use the class off block off block article animal because the Pittman Diz overrides the value off the class that is assigned to the particular divert targets in visit something you will understand, as you continue to walk more with syriza specifically to become second nature to you right now, it might be a little bit confusing like Okay, well, how is it that even though we're using the parent def, which isn't exactly the actual i d or class off the element, actually target in How come that overwrites develop off the class of the element of using that we've used? How come? Don't worry. You will understand this with time. Don't worry. Just know that whenever you begin to introduce the ideas or the classes off the parent Div , that would be more powerful than just using the classes or I ds off the target element all by itself. Because now we're saying that the Dev with the idea off second article inside off the I d off the David A that has a class off text content. So we're now being even more specific were saying this particular elements inside inside of this other element. That's what we're targeting so naturally in such a situation right now, where we have daughter text content space hashtag second article if we wanted to override FIS because either to say to introduce the class off block art school in here on the parent on the child element, making it even more specific. Or we can go one level above to using the day of i d off page dash one. Check on, come back in there and say, Let's go even one level higher Page one space not Dash one in Space I d. Again, off content, top and in space. Now I d off second article background caller here and let's go with Indigo. And now Indigo has now is not the value off the bag on coal because we're now using three different I DS were first of all saying, by starting off with the idea that David the idea off page one, that is that that contains the Dave with the I. D off content top that contains the Dave with the idea off second article. So generally, as you begin to go higher and higher in your styling, the more specific you become and the stronger your value will become that generally another level off CSS specificity. Now I need to warn you that when it comes to using the parent Dev's in your targeting, make sure that you're using the actual parent Dave's and not the parent gives off all our sections. What? I mean, here is this. If you begin to trace the Dave's starting from the second article, we have content Top, which is the next Dave, followed by page one, followed by entry content. So this is the actual main Dave containing all these other Dave's. Do not make the mistake of common above insane. Okay, next is Hedda Hedda. That's next element above the Dave with the class off entry content. No, these are two separate Dave's on their own. So don't make the mistake cause there's some that happens quite a lot in CSS. You just keep going above you. Keep going. You keep looking higher and higher and higher. And then you forget that these particular amateur looking at isn't inside off the element above it directly above it. No, The actual day of that contains this deal off the class entry content is article and you can tell by the dash over here you can see Thies to a contained inside off article and then you have Maine and then you have this Dave of the idea of primary, and then you have Dev off content. Next is the death of class, site inner and then the idea of page and then the body class off page template. Dash default. All right, that's one thing should keep in mind whenever you introduce in of the EU's off pirin dibs in your targets in. All right, that's it for part worn. If you have any questions, be sure to reach out to me. Thank you so much for watching Join me the next class. We'll we'll take a look at part to offset the specificity. Thank you for watching. 27. CSS Specificity Part 2: all right, welcome to part two off CSS specificity. And in the people's video we talked about how adding additional classes or even using the ideas and classes of the pirin. Dave's can make target in more specific right. But we shouldn't forget that it's not just about Daves, and there's inside of Dave's. Remember that there were other elements that can contain all the elements as well. Block level elements can contain other block elements and inland elements as well. While in line elements can contain other in line elements. Don't forget that it's not. It's not just about Daves and gives and gives and gives. Now I have added an additional Dave that has skills of a hacker and has a new list as well . Let's take a look. I have attached the text. It's called a new CSS. Something like that. You can find it in resources like you can go ahead and download all the continent and paste it over. What, you currently have a new page and you should have the additional our content. So what do we have? You? We have a new day for the class hacker content. We have another divide here that has the class of hacking skills and that has the skills of a hacker and the new list items. As you can see, let's go back to the page. Now let's say, for example, if you wanted to target the l I elements inside off the our hacker content def, how can we do that? Let's look by clicking here, inspect element of fire bog. And what I'm gonna do is very simply, I'm gonna light clicking here and I'm just gonna say a lie, all right? And I'm going to say fun size. Let's say we wanted to change the front size too. 30 pixels Boom. Take a look at that. We now have our allies 50 pixels. But guess what? So are the allies of the second Dave and even the l IES. In our sidebar, they are all now 50 pixels, as you can see. So that's the thing about targets in before you go about and begin creating your styling on your style. Shit. Ask yourself the question. I might take its in every single instance off this particular kind of element throughout the entire website. Or am I just targeting these elements on this particular section when you use general tags like your L i h two p all on its own like that, you're being very broad. Your business business targets in the entire website, not just this page for the entire website. So if we wanted to change the Allies for all if I understand the font size, whether for all our allies this would have been perfect. But we're not interested in changing the allies throughout the website. We only want to change the allies for this particular Dave off our hacker content. So let's go ahead and the lettuce backspace be back to square one. I'm just, like, click again. And now I can say hack a content l I enter and then fun size. I'm gonna go ahead now and say 50 pixels. All right, so now only the l IES inside of a hacker content Dev is now 50 pixels. But notice something. Dill. If I come back in here and I decided to just say hacker content only take a look of it. The allies are still now 30 pixels. But guess what? So is the p tag. So is the actual content itself. They're all now 30 pixels, with the exception off the age three, which is which has the who is a hacker? Tickle Corvette. So this is the day that has, like, a content we have our age three. That is still that isn't that the pixels? But the pitak that contains the actual content is now all 50 pixels and so are the L I elements. Don't forget that whenever you apply style into the parent, Dave, the Children elements off such a div can inherit those properties as long as they can do so . Do not forget that. However, in such scenarios like this, I would always recommend that you include the elements that you want to target. Don't just say, don't just target the parent of all on its own. Be more specific. Honest. Off course. You're actually targeting every single element inside off the pair in death. All right, One question might have is Okay, well, if all of the elements have inherited the property off the parents, Dave and in this case, we gave the parent of a fun size of 30 pixels Why is the age three that is inside off the hacker content class? Why isn't it also 30 pixels. The very simple answer is somewhere on the started. For this theme, the developer has used a more specific targets into target of the H three. That's why it is not changing. So if you wanted to change the H three, it's very simple. But just simply say dot hacker content, which is the class and then space H three. And that should do the trick. All right. No, let's just go back and let's remove will be created in here from science that the pixels just delete that. Go back with my L I once again ally font size and ah, that is the 50 pixels. So fine. Now, what if you wanted to target the l IES inside of the second day of as well, how can we do that? I want to think about this for a few seconds. How can we target the second list? Items that we have in addition to the very first in that were just targeted? There are two ways. There are two basic ways how we can do this. Can you think of those two ways? Well, the first way is pretty obvious. I think all would have to do is we can simply say, Let go just clicking here. We could just simply add a coma. Remember when I showed you how to add two additional classes so that they can share the same property? All we just do here's to Atacama and then say dots, and then we can now had new one, which is hacker skills and then say space L I. That's it. So now both the allies, inside of the hacker content class and the hacker Skills class now have the font size of 50 pixels. As you can see, that is the first way. The second way it will be for us just to use the parent Dave, that contains both the hacker content Dave and the hacker skills Dave and then simply used the ally element. Here is what I'm talking about. Then just delete this so we're back to square one rather than having hacker content. Ally Hacker skills Ally. I can just come in here and say, You know what? I'm good to target the pair in depth that contains both different first place, which is content dash bottom and then space L. I. And then there's great and say fund size off 30 pixels boom! And there you go. Okay, so that's exactly how weak and style. And to get stuff with CSS smiled and using the classes off the individual Dave's. I just simply used the apparent Dave and then went straight to the L IES again, if somewhere, let's just imagine this has already been declared as the theme styling and we wanted to override this. What we can simply do would be to add the u L before the l. I don't forget that in both dibs there we have the l IES. Both l eyes are declared after you l you can see we have the UL. It's inside of the U L tag where we have all of the l IES. Take a look at that. We have allies, and then inside we have the u l. So if you want to override this all you'd simply do in here just be to add your u l So to be bottom and then say you l and then the l I. That's how you'll do provide that And to override this again very, very simply, you could just go ahead and use the very next day for at the top, which is Ah, Page Warner's you can see that's how you take. It's tough. That's how you become more specific specifically to target in in CSS. So I have showed you how to play with fire ball again. Make changes real time to copy the actual code itself. Just right. Click where you have the declaration, right Click and then you should see Copy, Rule Declaration. That's what you would copy Seculars. Copy that and then place it on your text a little. So that's it Foresees a specificity. We are going to spend a little time with it. As we continue, we will be moving onto a new section. I believe we're good to be targeting whether they're gonna be performing. Real life examples are gonna be targeting real themes, and we're going to be editing themes. From now on, we're going to be stallion themes, and you're going to learn a lot more about style in properties and the kinds of values that we can assign to setting properties. Okay, you need to understand things like positioning background images back on sizes, things like that. So Well, thank you so much. so much for watching the videos. And if you have any questions as usual, feel free to reach out to me. I hope you enjoyed the lectures. I hope you're linen. I really, really hope so. That's why I do things like this. I really want you to learn what it is that you're watching. So once again, if you have any questions, feel free to reach out to me. Thank you so much for watching. And of course I will see you at the next class. Bye. 28. Important Note: before we continually cause I wanted to address something. And even though I believe you may already know this, I don't want to take anything for granted because sometimes as an instructor, it's easy for you to get carried away and you keep teaching teaching without even covering the basics to begin with. So here's the thing. Okay, When it comes to you editing your WordPress theme and add in CSS changes, there are basically two ways how you would do this one, which is the far easier of the two, is to simply edit an existing styling. So as an example over here on my sidebar, I can see that the titles off all the widgets are in capital letters. So I know that somewhere the value off the text transformed property has been set to upper case. So all I will need to do here just to come over here and inspect and I can see that it's an H two and over here to the right. Let's see, we have it over here. We have the text transform said to upper case, so I can simply come in here and then say none, right? An old make sure that the titles are not in uppercase animal. Now, from here, all our need to do would be to copy this rule declaration and then go over to my editor right here. And I can just paste that into my child theme over here. However, I am going to make sure I will delete the other properties because I am not walking with those ones. It's just the text transform that I'm changing so I can update my file from here, and all will be well. That's a very first way The second way would be when you're trying to create a new style. If a style has never been declared before and you're trying to create your own style, this is a bit more difficult because now you have to concede, Ah, thinking about how you would use the elements class. Maybe the tag, maybe the I D. Maybe the parents, maybe the primitives class or I D. And things like that. So when it comes to you creating your own still to be more difficult, this is where you have to get creative. So, as an example, even wanted to create a background image for my website Of course, I would have to do the same old inspector firebug. Come over here to my page and then for me. I will not have to now add the I D. Ah ah Deneuve a lotta and then say hashtag and then say page and inform. You begin to add to the background image, property and values and so on and so forth. So that's basically the second way. How you would edit your WordPress theme. The wonderful thing about child themes in relation to the parent themes is that your parenting has its own style. That see, it says your child team has its own styled with CSS. So in this scenario, when what press loads the contents off your Web page? A website, it will forcible Lord the Stylin formed the parent theme. The whole festival tick presidents. And then, if there are any styles in your child theme that oval rights over that of the same style and basically in your in your in your parent theme, the seven you have any Children will overwrite what you have in your parents theme. That's basically how child teams work in relation to the styling, so I just wanted to mention that as well. So that's it. If you have any questions, as always, feel free to be child. Thank you for watching. I'll see in the next class. 29. Project 1 - Changing the Background of the theme: all right. So welcome to the very first project where we're going to try and change the background off our what press theme raised of the 2016 thing right here. And if you consider background color is said to white. But sometimes you as a what, president that you might want to change the bag on color from white to something else. And in other instances, you might want to use a background image as opposed to using a close. So we're gonna handle both of those scenarios in this video. So first things first, let's deal with the background color. Now, as I've said before, what person themes are generally built with a standard and the stand have been Whenever you're trying to target very broad properties like the background Coehlo off the entire website, you want to target the Dev at the very top. The the main elements at the very top of the HTML structural and when I mean is if I right , click right now and put out my fire bug, you typically want a stat film, an element like the body, right? And you can see whenever when I hover my mouse over the body. You can see now that the entire website has become ah highlighted head in this case usually and had you have code, you don't want to take it head and told you that you have nothing to do with the head so you can ignore the head, a tag and HTM mill. Well, you could actually use the HTML tag to apply your background color if you wanted to. But note that in such a scenario you'd only be take it saying the outside containers that have no background color apply to them. What I mean is, the way the 2016 theme right now is structured is we have HTML very top. We have bodied. And instead of body, we have the Dave, which is just I d off page. This is the actual day if we want to target, not html. And how do I know that? Well, if I click on its simple right now and I look over to the light, you can see we don't have any background color specified anywhere. All we have is margin top box size in from family, and that's it. Nothing like background Coehlo. If I click on body however, and I school down, school, down school down there since something like background inherits but no color. But now here, Over So that we now have the style and we have background. And then we have a color that is one a one, a one a. So if we investigate this and I decided to change one a one a two. Let's go with something like 456 Now you can see that the outside continent has changed from black to what appears to be darkish blue or something like that. So that tells me right now that okay, the body is targeting the outside containers, but we are interested in the white background The my bag on continuing the page, continents you can see. So what you want to do in such a scenario would be to go to the very next day if underneath the body tag in this case, we're targeting the Dave I d. Off page. No. Ive a click on this. Dave and I looked over here to the light. Let's see if we have a heart now you can see we have a background coehlo off white. So we now know that This is the element where the developer applied the bag on color off white too. And we can see that he used the class off sites to to apply the bag on property, the property off background color and develop off white, as you can see. So I came in here now and I changed this to hashtag 456 Now you can see we've been able to change the background color from whites to darkish blue. This is how you would change the background culo off your website. Start at the very top. Try to see if there is any property off background color declared. If there isn't any, check the very next day. If on the nif it and then see if there's a bargain. Coehlo apply to that and generally whenever you take it in background colors and things like that, you want to look for days that have ideas like page or or sides or, you know, our side content, things that have like general terms, that given idea off the kind of element they are. So this is how you would change the background color off your WordPress theme, from the default to whatever value you wanted to use. What if we wanted to use a background image instead? So far, we've been doing back on course. But what if we wanted to use a background image? Well, check this out. You will find attached to this video. By the way, you you will find attached to images we're going to use. The very first image would be a great background, which is the one you can see right now. The second would be some sort of like a flower background. This is what you would have in the V sources link. We're going to deal with the We're going to use the great background first, right? For a very specific reason. And who isn't being the size? Here is 6 40 by 360. This is very, very important. This is to small off a beggar, an image to occupy the entire with and height off our website. But let's go ahead and use it and see what happens to use this background image. We're going to need the u R l. So I am gonna copy of the UL right here. It's Copy that. All right. And what I'm gonna do is I'm gonna pace debt on my note pad file over here, which you can see gonna close this animal. Also copy this one as well. Let me also copied his background. You are because we're going to use this one as well. I'm just paste that somewhere safe. Okay, Now let's go back to a website. Let's right. Click again. Now we know that the classroom tickets in is the site class. That's the class we need to target. So I'm gonna clicking back there again. And when we have the background color off lights, I am in a double. Click inside and admire more new property off background image. So I'm gonna say background dash image coal on and then you all l We need to specify where CSS should find the background image. And that's what we copied the u R l. And now in brackets. I'm going to put in double coats. And then I am going to paste the UML right there. Oh, I'm sorry. I used the I used the flower background. Not the great background. My bad. Let me, uh, click back inside. And we picked that over again. The goats and Okay, fine. OK, cool. Awesome. That's what we need. Now you can see we have a bag on image oak or pine of the entail with in height off the website. But remember, I just said that the background wasn't big enough. The image wasn't big enough to occupy the entire bag. One of our website. So why is it that from left to right and from the top all the way down to the bottom, it's aka Pine Everything. What is going on here? That is because their ease another property called background repeat which has been set by default to leap heat. What the background repeat does is that it tells CSS to constantly keep reproducing the background image as long as it occupies the entire width and height off the website. So if I came back in here and just on and if I said background dash repeats, which is a property, and then I said no, repeat. Now take a look of that. The only area covered by the background image is where we have the logo basically, and the very first title of the very first post due West is set to white, which is using the bag on color. So one very important thing to remember here is that in a situation where you have both the background Coehlo and the background image specified, develop off the bag and image will take precedence over the background color. So images are more powerful than colors. Basically, that's that's the entire idea in here. So what if you were dealing in a situation where the WordPress theme that you're walking with did not have background repeat set by default? What you want to do is to simply say, bag on repeats. Just say, repeat and Dow. Would we keep repeating the bag an image until the occupies the entire background off the website. There are still two other values that you might be interested in, which is repeat X. What repeat eggs does now, as you can see, is that it was simply keep repeating the background image only in the horizontal direction . It's not gonna repeat it from the top to the bottom on Lee from the left to light, as you can see. So right now all it does is it's on Lee repeating the with off the bag on image. It's not repeating the height. Evasions, repeat, stash extra picked us. Why? On the other hand, it's the opposites. Now it's repeating vertically, so it's only repeating their heights off the Bangla image and not the with off the background image. So these are two values that you might also be interested in, dependent on what it is that you're looking to achieve with your background image. All right, that's no change. The background image. Okay, we're gonna turn the background image from the great background now to the floor background . All right, let's do that. The piece that in here you are l the coats inside, and let's paste that enter. I hope I made a mistake. Sorry about that. Listed it again. Background image. You l beast. Okay, cool. All right, now, one other tip I wanted to give you is whenever you're paste in the u. R. Ailes of your background images, you don't need to use the entire u. R L itself. When I mean is it's fine when you start from the ford slash WP dash content. That's typically where you want to step from. You don't stat form. Http. Colon forced last four slash and then you are you are You don't want to do that. So let's click inside here, and all I'm gonna do is going to move all the way in here. And just backspace, Backspace, backspace, Backspace, Backspace, Backspace, backspace, Backspace. And there you go. So my euro and now stats form four slash WP dash content. This is the ideal way you want to provide the U. R l and the source off your bag on images. Boy. Awesome. So what do we have here? We have our background image repeating again, as you can see, but I want to introduce to you another background property, which is the background size. So it's kind of different from the background. Repeat where you're simply repeats in the background image as long as it occupies the entire Bergen of your website. With background size, you're dictating how big the background image should be. Now the property itself is called background dash size and there are two values that you might be interested in. One is Cove are now. What cover does is that it tells the brother to make sure that the image always aqap occupies the entire container, even if it has to stretch the image or even caught a little bit off one off the edges. That is what the background size but also the bag under. That's what fell off cover for the Bergen size doors. It's simple, Tell CS is that no matter what, make sure the background image occupies everything that we have with the with the bag off the website. That's basically what the cover doors contained on the other hand, which is the next fellow contained. What this does is it tells CSS that always show the whole image, even if that lives any little space to the sites or the bottom off the website. So this gets right now with chosen contain. And if I scroll, keep scrolling, keep scrolling. Well, thankfully, because we do have bag on repeats, it still shows everything. However, if I came back and I said background repeats and I said No repeats. Now let's call all the way down and see it. Now you can see that it simply stops just after the just after the very first post, as you can see so we can no longer see the background image anymore because we have set back and repeats no repeat. But if I came back and I said you know what? I'm gonna make this cover instead. Regardless, over there we tell the bag underpants to the people, not says is going to make sure that the background image occupies the entire container, as you can see. So it really depends on what it is that the transfer achieve. Sometimes cover is the way to go. Sometimes contain is the way to go. So it really all the pains on what it is that you're trying to achieve. So that's it for the bagman. Properties. Thank you so much for watching. If you have any questions, always feel free to reach out to me. Make sure you attempt the Cui's that's gonna full up here because we're gonna test him. Go to make sure that you try and understand how to use backgrounds properly. So that's it. Thanks. So much fortune. I will see you in the next class 30. Using Different Backgrounds: Well, well, well. I got a question from a student of mine. His name is Jeremy, and Jeremy would like to know how he can use different background colors on different pages and also how he can use one background call specifically for posts and another Baghlan call specifically for pages. Will Jeremy, thank you so much for the question. And before I answer it, it is important that I stress that is generally a bad idea to use different background colors throughout your website. Honest, of course, the tone off your website or the kind of content you're writing about. Any website fits this kind off style. And so, basically, if your website is about entertainment, comics or graphics, then yes, maybe using it different beckon close can help. But if your website is it is a blow go. It's a business website or something a bit more formal. L'd recommend using just one background color throughout the website. All right, so let's take a look at the question. First of all, how can we use different background colors on different pages? I am over here on my blawg, and you can said you have one page called the gene and have another paycheck called CSS. So if I wanted to use, let's say, for example, the lead background color for this season's page and then the blue bag, one color for the gin page, I wouldn't need to look for an I D or a class that is unique to each one of those pages. The beautiful thing about what press is that themes are generally built with a particular kind of standard. And usually every page you have when you're upset will have a unique I. D. Not exactly an idea in terms of selectors bought an I. D that is generated by what press itself. When you create the page and to find that I d. All you have to do is to light click inspect the page and you want to look for this idea. Typically over here on the body class, you're going to see several classes like page template default. You will see the page class which is unique, which I'm so which is what I shared on all pages, every page on the 1% that will have this class of page. But then next the page you have the page dash I d dash Faulty. Warn. This is the unique I D. Which just so happens to be a class that is specific to this particular page. So this pages I d is 41. If I did the same thing on the CSS page right now, right, click. Come over here to the body class. You can see that The idea for this page is Page that I D Dash, that's 110 So what you're gonna do right now is this what you want to do is to, like, click over here on the fire bog and then simply use that class that has the unique i d. This case is going to be page dash I d Dash 110 And then what you want to do next is to add the Dave directly beneath it, which is going to be Dave with the i d off page. The reason why we're doing this is because if you applied the bag on Coehlo Onley to the dot page that I read a sh 110 that would only affect the outer parts off your page, which, in this case, in my amounts no. Right now, It's the black black bag when you can see. But if I wanted to change the actual white background color itself, thereby bag on color, it's set on the very next day just below the body, which is the day for the idea off page and the class off site. That is why we have to include that. So once I do that, I can come over here to a new land and say Background Coehlo And then I can say this is going to be read. And now you can see I have changed the Bhagwan calls specifically for this page to lead and to do the same thing on the next page, which is the ah, the gene page. All outlets do here is the same thing, right? Click. Come over here to my body class and then simply say, gonna add the new class here off page dash, I dash for two worn and in space hashtag and then page and then simply say background Culo would be blue. So now the gym page is going to be covered in blue while the Seasons page is going to be covered in lead. That is how you would use different back on close on different pages by simply using the class that is unique to each one of those pages. If you want to set a bagman, color the same back on color on all pages. What you want to do is to replace the I D class simply with the class off age. So as an example, what you would do here is just to say, at the D unusual and then say dot Page and Dan simply say the hashtag page again. And now you can say background. Coehlo, in this case would be brown. So now every single page on your what perceptible have back on color off Brown because now we're using an actual class, which is page that is shared amongst every single page or knew what purse website. Using the bag on cola on posts is different as well. Let's take a look at that post in here. I'm going to click on this post that is about HTML five. All I would need to do is to right click again, inspected fire bog and just like with pages, posts have the same thing as well. Click on the body class right here and now you can see that we have two different classes that will be present on every other post. Those two classes are single and single dash post. These two classes are shared by every single. What press post on the weapons were upside. However, if you wanted to set a specific bag on cola on a specific post, simply look for the Post I D. In this case, it's going to be post I d Dash 21. So this is the class you're going to use to set the background color for this post. If it were a different posts, let's take a look at the post off block and in line elements. The i D for this particular opposes the post idee off dash five. So you would simply say dot post idee dish five space and then the hashtag page and then against the background color for this particular post. So that's the Jeremy. I hope I've been able to answer your question. Thank you so much for the question once again, and let's move on with the course 31. Project 2 - Changing the Font Styling of the Theme: all right. So welcome to project number to where we're going to take a look at how we can style the content on our website, specifically the content on our pages and on our posts. And this is one of the more are popular requests made by what pres users. They want to know how that can change trains like the font size, maybe the front collar or maybe even the font family off the fonts used on the Web side. So far, so good. We have taken a look at a few properties that are applicable to our content. Properties like the color the font size text transform takes a line op ed in imagines in borders, Liza all properties applicable to the content on a website. And it is also worth mentioning that when it comes to the actual content itself the text in words. We have three main tags used to represent them. With HTML festival, we have the heading tags. This would be your H one h two h the old way to 86 These are typically used for titles or headings. So the titles of your pages, the turtles off your posts, maybe even the title titles of the Widgets. All this will be represented by the H tags and then we have the P tag, which is the general tag used to represent your content. This would be the tag representing the actual contents of your pages of your posts. And then finally we have the A tag which is used to represent hyperlinks on your website. So these those are the three main are tags used to represent text on our website. Now the very first property I'd like to introduce to you is the font family. How can we change the font family off our what press theme? Now I have walked with many designers in the past and they often were command that when it comes to choose in the number or fun, families to use on the website do not use more than three. So you would use one fun family for your headings, another one for the general RP tag, which would be that your content and then the last time when you could use for your high pollings no more than three fund families on your website. So let's take a look at what we have right here in the 2016 theme. If I right click and inspect my element, in fact, let me actually inspect the content of the actual text. So let's open up a single post and have over here. You can feel free to go ahead and create any post. If you don't have any, just quit in the post and you can then inspect the content. So let's do that. And what I have over here is I do have my P tag. As you can see, that represents all the content and then over here to the right. We do have the margin property that's been declared already. But now, over here, we do have several other properties which the Patek has inherited from its parent elements . Don't forget that in the HTML and CSS, your elements can inherit the properties and values of those properties from the apparent elements, so you can see right now that it has inherited the color one a one, a one a a different family off Merryweather and in Georgia. And so if are they fall back our farm families. But note that this was declared with the body tag the button tag as well the imputation select tag and text area tag bottoms your well familiar with what buttons are. Those would be bottoms like buying now or, you know, click here, read more buttons like that. The other elements, like impute select and text area, are typically used on forms. So if you have any contact form on your website, those would be affected by this tags. So now we could choose to just change the phone family in here for Mayweather to, let's say the Homa. The problem, though, is that these actual declaration right here affect more than just the boy tag. Like I said it, I fixed the button. It affects the input select and then the text area elements, and we don't want that. We only want to focus on the body tag because that that is attack that contains actual content. So what we can do here is we can simply just create a new rule over here that say's body, and then we can all say font family, and we can use the home up as an example. So now you can see that all the content we have all through the website is now in tow Homa , the fun family for posts, even the which is that we have over here to the side. They'll all into Homa. So let's go ahead and do this. I am going to copy the new tag of just the new style I just created. Ah, that's a body from family Tahoma. Let's copy that and let's go over to, Ah, appearance a little. And then I'm going to pace that at the very top and usually with CSS, it is a good practice to paste the more, ah general code at the very top. So whenever you're affecting general elements like your P tags or your body tags, you want to keep those at the top and then the more specific style and you can include those below. So we have body from family. Tahoma. Let's hope that the file So this has been a date? A. Let's take a look at what we have. Let's refresh the page, and now you can see that the content that we have on the posts are in tow. Homa, also the kind of that we have on our pages as well, All and tahoma as well. Awesome. How ever if you take a closer look, You would notice that the headings the H wants the H dues are still in Merryweather. They haven't changed to auto. Home, up. So what exactly is happening in here? Well, this is simply because there is a stallion that is more specific then the stolen that ever played to the body tag. Remember, the body take is just a very general tag. It's not very specific at all. So let's see if we can figure out exactly what is going on in here. So ive I right click on the html five, which is the title of my post right here. And I inspected Fire Bog. Let's see what we have in here. Ah, drug that over here. Now you can see that this is an H one and it has a class off entry title XML five. And if I look to the white in here, you can see we have some other properties. We have the font size 2.5 rim line height 1.25 We have much bottom. But now over here we have the front family off month Surat declared specifically for the class off entry title and in this case right now, remember that the class selectors are more powerful than the general are tags like body. So what we can do in such a scenario is if we wanted to change the H ones specifically, we can just use the class off entry title and then change that. But since we want to change the fund families for all of the head intact, like H one h to use H threes, what I can do is to go all the way up here and then say, OK, let's try body and let's see h one. And now I'm going to say from family and in this case I'm going to use something very ridiculous. Like comic sense. Let's try comic sense, but that in changes you can see it is still very weather. That hasn't changed. So we need to try and be a bit more specific. Let's try using any I d that we can take a look at the very next day of just beneath the one for the body. Is that off page? So let's try using page and see if that would work. Why does tripe age? Let's come back in here. Let's say Ah, Body and Dan Page. And now, H warn fund Family Comic sense. And now you can see it has changed to comic sans. Awesome. Awesome! Awesome. So now that we've included the hashtag off page that has now affected the patrons that we have So this is typically how you can get to target and style all the head is that you have on your website. So let's do this. I am simply gonna go ahead and copy this rule declaration. Go back to my Eddie tool appearance, Eddie Tool. And now I am going to go ahead and paste that next in here. But because we're targeting all the headings and not just the H one tag, I am going to do this. Have it comma writing here, New line piece that, uh and you come up peace that again. And then finally another one over here. So I'm gonna change the H one right now to H two h three and then h four. If you have h five and h six, you can do that as well for them. So now we have all these disclosures for all the H one extras H three n h force. That's up that file. Let's go back to the website That was the first to page. And now you can see that everything all our headings and now with the comic sans font family. Awesome, Awesome, Awesome. So that's how you take it. You're headings, however, looking over here to the right, you would notice that all the titles off our sidebars are also now in comic sense. And the reason is because we used the day for the i. D off page, which contains everything that we have in both the content area and in the sidebars. So in such a scenario, via you only wanted to target the content inside off your page is what you're gonna do is you're going to look for the Dave the most, the most senior Dave that only contains the content that we have in our main are content area. So let's take a look at this. That's why click again inspect with a firebug. And now over here, let's see what we have. We have primary and then we have secondary. So this is one thing about a WordPress themes. Okay, generally with what press themes, what you're gonna have is you're going to have to Major Dave's One Devil contained a content area, while the other one will contain the sidebar. In this case right now, with the 2016 13 we can see that the David the idea off primary contains the content area all the time that we have in our pictures and posts, while the all day with the I D off secondary contains the Canada we have in our sidebar. So if we only wanted to target the content inside of our content area rather than using the I d off page, which is all period contents, everything including the sidebar we can just use the I. D here off primary that would only target the H one h two is that we have inside off our content area. So let's do that. Let's change the i d from Page two primary. So let's go back in here. Appearance it all. And now let's try using prime leave. Let's do that again. Family as well Primary and the last one right here is going to be primary update the file. Go back in here, refresh the page and now you can see that the titles that we have on a widget area in the sidebars have gone back to Merryweather, while the titles for our posts and even our pages and now with the are comic sans font family. So that's how you would change the fund family that you have on your WordPress website. Then this is how you can also target the fund, the text in your content area, or even the text that you have in your side bars. So just a quick, quick, quick, quick mention if you wanted not to target the headings in your sidebar. What you can simply do is to use you're going to use the I D off secondary in this case, whether it's the idea of family, you would use the i D off secondary. So that's how you would target the our phone families, the text. Better that you have inside your sidebar. So that's it for changing. The font family joined me in the next class. We'll take a look at how begin add Google fonts to a website. Thanks so much for watching 32. Adding Fonts from Google: Okay, so let's see how we can add fund families from Google to Ah, what purse website. So far we have the comic sense for the head ends while we have the Tahoma from family for our content and would like to change that. So come over here to form start google dot com and with Google, you have access to over 800 are different from families for free and there are lots of different from from. Is that really, really awesome? You can check them out. They're all in here now. I do have a YouTube video. It's a tutorial on how to add a Google fonts to your website. It's a bit more thoughtful than this particular video, so I will put the link in the resources where you can check out the video. But for now, what I'm gonna do is I'm going to select two different fund families one for the P tag, while the other one for the headings. So I will choose them on sale at from the Family first, which is one of my favorite from families. I'm gonna click on the plus apartment right there to select Monserrat. There will be for the P tag and then for our headings. I am going to choose the railway from families I'm gonna click on plus, so now we have two different family selected. Now I'm going to click on the bottom down there. Now what you're going to do is to click on customize. Now, the thing about phone families is they calm with different levels off lightness or thickness. That'll be like your funds are weight. So over here you have the auction off, selecting additional our front weights that you might want to use caution, though. Don't overdo this because right now you can see the low time. It sets you fast, and that's because we only have two selected. But if I came in here and so that's like more and more and more, you can see the law. Time is now slow. Remember that whenever you are importing fund families from Google when you're upset lords , it also has has to load the fund family from Google. So that will take an extra second or two for Europe, said to Lord. So be careful whenever you choose, an extra front waits to go along with the default of regular at 400. So what I'm gonna do is I will select light for 300 for them on Surratt and then for the railway I'm gonna go with. Let's say I'm gonna go with the bald at 700. All right? So now we have are four different versions to different visions off each fund family selected. So I'm going to go back now. Teoh embed. And now what I'm gonna do is Teoh is to click on at Import a light, clicking it imports. And then I'm going to select this cold right here, ignoring the style tags. We don't need the style, Tex. I'm just gonna copy this copy. And now let's go over to our ed. It'll appearance a little, and now, at the very top, I am going to pace to this new code. So now we have Ah, fun Family has been loaded from Google right now, but to apply, different families will have to use these CSS down in. He can see Solyndra's copy from family right here. Monserrat on San Serif with a copy that and then paste that for the body. Let's pace that and then copy the next one railway, which would be for the headings copy. And then let's pace that over here. So right now the way it is, the monster fun family will be used by default. And if the Web browser cannot interpret the Monserrat from family, the fullback fund family here will be sounds serif, which all browsers can interpret. So it's always a good idea to have at least one full, back, fun family, which all browsers can are interpreted. They usually from families like Tahoma Sensor, We've Georgia and so on. And so for a real as well those examples off all from families that all browsers can't interpret. And you can also tell them on Senate and will weigh our farm families from external sites in this case, Google because they are covered in single quotes, as you can see. So let's go ahead now and update. Let's go back to a website that is refresh, and now you can see headings and now in the railway, while actual content is now using the Monserrat phone family. So that's how you would incorporate from families from Google to your what purse website. Thank you so much for watching. We'll see you in the next class 33. Text Properties: all right, So let's take a look at some additional text properties, which you might be interested in studying off with the font weight property, which we kind of took the bottom people's video. Remember when we selected the front weight off 300 for the Monserrat, and then the front weight off 700 for the will weigh in addition to the default front weight of 400. So the level off thickness or lightness, which you can apply on your phone family will depend on the fund family itself. So coming back here to Google phones, if I chose the Montserrat as an example and I clicked on Regula, you can see the different levels that we have sudden off with thin. At 100 we have extra lighter 200. We have light of 300 and it goes all the way up here to extra bold at 800 in black at 900. But if I clicked on that's a source sense PLO instead, why would we have in here? We have extra light 200 so there is no thing version of the source sounds pull from family , and this goes all the way to 900. There is no 800 for the for the source and support from the family. So once again, the funds which you can apply the pants on the phone family you're using. All right, let's go back in here now and to change the front. Wait for my pizza again. Here, the default is 400. I would make it 300. So all I will need to do would be to add click Inspect with my fire bog and a concern right now that we don't have the front were declared anywhere. Now you might be tempted to just come over here to body and then just say front waits equals 300. That's not gonna work because the body tag cannot accept the front weight property. The funds would Property can only be applied on your actual text elements like your P tag, your H tag, your atec and even your ally tags. Those edit text I can accept. Thief won't wait property. So that's come all the way up here and you can see we do have the Pitak already declared, so I can just double clicking here and then I can say funds weights, it's going to be 300. So now you can see that our front weight is now Thena than what we had previously. So I can now copy that comfortable declaration. Come over here and I'll just pace that here based and we can remove the margin. We don't need that because that's declared elsewhere. Update the file. Now let's go back in here. Let's refresh the page. Awesome. So we now have our front weight at 300. Cool the next. Nobody is going to be the line height property. Now the line height is the difference between the sentences that you have on your content area. So right now you can see that they, ah, like the line height is decent. But if you wanted to increase or decrease it, you could just went Click on your content. Right click. And now let's take a look at where we have the line Heights declared, and now we had Line had declared over here at 1.75 so the body attack can actually accept a line height. It's can't accept the front weight property, though, so there is a line head of 1.75 So I came in here now and I meet this, Let's say 1.5 instead. Now you can see that the distance between our sentences has shrunk a little bit. But if I admit this, let's say 4.5, and now you can see the height has increased vastly, so that's what the line height is used for. You can either increase the distance between your sentences or read. Use the distances between your sentences using the line height. Property next up is going to be the letter spacing a property, which you should apply directly on your P tag all your Airlie tag or your age tag, but typically let us base. It would be used on your P tax because that is the other. Spacing controls the distance between the words and letters that you have on your content area. So if I came in here right now and where we have the front weight of 300 my double click that and said, let's ah, space in you know it. The default value is zeal, but if I made this one pixel now you can see all of a sudden the distance between our wars and letters have increased. If I'm it, this two pixels, he can see the difference. Three pixels, six pixels. And now and so when you cannot see that this town is continuing to increase. So that's what the letters pacing property would be used for. Typically, you don't want to go beyond, say, 1.54 point 75 That's typically, uh, kind of like the maximum that you want to go with ritual at a spacing. But then again, that will depend on the phone family, some fun families. Even if you extended little space into five pixels, it was to look good. So again, that depends on the fund family you're using The final our text party I want to talk about before I go is the text shadow property. We can actually apply some shadow to your RPI tax to your content. Now the thing with the tech shadow is there are two required values, which would be the horizontal shadow, which would be the position off your horizontal shadow, and then the shadow, which would be the position position off the vertical shadowing, can also apply two optional values like the blow radius and then the actual color off the shadow. So, as an example, if I wanted to play some texture to my content, I limit disposable. Refresh this page. Go back to normal. Okay, fine. Now let's see if it can apply. Some take shadow, but we have front weight of 300. I'm going to say text dash shadow. And now, for the very first value, I'm going to go with the two pixels, which would be for the horizontal shadow. And then let's go with another two pixels again for the oh, now you can see the difference. Even though I haven't applied any color, it's really chosen the black color by default. So now you can see the effect right there. Let's go. Go with the blow radius. Let me say eight pixels and then Okay, this is looking better. And then, for the actual color, let me go to bed and see how that's gonna look like. Uh Ok. Well, well, well, well. I typically wouldn't do this on any website, but I'm just trying to give you examples of how you would use the text shadows. So maybe by reducing the office now, what's interesting is that you can also apply negative values to your horizontal and vertical shadows as well. You can see how that's gonna look like. So feel free to experiment with your values, your Kahlo's and your blog's readers as well. If you wanted to add some text shadow to your RPI tags, so so that's it for the text properties. Thank you so much for watching the videos. And, as always, if you have any questions, feel free to reach out to me. Thanks so much for watching. I will see you at the next project. 34. The Display Property: all right now, before moving on to the very next project, I wanted to introduce to you worn more property. And this is a property that you might find useful. And I think it's a good idea if you know what it does and the possible values that it can accept. And I'm talking about the display property. Now. Remember that with HTML, there are two major types off elements. We have our block level elements, and we have our in line elements to block elements. Are your H warns your P tags, your Dave's. They're basically called block elements because you cannot have more than one off them. On the same line. You have your Illan elements like you're a tag your image sack that called in line because you can have several of them on the same line. It is also worth remembering that block elements can contain in line elements and also on the block level elements as well in line elements. On the other hand, they can contain inland elements, but they cannot contain block elements very, very important to remember that. All right, now, what is this Display property? Well, CS is by default automatically sets the value off the display property for your block elements to block. And then for the online element. It automatically sets the value off the display property to in line. However, you can actually force your block level elements toe, act like the one in line elements and then force your Kneeland elements to act like a block level elements. Now I on on a post right here, and I very deliberately have an in line element, which is the A tag right here, which is in blue, and I have my age to tag right here title, which is, of course, a block element. Now check this out if I inspector with my fire bog. So if I have my each tube now, if I go ahead and change the display property. But if I do that, notice the gap, the space in between the age to tag and the text you can see we have massive white spaces. And that's because many what person themes are very generous with the margins given to your age tags because they are block level elements. So now if I came in here and I said, I'm gonna change the display from the default block two in line. Now take a look at that. All of this Saad in the space in beneath the title, has disappeared, But still, the title is still on its own separate line, and the reason is because the text just below it is covered with AP. Tag and P tags are also block elements. So even out came over here to the P tag, which has the current property off front weight set of 300. If I decided to also go ahead and say this play in line now take a look of that now both the age tag NDP tags and now on the same line because they're giving both of them other display property off in line now. Likewise, if I came over here to my a tag, let's inspect that. That's my A tag and let's see if I just come over here and I'm basically looking for any decoration off the attack. I have one over here, so I came over here and there and said, No, I'm gonna make the display here, and I'm gonna give it the property off block and I'll take a look at that now all of a sudden, the element is now on its own separate line because we have changed the default display value from in line to block. Now you can see the A tag is all on its own. So these are the two major values for your display for about a block and in line. However, there is even a more popular and a more powerful value more powerful in the block or inland . And Velu is the in line block value. What? The online block valid doors is that it basically allows you to treat an inland element as a block element and still be able to apply properties applicable to block elements on that in line element. What am I talking about here? Exactly. Margins as an example. You cannot apply a margin top or a margin bottom to an in line element. In fact, let's take a look at this. I'm gonna refers to Page Okay. No, let me use the a Tiki as an example. If I came over here and I said, you know what? I want to give this a tax in space. So I look for my a tag over here Now. If I came in here and said, you know, margin, I'm gonna go with in margin off 20 pixels. Remember that This means I'm adding 20 pixels to the top, right bottom and left hand corners over the A tag. We can see quite a right that the margin between the A tag is increasing and this is from left to light. However, for the distance between the A tag and what's above it and blow it, it's still the same. It doesn't change, no matter what. You can see that even though I'm increasing the margin, nothing changed. All that changes is this turns from the left to the right, but the distance between the A tag and what's above it and below it's still the same because you cannot apply a margin top and imagine bottom to your in light elements. Okay, now, what if I did this? What if I came in here and said, You know what? Okay. I'm gonna make you display. I'm gonna give you the display value off in line block. Okay. Now it is now acting both as an in line element and as a block element at the same time, it is in line because it's it is still on the same line as the rest of the text, so it's acting as an Ellen element of that way. However, if I came back and I said Margin now I am going to give you the margin off 20 pixels. Take a look of that now margin top and margin bottom and now being applied because margin, top and margin bottom can be applied to block elements. So this is how it is now, acting both as an inland element and as a block element. It's acting as an inland element because it is still on the same land as the other text. But it's also acting as a block. Ellen, because I can now apply, develops off Martin Top. Imagine bottom to the element that is the power off the eonline block value. So that's it for the display property and develops off block in line and inland block. Thank you so much for watching video. Let's move on to the very next project right now. 35. Project 3 - Changing the size of the Logo: Well, hello. Welcome to Project number three. And and this footage, we're going to take a look at how we can increase the size off our what Press logo, actually even decrease the size of the logo dependent on our the scenario. Now, this is another very popular task of request amongst WORDPRESS users. They typically want to find out how they can increase the size of the logo, and we're going to be using a different theme this time around. We're no longer using the 2016 theme, and the thing we're gonna be using here is the sheriff Lit Famous is actually one of the most popular what press themes. And the chances are you may have come a course this thing before. So what I want you to do is to go ahead and install the theme it is by thin Ill. It's free. So just go to your back and and install the theme. And then let's go ahead and try to upload a logo to the front end So you will find attached to this video. You will find the logo that I'm going to use. Its a CSS logo are feel free to use any other logo if you want to. So let's go down Nature parents. And then let's go to customize. And from here I am good to click on site identity. And now over here, I'm gonna click on select logo and I'm going to choose CSS and that Select that. Let's make sure everything here is cropped. So I'm going to extend the coop in. It is all the way up image. Let's go ahead, save and publish and we are done. Let's go to the front and and now you can see how small the logo is. Very, very small. All right, now, how can we change the size? How can we make it big up? The very first thing you need to understand here is that you actually not trying to change the height of the with off the logo itself off the image because the images already big enough, what you should be targeting is the container or the Dev that contains two logo. Typically on what person themes. Many of them have the containers that contended local, though they're gonna have, like, a set with or heights. So basically, the develop old say, the logo, the consider continued. His logo should not have a height more than, say, 100 pixels or 100 pixels. So your job is to locate the container that contains the logo and then try to find if it has any height or with properties set for it. So let's do this. I'm going to right click on the logo, inspected. Firebug. So what do we have it now? We have the image. This is the actual image itself, and you don't want to look in here. You're looking at the dips that contain the logo. Let's go old way up here and say, Well, behalf, we have a day of class of container, and when I hover over that, you can see what the container actually contains. It contains the logo, and it also contains the main menu to the light. Okay, so we need to be a bit more specific. What else do we have now? We have a Dave over here for the class off nav by Hedda and Responsive logo. Okay, now we're getting somewhere, so let's click on that and let's look over here to the right and see if we have any with or height properties set that's keep scrolling and scrolling school and school in. Now we do have a float left. Very, very interesting. We'll talk about this next, but overall, we don't have any with or height set to this particular death. So it must be the very next day below it, which is going to be the day for the class off knave bar planned. So let's click in there. And now over here to the light. Let's see what we have and presto! Over here we have a height off 7 to 6 pixels. We've got to you, We got you. So what I'm gonna do right now is just a click on 76 Dan start to increase. The local gets bigger. It's getting bigger and bigger and bigger and bigger and bigger, and of it so big. So that's basically all you would need to do in such a scenario. Just look for the the day that contains logo and then try to find if it has any height. All with properties said in this case, would you have a height off 76 pixels? So all you would need to do would be to increase the size. So let's just bring this down a bit. To 100 pixels and up. Get way too excited. So 100 pixels. I think it's fine. The Logano looks a bit more presentable. So this is exactly how you change the the size off your WordPress logo. And if for some reason you're happy with the 76 pixels right here and you feel you know what actually like, maybe that say it's too big for you. You want something smaller? Well, you can always just make this smaller and smaller and smaller. And, uh, yeah, that's a very nice ah size of a logo right there anyways, intimate in a cell I once again, that's how you would change the size off your logo. All right, Now let's talk about another property, which is going to be the floating property, which we briefly are saw a few minutes ago. The nabob around here, the same Dave that contains the logo has a floating property here. Off left. As you can see, I now its parent, Dave, over here with the class off NAFTA. Hedda, let's actually see that one also has a floating property off left, and this is What? Actually, this is the main element we're interested in because it's the parents are element. Typically, whenever you're dealing with the floating property, you want to target the actual our parent element north of the L, not the elements beneath them. When I mean here is over here, This container, this Dave continue right now contains both the logo and it has the main menu. The reason why the logo is stationed here on the left and the many by the station on the light is because the floating committee has been set to them. The logo was given a day's continuing. The logo was given a floating value off left, while the many was given a floating value off light. Let's take a look. We have the full left were. But if I click on the now element over here, you can see we have a floating value here off lights. Now, take a look at this. If I decided to change the values from left over here to light and then for the enough element, I want to be be funny. I'm gonna come in here and say Floats. I'll take you through the left. I'll take a look at that. Basically, the logo and the main menu have swapped places because you've stopped the values off their floating properties. So that's what the floating property does. You're basically saying, OK, CSS But the float left And what did you push these elements all the way to the edge. To the left edge. Off it off. It's a container. And then with the floating white, push this element all the way to the light side off its container container being the key word here, I understand that when you're floating an element, you're floating the element based on the with off its container. Very, very important again. What is the continent that contains the logo and the main menu? It is this continent. Vita called this divided as the class of contain A This is the main guy right here. And if you click on that Dave over here, it has a with off what, 1170 pixels. If we came over here and made his 1500 pixels now you can see the logo and amendment you keep stretching to the left and right, respectively. And if you keep increasing the with you can see they keep going. They keep going. Keep going. They keep going. So once again, when you're floating an element where it will land, the edge where it will land will depend on how wide its container is. That is what the floating purported those, and you should also realize that you can Onley, Onley, float block elements. You cannot float in line elements so you can float Dave's. You can floats, I h warns its Jews and other block elements like that you cannot float and a tag, which is which is Ah, you know Ah and inland element. You can float a span element and in line elements like that. So that's what the floating property door's. It allows you to push elements all the way to the left or right off their containers. So that's it. Thank you so much for watching the video. If you have any questions, as always, feel free to reach out to me. Thank you so much for watching and I will see you in the next class 36. Project 4 - Styling the List Items: All right. Welcome to predict number four, where we're going to learn how begin style are least elements. Now, by default. What press has this default styling for your lists where you have, like, a, uh, a daughter or a black circle or whatever. You wanna call this next to the lists? And some people like these other people don't other people prefer to put their own touch. So we're gonna learn how it can use a different bag on image and apply that to our list elements. So what do I have over here? First of all, I am using a different theme. And the theme amusing here is the market theme. So you can go ahead and install the theme, or or you can use another theme. You don't have to use other thing I'm using. I'm pretty sure you will still be able to achieve what I am doing on another theme as long as long as the defaults Talon is these arson kind of stem that you have with the art market theme. Now I do have this image. I'm going to use this to represent my list elements. You will find it in the resources link. Okay, so you can go ahead. And now that or you can go online, use the Nike sign or any other sign that you're more comfortable with again. You don't have to use what I'm using. OK, you can use different signs and you can use a different theme. No harm done. All right. What I'm gonna do, first of all, is to copy the u R l just like we did when we tackle the bag. When images. I'm gonna copy that. I'm going to pace that in a safe location and all. Kate, limit close this. Let me close that. And now let's take a look at what we have, right. For instance, first, let's locate our list Someone to inspect element of firebug. And you can see we have a u l. And you can also notice the margins that already been applied. You can see the yellow Ah, caller I d. You can see they wanted it left. It's quite a lot that tells us that a lot of margin has been applied to the left, and we also have so much in applied at the bottom as well. So presence was I'm gonna click on the U L and you will notice that there is a property a called the least style. And it has three different values we have outside known and disk. These three values represent three different properties all at once. The very 1st 1 here represents the least style type which right now is set to the circle with the DOT We have the list style position which is set to outside. And of course, we also have the disc value representing the least style image. You don't need any of that. In effect, you can just go ahead and click on the L I elements as well. And you will notice that it also has inherited the same fellas from its U L R parent element. So what I'm gonna do right now is I am going to specifically target the ally elements in sight off page content because do not forget that you're we sent post right here. What you have over here to the sidebar also l eyes as well. We don't want to take it. Those ones, we only want to take it specifically. What we've got are inside our page content. So what? I'm gonna do is to take a look at this. We have primary the Dave off the idea family. We have to Dave with the i d off secondary. So I am going to target the l IES specifically inside our primary, Dave. So I'm gonna go ahead and say add rule hashtag. And then I'm going to say primary time, we and then I'm going to say l I and the very first thing I'm gonna do is I'm gonna say at least style, and I am going to say none. All right, So what this does is I'm basically clearing out any default values or any default properties that have been set for the at least elements none. Next thing I'm gonna do is I'm going to say background. Ah, image, bacon image. And now you are l double coats. Let's paste link right there. And I am going to go ahead and remove the unnecessary domain right here so that it starts on fourth slash WP content. Okay, so take a look at that. Now you can see the monkey head already appearing. So what I'm gonna do next is to apply the background repeat property and I would give it the value of no repeat. Okay, we can begin to see the monkey taking shape. Next I'm gonna do is I'm going to set a background sighs. All right, let's try background size, and I am going to go straight with contain. And now that is so much better. As you can see now, this is beginning to make sense. However, notice that the Bagram images overlap in some off the text, right? So what I can do in this case is to give the airline elements some padding so that this will push the actual text away to the light from the background image. So I'm gonna come in here and I'm going to say it pad in left and let's say 20 pixels. Okay, that's not enough. Let's keep going. Okay. Now, this looks so much better. So 50 pixels. However, the size still is a bit big, as you can see. So rather than saying contain, we can use percentage values as well. I am not sure if I talked about this before, but beyond content and cover, you can also apply a percentage. Values of the present value in this case would just be you are given the height and width off a bag on image relative to the container containing the actual element to a tree, our plane in the background image to. So just go ahead here and say, Back when size, Let's say 10% hope that's big. Let's bring this down a little bit, but this down. But this down. And that's what we have. Is this OK? 4% seems to be fine. Kind of like that. Yep. Yep, yep. I think represents fine. So in this case, right now, we have 4% in an auto. But this means is 4% has been set for the with. While the height has been given a value off orders are basically Caesar's will. Just adjust the height of the background image relative to the size of the container. That's what is going to do. All right, Awesome. But we have way too much space now with the pattern so we can bring this back. 2 40 mutated six pixels. But notice that Ah, the bag on image doesn't really align with the text. It seems to be ah pleased above the text. So we can do is to bring in the background position, background position, property back one position and I can now say left and the 40 will be center. So now that looks way better. You can apply all the positions like your left center center. You can apply the bottom where it will push the background image to the bottom off the container. We have rights as well. We have top right against the background. Image has been set all the way to the right. And of course, we have left left. And then, of course, for the second value Wait. Now you can change that as well to bottom top dependent or whatever it is that you're trying to. Ah, Chief, but left center works for me right here. So now you can see we have our list style, an element looking way better than it did or which No, that's what we did hear. Once the Gator was we first of all, cleared the initial properties and the values by ST list style. When we said our none notice, though, that Firefox or fire book automatically has changed their known to outside none. None. Don't worry about it. Okay. If you said known only as the volatile this style, it will still work. Don't worry about the outside. None on thin you don't have. The body is off about that. So we said, Let's tell to non that cleared the default values and properties. Next we brought in our bag on image. It was repeating. So we said, OK, do not repeat. Butt was too big. So we give it a bag on size or for presented an auto. And then we added some pat into the left so that the text so the background image will not develop the text. And then we also finally gave it a bag in position. Off left, senators slightly adjust the position off the background image. So that's it. And, uh, if you wanted to get rid off the spacing, the margins that we have over here, you can see it's pushed way too much to the right. It is because right now we can target the u. L. So let's go back primary. We have the euro right here so you can see all that yellow space representing the margins so we can just say, come over here and say primary and then you l and an against a margin from the left. But I just said that to zero. And now it has pushed the elements, the list elements all the way to the left hand corner off the container. So that's how you would remove. The onus is unnecessary. Imagine if you wanted to do so. All right, so that's it. Thank you so much for watching the video. If you have any questions, of course. Feel free to reach out to me thinking about watching, and I will see you next class. 37. Exercise 4: all right. It is time for a quick exercise. And I want you to try and turn what we currently have over here with a list items to look exactly like what we have over here. Pay particular attention to the second group off list items. We now have them all on the same liable four of them on the same line, with the very last one dropping onto the second line. Note that it is impossible to replicate the exact same display with the very first group Off list elements, because they contain very long are pieces of text. So you can cram all of these onto one single line. But the second group, right? He has shot texts week and group. It was for them all onto the same lines. I want you to try as much as possible toe add setting properties with certain values to make your second group off list elements look like what we have over here. I will give you a few hints. Overall, you're going to need about four different properties, actually, three off them. Three of the properties rule gets it to look kind of like what we have over here the the last one will create some space between the very first element over here and the second element. So I want you to try as much as possible to think about the full properties. You're going to need to get this looking like this. And I am going to reveal the answer right now so you can pause the video, try and solve the puzzle with little or Cui's. And then he came from the video O. K. So I'm going to assume that you've tried and if you're successful, kudos to you. If not, Well, here is the solution. All right, So first things first, I'm going to refresh this page and we're back to where we were initially. So we know that least elements by default are block elements. But we can turn them to in line elements by simply using either the display buys into the strip poverty and having either the inland block value or the value off in line. Now I am going to use the value off in line block instead, Salomon being and fire book over here and not from here. What I'm gonna do is to simply say display and then I'm going to say in line block No, que. Now we can see that the size off our monkey has reduced its no longer visible. So another force to make it visible will have to change the background size. And if you spend some time filled in missing along with the percentage values, you may not be able to get anywhere, however, a simple, contained value. We'll get you to where you're supposed to be. So right now we have the value off contained. But we also want to create some space between the background image and the text. So we have to increase our pied in left. All right, I'm going to increase is all the way to, let's say, 45 pixels. And now you can see we now have four off the elements of the same line, while the 51 has jobs to the second line. But you can see that the very first list and the second and the last a list element are bumping up next to each other so I can simply bring in a margin top right here, or you can even use imagine bottom dependent you can. Today's minute imagines of a margin bottom. So overhand was going to say five pixels. And there you go. So that's basically all you would need to do to get your list elements looking like what we currently have. So that's it. If you have any questions, feel free to reach out to me. Thank you so much fortune and let's move on to the next class. 38. Project 5 - Adjusting the Hover Effects: Oh, I welcome to predict number five. We're going to learn how to style the hover effects off our buttons and links that we have on our what press website. Now. Currently, I am working with the 20 minutes theme. It is Beisel themes. Nine. So go ahead and download the theme. Quit a child him for it as well activated. And you can also create some posts. If you don't have any posts on your website, just create some sample posts and ah, you should have a similar structural on your home page. Basically, all I'm after over here is to try and show you how you can style bottoms and links like, what do you have over here with the Widmore link? So right now what we have is it's currently and red color. But then when I over my mouth over what you can see it now tones into black, the text becomes black. So somewhere on our what press our theme, we do have a CSS styling that say's whenever the mouse hovers over this link tone the red text color to black. OK, that's what we call the hover effect and CSS so in other force to find we have This styling is we will have to, as usual. Right click inspected. Fire Bog. Now I own Firefox. Okay, The very first I'll have to do if I hate to trace the actual element itself. So we do have the a tag over here. He consider text with more. It is inside off a span element with the class of read more so it is currently adequately clicked on the A tag. Now, over here, what I'm gonna do is where you have style. There's a drop down apple. I'm going to click on it and then I'm going to click on HOA Va. Right. There are three basic are states for elements that you haven't. CIA says the hover state, the active state, they focused it. And you also have something else called the State State. Now we know, likely who would you be working with the over state more than the other three. So I'm just gonna focus on the estate. So what you want to do is to click on the hover state. And now when you click outside, you will see the declaration of ahead. It's a it's a colon. Ho over. So this is the styling that produces the black color. Whenever the mouse hovers over the read more are botany conceits online. 53 off the main style does sisters filed. All right, so this is on Firefox. And if your own Koum Koum is slightly Triki Well, not exactly tricky, but it's different basically over you. If you're using the default web inspector, right click by click on a bit more element. Inspect. Now what you want to do is to click again on the A tag. And now over here, to the right, you will see Hoff. Okay, just click on the hall of and now you will see the four main states I talked about. Just click on the hover State and now you will see the style and a cola Khobar Color black . So that's basically how you go about That's with Google Chrome. All right, but let's go back to Firefox And, uh, what exactly we have over here, we have black. OK, now what we can do is we can decide to live the color as black all let's just go ahead and change the color to white. So hashtag f f f and now you can see that the weed more bottom is no is no longer there because we can see it. The white cloth. The text has blended in with the white color off the background, so I can now decide to introduce a background colors well off black 000 Now you can see we have the white text call over the black background, but we also need some pattern because the Texas went up next to its borders. So let's add some pattern padding off. Let's say 10 pixels. Okay, that's no bad, right? That's that's okay. 10 pixels. Now I noticed that the edges off the our border there, there straight. They're not curved. So if you want to create the curved effect, you will have to introduce a new property called the border radios. Now, I know we haven't explicitly declared the border parvati yet, but remember that in CSS, every single element that you have has already has a border implicitly apply to it. So unless unless you intend to change, the are with off the border or the thickness, maybe on the Children call of the borders well on the border style that is when you introduced the Porta potty. However, if all you want to do is to just a change is just change the up the border radios the edge is whether you want to make the eighties cough. You mean it? You will need to use the border radios, properties That's gonna be border. That's radius in after me, I can say 10 pixels, and now you can see that the border as the four corners of the borders, have now curved. That's basically what the Bader videos property does for you. You can also decide to add an additional value again off, say, five pixels. Now what this does when you add to validate your but I videos. What happens is the very first value, which in this case is 10 pixels, will affect the top left corner and the bottom right corner. So if I communion now and begin to increase this watch the top left corner and the bottom right corner, they begin to cover even more and more and more, while the second, the second volunteer, will affect the top right corner and the bottom left corner. All right, saving increased that. You can see how that works, and you can create some really interest in our shapes using both properties. However, if you when you had only warn value in here, it basically affects all four sites at the same time. So that is the border radios property by day, and this is basically how you will still the hover if it's off your buttons. So if I click outside, come back in here and remove the hover effect, it goes back to read. But when at most only right now you can see what now happens. So this is the hover effect that we've just just that using CSS. So that's it. Join me in the next class way. I will show you how you can actually make this over effect even more our entice and we can quit some really cool effects by using CSS animations. So Germany, the next class bell will take a look at basic CSS animations to enhance the way your hover effects are work on your boat. Press clips? I think so. But fortune I will see you then 39. Introduction to Basic CSS Animation: Oh, right. In the last class, we saw how we could style the read more link on our website by simply adding some effects. Whenever anyone hovers over the button with their mouths, we saw how it could add the background. Coehlo add. The call of the Texas will change it from red to white on also, we added some padding and we also talked about a new property called the Border Videos Property. So we saw how you could apply all of that whenever anyone hovers over a link on our website . Now I want to talk about some animation and with a few lines off CSS code, you can actually create some pretty interesting effects on your website. But before I do that, I wanted to point out this kind of styling and it's what we have Over here. We have the class of reading more and then with the grated on symbol, and then we have the A tag. Whenever you see this and CSS, what this means is that would be a target in every a element that is directly inside, often element with the class over it More. In other words, we're targeting direct Children direct chillin that I ate tags under an element that has a class of with more. And this is the kind of exact kind of scenario what I get? Same. But you have your SPAN elements that has a crossover animal, and then immediately you now have the A tag. Had it been we had Hispanic class of read more and then maybe inside we had an eight tag and then instead of up it's like we now have the attack. This would not work. OK, so it's important, you understand. Ah, this kind off styling whenever you sit in CSS. So we can pretty much use this kind off target in to achieve what we want to achieve. Right now, you can see I've added the hover effect at the very end. Enough ended my bag and Coehlo, But the radios call on and Patton. Now I want to introduce you to another property called the Opacity Property. Okay. And a pasta simply determines how transparent the background is going to be in it. Except values between zero and 10 minutes is going to be completely transparent. So when this goes right now, you don't see anything while worn, which is the default value means it is not transplant at all. So anything between zero and one will determine how transparent the background color is. So in this case, let's go with our 0.7 so you can see it's ah, kind of transparent a little bit. Elicits not what is. It does have some transparency of list. All right, now let's introduce yet and norther property. And this time it's going to be the transition dilation, property transition dilation, and I'm going to make this two seconds a light. What this does is it basically tells CSS that all of these properties on their brothers, the way applying, make sure it takes two seconds before they are all applied completely. So now if I hover over the window button over here, you can now see the transition effective idea. The the hover effects don't take effect immediately like before. Like let me just go back Any move this value, okay, Right now, you can see the effects immediately applied whenever we over over the with more button. But now that we've added the transition duration Potsie, it's will delay the time it takes for all the purpose is to be applied. So let's go back again. Two seconds. So once again, you can see Right now it takes two seconds before all the effects are applied. This is the very first taste Off seasons animations. Now we can actually apply some pretty cool effects, like make the element bigger or even rotate the element. However, such effects can only be applied on a block elements you can apply them on in line elements so in other to achieve that. Like if I come in here right now and say, uh, let's say transform like transform and then say, uh, rotates. And then inside I say 45 degrees. Okay, piss and toe. Now this would be the declaration to rotate the element by 45 degrees. Now, if I hover over the window, but nothing happens, that's because it's still an in line element. So if I came in here and said display and it's make it an in line block, all right now you can see when I hover over the body cannot see. It's now rotating by 45 degrees, as you can see, So basically, this is the way you would rotate your are elements. You have the transform property, and then inside you'll have the semi property polemical into some property off rotates, and an inside of a teacher will now have the actual value off the rotation. In this case, right now, it except degrees. So you can add 45 degrees for the six degrees, 90 degrees, 180 degrees and so on and so forth and norther effect that you can do is the our skill effect. So other than will take, you can say scale and I cannot come in and say 1.2. So in this case, right now, we're making the element bigger. Second right, how it now expands like it goes bigger by 1.2. Let's even make this a bit more obvious. Let's go to 3.2. Now you can see how it really really works. That's 3.2 idea. So these are some of the examples off the kinds of animations that you can apply on your CSS elements know that it's not just the A tags that you can apply this you can actually pledges to your image tags as well. Slum. Just refresh my page and let's try to target the images that we have over here. So it numbers right. Click inspected. Fire bog. Now right in here. I can apply. I can apply the transformer parties to the image directly. And the reason is because, remember, the image tags are in line elements. There is already a declaration and my theme that says display block. Okay. So that as they have been taken, care if I don't need to add the display property off bloke or inland look anymore. So from here, right now, I can simply come in here and say I want to add a hover effect so I can come in here now and say, What do we have in here? We have the day of class off thumb box. Okay. So, yeah, let's use debt. We have that. They've classic idea. So let's say thumb box and then Ah, I am G. And now in here, I can say Oh, I'm sorry. I don't have the over effects over. All right, So now I can say transform. And then I can say it will takes. And then we can say 90 degrees pres and her. And now let us see how that would work, and now you can see that is 90 degrees of idea. But of course it's not attractive because it happens. Favorite quickly. So we're going to introduce the hover effect. Let's do that. That's had the over effective it. I'm sorry. The transition effects to incision delusion gets in ahead of myself. Transition to Asian Let's go B two seconds again. Now take a look at that. Let's actually make this 180 degrees so that it makes a fool. Ah, it turns upside down, actually, 1 80 degrees. So now you can see what we're doing with our images. There's 180 degrees come down here. That's 180 degrees, 180 degrees and so on and so forth. And we can also try the scale. Oh, it's let's try skill. And then in here let's make this about 1.5, so this actually becomes bigger. So now you can see this is the scaling effects that zooms in to the image whenever you apply this scale effect to your are elements. As you can see, this doesn't seem to be working for some reason, but anyway, that's basically the skill. In effect, you can actually make the images smaller this week you'd be zooming out. So any value less done. One in this case, like 10.5, he basically zooming out. As you can see right now, that's zooming out from out to zoom out so you can do some really cool effects. With just a few lines off school, you can have some pretty cool CSS animations. So that's basically a very brief introduction to CSS animations. And if you're interested in learning more about CSS animations, I actually do have a course right way. I show you how you can create fantastic effects on your upside. Using sensors on the missions, I will put the link for a coupon so you can get the cost for just $15. I will put a group of the coupon linking the resources. He can check that out if you're interested. Otherwise, thank you so much for watching on. Of course, if you have any questions, as always, feel free to reach out to me. Thank you so much for watching once again and I will see you in the next class 40. The !important Tag: one last thing to talk about before I've under the course is the use off the important tag . Now, if you recall, I think this was in the second or thought video where we had a quick win. I should. You have to change the background color off the 2016 theme to lead. I used the important tag at the end off the property declaration. No, the important tag should only be used as a last resort. Typically, whenever you're trying to change the property, develop the property of an element preferably, you should try to apply the laws off the CSS specificity. Try to look for ideas and classes that you can combine with that element to change its property to a different value. When you've tried all of that and nothing works, then you can try applying the important tag. The important tag Oval rules and laws offsets a specific city. It's basically you saying I don't care about whatever laws or rules out there. I want this thing done and I want to don't now. Okay, that's what the important tag basically does. The problem door with applying the important tag is when you apply that tag to the property off particular elements. You may farther down to what you may want to change that same property to a different value in another instance, in another page of Maybe, you know, send but specifically. But because you've already applied you and used the important tag before, that same value that he used in the attack for will always or provide any new follows that you don't want to put put out there. So that's kind of like the problem with using the important tag. It's very, very. It's basically you using a hammer on a nail. You're basically knocking that valued down permanently. You're not going to change that ever again. OK, so to a large extent, try to avoid using it. But again, if you've tried, you know, applying your I DS and classes and those don't look, then you can try using the important tackle cape. So let's take a look at this and the real world scenario. Let's say I wanted to change the Culo off recent posts overhit lead that he considers its in black. I could come over here inspected, firebug and what do I have you? I have my H three, okay? And it has a class off which a title, and I can see over here that we do have a color off. 363636 Already specified for the H three with the class off which a title. However, this same age to be element also gets its margin from another declaration over here that uses the Dave with the I D off sidebar and then h one h two h three. Okay, margin. If I can come here right now and say call off, I can come in and say color equals red right? That is not going to change anything I can see right now. Even the red has been put in a dash because the age to be with the class of with the title is being more specific. Then the David, the idea of sidebar and then age to be Over here, it's been more specific. All right, so the ideal way for me to change this would be to simply coming here right now, and I can then combine my sidebar second say sidebar and then I can say h three daughter, which a title, right? And then I can give it a color off red, and now you can see it's turned to them because I have now combined the top parent averages the David the idea off sidebar and enough also combining component with the class off the H two b element whose color I want to change to bet. Okay, this would be the ideal way to do this, but let's say in a sentence. And now you're where something else happened. Or maybe there's some other classes or some other ideas out there and you can't quite figure out exactly what is happening. But what you can do is to come over here where you have your column had been canceled and just still simply say important. And there you go and automatically. Right now, you can see that the red has taken precedence over the more specifically the declaration of a hair off 363636 So, again, I would recommend that you don't use the important hag. Try to avoid using it. Okay, Onley, use it as a last resort. Only use it when all the methods have filled. Okay. And be careful whenever you're applying the important tag. If you're going to apply. It applied to a very specific element. You don't know. Play it in this kind of us in every way. You have your sidebar with the H one with the H two h two the H five n. H six. No. You basically want to do something like this since that you can what you want to say The Dev with the ideal side bar and then h three. So now you're separating the H two weeks from the H warns from the H twos from the age for a 76 year old tickets in this specific instance of an industry that is inside your sidebar . Okay, so if you have any questions about this I know I know that particularly for you, who isn't able developer. He didn't have that much expense with stimulants. CSS. I do know that this can be a bit tricky, can be confusing. So, please, if you have any issues, if you have any concept of any questions something confused about, always feel free to reach out to me and ask. Okay, so thank you so much for watching the video. And as always, I will see you in the next class. 41. Thank You: congratulations. You've come to the end of the course and I wanted to thank you, especially for finishing the course. And I hope I really hope that you have learned in often discourse to be able to make simple design changes to your WordPress website. And I have two things to ask or few. One is if you have any recommendations or if you feel they're setting topics I did not cover in this course. And you think I should have actually don't so you can reach out to me and please let me know. I'm always trying to figure out how I can improve on my courses. So if you feel that is a topic that I should cover, please do, let me know. And secondly, if you've been happy with the course and you feel you've gained, you got your money's worth, I would like to politely ask that you leave a review, a written review and that will be very, very important. And I would really, really appreciate that. So you will find in the very next video, not video intellectual actually looks off links to different websites and topics where you can read more about HTML and CSS. If you are interested in for Kenyon, knowledge of both are important topic. So once again, I want to thank you so much for being a great student and thank you so much. And good luck in your eight stimulant sisters, Johnny, and I'll talk to you some other time, I guess. 42. Working with the Gutenberg Page Builder: Alright, so welcome to this very special lesson where I'm going to show you how you can apply your CSS code while working with the Gutenberg page buildup. Now, over here I do have a post visits in a Buddhist temple and it is with, of course they couldn't book page builder. So what you're gonna notice is that whenever you click on any particular block, in this case, why it now I've clicked on the paragraph block. What will happen is that overhead to the light, you will see the Advanced tab. This is of course with the Gutenberg page builder. You click on Advanced. And then down here you will see the additional CSS classes box where you can add a class for this particular block. So in this case right now for example, I can give the class special text as an example, note that you don't have to add the dot. Just add the name of the class itself. So let's say for example, I wanted to change all the text in here to read. I'm gonna give this a class of special text. Okay, I'm going to update. And now what will happen is if I go to the backend proper, come down, HER parents go to customize and then I go to additional CSS. I can come in here right now and say dots, special texts. And then I'm going to give this the property of color and then the value of red. Alright, I'm going to publish my change. And now if I was to go back in here and I was to view this particular texts or this particular post. Let's go to prevent new tab. And if I scroll down here, now you can see that the text is now in red because of course we added the class and Gutenberg page builder. And then we went to additional options to now add to the actual code itself. So this is how you can add CSS classes to your elements with the Gutenberg page buildup. And it's not just a paragraph block. You can also click on the image block in here as well. You scroll down here. And of course you will have under Advanced, you'll have the additional CSS class box. That's how you can add our classes. Now, if you want to add IDs to your blocks, what you can do is you can click on the block itself and invited. You will have the more options button you click in day. And now you will see edit as HTML. You click in there. And let's say for example, right now I wanted to add a div with an ID. So say div id equals, let's say special, special block as an example, right? When I come in here, close the open-end, Dave, and then down here, of course, don't ever forget to closure devs. I'm going to close the div. Now the thing is, if I click outside, you will see this message telling you that this block contains unexpected or invalid content. Of what you're gonna do is you can click on the three buttons right next in here for more options. And then simply click on convert to HTML. You click in there. And now you will have the block been displayed with the HTML code itself. When you click inside the block, again, you will now have the Preview button that will now show you the code. All that I show you the blocks contents are visually so you can go back to the code editor by table and click on HTML. Or you can go to the visual editor by clicking on preview. Note that you also have the option of adding custom HTML blocks as well with the Gutenberg Page Builder, you simply come all the way down here to a, you have your widgets section. And you will see the custom HTML block wider you click in there. And then you can of course, begin to add your custom HTML code with all your IDs and classes. So that's pretty much how you can navigate the Gutenberg page builder with the video custom HTML code and CSS code. Of course, if you have any questions about this, of course, please do lemon. I'm more than happy to answer your questions. Thank you for watching.