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

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

25 students are watching this class

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.



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 ahead. 22. Floats: in CSS. We can use different ways, he noted, to align elements on the page In this video, I want to discuss one of them, which is float. Actually, floats are becoming less popular because nowadays, CSS Flex Books and CS is great system are getting support in modern Web browsers. Those two new CSS modules are more flexible. On Day L. A. Was to control layout of elements in much easier and convenient. Wait. As for flax books and greed, we will have to separate sections about them. So throughout the course you will be able to learn about them in details. Regardless of that, today, floats are still in use, so that's why I have decided to make a video about it. If you know how floats work, then it will be useful for you because you may come across some older ceases code where you may need to know floats in order to figure out in it. The flow of property allows you to take an element out from the normal flow off the page and place it as far to the left or right off the containing element as possible. When you use the float property You should also use the width property to indicate how white the floats down. That should be. If you don't, then the results can be inconsistent. The box will take up the full with off the containing element, like it's in normal float. All right, let's see what I'm talking about. Let's create development, which actually will be a container. So let's assign to it class container and decide it. Create two more developments with classes left and right. All right, I'm going to create some stars for container and for those child developments as well. Let's select container and change its background color. You make it great, then select development with class left. Change its back on color, make it or injured. Does that defined with as 100 pixels and height as 100 pizzas as well? Let's duplicate it and just change left into right and also background color. Use your green. So we have here two boxes which are placed inside container and suppose that we want to place first books on the left side of container and the 2nd 1 on the right side. For that, let's assigned to First elements float property with the value left so you see that green box has disappeared, but actually it's placed behind 1st 1 because, as we said, Floated Element jumps out from the normal flow off the page. Let's assigned to second books float right as you see second boxes floated on the right side. And also, maybe unexpectedly, we no longer see background color off container. The reason is that container includes only float elements, and browser shows it as if it's zero peaks is talk. In order to see it better, I'm going to assign to contain her border top with following values right, 20 pixels salted and the color blue and then use border bottom 20 pixels solid and block. So, as you see, borders are attached to each other and it pros. That container is zero pixels talk, so it's kind of weird thing, but again, it happens because floated elements air jumped out from normal float. In order to fix that, we have three different ways. 1st 1 is the simplest one. We just had to use overflow property with value or oh, and we have to assign it to contain. So you see that now container recognize its child elements, and it got back its height. Another way to fix that problem is to create new element after those child elements. Let's assign to it class career. Then we have to select it and use property called clear with value. Both, so is the see. The problem is fixed. The guy, actually this approach fix the problem. But as you see for that, we have to create new Element. So it's not quite an efficient way. In order to avoid creating new elements, were able to use a 30 way, which is called as clear fix hack. It's kind of modern approach we need to assign to contain a class called Clear Fix. Then from CSS, we have to select it and use after pseudo elements I remember using after a suitor element , we can create content after content, often element in this guys, we have to live it empty. So let's write content and empty quotes. Then also we need to transform content into block level element. So that's a sign display block, and lastly, again, we need to use clear property with value. Both so is the sea problem is fixed again. All right, so we have briefly over viewed house es afloat property works. And also I have showed you how to clear floats using three different ways. So I think that the regarding floats it's enough. See you in the next lecture. 23. Backgrounds - Part 1: hello and welcome to our next section. Once we're done with CSS fundamentals, now it's time to move on to more complex and advanced topics. So we're starting over new advanced CSS section. Actually, we call it Advanced Body. Don't have to worry about it because, as usually, we're going to describe each topic in details, and also I will explain them in a simple and easy wait. So after finishing the section, you will get a solid knowledge in CSS. So the first lecture is going to be about CSS backgrounds. It's really important topic. And if you want to your website to be looking modern and beautiful, you need definitely to be family with how to work on CSS backgrounds. All right, so, as you see here, we have a new folder called I Am G and Incited. We have only one image, which will be used throughout this lecture. Of course, you can find it in your source file, or you can use different image. It's absolutely up to you. First of all, before we start talking about CSS backgrounds, I want to create several HTML elements. Let's open developments in which I'm going to insert having with text. Hello World, then select developments and I signed to it. Some styles. Let's give it with and height as 500 pixels and also border with the following values. Right, five pixels solid on read in CSS. We have several background properties. Actually, in previous videos, we have used a lot of times background color, so you already know how it works, and therefore I'm not going to waste time on it. The next background property that I want to describe is background image. Using background image, you're able to set image as a background in order to set image as a background. We need to indicate part off it. For that, we need to use your girl and inside parenthesis. We need to insert right part often image in this guy's images placed inside I am G folder. So for support, unity indicated that slash and name off image. So if we save that image will be sad as a background off deep out. Also, let's change color of text and make it light. All right, let's center development and also place it will be down from the top edge. For that, I'm going to use margin property on top and bottom, right 100 pixels and then Odo. Okay, So before we move on to the next background properties, I want to note one thing regarding image path. If name of an image or name off folder contains space, let's rename eat as image Space one, and also let's change name in euro properly. Then you will see that image is disappeared because in this case, when it's a surround part with quotes, so we see that now images back. Actually, you're able to use quotes in every case. It doesn't matter if you have space in name of image or in name of folder. It will always work, but in case of space, you definitely need to use quotes. Okay, so that's the way how big grown image property works. Using it, you're able to set image as a background of HTML talent in order to describe some other bigger on properties. I'm going to make you some changes. Let's increase wits off border 200 pixels and change style of border. Make it double as you see we have here to borders. But actually it's one border. It has just different style, and that's why little space inside border is visible. We use this kind of border in order to describe better. How some off the back on properties work. All right, let me explain what has happened here because it's hard to see at a glance at the top and left sites, image is repeated. Actually, it's a default behavior image may be repeated horizontally or practically in order to see better. What does it mean? I'm going to use another background property called background size. Actually, we will refer to this property later in details. For now, I'm using it just for demonstration. Let's make their grown size as 200 pixels. It means that we're changing with off image. So you said that after changing size of an image, we see it repeated vertically and horizontally as well. Again, it's a default behavior off background image. In order to turn it off, we have to use another background property called background. Repeat with the value no repeat, so is the sea image is displayed only once. Besides that, we're able to repeat image only vertically or horizontally for that. Instead of no repeat, we can use repeat X for horizontal repeating and repeat. Why, for vertical repeating in this guy's let's change value back as no repeat. And also I'm going to get rid up background size property so I can see that image is no longer repeated. And we have space at the top and left sites actually, in their part off image I'm in part of the image which is placed inside here is visible. We see the rest part of image because we're using here Border type s double you make it solid that it will be no longer visible makes sense. Okay, so as they see images clipped on the right and bottom sites because by default, image is positioned inside box starting from top left corner. So if size of image exceeds the size of box, then by default it will be clipped on the right and bottom sites. So it's a default behavior off background image, but began control which part of an image we want to be visible. Using another background property called background position with background position, property were able to use different types of values like pixels person teacher, also names of positions like top left center and someone I'm going to start with pixel actually background position. Property can take two values. So we assigned to it. Let's say 50 pixels and then again, 50 pixels. That image will be moved by 50 pixels from left to right and 50 pixels from top to bottom. So the first value belongs to left to right direction and 2nd 14 top to bottom direction. So when we use peaks off, we physically move an image in order to change directions were able to assign to background position, property, negative values. If we use here minus sign, then the image will be moved from right to left and from bottom to top. As we said by default, image is positioned inside books starting from top left corner. So if size of image exists size off box, then by default it will be clipped on the right and bottom sites in order to change starting point. We're able to do that by indicating sites. I mean, if we're right here, rights and bottom, that starting point will be bottom, right corner and top and left sites will be clipped. After defining new starting point, we can move image according to this point. I mean, if we adhere with right and bottom that say again, 50 pixels. That image will be moved from right to left and from bottom to top by 50 pixels. All right, when we deal with background position, property were able to use percentage values, but it actually works in kind of different way. It's not direct substitute off pixels, so let's go ahead and discuss how it works. Actually, when we use percentage, were I able to control clipped parts, often image? Imagine that those cliff parts, I mean on the right side and at the bottom are 100%. I mean 100 person on the right and 100 person at the bottom. If we want to clip equal parts on all four sites, we need to assign to background position property values as 50% and then again, 50%. As you see, clipped parts of the top and bottom are equal, and the same happens on left and right sides. So we can say that image is centered in the box. Therefore, in set up those values we can simply use here Center. So is this he We have the exact same result. All right, let's change first. Well, you from 50% to 10 persons. So in this case, on the left side we have 10 person off the entire clipped part of an image, and the rest 90 person is clipped on the right side. So if we change 10 into 90% then in the same way we will have 10 person off cliff part on the right side and the rest 90% on the left side. Makes sense in the same way works second value. In this case, we can control Klute parts at the top and at the bottom. Let's use here 40%. So now we see at the top 40 person off Clift part and the rest 60 person is clipped at the bar. So that's the way how percentage values of work in background position property, the next background property that I want to show you is called background attachment. Using it were able to create parallax effect, and for that we have value called fixed. As you see, background image has changed its position because, in case of fixed values, off background position, property work according to the view port. So if we change 40% into 50% then back own image will be centered vertically, according to the View Port. In order to see better how fixed background works, I'm going to create paragraph after development with kind of large text. Then when we starts crawling the page background image will remain its position as fixed. So see how it works. And again in real world, it's called parallax Effect. Actually, background attachment property is not frequently used today, so I think it's enough to talk about it. All right, So in this lecture we have learned about some of the background properties like background Image, back on repeat background position and background attachment. I'm going to stop here. Let's continue talking about the rest of the background properties and the next lecture. 24. Backgrounds - Part 2: all right. In the last lecture we have introduced to some off background properties, so let's continue talking about the rest of them. The next background property that I want to describe is called background size. Using this property were able to specify size of background image in different measurement units, and also we can use keywords like contain and cover. Before we started working on background size, I'm going to comment those lines out and also decreased with off border and make it 50 peaks is all right. That's years background size property. Actually, we have used it once in previous like you're. So let's get rid of common and also places below. First of all, I want to use pixels. They're grown size property can take two values. 1st 1 is going to be for with and 2nd 1 for height. Let's assign to it 300 pixels as a with and 1 50 pixels as height so as the sea size of back own image is changed. Actually, it's not clipped. It's just rece iced when you define width and height manually than image can lose its quality if we decrease height of image that say to 100 pixels. Then it will be clear that image is compressed and it doesn't look good. So if you use values and pixels for background size property, then I recommend to use one off them and leave the 2nd 1 as a row by default. I mean, if we get to adult value for heights, that the image will be resized and it won't be compressed anymore because in this case, browser automatically fits image height the same you can do with with. That's a sign here, although in this case, brother will automatically fit with off image. All right. Besides, pixels were able to use percentage. So if we assigned to it for example, 50 persons, that image will get half off the with often Arment and height will be defined automatically , but like pixels, we can use here second value for height. If we use a gang 50% that image will get height equal to half off the element height. But in this case, we have same problem. Image became kind of stretched, and it doesn't look good. Of course, if we assign 100 person for With and height, that image will cover entire elements. But again, it won't be looking good. So the best way to cover the entire element and also to maintain quality off image is the use cover value. So in case of cover, part of image can be clipped. But element is always covered by image. We don't have any white spaces and also quality off images not damaged. Besides, those values you can also use contain, which actually X like the value 100 persons, I mean, in case of contain image takes up full weight off element, and hide is set automatically nowadays from those values, mostly each used cover. All right, that's all about background size. Next, I want to describe property called background origin. In order to demonstrate better how this property works, I'm going to assign to development putting, let's say, as 20 pixels actually background origin specifies from where to start displaying background image by default, this property said as parting box, it means that image starts displaying from the upper left corner off putting edge. In other words, parting is a part of an image. Also, there is another value called content box, so in case of content, box image starts displaying after parting. So if we say. You see that image starts after putting. And of course, position of background image is defined according to Top Left corner. Thus possible value off background origin is border box in case of border books that ground images displaying from upper left corner off border, and you can see that clearly on the page. All right, so with background origin were done and the next property that I want to introduce his background clip in order to see better how this property works, I'm going to decrease with and hide too 400 pixels. So in case of background origin property, we have default value as parting box. But in this case, default value is border box, so you see that nothing is changed in case of border books, image starts displaying from outside upper left edge off border. If we change border box into parting box, that image will start displaying from inside edge off border. In other words, it's displaying from outside edge off putting. As for the last value, which is content books, image starts displaying from inside edge off putting, or we can say that it's displaying within the box off content. All right, so the properties that we have just learned I mean background size, background, origin and background clip are kind of knew because they were added in CSS three version. Okay, so lastly, before we finish this lecture, I want to show you how to write some off those background properties in shortened way for that. In CSS, we have property called background. Let's comment those properties out so we're able to indicate here following values that start from color. That's a green. Then said image as a background, I'm going to copy the u R L Also, we can insert here background to repeat as no repeat, but then were able to define back on position. Let's say, as center also, we can make background speaks, which is actually a value off big grown attachment property. And lastly, I'm going to use your value off a grown size property cover. But remember that when you use cover in shortened way, then you need to write it with forward slash. All right, so does the way how we can use several begone property seizing shortened way. Besides, that were able to set several images as a background. Let's common this coat out and use again. Background property. At first, insert your girl. Then, for first image. I'm going to define starting point from left top corner, which actually is a default. But anyway, let's define it right. Left and top also use here. No repeat and defined with off image as 300 pixels. Actually, as you know, it's a value of big on size property, so that's why I use forward slash. All right, let's copy those values that place coma, then paste and change sites as right and bottom. So you see that both images are set as background. All right, that's it. So we have learned about CSS back on properties throughout projects we will frequently use them. We have introduced to lots of properties and values. So if you're confused or you have troubling understanding some off them, I recommend to re watch videos and also would be good if you play around with those properties and values and practice on your own. All right, see you in the next few deal 25. Gradients: all right, so in previous, like just we have introduced to several back on properties. We have learned how to set image as a background how to deal with its positions. And actually, I think that it won't be correct if we finish talking about CSS backgrounds without discussing CSS Grady INTs. So in this lecture, we will learn about how to deal with CSS. Grady in background actually ceases Grady INTs Hello us to display smooth transitions between two or more colors, and also you're able to define proper directions for those transitions. All right, let's see how it works. Using an example, create developments and a scientific class for CSS, let's say radiant that selected I'm going to define with as 700 pixels, then height 400 pixels, then create border with the following values right, five pixels solid and the color black. Also, I'm going to place box in the center off the page and also little bit down. So let's assigned to margin property on top and bottom 100 pixels and then Odo all right. So in order to use linear Grady int, we have to assign it to background image property. Then write your linear Grady int Inside parenthesis. We have to insert colors as arguments that's use year yellow and green. So you see that those two colors are smoothly transitioned and they create nice looking effect. As you can notice, direction off transition is going from top to bottom, and actually it's a default. Behavior were able to indicate direction by adding new arguments. So if we right here to bottom, it actually means that direction goes from top to bottom, then nothing will be changed because again, as we said, it's a default behavior. We can change directions. Let's say if you want direction to be from left to right, then we need to write you to write now. As you see, color is transition from left to right and in the exact same way we can use to left and to top. Besides that, we can make radiant diagonally, But in this case, we have to specify both horizontal and vertical positions. Suppose that we want transition to start from top left corner. For that, we have to indicate to write bottom, so it means that direction starts from top left corner and go to right bottom corner. If we change right into left. That direction will start from Rights Top corner and go to left bottom corner. So that's the way how we can create great Dean's diagonally. In those examples, we use two colors but actually were able to mix up more than two colors. If we at you, let's say red than those three colors will be mixed up and transition from top right corner to left bottom. What? All right, So that's the way how CSS radiant works. Actually, it's frequently used with images, so I'm going to show you a little trick how you can create nice effect using linear Grady int and background image, I'm going to use again image from previous lectures. Let's delete leaner Grady int with its arguments than the first insert You, Earl of Image we have I am Do folder and then right image name. Actually, I'm going to use several values. Therefore, let's get rid off image from here and just leave background property, then at here, several values. 1st 1 is going to be no repeat than defined position as centre, and also I want background to be covered. So let's use value off background size property cover, All right. Actually, I don't like this border, so let's get rid of it. And now I want to use linear Grady int in order to create little nice effect with image. Actually, we need to separate linear Grady int and those values by coma. So it's place it before your URL and then use linear Grady int. In this case, I'm going to use RGB a values as colors as remember when we used RGB values were able to define capacity off color. So let's write our to be a I'm going to use green color. And as remember, in order to get green color, we need to leave first and third argument zeros. And for 2nd 1 we need 2 55 So it's right zero than 2 55 and then zero again. Then as the value off opacity. Let's use 0.1 when you use value between zero and one, then you can omit zero and rights just 0.1. All right, so the first call or is defined let's place coma than copy this value paste on, just increase a little bit. Opacity Make it a point to. So if we save, then we will get nice looking effect with background image. So it's a little example we haven't done here something huge. But you see the difference. It looks good. And actually, this technique is used in building more than websites today. All right, so this is a common use case off CSS. Grady INTs In the real world, besides linear Grady int, there exists another value called radio radiant. But it's not frequently used, especially when the question is about building websites. So I'm not going to waste time on it. All right, that seat's see you in the next video. 26. Shadows: all right, it's stamped in. We want to next topic in CSS, which actually allows us to create really nice and modern effects on our websites and this lecture. We're going to talk about shadows and will discuss how to add shadow to text. And also we will learn about how to use shadow with boxes. Let's go to V is code. First of all, I'm going to create heading governments with text. This is heading with shadow and for CSS. Let's assigned to eat class heading. So the first shadow property that I want to describe is called text shadow. But before I use it, I'm going to start having a little bit. That's select. It's using class heading at first change form. Family used here attributions EMC and then Son Saref. Then increased phone size make it 55 pixels. Also, I'm going to place having in the center use here, text align property with the values center and then change its color. Make it dark. Great. All right. It looks nice. And now I'm going to use property called tax shadow. Actually, it takes several values. The 1st 1 indicates position off shadow in a horizontal line So let's use here 30 pixels and second value indicates position of shadow vertically. In this case, I'm going to use 40 pixels, so using those two values is mandatory. I mean, if you use only one, that tax shadow property won't work. So if we save that tax will get shadow. But at a glance, it looks like that we have here New Element. But actually it's a shadow. So as I first value, we have 30 pixels. It means that should always placed on the right side off tax by 30 pieces. If we increase it, let's say 2 50 picks off. Then shadow will be moved again on the right side. As for second value, which is 40 pixels in most shadow vertically from top to bottom. So remember that first value moves shadow horizontally and 2nd 1 vertically actually were able to use negative values. So if we use your minus signs, then shadow would be moved in opposite directions. All right, so I have showed you how text shadow is position, but actually without other possible values, it doesn't look good. So besides those values tax shadow can take 3rd 1 which actually defines how blurry shadow we want to be So, for example, assigned to eat 10 pixels. Now you see that it already makes sense. Tax behind heading looks like as a really Shevell all right. Besides that, we can adhere another value in order to define color off shadow, for example, that's use your green. So is the sea color off shadow is changed, and now it's great. Actually, I have used to your kind of large values because I wanted you to see better how this property works. And now let's go ahead and make it look in good Let's do it those values and instead of time, right, three pixels. Then again three pixels. Then write 10 pixels. And as a cover right, 888 So, no, you agree that it looks much better. All right, so it was text shadow. Let's go ahead and discuss how books shadow property works. Actually, text shadow and books show properties work in a similar way. The main difference is that tax shadow is used with text s four books Shadow property. It's used with boxes. Let's go ahead and create a simple card actually using this card, I want to show you how to work with box shadow. And also I wanted to get a little practice general in CSS. So let's open developments and assigned to it close car inside the development. I'm going to insert image. Let's use here again the same image which is placed inside I am G folder, but then below create H two heading elements with text my cluster. All right, let's go ahead and give those elements some styles. At first, select developments using class car define its with as 400 pixels. As you see, it doesn't have any effect on image because image doesn't take into account with off parent element until we define with manually for it. So let's select image right that car I'm G and assigned to it with property with a value 100 person. So now, with images calculated according to parent elements with and it became 400 pixels. All right, let's go back to card. I'm going to place it in the center and also a little bit down. So use here Margie property and on top and bottom right 100 pixels, and then wrote also, let's change background color, make it light Great. Then I want to make a little padding on all four sides right here. Five pixels. Also I'm going to place having in the center use here text align property with the values center. So now you agree that it looks nice and it's time to use books. Shadow property. As we said, it works in a similar weight, as Text shadow does so. 1st 2 values indicate positions of shadow. Let's write five pixels and then again, five pixels. So as you see, shadow is displayed by default. It's color is black, so for now it doesn't look good. Let's adhere other values for making shadow glory. I'm going to use 10 pixels and also change color making 777 So now it looks much more better, and I'm sure that you guess her great and modern effects we can create by using those properties. All right, Before we finish this lecture, I want to show you how we can use books shadow with over effect. So let's select card, then at hover that I'm going to copy this line paste and increased values, right? 10 pixels. Then again, 10 pixels that 20 pixels and also change called going to Let's say a So if we hover on the car, then we'll get such nice effect. Actually, this effect would be nicer if he used to your transition property, which will meet soon. But for now, I think it's enough. All right, that's it about shadows in CSS. Again, I want to say that it's really great tool in order to make your elements looking modern and beautiful and throughout the projects will frequently use those properties. Okay, let's move on. 27. Transitions: in order to create some cool effects using pure CSS, then we need to use the transitions actually see a CIS transitions. Ella was to change any of the CSS property values from one to another smoothly and also were able to define specified duration regarding transitions. We have four different properties, like transition property, which defies property. You want to add an effect, too. We have also transition duration. It defines how long we want transition to continue. Actually, those two properties are mandatory in order to work transition. But besides that, we have two optional properties, like Transition Delight, which closest to specify delay time off effect. And lastly, we have transition timing function. It specifies difference piece off effects while transition happens. All right, it's enough to talk. Let's go to be his coat and see actually how CSS transitions work. I'm going to use a simple example in order to demonstrate it. Let's go ahead and create books, open development, then assigned to it class books. Then I'm going to select it and give some styles. First of all, define with as 200 pixels and hide as 200 pixels and also defined background color as or injured. All right now I'm going to use hover, see the class and on hover. I'm going to change with a box. So let's select books, then right, hover and increase with to 400 pixels. So when we hover in box, then you see that weight is increasing. But it happens without any effect, and therefore it doesn't look good. So that's the moment when we use transition, we have to assign it to box. At first, we need to define property. Let's write transition property. In this case, we need effect to happen when with is increasing. So therefore, as a value off transition property we need to use with That's over again on box. And he said that the same happens. We still do not have any effect because we didn't define duration off transition and by default, ID equals 20 So in order to define it, we need to use property called transition duration. In this case, let's indicate one second as iteration. For that, we need to write here one s so let's hover and you can see that with is changing smoothly during one second, and now we have much more nicer effect. So again, remember that those two properties are mandatory to use in order to work transition. All right, let's go ahead and describe the rest of transition properties. Next. That I want to show you is transition too late When you want to start transition after some time, then you want to define duration off DeLay. Supposed that we want to start effect after one second when we hover on box. For that, we have to assign to transition delay property value as one second. So if we hover, that transition will start after one second. And also I want to note that when we get rid off, coarser with will be decreased also after one second. All right, that's the way how transition delay it works. So as you see, everything is really simple on with those simple steps were able to create really cool effects. Let's go ahead and describe the last property regarding transitions. It's called transition timing function. As we said, it allows us to define different speeds off effect during transitions. Actually, there are several values which you can use here by default. Transition timing function is set as he's. It actually specifies effect with slow start, then fast and then and slowly so. As you see we have here the same effect because again he's is a default value. Next we can use linear. In this case, effect has sent speed from start to end. Also, we have another value called Is in. In this case, transition effect has slow start and the similar way works east out but with slow end. And also we have easing out, which specifies the fact with slow Start and and so those are ready types off transition effects. But besides that, we're able to define difference. Pete's manually and for that we have to use a function called cubic busier. Actually, this function takes for arguments and it works in kind of complicated the way in order to explain it. I'm going to go website called cubic busier dot com. So here we have dysfunction on the left side. We have diagram using it. We can specify different coordinates which are going to be arguments. So as we said, cubic Beazer function takes for arguments 1st 2 arguments specify start off effect and the rest of arguments pacify and off effect. So here we have X line, which indicates time. I mean duration, off transition and white line indicates progression. So from those arguments, first and third indicate coordinates off Exline, and second and fourth arguments are for light light. So using those dots, you can define shape off car. When curve is far from this line, then starting moment off element is faster. And because of that car, off ending part is not so far from line that it's slower. So here we have proper arguments for that particular transition effect. Also, you're able to choose duration from here. As you see, we have here two boxes. 1st 1 shows us this custom transition, and the 2nd 1 is for built in transition of timing function values, which we have just discussed so you can choose from here any off them and check again how they work. All right. In order to test, we have to click on go. So as the sea first books moves faster at the start and then ants beats lower, it would place car far from line on ending part. Then transition at this start will be slower, but at the end it will be faster, so it's click and go and you see how it works. All right, you can test different cases. You can play around with different arguments. I understand that it's a bit complicated, but if you practice, then it won't be so hard. Actually, this website is really helpful. So if you want to use this property, then will be better. If you visit this website, let's copy those arguments and paste that hover and you see how it works for our example. All right, that's the way how transition properties work. And before we finish this lecture, I want to show you how you can use all of them in shorten way with Justin Line of Code. For that, we have to use property called transition, and then we have to define proper values in the following order. At first, let's common those lines out. They're right. Transition First value is going to be value off transition property in this case with, then we need to indicate duration right one second. Then it's followed by transition delay. Of course, if you want to use this property right one second and lastly, you can indicate value off transition, timing, function, property, let's say, is So if we hover, then you will see that all those transition properties work fine. All right. Besides that, we're able to have effect on several properties. Let's say we want to change background color on hover. Then at first we have to define eat that's right, your background color and make it green than in transition property. We have to indicate background color. First, we need to place coma, then writes background color. In this case, I'm going to use duration as five seconds and also get rid off value off the light. If we hover, then both properties, I mean with and background color away change smoothly, but with different directions. All right. And the last thing that I want to show you is that sometimes when you want to use transition on different properties, but with same duration, then you don't have to indicate those property separately. You can simply write all but then duration one second. Also, it could define other transition properties. I'm in delight at transition, timing function, but in this guise, let's just leave those two values. So if we hover, then transition will work for both properties. I mean, for with and for background color as well. All right, so that's all about CSS transitions. It's really great to which allows you to create really nice and cool effects using just pure CSS. Okay, let's go ahead. 28. Transforms - Part 1: all right, So in the last lecture we have learned about how to create nice effects using CSS transitions. And now it's time to move on to another important topic in CSS, which is called CSS transforms. Transformation is in effect, which closest to change elements position, size and shape. Actually, in CSS, we have two types of transformations, two dimensional and three dimensional. At first I'm going to start with two dimensional transforms, and for that I'm going to create again box. Let's open development with text books and also, let's assign to it Kloss books, then selected and give it some styles. But first, let's defined with as 200 pixels, then hide a guy in 200 pixels, also assigned to it Background color. Make it a ranger. So here we have our box. Let's go, having style the text. At first, I'm going to increase its phone size. Let's make it 60 peaks off, then change its color making white and also place it in the center horizontally. For that, I'm going to use text align with the Value Center. Besides that, I want to place it in the center vertically, so let's use your parting top with value 55 pixels. As you see the size of boxes, a little bit increased, and I'm sure that you, all of the guests, how to fix that. We need to use box sizing property with the value Border books. All right, so it's a C texted center. Actually, it's not perfectly centered vertically, but it's OK for now. So as we said, I'm going to start describing two dimensional CSS transforms. We have several different methods, which l. A wants to change. Elements position its shape and size, and the 1st 1 that I want to show you is called Translate. So let's right here. Transform that trust late translate method almost us to move element horizontally according to X axis and vertically according to why Access. At first, let's use your translate X, which moves element horizontally inside parenthesis. We need to indicate how far we need to move element. Let's instant year, for example, 200 pixels. So you see that boxes moved to right side by 200 pixels in the same way we can use translate light, which most elements, particularly from top to bottom by 200 pixels. Actually, instead of those two methods you are able to use just translate, which will take two arguments for X direction and for white direction. Let's remove this. Why live? Just translate. And then for X right 100 pixels and for white, 200 pixels. So you see that boxes moved 100 pixels to the right side and 200 pieces from top to bottom . Actually, that's the way how translate method works, all right, So using transform and transition properties were able to create some kind of animations, as it was in previous lecture. I'm going to use hover suitor class again. Let's select box, then at hover, then cut this line and paste here and also used transition property with values transform and for duration right one second. So if we hover, then books will move on a rich its destination. I'm in the place where you have indicated using those two values. All right, that's my want to next method, which is called rotate. Using rotate, we are able to rotate an element clockwise or counterclockwise according to specified degree. A