CSS - The Complete CSS Course - Flexbox / CSS Grid | George Lomidze | Skillshare

CSS - The Complete CSS Course - Flexbox / CSS Grid

George Lomidze, Developer / Designer / Online Teacher

CSS - The Complete CSS Course - Flexbox / CSS Grid

George Lomidze, Developer / Designer / Online Teacher

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
88 Lessons (11h 32m)
    • 1. Promo

    • 2. Introduction

    • 3. Setup

    • 4. What is CSS

    • 5. How to write CSS

    • 6. HTML Element Tree

    • 7. CSS Selectors

    • 8. CSS Combinators

    • 9. Colors

    • 10. Inheritance

    • 11. Text Formatting - Part 1

    • 12. Text Formatting - Part 2

    • 13. Box Model

    • 14. Pseudo Clsses - Part 1

    • 15. Pseudo Clsses Part 2

    • 16. Pseudo Elements

    • 17. Measurement Units - Part 1

    • 18. Measurement Units - Part 2

    • 19. Positions - Part 1

    • 20. Positions - Part 2

    • 21. Overflow

    • 22. Floats

    • 23. Backgrounds - Part 1

    • 24. Backgrounds - Part 2

    • 25. Gradients

    • 26. Shadows

    • 27. Transitions

    • 28. Transforms - Part 1

    • 29. Transforms - Part 2

    • 30. Animations - Part 1

    • 31. Animations - Part 2

    • 32. Introduction

    • 33. Flex Container Properties

    • 34. Flex Item Properties

    • 35. Project - Grand Hotel - Overview

    • 36. Create HTML Markup for Sidebar

    • 37. Add CSS to Sidebar

    • 38. Create HTML Markup for Navigation

    • 39. Add CSS to Navigation - Part 1

    • 40. Add CSS to Navigation - Part 2

    • 41. Create Click Event

    • 42. Create HTML Markup for Header

    • 43. Add CSS to Header

    • 44. Create HTML Markup for About US Section

    • 45. Add CSS to About Us Section - Part 1

    • 46. Add CSS to About Us Section - Part 2

    • 47. Create HTML Markup for Rooms Section

    • 48. Add CSS to Rooms Section

    • 49. Create HTML Markup for Customers Section

    • 50. Add CSS to Customers Section

    • 51. Create HTML Markup for Footer

    • 52. Add CSS to Footer

    • 53. Make Project Responsive - Part 1

    • 54. Make Grand Hotel Web page Responsive - Part 2

    • 55. Make Grand Hotel Web page Responsive Part 3

    • 56. CSS Grid Introduction

    • 57. Setup

    • 58. How to Create Grid

    • 59. Fractional Unit

    • 60. How to Position Grid Items

    • 61. Naming Grid Items - Part 1

    • 62. Naming Grid Items - Part 2

    • 63. Naming Grid Areas

    • 64. Explicit and Implicit Grid

    • 65. Aligning Grid Items

    • 66. Aligning Grid Tracks

    • 67. max-content, min-content, minmax()

    • 68. auto-fill and auto-fit

    • 69. Project - Furniture Store - Overview

    • 70. Create HTML Markup for Navigation(1)

    • 71. Add CSS to Navigation(1)

    • 72. Navbar Search Input

    • 73. Create HTML Markup for Navigation(2)

    • 74. Add CSS to Navigation(2)

    • 75. Create the Navigation Dropdown

    • 76. Create HTML Markup for Banner

    • 77. Add CSS to Banner

    • 78. Slideshow - Part 1

    • 79. Slideshow - Part 2

    • 80. Create and Customize the Day Offer Section

    • 81. Create HTML Markup for Bestselling Furniture Section

    • 82. Add CSS to Bestselling Furniture Section

    • 83. Gallery

    • 84. Contact and Footer

    • 85. Create HTML Markup for Modal Box

    • 86. Add CSS to Modal Box - Part 1

    • 87. Add CSS to Modal Box - Part 2

    • 88. Make Project Responsive

13 students are watching this class
  • --
  • 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

The Complete CSS Guide on Skillshare

If you want to learn how to create modern, beautiful and real-world websites using just pure CSS, then this is the right course for you.


1. CSS Basics

2. Advanced CSS

3. Flexbox

4. Project 1 - "Grand Hotel" (Based on Flexbox)

5. CSS Grid

6. Project 2 - "Furniture Website" (Based on CSS Grid)

The course consists of several sections. You will start with CSS essentials, in which you will meet some basic topics. Then after finishing the basic part, you will move on to advanced CSS, where you will be able to learn advanced things in CSS, such as backgrounds, transitions, transforms, animations, shadows and much more.

Advanced CSS section will be followed by the CSS Flexbox part, in which you will learn about how to create the layout of your web page using CSS Flexbox. After the Flexbox section, we will build our first project - "Grand Hotel". It will be a real-world, modern-looking and beautiful web page about the hotel. The layout of this project will be fully created using CSS Flexbox.

Next, you will move on to CSS Grid. In which you will learn about this new powerful layout module. And lastly, we will build another big project based on CSS Grid.

Each project built throughout the course will be fully responsive to all screen devices.

Throughout the course, you will meet detailed explanations about how bootstrap works, also, you will introduce to modern practices and solutions.

Get fast and friendly support from the instructor 24/7.


Meet Your Teacher

Teacher Profile Image

George Lomidze

Developer / Designer / Online Teacher



I'm George, a full-stack Web Developer / Designer, Co-Founder of 'Code And Create' and an author of several classes on Skillshare.

I'm excited that I'm here and have a chance to help people to learn one of the most interesting and powerful fields today.

I decided to share my knowledge and experience with the world and that's the main reason why I'm here at Skillshare.

I'm specialized in the following technologies: HTML, CSS, SASS, Bootstrap, JavaScript, jQuery, React, React Native, NodeJS, Git, and more...

Looking forward to seeing you inside my classes and help you to become a professional web developer.

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.

Your creative journey starts here.

  • Unlimited access to every class
  • Supportive online creative community
  • Learn offline with Skillshare’s app

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 : 2. Introduction: if you want to learn how to create real world, modern and beautiful websites that you've come to right place. Welcome to CSS. Put Come master in CSS Hi, I'm George and this is Russia, where the creators and designers of this course with several years of experience in web development, Web design and teaching as well courses project based because we think that creating projects is the best way to learn CSS, which is one of the most popular and widely used technology today. So if it's your first steps in the development of design or give you all of the have some experience in it, then I think this course will make even fatter front and about because we will cover all the things from basic to advanced. Level course consists of several sections school start from CSS essentials. So if you already have some knowledge about basics of CSS, then you can go straight to advanced C s, a section in which you will make things like backgrounds, transitions, transports, animations and much more after completing advanced. Yes, a section will move forward and learn about one dimensional CSS layoff module, which is flax books. Once you will be confident in advance CSS and Flax books. Then we will start building our first project, which is going to be website about Hotel called Hotel Project will consist of several sections will have nice navigation with 100 menu header, followed by about a section. Then we will have nice carts describing different types of rooms and pulled out after room section will build section about customers of hotel and lastly, we'll have a nice looking foot layout off. Entire project will be created using flax books and also all of these things that you have to see will be done using pure CSS. After completing, first project will move on to next section, which will be dedicated to two dimensional CSS layout model called CSS Great. It's getting more and more popular today and for now it's almost fully supported by all modern eyebrows. So you will get deep understanding regarding CSS great and after that you'll be able to build your second project, which will be furniture store. It will consist of several sections as well. We will build nice and kind of complex Melbourne with model box and also with nice drop down menu. Next will have slideshow with controls. Slideshow would be followed by a couple of interesting sections with nice images, cards that we will have gallery, simple form and food. Lay out of this project will be created mostly by CSS quit, but we will use flex books for a couple of times as well. Each build project will be full of responsive for all devices, so you will get your hands dirty and responsive Web design. Throughout the course. You'll make detailed explanations about how CSS works. Also, you will introduce to modern practices and solutions during watching lectures. If they haven't questioned, you can feel free and rich of any time you need. You will get fussed and helpful support from instructs. All right, let's get started. 3. Setup: all right, it's time to start creating our first greed. But before we actually do that, at first I'm going to note that in this section, instead of Google Chrome, we will use different browser, which is Mozilla far folks. I'm going to use it because this browser has the best developer tools for CS is great. It will L. A wants to explain how CSS good works in much better and simpler way. Actually, Muslim Far folks is not good for only since is great, but it also is one of the best browsers for developers and not on the for developers. I think you may have already installed it, but if not, let's go ahead and carrot. That's type here. Mozilla Fire folks, then go to the first link. So here we have a website called Mozilla dot or in order to get this brother unity click on download now and then instant. Actually, I have already insult this brother, and also it's very simple process, so I'm not going to go through it all right. Once we're done with installing Muslim far folks, I'm going to launch our HTML file with Life Server, actually, in previous sections we used Google Chrome as a default browser. So if you run file with life several than it might be opened in Google Chrome again in order to avoid it. Unit either to change default browser from PC settings. If you use Mark, then you have to change the full product from its settings as well. All you can just launch file in Google Chrome, then simply copy he Worrell and Paste 18 Muslim Firefox, and then you'll be able to use light sever. If you don't use like several, then you don't have to change default browser. You can simply click on open in other brothers and then choose Mozilla Firefox. All right, I hope you already run filing Muslim far folks. And now the next thing that I want to do is to create markup in HTML. For that, I'm going to use Amit. So at first, let's create container than inside container. We're going to have six boxes, so each off them will have common class item and also for individual styles. I'm going to assign to it second class with proper number. And for that as remember, we need to use a dollar sign as I contents. I want to use item with proper number. So for that we need to open curly braces, then right, item with space and again use your dollar sign. Actually, we will have six items, so we need to use your star and then six. So here we have six items with proper classes and proper content. All right, let's go ahead and give some stuffs for container. And for each item, let's select at first container. I'm going to define its with, Let's say, as 800 pixels as a background color. I'm going to use light gray so right D D d also creates on space of the top and bottom and place container in the center off page. For that, we have to use margin with the values on top and bottom fourth fixes and left and right arrow. All right. As for container were done next, I want to give themselves for items. I mean, I want to use some common styles for each item. Therefore, let's select item. First of all, I want to make some parting on all four sites. Let's say 30 pixels that increased phone size make it 30 peaks. This as well and also change color of text. Make it white All right. After that I want to assign to each individual item different background color. So let's go ahead and select item one. Then use background color property. And before I choose here color. Let's duplicate it five times for the first item, I'm going to use orange red. Therefore 2nd 1 right all the drab that for next one. Let's use Royal Blue for Fort Item. I'm going to use pale violet red. Then 50 Item will be, let's say, golden rot. And for loss item. Let's use Blue Violet. All right, so with markup, we're done. Actually, for now, everything is ready to start creating. CS is great, So let's do it in the next lecture. 4. What is CSS: before we actually start writing our first CSS code, we need to answer on the very first question, which is following what is CSS. The abbreviation itself stands for cascading style sheets, which means that CSS al ot to create rules that specify how the content often element should appear. In other words, it's tell shit language to describe how elements which are written by HTML should be presented on the Web page. Let me explain eating a simple weight so the content of each webpage is created using HTML . And actually it's required because without HTML, browser cannot physically display the webpage. As for CSS, it's not require its optional. But if you want your webpage to be looking nice, beautiful and user friendly, then you need to use CSS. All right, let's see in practice what CSS actually can do with a simple example. Here we have basic HTML structure inside body elements. I have inserted several elements like Dave, which is container image, having elements and bottom. So you see on the right side and problems their how they look. It's a simple external page without any style, and you agree that it doesn't look nice. I have here another file with some CSS code. For now, you probably do not know what it means. Or maybe, you know, actually, it's not problem because I used them just for demonstration proposes. All right, let's use this style for that. We have your inside had Element Link tug, which actually connects HTML and CSS files. Let's uncommon it, then safe, and you see that he would have nicely designed card, which you agree that looks much more better than the previous one. It's a simple example. We have just use several elements, but it proves that CSS has huge power installing ELN's. It's actually the only way to make your website looking nice and beautiful. Okay, let's talk about history and versions off CSS. Actually, I'm not going to go through in details, but I want you to know several important facts. So the first CSS version, which Waas sees this one, was released in 1996. Then, after two years in 1998 its second version was introduced. I mean CSS to and then in 1999 1st drafts off seasons. Three version has appeared since then. It has bean developing and today, as the car version of CSS. Actually, it's still in development developers, and not working on the next version of CS is like, let's say, CS is four. Instead of that, CIA says it's played in several models like colors, backgrounds, animations, flax books, great and many others. And CSS creators and developers are working on developing those modules instead of creating . It's another version. That's why there is a huge difference between old. CS is three and the current one. All right, that's it. What I wanted to say about what CSS is and where it comes from, its for how to write, seizes code. Let's move on to the next election. 5. How to write CSS: in the last lecture. We have talked about what CSS is, and now it's time to move on to the next topic and this lecture. I'm going to show you how to write ceases coat. I mean to demonstrate how to style HTML elements using different styling methods. Actually, we have three methods. 1st 1 that I want to show you is called in line method using in line method we assigned to each HTML element individually style attribute, which then will contain styles that we want to use. All right, so here I have index dot html file, which includes basic structure off HTML document for no, it's empty. So let's go ahead and create, Let's say, H one heading element with some content, right in line styling. So, as we said, in order to change the style of this element, we need to assign to it attributes called style and then inside quotes. We need to specify needed property with its value. Suppose that we want to change background color off this element for that, we need to write your name off property background color with Desh that it should be followed by carbon and then we need to write your one of the colors. Let's say red. So if we save, then background color off H one will be changed into red. Actually, background color is one of the properties in CS says we have tons of different properties, which will be discussed by step throughout the course. If we want to use several properties with one HTML element, then we can simply place your semi column and then used another property that say Cover. I'm going to change color of heading element into white. So you see both properties work, having elements background color is red and also color of taxes changed into white. So this is called in life style. Actually, I want to note that in lines, telling is not the best way to style elements because it has some disadvantages. Suppose that we have several heading elements, and for each one we need to use same styles than using in line method. We have to write those tusks for each element separately, so you agree that it will take much time and too much coding. Besides, that code becomes larger and messy, especially when you need to use multiple styles for each so In most cases, I do not recommend to use this method. All right, let's move onto the next one, which is called Internal Mattered. Actually, in case of internal styling, we write CSS code inside HTML document for that in head elements, we need to use style tack. Actually, it's not mandatory to place style tax inside had element. We can insert them inside body, but it's a good practice to use them inside hat Next that we need to do is to specify somehow the elements on which we want to change the style. At first I'm going to create another heading element. Let's say H two with constant internal styling. So in order to style of this element, at first we need to select it. And in order to do that, we just need to write inside style tux H two without any angle brackets. In this case, H two is called selector, so using it, we have selected H two heading element. Then selectors should be followed by a pair off curly braces, which will wrap all this task that we're going to use for H two heading out. All right, let's use your same properties right background cover with the value Kareen. Also note that after each declaration, we need to place a semi coma, then use your second property color with the value white. So you see that background off age to heading element has changed into green and tax became light. So this is more convenient and flexible. Way to style elements. Suppose that we want to sell several H two elements. Then we can do it using just one block of code. If we duplicate, be for several times that, each of them will have same starts. So this is one of the advantages off internal styling method, unlike the in Line one. But again, I can say that it's not the best practices. Well, the reason is that when you work on large projects, you may have several HTML documents, and you have to write starts for each document separately. But in case off third method, which is called external style, you can use one style code for several documents. In order to use external method, we need to create new file, which should have extension as top CSS. Let's call it style dot CSS than an index dot html file, create another element. Let's say H three with a value external styling, then go to styled with CSS file. So in this case, in order to select elements and changed its style, we don't need to use style tax anymore. Weaken directly, select element. So let's right h three and then inside curly braces. Let's use again. Background color. Actually, I'm not using other ceases properties because I don't want some of you to be confused, especially who were absolute beginners so assigned to it. Let's say color blue and also change color of text. Make it white. If we say then nothing will happen. The reason is that we need somehow to connect those two files. In order to do that. Let's go back to index dot html File and inside had elements open link tack. It should have several attributes. The 1st 1 is going to be a tribute called Relationship. Simply, we need to write r E l with a value style shit. Next one is called H reference, in which we need to indicate part of file in this case because of that style dioceses filed is placed next to index dot html. Then we just need to right here. Name of it, stolid CSS. But if it was placed in separate folder that at first we need to indicate name off folder that slash and then the name off. Five. All right, let's save it. And he see styles are working. Background color of H three, heading element and also color of text are changed. So this is called external method and actually is the best practice to use CSS. As we said, one of the advantages of external method is that we can use the one CSS style for several HTML documents. In order to demonstrate it. I'm going to create another HTML file. Let's call the index to HTML but then grabbed the content from index dot html. File and paste. Let's delayed those elements. I'm going to leave just age three, heading aunt. So if we run this filing browser, then we'll get the same stars for H three heading out. It means that styles, which we have created installed ceases file works for both html documents. So I recommend to use this matter, especially when you work with large projects. All right, before we finish this lecture, let's have a brief recap about what we have learned. So we have three different methods in order to use CSS. Those methods are in line method, internal method and external method. And lastly I want to talk a little about seen fix off CSS. So we have here the code that we have used in this lecture age three East cold selector. In this case, we have used HTML element as selectors but besides that, we can select elements using attributes like classes I ds and also we have sued the selectors which you will meet throughout the course. So selector is followed by curly braces which wraps all these tiles off each element. Then we have here background, color and color those air called properties and then we have values off those properties. I'm in blue and white. Actually, property and value pairs are called declarations. After each declaration, we need to place semi column Actually, for the last one, we can miss semi colon code will still work, but it's recommended to place it after each declaration. All right, so that's it for now. In this lecture, we have learned about really important things about CSS. See you in the next video 6. HTML Element Tree: before we dive deeper in CSS, I have decided to make a quick video about how HTML elements are structured. I think that it will be a good refresh about how HTML document is actually represented, So let's go ahead and talk a little about eight. The document is represented as a family tree. The family Tree represents a real family, describes the relationship between family members and uses terms like parent, child and sibling. So one member off a family can be a parent to others while also being the child of another family member and the sibling off another family member. This can be represented by the following model. Let's take a look on the diagram and go through the Web page structure to see what I'm talking about exactly. The document begins by opening an HTML attack. All the other elements off the webpage are contained within this element, meaning it is a parent. Because of that, all the other elements are placed inside. The HTML tag has no parent itself. It also has no siblings. If we move one level deeper, we will find two elements had and body that exists side by site, which makes them siblings. They have the same parent, html. But they also contained Children, so their parents themselves. The head element has two Children, meta and title siblings off one another. The Children of the body element are H one p, and you will all siblings off one another. If we go down deeper still, we will find that you'll is also a parent. It has three Children off them. L I arms. All right, so this is a structure of HTML document, and I think it's really important to know relationships among HTML elements because throughout the course will frequently used this knowledge, especially when we will deal with different types of selections. Okay, let's moonwalk. 7. CSS Selectors: as we already know in order to style an element. First of all, we need to select it. In previous lectures, you have seen that we have selected elements using HTML tag names. But besides that, there are multiple ways to access on element in CSS. So in this lecture, you will learn about CSS selectors. All right, let's go ahead and jumping to eat. Let's create heading H one element, right? Handing one. Actually, in this video, I'm going to use internal styled method because in this case it's easier to see which element we're selecting and styling. So it's open style tax inside hard element. I'm going to change color off text and make it green. So let's select H one heading elements and then use color property with the value Kareen. So, of course, color of Texas changed and nothing is new Hue. All right, let's create another element after heading, let's say, h two handing elements with text heading to suppose that we want to change color of heading element into green as well. The first that you might think, is that we can select it in the same way and change its color. But there is a better way to do it. I mean, we can change color of both elements at the same time. For that we have to place your coma, then select H two. So if we say then color of headings will be green. So when you want same styles for different elements, it's a short way to achieve that. All right. In most cases, html wellness erupt by their parent elements than those paran elements are robbed by other elements and Exeter. So in those cases, we can use more specific way to select elements. I mean, we can select them using parent elements in order to demonstrate it. I'm going to create a new order, least with some recitals. That's right, your HTML five and then for secondly, sytem, right? CSS three. So, in order to select both leased items, we can either right here just l I. But to be more specific, we can reach to ally Element using its parent so right you will Well, I and let's change color off least items and make it correct. All right now I want to talk about presidents off selectors. At first, let's duplicate these styles and change call or in degree, so you see that color off least items has changed. The reason is that execution off CSS code happens line by line from top to bottom, so the old styles are over, written by new ones. Let's get rid of fuel selector from second style that if we save least items will get back red color. So because of that, those tiles are written down in this case worked first starts. That's because we have used your more specific way to select elements, and actually it gives to first block of code higher precedence down to 2nd 1 All right. In this example, we have stalled both least item elements. But what can we do if we want to start this specific ally? Aren't actually it's not problem because we can use I D and class attributes in order to select specific elements. So that's a sign to first ally Element class attributes with the value item. Then remove this code and write a new one in order to select element using class attribute . At first we need to place dots and then value off class attributes, so do not forget using dot because without it, selectable work. Let's change color making to read so you can see that first item has changed its color. Usually we use class elector to stop several elements of the same time. So that's assigned to second ally L'm of class item. So you see that both elements became red. All right. Now let's compare styling with Class Elector and with element name for that, I'm going to get rid of class Attribute from secondly sytem. Is that right? You l l I and make the color green. You can see that first item is still red on the 2nd 1 became great. That's because in general, selecting elements using class attribute has the higher precedence than selecting them using element. Next. All right, that was close attribute. And now it's something we want to talk about. Idea tribute. First of all, I'm going to assign to first list item idea tribute with the value at least item. But then, in order to select element with mentioned attributes, we need to use hash sign. So remember that in case of class attributes we need dot and for I d. We need to place your hash sign. Let's get rid of this code and right has signed at least item and then change the color making to read so you can see that the first item became red. Okay, sometimes you may hear that idea. Tribute works on Lee for one unique element. But actually, I would like to tell you Daddy works with multiple elements simultaneously. So if we assign idea, attribute the second list element with same value, then you will see that both leased items will be read, so it means that idea tribute works for several elements. But in the real world, it's recommended to use idea tribute with one element and close attributes with several else. All right, let's remove I d. From second least elements. Actually, I D selector has the highest precedence than any other selector. I mean selecting elements with class attributes or L of names or their parents. So as we know, styling element, using class attributes has higher precedence than styling using HTML tag names. Therefore, I'm going to compare ivy attribute to only just class attributes, So let's select elements using class name item and change its color make it blue. So you see that color off first least item is not changed and it's still red. So as a conclusion, we can say that styling element with Parent Element has the higher precedence than styling with element name. Class. Elector has the higher presidents than styling with Element name and parent element, and I D selector has the higher presidents than all of them. All right, besides those selectors, we can select a levels using different attributes in order to demonstrate. Eight. I'm going to create input elements with type, text and with type. Let's say email. If we want to use same styles for both off the input elements, we can either assigned to them same class name, then select them and style. Or we can just use input stagnate. But if we want to tell one of the inputs, then we can use I D or class attributes and style or were able to select it using type attribute. For that, we have to select a put element and then in square brackets, we need to specify value off type attribute in this guy's let's select input for email and going to change background color of input element. Let's make it orange. So I see that background off second element is changed. All right, So before we finish this lecture, I'm going to give you some tips regarding CSS electors. As you see, we're able to select elements using different ways. But actually, common practice today is to select them using classes or I DS instead of using element names. But also, in some cases, you can use combinations of that. All right, so in this lecture, we have learned how CSS selectors work and which selecting way has the higher presidents see you in the next video. 8. CSS Combinators: once we were introduced to basic CSS selectors. No, I'm going to talk about next topic which actually is related again to how to select elements in this lecture. We're going to describe what CSS Combinator are and how they work. So what is a Combinator? Combinator defines the relationship between selectors In CSS, we have four different Combinator. The 1st 1 is called Descendant Selector which is expressed by space. Actually, you're all of the family with this Combinator. It matches all descendent elements of the specified Ellen Suppose that we have HTML elements structured like this? We have here paragraphs and having inside rapper section Element. Then we have development decide section which wraps another paragraph in case off dissident Combinator If we use the following style than background color will be changed for all P elements, including this nested partner. So again, this and the Combinator select all this and the elements Next one is called Child Combinator. It's expressed using greater than sign. Actually, child Combinator select all immediate Children off specified armed. So if we use similar example in case of child selector, background color will be changed for all P elements except message program because it's not an immediate child off section. Next Combinator is going to be adjacent sibling selector. It's expressed using plus sign It's elect immediately following sibling or specified out. So it means that elements should be placed in the same level on the HTML Elements Street and they should have same parent as well. So in case of adjacent sibling Combinator, if we use again previous example and select in this case h one heading element, then the background color will be changed for only the paragraph which is placed immediately after h one. All right and the less Combinator that we're going to describe his general sibling selector , which is expressed by Till the Sign and it's elects all siblings which are placed after a specified out. If we consider general sibling Combinator using again the same example, then background color will be changed for all paragraphs which are placed after heading out . Of course, except the nested one all right cell that summarize what we have learned. We have four different combinations in CSS this and it's elector child selector, adjacent sibling and general sibling. Okay, let's go to V is code and use and practical examples we have here. Same HTML elements wrapped by section element. Let's zoom in browser to see better output. So at first I'm going to use descended Combinator for that. It's right here section that p and change background cover. That's right. So, as you see, all P elements which were placed inside section, including nested programs, have changed their background colors as Rhett. All right, let's see his next Combinator, which is called Child Selector. Select against Section Element, then place here greater than sign and that Pete, I'm going to change background color as green. So in this case begun, color has changed for all immediate Children. Program out. Actually, you know that CSS Cody's executed line by line from top to down. So for some of the paragraphs, old style is over, written by the new one. So this Waas child Combinator Next I'm going to show you adjacent sibling selector, so select H one, then right plus Pete and change background color as yellow. So no bigger on color has changed for immediate sibling, which is paragraph place immediately after having element and let's use last Combinator, which is called general sibling elements, select H one than place till the sign that Pete and change back on color as orange. So in case off that Combinator background color is changed for all sibling paragraphs which are placed after heading out, of course, except nested partner. All right, that's all about CSS Combinator. Actually, they are really useful in practice. For some of you, it might seem to be a little bit complicated, but actually, they're not. All right, that's it. See you in the next video. 9. Colors: all right, it's time to refer to next, then one off. The important topics not only see assess, but generally in Web design. I'm going to talk about colors in CSS. To choose the right colors is really important because everyone wants to look their websites modern and beautiful. So let's go ahead and learn about how to work with CSS colors. There are multiple ways to choose color you need 1st 1 is the simplest way unit on Lee to indicate the color name like red, green, blue, black and someone nowadays, all more than we're browsers support 1 40 standard color names. Actually, in the real world, it's not really popular to use just simple color names, because CSS Talos is to use other ways to choose more beautiful and modern colors. So the next way is to use RGB values are Giambi stands for red green blue. It actually consists of three color values and can be specified using this formula. Each value defines the intensity off the color between zero and 2 55 for example. Here we have some colors expressed by RGB method. If we want to get the exact color from red green and blue. Then we need to indicate maximum number of intensity to 55 for color, which we need. And then we need to live the rest off the arguments as zero. The lowest intensity arguments. I mean 000 gives us black color, and the highest intensity arguments gives this white color. There is added new parameter to dimension RGB method in CSS three version. It actually specifies the opacity for a color, and the method itself is called our GP eight. The argument range should be from 0 to 1. If you take a look on the screen, you can see a red color within maximum intensity and below we have the same red color. But in this case with 0.5 capacity, which has decreased intensity off the color twice, all right color values can also be indicated using tax a decimal values. So here we have examples how to express colors in Hexi decimal values. The pound sign is followed with three values which are written in pairs. First pair belongs to red color, second periods for a green, and the 3rd 1 is for blue. You can control the intensity off color from zero to F. For example, in the first case as a first pair, we have F f and the calories displayed as a threat because the values for red color is set to its highest value, F f and the others are set to the lowest value zeros. In the same way we have green color because it's Second, Peiris said, to its highest value. And then we have a blue cover. White color has the highest intensity and is written using EFS, and the black color has the lowest intensity, and it's written using only zeros. Actually, you were able to use hacks, a decimal values, which consists of only three values. But in this case, you won't have a big range of colors. But anyway, if you use shortened way, then you would have the following values. All right, so that was little introduction. How to use this is collars using different ways. Actually, throughout the course, we will frequently worked with color, so you will get good practice in its step by step. Besides that, I'm going to give you a little reference about senses colors, which you can find in W three schools dot com in CSS collar section you can find link off this page in source files. Actually, I want to recommend you to use this website. It's not really complete guide for everything, but it's really good reference about different seasons topics and actually not only CSS. All right, Before we finish this lecture, I'm going to give you some tips and suggestions regarding colors. Actually, in Web design, it's really important how we manage coloring for our weapons. Because colors have a big effect on people's mood, let's talk a little about several of them. For example, red color grabs users attention. It's not a good choice for background color because it shouts out from the page. And also, sometimes it has an imitative effect. Because of that, in most cases, red calories use for some kind of warning issues for the users. Green calories closely related to nature and growth, and therefore, these calories rest ful for users, ice. As for the blue collar, it relaxes, refreshed and produces peaceful feelings and moods. General, it's not recommended to use many different colors and where pace using just several colors , which creates a complementary contrast, is a good practice. There are several tips which I can. We come in to you in order to look your website color. Organize. First of all, you need to choose the right dominant cover for your website and Brent. Then you have to combine colors to create your perfect color scheme. The next step is to choose a background color that works for you and also you need to use colors in the correct place is on your website. Throughout the projects, you will see some off the techniques how to colorize your website to look at modern and beautiful, and it will help you to get skills that will a needs every Web designer. All right, it's enough to talk. Let's go ahead. 10. Inheritance: No, I want to move on to the next. An important topic in CSS, which is called inheritance. The term itself describes relationship between parent and child elements in CSS, a child element inherit styles from its parent aunt to demonstrate batter what it actually means. Let's go to GS code and write some code. Create development, which will wrap heading with text heading and paragraph with text paragraph. I'm going to define color for body elements, so let's select it and make color of text as red so as the sea, colorful, heading and paragraph or changed into red. Actually, we have not defined directly for H one and paragraph color property, but despite it they have changed their color. The reason is that they inherited this tell from body and because they are placed inside body element in this guise, it doesn't matter whether body is there direct or indirect. Parent. Let's check stars from developer tools. Click on H one heading. So we have here something false starts for H one and also below. You see color property which is inherited from body and the same we have for dif and paragraph. A swell. All right, that's assigned to development. Some styles select it and change color. Make it blue. So as the sea heading in paragraph again change their colors and now they became blue. So if we check against tiles in developer tools, we will find that color property, which was inherited from body, is no longer applied as the seats over lined. And now those elements inherit color from their direct current, which is a thief. It means that by default, close Apparent has higher presidents to inherit starts to chart element. But if child Ellman has its own styles, I mean, if we select H one and then changes color as green, then of course it's color will be changed because for now, inherited style is over, written by its own color property. If we check again developer tools, then you will find that both color properties I mean colors inherited from divan body are overline, and its own color property is used. So actually, this is the way how inheritance works in CSS again, remember, that child element inherits stars from its parent element. By default, it's closer. Parent has higher precedence to inherit starts to child element. But if child has its own styles. Then inherited. One is over written and no longer a plight. All right, so that's it about inheritance and CSS. See you in the next lecture. 11. Text Formatting - Part 1: one off. The important parts in developing and designing websites is to choose the relevant phone types and former tax in order to look our webpage. Great if we need our users to pay attention on something in the world where page we can manage it by using relevant text. Former thing. So in this lecture, I'm going to talk about text for more thing using CSS, and we will refer to some off the main properties regarding that. All right, let's go ahead and open our text editor. First of all, I'm going to create paragraph with some dummy text. The first thing that I want to refer regarding tax is coloring. Actually, you already know how to work with colors. Let's select paragraph, change its background color and make it green. We have used to your color name as I value, but actually I want to use a little bit lighter green. These code has great future regarding colors. When you hover on color, color palette is displayed and you're able to play around with different colors. It gives us proper RGB values, and also, if you click here, you will get relevant hacks additional value. So it's really a great too. If you are using different code editor, which doesn't have this feature, then you can simply write the value so it's choose light or green and then change color off text and make it white. All right, I'm not going to waste a lot of time on colors because you're all of the family with that, So he contest different colors and play around with that. The next I'm going to show you how to change size off text. In CSS, we have property called phone size, which allows us to change size of text. In this case, we're working on paragraph and by default it's phone size is equal to 16 peaks is so if we assigned to phone size mentioned value, but then nothing will be changed. All right, let's increase font size and make it but say 25 pixels, so you see that text size is changed and this guys were using absolute measurement unit pixel. But later you will learn about different types of units. I mean the relative measurement units like Rams yams, percentage and so on, because nowadays a relative measurement units are recommended to use. All right, let's go ahead and talk about tax alignment in CS says we have property called text align, which closes to change position of text This property has for main values which are commonly used. I mean left, right, center and justify. So by default value off Texas line properties sat as left as you see paragraph is positioned on the left side of the page. So if we assigned to it left, then nothing will be changed. In case of right text will be placed on the right side off the page that if we use center as you all of the guests, it will be placed in the center. All right. In order to demonstrate how justified Valley works, I'm going to adhere some more text. So let's use justify as the sea, in case of justify text is thrashed on the page, we have no longer spaces at the end or at the beginning, off the lights. All right, let's just leave here five words again. As you know, by default Paragraph is a block level element and text align property works with block level arms. That's recall once again. What is the difference between block level and in line elements in case of block level. They take up full with that is available on the page. But in case of online elements they take up with that is required to display content, often Alan. So in order to transform paragraph into in line element in CSS, we have property called display, and now that's assigned to read value in life. Let's safe and you see that with off paragraph is decrease, and now it takes up with that is required to display the text. All right, let's try to align paragraph on the right side. So let's assigned to text. Align property value right. As you see, nothing is changed because text align property doesn't work for in line ounce. We can many polite on position of paragraph using its parent element. So let's wrap it by developments that's selected and youth text. Aliant property with value right? So, as you see now, it works because it is a block level element. Paragraph became its content, and that's why it's position is changed in order to see better what I'm talking about. Let's assigned to development border. But the following values right, two pixels, then solid and call a wreck. So no, I think that everything is clear for you. Actually, you will work frequently with in line elements. So would be good. If you remember this technique, it's often used and we will use it in your projects as well. All right, I think we can stop here. Let's continue talking about text formatting in the next lecture. 12. Text Formatting - Part 2: All right, let's go ahead and continue talking about text formatting Next. That I want to refer to is some off the CSS properties regarding phones. I mean properties about phone, family its weight and start. So in CSS, we have two types of phone family names. 1st 1 is Generate Family, which actually is a group of phone families, and the 2nd 1 is Phone Family, which defines specific phone family. So SP set generate phone Family is a group of phone families with similar look. We have several generate phone families. 1st 1 is serif. Phones in that group have small lies at the end of some characters. In seventh group, we have fold families like Times, New Roman and Georgia. Next general family is San Serif. Actually, it's a similar to Serik, but without an alliance of the end of characters in Sensory group, we have phone families like Helvetica. Actually, it's one of the popular from families. It's used by CSS framework called Trump and also in San Served group. We have phone family called verdana Next General Group is coercive, actually, from families and the group have kind of handwriting effect. We can name some off them like Brushed script and Mistral. Besides that, we have also model space generate family, in which all characters have the same with in model space. We have phones like Career New, and we'll see the bright. The last general family that I want to show you is fantasy, but actually it's not commonly used in Web development. All right, that was a brief overview about phones and CSS. Let's go ahead and work in our text editor. I'm going to create heading allowance with text. This is heading element, then create parabolic with some Tommy text. So in order to change phone and CSS, we have to use property called Phone Family, actually by default. Phone. Family East set as times New Roman. If we go to browser settings and then click on customized phones, you will find your standard phoned family times New Roman And it's generate family surf, so you're able to change here for family. Let's select, for example, one off them. Let's say for Donna. Then check our text and you said that the phone type is changed. All right, let's get back your times New Roman. So if you do not define phone for your webpage from CSS. Then browser will automatically use its default phone family, so it means that if we change manually phone family. Let's use here, Helvetica and San Serif as general family. The phone of having will be changed All right, well, think to note and remember, is that a phone family concedes up two or more words than you need to write it within quotes. Let's select P elements and defining full family as comic sense and s and then course it. So you see that phone off paragraph is changed. All right. Next thing regarding phones is that we can indicate several for families for one property. In this case, if the first full family is available, then it will be applied. And if not, then the next one will be youth. So if we adhere for hiding elements, let's say verdana than the phone family will be changed from Helvetica into Verdana But if we use your something that is not available, that's a test Then this phone family won't be found and we will get back Helvetica. All right now I want to show you one of the most popular phones, which is frequently used today on modern websites. I'm talking about Google phones. Let's go ahead and visit its website type year Google phones and go to the first link. So this is Google Phones website. Here are tons of different phones which you can use on the right side. We have here advanced search so you can search for phones by different categories and by different styles. Also, you're able to test each of them. I mean, how they look as a sentence or paragraph. Also, if you choose here custom, you're able to write tax on your own. In order to use Google phone, we have two different ways. First of all, you need to choose phone and click on. Plus, I come So here we have link which we have two AM but in html file. And also we have here phone family property with proper values. Besides that, you're able to customize selected phones. You can check here what kind of cell and wait you want. Let's check some off them, then copy link and pasted inside had out. Then go back, copy the property as well and paste eat for heading Ellen Save. And it seemed that phone family of having element has changed. So this is the first way to link your phone. But besides that, we can import it. Let's go back to website click on Import. So here is the euro inside style tax. Let's copy. Eat that, paste it inside style tugs. I'm going to comment this Google front link out, then safe, and you can see that phone family for having is still maintained. That's because we still use this phone, but with a different way. So again, Google false is really great source, and we will use those phones when we build our projects. All right? No, I want to show you some other properties regarding phones like phone wait and phone style. In this case, let's work on paragraph assigned to eat property called phone Wait. It actually defines thickness off characters. Here. You can see several possible values for fun. Way to property. Let's select bolt. So is the sea tax became bolt. Besides, if you can play around with those number values, but you need to note that some off the phones may not support those different values. Also, when you use Google phones in order to choose different phone wait and phone style. You need to select them from customized section. All right, The last property that I want to demonstrate regarding phones is phone style. Actually, one of the commonly used phone style which you may meet is eight Alec. So you see, having became a Catholic, besides that, we have value called normal, which actually is a default full stop. All right, that's it about phones. Actually, Before we finish this lecture, I want to show you one more thing. Some of you may already know it, but anyway, let's see how we can create comments in CSS. In general, comments are used for describing code and also for posing some piece of code. Let's say we want to describe heading style for that. We have to write forward slash and star and then right, let's say, heading style. And in order to close comments, we need to place your star and forward slash. So if we save that, nothing will be changed because it doesn't have any effect on coat. But I think comment the code itself. Let's a phone family off handing one. Then this code will no longer be at fight as the seafront family off heading is changed into default. Fault actually comments a really useful feature. It helps us to make our code more readable, especially when you work on large projects. And also it's very useful for testing the coat. If you use VI ous code, then you can simply comment code out using shortcut. Just press control and forward slash. All right, final. We're done with text formatting. Actually, this is a really important topic, especially in web design. So throughout the projects you will meet some of the techniques which will teach you how to make your website looking modern and beautiful. Okay, let's move on. 13. Box Model: All right, let's go ahead and move onto the next really important topic in CSS. In this lecture, I want to talk about CSS box model. Actually, the Term Books motel is used when we deal with layout of elements. So generally all HTML elements can be considered as boxes. If you take a look on the screen, you will see general structure of box model. Actually, it consists of four different parts, so let's go ahead and start describing it from inner part. The first member off box model is content. The content of elements could be taxed or images, and you're able to manage its size using with and hide properties at their content. We have here patting, which actually clears an area around content, and it's transparent. Parting is followed by border. It goes around content and patting, and it's kind of rapper for them. By default, Border is invisible, but we can define its style, weight and color using CSS properties. The last member of books, Motile is margin, and it actually clears an area outside of border like parting. Margin is transparent as well. All right, it's time to go to V S code and seen practice held books model actually works. I'm going to create a Chuan heading Elements with contents box model. Now I want to use developer tools, which is really great and helpful for developers. Some of you may be all of the family with it, but anyway, I'm going to briefly over veal. This too. There are different wasted opening. You can either go to menu, then choose more tools and then developer tools. Or you can just use right click and that inspect. And also there is the fastest way to open it. You just need to press on F 12 button. All right, so here we have our developer tools. It can see self, several tops. But according to our course subject, we're going to use mostly elements and styles. In Elements section, you can find our working HTML documents. As for the styles part we have here some basic default styles and then down below, you can find the exact same structure which you have seen minute ago. So this is a great tool when you want to figure out how elements box more little works. So if I click on H one elements, then we will get some values in content part and also for margin. So now burst inside content actually express with and height off the element. As you know, we have two main types of elements. Block level and in line in case of block level elements. They take up full wit that is available and in case of online elements they take up with that is required to display the content often element. In this case, we use H one heading governments. It's actually block level elements. So if we hover on content part, you will see that it takes up full with off the page. Besides that, by default, H one hiding element has margin on top and bottom. Wait some value. You can check above default styles for H one element. It's displayed as block. Phone size is larger than other elements. We have marching on top and bottom and someone all right. So when we talked about H one elements, you may have noticed that on the right side there is a little space. Actually, it's because body elements, by default, has margin. Satis eight peaks is on all four sites. I'm going to get rid up this margin so that select body element and said marching as zero. So as the sea is default, margin is now over. Written on actually three moved. All right, No, let's select H one element before we actually talk about padding and margin in details. At first, I'm going to create border for H one element in order to see better how the Machin properties work. We have several properties in CSS which defines with style and color off border. In order to define its weight, we have to use property called border with that's assigned to it value as five pixels. Actually, pixel is absolute measurement unit. Absolute means that it's not related to other factors. As for measurement units, we will describe them in detail later. So if we saved, then we won't see border because we need to define its style. For that, we have CSS property called border style. As you see, we have here different styles of border so you can play around with those values. But in this case, I want to use solid let's say, and you see, we had here border, which has with as five pixels. It's style is solid and by default it's color is black. We can change it using another property called border color. Let's change its color and make it to read. I'm going to use your hexi decimal value as remember, we have to place Hash Stein and for red color, we need to write F F and for zeros. But instead of it, we can use here shortened way right after 00 So the color is changed into red. All right. As you see in order to create border, we have used three properties, but actually CSS closest to use shortened way. We can use property called Border and assigned to it. Those three values five pixels than the color and solid. If we comment previous property south, then nothing will be changed. All right, let's go ahead and move on to Potting actually were able to define separately parting on different sites for that in CIA says we have properties called parting top parting right then putting bottom and putting left. Let's assigned to those properties different values, let's say for putting top right 30 pixels, then 50 pixels for putting right then right, 70 pixels and for last value right, 90 peaks of so you see that there is generated space around text, but with different values. If you take a look on box model, you will find different patting values on different sites. So using those properties, you can control space around content, often element. But like it was in case of border CSS ellos is to use shortened Wait. We just need to use property called parting with proper values. 1st 1 is going to be parting top right 30 pixels. Then we need to insert here value for putting right 50 pixels. Then we have parting bottom. So much peaks is and lastly, putting left 90 peaks. Let's common previous properties out that safe, and you see that we have the same result. So you're able to use this shortened method, but you need to protect the rule about order off sites. I mean, you need to write top right bottom and left values all right. When you need to use same values on top and bottom and right and left, then you can avoid writing four values instead of it. You can define parting on top and bottom simultaneously, Let's say 50 pixels and then for right and left. That's 100 pixels. So as you see, parting on top and bottom is 50 pixels and on left and right sides 100 pieces. All right. Besides that, sometimes you may need same values on all four sites. In that guy's again. You are able to use shortened method. You just need to write only one value. Let's live here 100 pixels. So if we check box model, you will find that parting on all four sides is equal to 100 pieces. All right, that was putting Let's move on to next property, which is margin syntactical and margin works like patting weaken separately, define margin for different sites. I mean, margin, top margin, right margin, bottom and margin. Let that's assigned to them different values for margin top right. 50 pixels that 100 pieces for margin right 1 50 pieces for margin bottom and 200 picks us for margin left. So you see BOX has changed its position because, as we said, margin creates space outside element. So you see how it looks like patting we can use shortened way with margin as well. For that, we have to use property called margin, then in the same order we have to assign to it. Values for margin topless, right? 50 pixels, then for margin right 100 pixels for marching bottom right 1 50 picks is As for the margin left, right, 200 pixels. Now let's comment out those properties and save. So you see, nothing is changed in the same way. If you want to use same values on top and bottom and left and right, then you can use shortened wait for top and bottom. Let's leave here 100 pixels and for left and right, 200 pixels. So, as you see, we have margin and top and bottom 100 pixels and left and right, 200 pixels. And of course, if you want to use same margin for all the sights, then weaken right, you just want Well, you let's say 100 pixels. All right. Now I want to introduce to you one more property regarding box model, which is called box sizing. In order to explain it better, I'm going to use with property. And as I fell, you assigned to read 300 pixels also defined height for heading and assigned to eat the same value. 300 pixels actually book sizing property defines how wits and hide off the element are calculated. Default value off this property is constant box. In this case, putting and border are not included in elements total with and height. So it means that if we some with putting left and putting right, also border on left and right, who will get 5 10 pixels in the same way? In case of height, Bubble got the same value. But if we assigned to book sizing, property value, border box, then putting and border will be included in total width and height. And if we make again calculation, then we'll get 300 pixels for total within height. Makes sense. So remember that if we use border box value, then parting and border off, the element is always included in total with and height. All right. Before we finish this lecture, I want to use one more value off margin property. If we want to center perfectly block level element, then we can do it using with and marching, although in this case with off element is all order defined. As for margin, let's leave here margin on top and bottom as 100 pixels. As for the left and right sides use year or oh, so you see that element is horizontally centered in a perfect weight. All right, so in this lecture, we have learned about what box model is. Generally, it's really important to figure out how books model works in CSS because it will help you to control layout in positions of elements on the page. Okay, let's move on. 14. Pseudo Clsses - Part 1: in si assess. We have special selectors, which are really useful and frequently used. Today in this lecture, I'm going to start talking about Souter classes and pseudo elements. So what did they actually mean and how we can use them? So the classes defined special state, often element using pseudo classes were able to make our webpage little bit dynamic sin. Tactically, there followed the element by cover. As for Souter elements that defined style for a specific part of an element using them, we're able to create some additional content for Element and also style them in case of pseudo elements we use to calls. All right, let's go ahead and start working on pseudo classes. Actually, they're closely related to links, so I'm going to create link, which will L o us to visit Google website. So in age reference attributes, let's insert You are all for Google, right? Http s then double forward slashes, then www dot google dot com and then as I tax right click, you all right. So as the sea link has its default color, which is blue and default decoration underlying, So the first super class that I'm going to use is called Link. At first, let's a link link element itself, then place called them and then right link. Actually using links to the class we define normal state off link. It means that we define cell for it before the user visits it. At first, let's increase its phone size and make it, let's say, 35 pixels. Also, I want to show you one new property, which is frequently used for links. I mean text decoration. It's Bill. Hello. Ask to get rid off this underlying. In order to do that, we have to assign to eat bother you as none. So you see that underline is removed. Also, let's change its color and make it green. So again, this is a normal ink and those tiles are applied until they are over, written by other suitor class stuff next to the class that I'm going to show you is called visited. It defines stars after visiting link, so if we click a link and go to Google and then go back, color off link will be changed. Actually, it's a default color off the visited link so you can change it using see the class called visited Let's select link again and at visited and then change color. I'm going to use your collar called Golden Rod. So you see that collar off link is changed because for now it's a visited ST. All right next to the classes hover, which is one of the popular and widely used because it's used not only with links but with other elements as well. So, using cover to the class, we can define style. When we mouse over the link, that's select again link element. Then place called in and hover on hover. I'm going to change color off link. Let's make it great. So if we most over link that color will be changing too great. So using hover were able to create lots of nice effects, which you will see many times throughout the course. Last suitor class that I'm going to show you regarding links is active, so let's elect again the link element, then add to it active and assigned to its color as, let's say, sky blue. So active Shooter class defines styles off link while it is clicked. So if we click link and keep clicking for a while, then you see that color off Lingus changed into its CAIB. All right, If you're going to use all of those suitor classes with links, then you need to protect the order off them. You must use hover after Lincoln visited cedar classes and you must use active to the class after hover. Okay. Before we wanted the next to the classes, I'm going to show you a little example how we can use hover in order to create drop down menu. At first, I'm going to comment this code out. Also, we don't need these link here anymore. So commented out as well now creates developments which actually will be wrapper off the uptown menu and assigned to eat class for CSS. Drop down. Then inside the developments insert a link with the text items. After that, we need to create items for drop down menu. Actually, they will be rat with another development. Let's assign to it class lets a drop down content and then inside the development, create again link for item one. Let's duplicated twice and change item numbers as two and three. Actually, I just want to show you how to use hollow, receive the class in order to create drop down menu. So I'm not going to waste time on styling It first thing that I'm going to do is to hide items. For that, we have to select drop down content and then link count. You know, the to hide element. We can use display property with the value Not so as the sea items are here. The next step that I want to do is to display them when we hover on items. In order to do that at first, select development which has class name drop down. So as we said, we need menu to be displayed when we hover on items. So it's at here hover. Actually, when that event happens, I mean when we hover on items, then we need to define style for my new items. So we need to select them. Actually, they are reupped by development with class drop down content, so at first selected and then select link elements. So in order to display items, we need to use property called display with the value block. So if we hover that the items will be appeared as you see, they are aligned vertically because hover they have display property said as block. All right, so using this example, I just wanted to show you the main idea how to create drop down using hover to the class. Actually, it's not start. Therefore, it doesn't look good, but actually, it wasn't our point. Well, right, That's stop here and continue talking about. See the classes in the next lecture. 15. Pseudo Clsses Part 2: all right, so in the last lecture we have introduced to some of the suitor classes, which mostly are used with links. And now I'm going to describe other, some off the commonly used See the classes today. In order to do that, I'm going to create a new order, least with several list items. Let's insert here, Ally Element, where the tax item one than duplicated four times and change the number of items properly. At first, I'm going to change a little bit, this tile off least, so let's select it. So the first that I'm going to do is to increase phone size. Let's make it 40 pixels as you see a list. Items by default have bullets. So in order to get rid of them in, CIA says, we have property called least style type. So let's use it In general, using this property, you are able to change style and type of least, for example, you can transform it into ordered, least if we assigned to it value called decimal, that instead of bullets, will get numbers. Also, instead of bullets, we can use you squares. That's a sign finally was queer. But in this case. I want to remove any off the styles for that. We have to use value as not If you want to just get rid off bullets. You can use another property called least style with same value. Not All right. So the first super class that I want to show you is called first Child using this class were able to select first list item. That's right. You Well, then l I thank Colin and First Child with Dash. Let's change its color and make it right. So as the sea first list item became red in the exact same way we're able to select last item. I believe you, all of the guests how to do that in this guys, we have to use another suitor class called Last Shop. So it's right again. You will ally, then call them and use last child. Let's change a guy color of item. Make it great. All right. So as you see using mention, see, the classes were able to select first and last child elements, but it's interesting. What can we do if we want to select one of the specific list items from the list? Actually, it's possible using another suitor class called and shot. So let's right, you will L. I ends. Dash child. We need to place your parenthesis because it actually is a method, and it takes one argument. This argument indicates which item we need to select. So suppose that we want to select, Let's say, third item, then we need to pass your three. And now again, let's change it's called or make it blue. So as the sea third item has changed, it's called. Some of you may think that number off items can be zero based, as it's in case of a race and also in other cases but in this guise unit indicate the exact number off items. All right, that's it about. See the classes I have showed. You see the classes, which are commonly used today. You might think that they're not kind of flexible or efficient once, but if you use them combined with program languages, then they may become really useful. So you should know how to deal with those super classes. All right, that's it. For now. Let's move on to the next lecture, where you will learn about pseudo elements in CSS 16. Pseudo Elements: all right. Once we're done with pseudo colossus, it start to move on to pseudo elements. As I promised in the last lecture. That's recall. Once again, what is the difference between cedar classes and super elements? So see the classes defined special state of an element, but in case of pseudo elements, they define style off the specific part, often armed. So in this lecture, I'm going to describe some of the commonly used pseudo elements today. Let's go ahead and open our text editor. I'm going to create a church one having government with the tax heading. So first suitor element that I'm going to show you is called First letter using Ed were able to select first letter off the element and style it. So let's select heading element then, in case of pseudo elements as remember, we need to use two calls, actually before CSS three version. I mean in CS is one. And in CSS to for Souter elements like pseudo classes there was used only one cover, but in CSS three version. In order to distinguish see the classes and see the elements, we use two columns. All right, so use first letter and that's changed style. But first I'm going to increase phone size. Let's make it seven pixels, then changed its style and making it a leak. And also I'm going to change color as golden rot. So if we say then, style or first letter will be changed and the rest of the letters will maintain their default stop. So that's the way how first letter sued. Element works. You can use it when you want your headings on your webpage to look nice and to make them stand out all right, next to the element that I want to show you is called before actually using before you're able to insert some content before content of an element. So let's insert something before they content of heading elements. Let's select again H one, then place to Collins than before. In order to insert content, we need to use property called content and then in quotes. We have to insert the content that we need. Let's say this is an also use your space, so as you see, the content is added before heading and no styles off. First letter is a polite for newly added content to be more precise now the first letter became T. Besides that, you're able to sell new content that's assigned to cover as Kareen as the sea New Content has changed its color. But accept the first letter it has maintained its previous tells, which we have a signed using first letter Super class. All right, that's the way how before sued. Element works. And now I'm going to show you last Cinderella man in this video. It's called after and actually it works in similar way like before. Syria element dust. So after city Element ellos us to insert content after the content off announced Let's select again H one heading elements they're right after than in sits in content, Let's say off website. So as the sea new content is added to heading and it's appeared after the initial contact off heading Aunt in the same way we can start this newly added content, for example, that's change phone size increasing to 50 peaks off and also change the color Make it Karina game. All right, so in this lecture we have learned about pseudo elements those three Sidhu elements, I mean, first letter before and after are really popular and commonly used today. Okay, that's it. See you in the next lecture 17. Measurement Units - Part 1: all right. It's time to discuss one of the important topics in CSS. In this lecture, I'm going to talk about what measurement units exist in CSS. Actually, it's really important to know how to deal with them, because some off the commonly youth properties, such as with height, marching, patting, phone size and ex cetera can take values measured in various units. In general, CSS supports to kind of units absolute and relative. Absolutely, units are fixed units. It means that, for example, if you assigned to property, let's say 200 pieces, then it will be always 200 pixels, no matter what. In CSS, we have several absolute units like pixels, centimeters, millimeters inches, points pikers. Actually, from those humans, we use pixel as book developers. As for the rest of the units, they're not recommended for use. One pixel is equal to 1 96 off one inch inch is different type of absolute unit, and it equals to 2.54 centimeters. Relative unit specify length relative to another property. It means that relative units scale batter between different rendering mediums. In CSS, we have following commonly used relative units. PM's Rams Vieux Port with. We put height and personage. All right, let's go to be his code and seen practice how those units work. At first, I'm going to create a Chuan having element with text heading and then below created developments. Then inside it, create paragraph with text paragraph. All right, so those elements, I mean H one and paragraph have their default phone size. Phone size of H one heading is equal to 32 pixels. As for paragraph, its default phone size is equal to 16 peaks is. But if we select them and change phone size, let's that first use absolute unit pixel right? 50 pixels. So as you see this, phone sizes applied for both arms. They became 50 pixels. So it means that those elements have phone sizes 50 pixels in every case, no matter what. For example, if we select body elements and change phone size, that H wanted paragraph will maintain phone size as 50 pixels, so it won't have any effect. Let's calm it this line out and then change pixel into e m. Right three e ems. So as the sea phone size of heading and paragraph is little bit decreased if we inspect the page and use developer tools. Then we will find that phone size for H one and P Elements is equal to three e EMS. Let's take a look on computed section. So as the sea phone size for H one N P elements is equal to 48 pixels, according to this calculation, one E M is equal to 16 Peaks is, but actually it's default situation. In general, I am relative Unit is closely related to parent elements phone size. So if we remove this comment and safe, then phone size will be increased as the sea. For now, it became 60 pieces. It means that one E M. Now is equal to 20 pieces. All right, So as the see paragraph is wrapped by development, it's direct parent for P element. That's selective and change phone size. Let's say into 10 pixels. The phone side of paragraph will be decreased, and if we check, we will find that it became 30 peaks Is It means that in case of AM, relative unit phone size of element is calculated According to the closest parent elements . Phone size makes sense, so again, I am is related to parent elements phone size. And if a phone size is not defined from any off the parent elements than by default, it's calculated according to root HTML armed. So if we comment phone size properties for different body out and then change phone size for HTML element, we know that by default, phone size of HTML is equal to 16 pixels. So if we assigned to a different value, let's I 30 pixels. Then you will see that phone size for both elements will be increased. All right, actually, that's the way. How am Relative Unit works? The next unit that I want to show you is a ram in General RAM unit is calculated according to only HTML element. So it doesn't matter if parent elements have different forms. Sizes in case of RAM, phone size is always calculated from HTML. So if we change E M into Ram, then nothing will be changed because, as we said, it's takes into account phone size of HD Malone. Therefore, if we remove comments from body and developments, then still nothing will be changed. But if we comment out phone size of HTML element, then phone size off H one and P elements will be decreased because by default, HTML phone size is set as 16 pieces and as the sea three rams equal to 48 peaks. So actually, this is the main difference between E. M and Rams. Nowadays, it's recommended to use GM and ramp relative units in order to measure phone size of elements because it has one advantage if we change phone size from browser settings that that phone size on the page will be changed accordingly. But it happens until phone size of HTML Element is defined manually. If we remove these common, then changing phone size from browser settings won't have effect on phone size. Up, out. All right, that's it about pixels, PM's and ramps. I'm going to stop here. Let's continue talking about the rest of the relative measurement units in the next lecture . 18. Measurement Units - Part 2: Okay, So in the last lecture, we have introduced to some of the absolute and relative units like peaks, L, E. M and Ramp. And now it's time to move on and learn about the rest off relative units. In this lecture, I'm going to describe how percentage Vieux Port height and viewpoint with work. All right, I'm going to start for a percentage for that. Let's create section Element in which I'm going to insert having H one with text heading, then create development and inside delis Place paragraph with some text. So percentages, relative measurement unit and it measures decides according to power. So let's select H one heading elements and said it's phone size as 100 person SEC phone size of heading is decreased. If we inspect the page and check phone size of heading in computed section, we'll find that it equals 2 16 pixels. So s beset percentage measures the size according to parent element. In this case, form size of handing is defined relative to HTML and, as you know, by default, phone size of HTML element is equal to 16 pixels. We have used here 100 person, and that's why we see here form size as 16 peaks is. If we increase phone size and make it 200% then it will become 32 picks is which actually is a Chuan elements default phone size. All right, let's select a transparent element, which is section and define his phone size as 30 pieces. So SEC phone size for heading and also for paragraph is increased. Actually. Paragraph inherited phone sizes. 30 pixel from section. As for H one, it also inherited from size. But because off 200 person phone sizes duplicated and we have here 60 pieces. So as a conclusion, we can say that percentage mergers size according to the closest parent element, as it was in case off e and unit Actually percentages frequently used with different seasons. Properties like with height, Margin parting also with positions. So that's demonstrate. One more example. Let's define background color off section of mint AZ arranger. Also change color of text making white and then make with off section element as 70% so as to see its size is the Crist. And now it takes up seven person off the page. No, let's select D balance right section, then Chief and then it first change its background color. Make it, let's say green for now. As you see, it takes up full with of its parent, Don't, which is section, but it would decrease it. That's I to 50% that it will take up half off the weight off its parent element because the gang person that works according to Parent Element, as it was in case of foreign size. All right, let's move on to next. The relative measurement unit, which is viewpoint height, actually view parties browser window size. In other words, it's space on the page, which is visible. So let's comment with properties for section and developments. And then let's a scientist section element hide property with value hundreds B H, which actually stands for viewpoint height. In this case, the Value 100 is relative 200 persons off Vieux Port as a C section element has covered entire page. We have here little spaces, and actually that's because off default margin off body and H one elements. So let's get productive, select body elements and set marching as zero and for H one. Also, we need marching as zero as the sea spaces are removed, and now it's easier to find out how view but Hide Works section adamant, has covered entire page in order to see better. Let's create paragraph after section element with kind of large text. So now SMS, we start scrolling down paragraph will be appeared. If we decrease height off browser window, then height off section will be decreased as well, because for now, visible part of page is decreased Animal research scrolling, then paragraph will immediately start appearing. All right, that's the way how viewpoint hide works we can use view poor with in a similar way. But for with actually, this property is not frequently used. But anyway, let's demonstrate how it works. That's the scientist section element with with value 50 viewpoint with So as the C section element took up 50% off you put at a glance. It seems that it works as percentage, but as he no person which works relative to Parent Element and Vieux port with works relative to viewable. Therefore, it we assigned to development with property with same value. Then nothing will be changed because development like section took up. 50 person off you put makes sense all right, That's it about measurement units and CSS. Throughout the course, we will frequently play around with different units, so you will get a good practice in it. Okay, let's go ahead. 19. Positions - Part 1: one off. The important aspect in CSS is how we can align elements on the page. If you want to place any HTML element wherever you want, then you need to figure out how to use CSS positions. So in this lecture you will learn about what kind of ceases positions we have and how they work. Actually, we have five different types of positions static, the relative absolute fixed and sticky, which is kind of new one. So let's go to be his code and still describing each of them. At first I am going to create several H demon elements. Let's open development and assigned to it class container. Inside the development, I'm going to create three boxes. So that's open and other developments with text Books one and also a scientist class books . Actually, it will be common class for all boxes. And also, besides that, I'm going to assign to it another class for its own CSS style. The site box want. Let's duplicate this line twice and changed tax in class names, right books to and box three. All right, let's go ahead and quickly style. Those elements first select container and change its background color. Let's use here or injured, also defined with as 700 pixels and height as 600 pixels. After that, select boxes using common class books because we need to define some common styles. At first, let's define wits as 3 50 pixels, then height 100 pixels than increased phone size and make it 25 pixels and also change called architects and making the white. And the last thing that I want to do is to define background colors for each box separately . So let's like Force One using class books one and change background color. Make it green. Let's duplicate it twice, then change class names as bucks to end box three and also change background colors. Use here Royal Blue and then great. All right, so first CSS position that I want to talk about is called static. Actually, elements have static position by default and their position according to the normal flow off the page, so elements with position static are not position in a special weight, and also they're not affected by top left, right and bottom properties, which you will meet in a minute. So in case off static position, we can change the positions of elements using margins, floats, flax books and CS is great. As for CSS Flax books and great, we will discuss them later. So regarding static position, I'm not going to waste a lot of time because it's the default position off elements. All right, let's move on to the next type of position, which is relative. Actually, an elements with position relative is positioned relative to its normal position in order to find out what this words mean. A Let's use an example I'm going to assign to second box position relative. So as you see, nothing is changed for now. But because of that second books has position. Relative were able to move the elements using top left, right and bottom properties. So, for example, we assigned to eat top property with value, Let's say 20 pixels. Then the element will be moved from top to bottom by 20 pieces, and as you can see, it has covered a little bit. The third box in the exact same way we can use properties for different directions. I mean left, which will move element from left to right, then right, which does the same, but in opposite direction. It moves element from right to left, and also we can use bottom, which will move element from bottom to top. Besides that, instead of positive values, you can use negative values. For example, if we write your minus 20 pixels that the element will be moved from top to bottom. So it means that bottom property with negative value works in the same way as top property with positive value and the exact same behavior we have in case of left and right properties. All right, so when we use those for properties, I'm in top, right, left and bottom. Then element covers other elements, but it would change sides of an element using weeds and high properties. Then it won't cover them. And also the top left color won't change its position because it always tastes on its original place. So that's defined with and height for second books as 500 pixels and that height s 300 pixels. So as you see, size off element is increased. But it didn't cover other Els, and actually it acts like Element, which has static position. All right, so it was all about static and relative positions as for the rest of the positions. I mean, absolute fixed and sticky. Let's talk about them in the next lecture. 20. Positions - Part 2 : All right, let's move on and continue talking about rest of PCs expositions next that I want to describe his position. Absolute actually element with position. Absolutely position relative to the closest position parents don't. It may sound a little bit complicated and confusing, so I prefer to describe how this position works. Using some practical examples, I'm going to use a gang. Previous example. I've just reset styles for second books, which we have used in pre a structure, So we have started talking about position Absolute and let's assign needs to first books. Let's save and you see that second box has gone, but actually it's behind the 1st 1 The reason is that when you assigned to element position absolute, it jumps out from normal flow off the page. So, using absolute position, we can manage moving the elements on the entire page without breaking other Alma's normal float. Imagine that the element exists separately from all the other elements, and therefore it doesn't have any effect On other elements. Positions like Position Relative were able to move elements using top right bottom and left properties. At first, let's prove that box, too, is place behind the Box one. If we move first box using top property, let's say by 300 pixels, then you will be able to see second box, Espy said. Element with position Absolute is position relative to its closest parent element. So let Society books one bottom property, with the value as zero as the sea boxes placed outside its parent element. I mean container, and it's positioned at the bottom edge off the page. So in this particular case, first boxes positioned according to Body Element. And the reason is that container, which is its parent element, has position set by default as static. So if we want to move Element according to its closest parent element, then parent should have any off the positions except static. So if we assigned to eat, position well, relative or position absolute in both cases, first books will replace at the bottom edge of container because now it moves according to its closest parent element. So remember that if and sister elements have static position, then element always moves according to body element. So, using position absolute, we are able to position element wherever we want, using top right left and bottom properties and also remember that it always jumps out from the normal flow off the page. All right, let's position for a spokes in different place. Use here top property with value 50 pixels and left as 200 pixels. So is the C E books. One partially covers both boxes. Actual were able to control which element should be at the top of others. And for that in CSS, we have property called Z index by default. Each element has the index property set as zero and in order to place element of the top of others. Then, of course, higher. Well, you will win. Suppose that we want second books to be placed at the top of others. Then we need to assign to it. Is the index property with higher value Dancy role. Let's say 10 safe, and you see that nothing is changed. The reason is that using just the index property is not enough because box to has position set as starting. So in order to work the index property, we need to define position off second box, Let's say, as relative And now if we save, then books to with the place of the top off this tack. Let's do the same for books three at first assigned to it position relative. So as you see it has covered books one as well, and then use Z index property with higher value. Let's 100. But if we a scientist, books one the index property with the highest value, let's say five hundreds. Then, of course, first books will be placed at the top off this tack because it has higher value than the rest off the boxes. So that's the way how the index property works in CSS. Last thing that I want to show you regarding position absolutely, is that if Element has positioned absolute and at the same time there is not defined for it withs and high properties that the element acts like in line armed. I mean that it only takes with that is required to display its content. So as a C Books one doesn't take full with that is available. All right, that's all about position. Absolute. Let's move on to the next position value, which is fixed. Actually, it's kind of different. One in case of fixed position element jumps out from normal flow, as it was in case of position absolute, an element with position fixed is positioned relative to the view port, which means that it always taste in the same place, even if the page is scrawled. Let's society container position as fixed also change its position. Let's use your top 200 pixels and left 1 50 peaks off. Then after development, create paragraph with kind of large text. So as the sea container is jumped out from normal flow because paragraph is placed behind it and SMS we stocks crawling page down container will maintain its place as fixed and it won't move. All right, that's the way how position fixed works. It's frequently used, for example, with navigations when you want to make them feats that the top off the page okay, the last position value that I want to describe his sticky as we sat in previous lecture. It's kind new one, actually element with positions. Tiki is positioned according to users scroll position. In order to demonstrate how it works, I'm going to comment out some off the styles for container and for box this as well. Let's just live here background colors. I'm going to assign to second box position sticky. So if we scroll down the page, then nothing special will happen. Because when we use the position sticky, we also need to define top position off the element if we assigned to it zero and that starts scrolling page down as soon as we reach to box to. Then it will stick at the top edge off page and will remain its position until its parent element. I mean container is hidden, so element acts like it has position Sata's relative until element reach to top edge off the page. And after that, it X like it has position set as speaks. Let's increase value of top property. Let's say 2 30 pixels, then starts crawling down the page so SNS distance between edge off browser and Box two becomes 30 pixels. Then books will stick, but the distance will remain. Asked 30 pixels between box and top edge off browser. All right, so that's the way how we can use position sticky and actually weaken, say that we're done with CSS positions because we have described all off them and details. Actually, it's really important part off the assess, so you need to know how to position elements on the page and of course, throughout creating projects, we will frequently use them. Okay, let's go ahead. 21. Overflow: Sometimes you may come across situations when content often element doesn't feed into its area, and it's displaying outside the elements box. This is the case when you need to use CSS overflow property so it specifies whether to clip content or to add scrubbers when the content of an element is too big to fit in a specified area. Overflow property has four different values visible, which is actually default value, hidden oro and scrub. Besides that, there is one thing to note. Overflow property works only for block level elements with I specified height. All right, let's go to V s code and write an example. I'm going to create development with some text, then select and assigned to eat some styles I'm going to define with as 400 pixels than height. 200 pixels also create border with the following values right, five pixels solid and the color green and then change background color. Make it great. I'm going to use your hacks additional value, right, C c c. So as the sea content off development exits, elements box part off, it is displaying outside box and actually, it doesn't look nice. So that's the moment when overflow property comes to play. As we said by default, overflow is set as visible. So if we assigned to it value as visible, then nothing will be changed. In order to hide the content that is displaying outside the books, we can use a value called hidden so as the sea content recede, Um, but in this case, it's not quite a perfect solution because we're not able to read the rest off the content. In order to fix that, we can assigned to over full property value called Odo, which are closest to create, scroll over and as the sea. Now we're able to read the entire content actually overflow, although creates crowbar when it's needed. I mean, when the content exceeds an area off aren't. But if not, if we delete part of the text, then scroll bar will automatically disappear. All right, so the last value that I want to show is scroll. It always creates scroll bars. I mean scroll both vertically and horizontally, whether it's needed or not. So you see that they are created vertically and horizontally as well. That's the way how overflow property works, and besides that you're able to create separate lee vertical and horizontal scroll bars. For that, we have to use properties called overflow X and overflow white. If we want to create horizontal scroll bar, then you need to use overflow X. So is the sea Vertical scroll bar is gone, and we just have it horizontally in case of overflow White, who will have a scroll bar on Lee vertically. All right, that's all about CSS overflow property. It's important to know how to deal with it because it ellos is to avoid some unexpected and undesirable results. All right, let's go ahe