20 CSS Tricks You Probably Haven't Used Before

1. Introduction: Hi, my name is Aga and I'm a coding designer. I like pink color and dinosaurs but the most important thing is that I prepared special CSS classes, for you. 20 CSS tricks you probably haven't used before. Have you ever heard about Line Clamp property or Column Count? Have you ever applied Conic Gradient in CSS? Well, if not, this is going to be a very interesting journey because I'm going to show you 20 CSS tricks, which are not very popular to be honest but I hope that you will find creative and that will boost your work on lab designs. The classes are destined for everyone who has ever written a line of CSS code and is familiar with CSS classes. I'm going to show you 19 CSS properties and one HTML tag. With all of them, you'll be able to create even more creative layouts and even more cool effects. I'm sure that they will boost your daily workflow while coding your designs. Can't wait to see you on the student list. Bye. 2. Preparations – what you need: What you'll need for the classes. First, your favorite browser. I like to use Chrome and Firefox. Second one, code editor. Into classes, I use Atom editor. You can easily download it from atom.io and the third one package from the projects section I created, specially for you. You will find there the skeleton of the website in which we're going to quote some examples and some CSS tricks. The package includes index HTML file result PNG, which is the final layout which we're aiming at. Later on you can compare how your website looks like whether it's similar to this one and we have img assets, all assets that I used in the layout, all the assets that I used in the website, and of course CSS. Styles in which we're going to add some lines and create CSS. If I open it on atom, I can see HTML code and styles.css where I'm going to put all the new elements throughout the course. Here, you can see that I also left some comments so you'll immediately know where to put the new CSS. 3. Trick #1 – Multiple Backgrounds: Trick number 1, multiple backgrounds. If you ever wondered whether you can use several images for your background, the answer is that yes, you can do it. We can use background image feature for adding more than one images. We simply use URL function, and separate all of the other images by comma. We can stack backgrounds, but then for important information is, that the first background you provide is on the top layer, and the last background is shown in the back. Only the less background can include background color. Of course, others have properties for background such as background repeat, or background position can be applied as well. Let's start the exercise. Now we're all set up to add the backgrounds. Let's open the index HTML from our package, this is the website which we have, and as mentioned, we're going to add two images to our background. If I look under website that it's already coded, it will look like this. We have two backgrounds, and one is in the left top corner, the other one in the bottom right. We're also going to add background attachment fixed, which you can see that these two backgrounds are fixed in one place. We have this parallax like effect. All right. Let's get back to our code, we're in the styles.css, and if we open our dev tools, we'll see that this is header section, this is the selector which we have. I'm looking for a header, this one, and here, I left a comment which says that here we're adding multiple backgrounds. We have got background color, that we can add background image, URL function, and these two images are in the image folder. Let's open img folder and we should have hand.jpeg, and colors.jpg. These two files, I'm adding the first one, it doesn't matter which one will be the first one because they're not overlapping in each other. I'm writing img/hand.jpeg, the other URL function again in the folder img/colors.jpg. All right. I'm saving and let's refresh our website, as you can see, there is one change. We can see background, the hand, but here we have two images applied. First thing we need to change is definitely background size, the hand won't be stretched to the full width. We can do, let's say by 430 pixels, and the other 470. Unfortunately, the background is repeated by default, we need to reset this, background-repeat: no repeat; thanks to this, we'll have only one single image, and the images are stuck, all you can see are stucked. The first one on the front is hand.jpeg because it's the first one in the listed in the URL function, and the second one is colors.jpg and the colors are underneath. Let's define the position for them. We can define background position, defining for the hand, it will be left and top, and on for the colors, it will be right. These are the lines we need to add for our code, and back there's also applied, background-attachment: fixed; we can see this, parallax like effect. If I commented out, it will behave in a different manner. What I do, I simply copy these lines and I paste them below. Please remember that you can use all the other sub properties for backgrounds such as background size to fit the position and simply do the same just separate the values for given background using comma and just simply save it. We can mix backgrounds, you can mix images, and you can also add background color. Let's see, I have this two backgrounds of light. 4. Trick #2 – Viewport width & height units (vw & vh): Trick number two, viewport width and viewport height. The viewport is the area where the browser renders the site. This is the screen, the height of the screen minus the space which is reserved for the panel of the browser. Sometimes we want to set the height of the element or the width based on the viewport size. We can use viewport width and viewport height units, and this is something we want to use in our layout as well. We have our website and we want to define the header for 80 percent of the height of the viewport. Instead of setting 800 pixels, we can write 80 viewport height. If I define it as 50, you can see that this is the half of the height of the screen. If I change from full screen display, you'll see that this is smaller, so it's re-calculated based on the height of the window, bystand a viewport height. So I'm changing it to 80, and I want to apply that in my code as well. Writing 80 viewport height saving, and this is how it looks like. Of course, you can also play with viewport width and viewport height. I would rather not apply it to text, it's not very recommended method, but you can easily play with it on the images or boxes, containers. For instance, we can add here height, 100, viewport height, and you'll see that it perfectly fits 100 percent of the viewport height of the browser. If I change it to smaller, you'll see that it's actually changing its height. 5. Trick #3 – Font shorthand: Trick number three, font shorthand. Instead of listing all the SAP properties for font such as font-style, font-weight, font-size, line-height, or font-family, we can write everything in one line using font shorthand. How to do it? Let's see. So let's get back to your website and we have the heading h1 and we would like to h2 actually, and we'd like to apply to this one font shorthand. Here we can see that we've got font-family. We have some styles like font-weight. We've got line-height. So let's use shorthand property. So let's find the h2. It was class divider. So we have here our styles defined for the heading. So I'm writing font shorthand and pasting here my cheat sheet. I'll remember which SAP property goes in which order? First we defined font-style, which is normal font variant, which is normal as well. Font-weight, we've got 900, it's from here, so I can remove this. Font-size, which is 100 pixels, removing it as well. Line-height, which is 0%. So this is done, and then font-family, so I'm copying Darker Grotesque and sans serif. Removing it as well. If I didn't miss anything, we need to remove line-height. Save it. I can still have my comment. Let's refresh the website. We have our font shorthand working properly. If I commented it out, I would see that these properties are not longer applied. So of course, you can play with it. You can change it and make your code more effective and shorter, thanks to this shorthand property. 6. Trick #4 – Text stroke: We can achieve an outline effect for the font by stroking text and not filling that interior of it. Unfortunately, this feature is not fully supported by older browsers, however, it doesn't mean that we can't experiment with it. For this, we need to apply two properties. The first one, -webkit-text-fill -color and having this prefix webkit is crucial. The second one, -webkit-texts-stroke. If we look on the page that is already coded, you'll see that there we have the black outline of the heading. Enlarging this to CD effect. If I dive into the code, you'll see that for the heading, we've got text-fill color applied. The cool thing is that we can also make it transparent to create really cool effect. We can also change the color to make it a green, make it whatever you want. Of course, we have the outline which is defined by text stroke, and we can define the stroke width in pixels. We can at five, we can at one, whatever you want. We are also able to change its color. You can do whatever you want. Let's apply this to features into our code. We've got -webkit-text-fill-color, which in our case is white. We've got -webkit-texts-stroke. Here we add two pixels for the outline and color. I'm refreshing my website that I can see this beautiful effect of the outline. If you want to create a full bag for the browsers that are not supporting this to CSS properties, you can use text shadow. Let's simply comment it out. I'm pasting text shadow property. But first we need to apply color font, color white. You will see that using text shadow, we can create something like an outline effect, which we achieved using text stroke and fill color. I just wanted to show you that you have this option to apply a fallback using t shadow. But I strongly recommend you to play with fill color and text stroke. 7. Trick #5 – Drop shadow: Trick Number 5, drop shadow. Drop shadow is the CSS function that applies a drop-shadow effect to the image. What is the difference between a drop-shadow and box-shadow? Let's see. If we apply a box shadow you will immediately see the difference. Box shadow applies the shadow behind the element, behind the element's box, so you have the rectangular. For drop shadow, it applies to the element itself. If I have the image that has some transparency, just as this picture of these leaves, you will see that the shadow is created for every part of the image. This why it's good to know that we have got drop shadow property, same property is also applied for the hand. If I cover it up, you'll see that shadows appears. If I have box-shadow, the shadow is applied to the whole rectangular. Let's add it into our coat. For drop-shadow we've got 1,2,3, three coordinates, so x, y, actually are not coordinate, but the blur and the first value is the color of the shadow we have. We've got drop shadow, let's add this to plant. We've got filtered drop shadow, 10 pixels for x-axis, for a y-axis, we've got 40 pixels, 30 pixels for the blur and for the color we've got black but with transparency of 5 percent. I'm refreshing my website, and I can see for this plant I've got drop-shadow applied. Of course we can manipulate, we can change this values to 45, of course, add this to our hand, saving, refreshing the website and I can see that for my hand, the shadow is applied as well. 8. Trick #6 – Filter blur: Trick number six, Filter Blur. Filter property and its blur value apply a blur effect to the image. The larger value we will have, the larger blur we will create. The pixel that is inside the parenthesis is the radius of the blur. We don't longer need to use Photoshop to have blurry effects on our image on a website. Let's have a look into the code. This is the website at its final version and you can see that we have this blurred leafs applied here. Let's add this effect for this image and this one, this is class plant background and class plant background bottom. I'm going to switch to decode where in our CSS so I have plant background and on apply filter blur at, let's add five pixels. Our radius will have five pixel. I'm refreshing the page and I see that my leaves are blurred. Simply, easy, effective. You can also check the middle part of the page where we have leaf as well. To this image we've got class called plant background applied. This is why the blur filter works as well. 9. Trick #7 – Character unit (ch): Trick number 7, character unit. We can apply character unit. It represents the width of the character '0' in the current font, of particular use into combination with monospaced fonts. This is similar in spirit to x-height. Only, ch is based on the width of the 0 character instead of the height of that X character. Instead of defining the width of our paragraphs in pixels, we can apply character units. If check the website that is already coded, you can see that the text has limited width. Let's compare it with our current stage. Let's stay in touch. This is the heading we would like to shorten in terms of the width and for this case, we can apply maximum width that it's set in character unit. We have H2 contact heading and we can apply max-width, let's apply eight character units and we'll have our text limited. I simply copy this property, get back to the code look for the conduct heading and adding character unit. You can see here into comment that I added max-width and character unit. I can write it like this. Of course we can play with it for paragraphs as well. For instance, here we can write max-width, let's say 50 characters and our paragraph will be shortened. In terms of the width. 10. Trick #8 – First letter : Trick number 8, first letter. First letter is a pseudo-element which selects the first letter in the first line of a block-level element. For instance, paragraph. Inspired by the elements in print, we can easily transfer those ideas into web as well. Here, we can see the effect which we are aiming at. This is the first-letter of the paragraph, F letter, and I apply it here, pseudo-element with the first letter. Let's see how the CSS looks like. I applied pseudo-element, first-letter. There are some font properties such as font size family, text transform. But also I added float-left and some margins to have this letter perfectly adjusted to the floating text. Let's apply this into our code. This is my current state of the website, and I'm looking forward of paragraph. It's p class intro, I'm looking for intro class. First-letter. So I already created a selector for you, and we want to have it to float left. We wanted to have this letter in uppercase. We wanted to have font-family, Karla, font-size 100 pixels. Later we can apply to it, our shorthand for font property, line and some margins. Let's say for now, we're going to tweak it directly in the adapt tools, but let's add for start 10 pixels. I'm refreshing my page. I see that pseudo-element for the intro class works. I'm sorry, I did the mistake. It should be line-height of course. All right, refreshing. On the very bottom I have this pseudo-element, first-letter element listed. From the left side, I would like to have zero pixels, and maybe from the right side, 20. Let's compare it to the previous example. I think that we can also add a margin from the top. So like 15 let's say to have it nicely fitted with the text, that it's floating the paragraph. I'm coping margin, pasting saving. I can also, instead of writing this three lines, I can write font normal. This is the style variant. Next, what was next? We can take a look into the divider. It was style, variant, weight, size, line-height, font-family. All right, wait, so we've got normal-size, line-height and font-family. Let's remove it. Refresh, everything looks okay. This is how we can apply first-letter pseudo-element to the paragraph. You can also add it. For instance, we've got a list here. Let's copy the styles we have and let's create pseudo-element. We've got numbered-list li and pseudo-element, first letter. You have to admit it's a bit crazy. But having in mind that it's possible, we can create really interesting effects later on. I totally recommend you to play with the first-letter pseudo-element, and of course, you can make the letter larger, so to make the effect even more impactful. 11. Trick #9 – Line clamp: [MUSIC] Trick number 9, line clamp. The webkit line clamp property allows us to limit the content of a block container, to the specific number of the lines which we define. It's important to know that it only works with the combination with display property which is set to webkit box, or webkit inline box. We also have to apply webkit box orients property which is set to vertical. It's also essential to add overflow, which is hepta hidden, because, thanks to it the content, would be clipped. It won't be showed after a specific number of the lines which we apply. Line clamps are at a part of CSS overflow module level three, and it's currently the editors draft. We can apply line clamp, but only with a webkit prefix, which surprisingly works for all of the other major browsers, not only in Chrome or Safari. We would like to apply line clamp to paragraph with a class shortened. What we have to do, we need to set this four elements. The first one of which I was mentioning is display and we need to set it to webkit box. The next thing is to add webkit line clamp. This line clamp, let's limit it to three lines. Then we need to apply webkit, box orient and set to vertical. As you can see that the paragraph is already shortened to three lines, but the rest of the text is still shown. To limit its height visually, we need to apply overflow, set it to hidden. Thanks to what we achieved three lines of text, although our paragraph is super long and the text is still there, but visually, it's truncated it to only three lines and we've got an ellipsis at the end. So it gives the user information that actually there is a more, more content hidden within this paragraph. Please remember about these four things that need to be applied. Of course, I'm adding it to my editor, shortened. Yes, this is where I left a comment for you, pasting it. Just quickly, doing cleanup, saving, refreshing, and I have the paragraph shortened. 12. Trick #10 – Numbered list: Trick number 10, numbered list. We can easily create a numbered list by using ol tack. What we got as a result are numbers displayed before every element of the list, it's really handy and useful. But what about styling this numbers, have you ever try that? To do it, we need to play with some CSS properties called CSS counters. CSS counters let you adjust their periods of content based on its location in the document. To use a CSS counter, it must first be initialized to a value with the counter reset property. Then when we're done with initializing, later that counters value can be increased or decreased and this is done by counter increment. The value of a counter can be displayed using either a counter or counters function and a content property. Let's see the practical side of CSS counters. Now let's have a look into our list. This is the ordered slice to debt I already prepared for you. What I did is that the numbers that are displayed before every ally element, before every element of the list. This is the list-style lawn. If I come in it out, you'll see the numbers. But we're hiding them in order to use pseudo elements for using CSS counters. That's getting back into decode. I have my numbered list, ally. First thing I need to do is I need to apply counter increment property. We don't use counter reset because this is already numbered list and we have already our elements appropriately numbered. The only thing we do here is we set counter increment to ally. This is the given name, so we can also add, for instance, list element, whatever you want. Then we need to create pseudo-class. So we have numbered list ally before. Here we need to add content counter and address the counter that we already created. The value that we already created which list element. This works like this. Here of course, we can add styles to our numbers. But first, let's see if it works. So I'm saving this, refreshing the page and I can see the numbers. I can see that the numbers are showing up and these numbers are correct. So we've got six elements. Who could six characters, we've got 1,2,3,4,5,6. So at, so let's play with it a little bit. We can, for instance, add border radius 50 per cent. For now, we can add the background. Lets say blue for now, just to play with it. Add font-size 20 pixels. I'm saving, refreshing. I can see that the styles are coming. But let's apply the styles that are visually appealing. So this is my cheat sheet. I have the numbers already here, so I can copy the value for the background. I can see that font size is 30 pixels and the width and the height of the, of the circle is 45 pixels. This is the diameter. Also there are some positioning that helps us to keep the number positioned nicely according the line of the text. So let's simply do it. I've got before here, I've got my background, I've got height, 45 pixels width 45 pixels, position absolute, left. Let's add minus 40 pixels, line-height 45, text-align center, font size at 20. We already have font size, so we can add 30 and change the line height to 40 it looks nicer and the font family should be Karla. Actually font size 25 and line height 45. It looks nicely. It's looks like something that we wanted to achieve. Taking all of the styles that are right here, and I'm pasting it to my pseudo element, refresh. I can see that the number of these styles, you can use CSS counters for different element in section of the website. So later on, I will give you an exercise to try to apply numbers to, for instance, headings or paragraphs, different elements, than the numbered list, which already is the numbered element. So it's a bit easier to apply CSS counters to it for the pseudo elements. 13. Trick #11 – Truncate text: Trick number 11, truncate text. I've already mentioned truncating text with line-clamp. We can also use a different method. To truncate text, we need three CSS properties, white-space, overflow, and text-overflow. White-space needs to be set to no-wrap, overflow to hidden and text-overflow to ellipsis. Text overflow only occurs when the container's overflow property, has the value hidden, scroll, or auto, and white-space no-wrap. This is why we need three of them to achieve this effect. Let's have a look into our website, and we would like to truncate this whole paragraph to only one line. What we can do is we can apply these three properties which I already mentioned. All right, so we're looking for the paragraph, it's here. I can actually add a class to it. This is the paragraph under the numbered list. I'm looking for the numbered list. Here we have the paragraph, I'll title it truncate. I'm adding these three properties. To make it work, it's overflow: hidden: text-overflow: ellipsis; and the last one is, white-space: nowrap; Am saving it. Refreshing my website, and what I can see, is that my whole paragraph is shortened to only one line, and this line is ended with an ellipsis. If I command out, one of the properties, you'll see that it doesn't work as we expect. Without text overflow ellipsis we don't have ellipsis at the end. Without white-space: nowrap; Unfortunately, the text is not truncated. The overflow works, but what if we add white-space: nowrap; and text-overflow: ellipsis? Well, actually, the whole paragraph is somewhere here. But because we don't have overflow: hidden; the rest of the text that is not truncated, is still displayed. Thanks to overflow: hidden; we have only one line and it's ended with ellipsis. Thanks to text-overflow: ellipsis. We can play with it and adjust it to your needs. 14. Trick #12 – Gradient text: Trick number 12, gradients text. Let's imagine we would like to apply gradient to this heading. Let's stay in touch. The question is, can we actually apply gradient backgrounds for detects? Yes, we can. We can do it. Thanks to some CSS properties we have. Let's have a look into the code. We're looking forward the contact heading. Yes, exactly this one. The first thing we need to add is the background. Background that will be clipped to our text. I would like to apply radial gradient and I already have my cheat sheet. Two colors, pink and yellow I would like to use. We have the background color and then the background color should be masked regarding to the shape of the text. The rest needs to be clipped so we have to get rid of the unnecessary elements from the container where the text is. We can achieve this by applying webkit property, webkit background clip. This is the one we need to have and we apply texts because we want to clip out the text. The last thing we need to apply, fill color and we need to set this to a transparent. We've got webkit, text, fill color, and apply to transparent. I'm refreshing the page and the magic happens. I have a beautiful gradient applied to my text. If I coming out, for instance, fill color, you'll see immediately that gradient doesn't work. These are the crucial properties we need to add, and, of course, we can add webkit-texts-stroke, and that two pixel black. This is the effect we would like to achieve in the end. I'm copying this line, pasting, and beautiful gradient text appears. Of course, you can play with the background applying linear gradient. You can play with the colors. You can add more of them. Feel free to do whatever you want with the gradients. I hope that you will have fun. 15. Trick #13 – Cross Text Selection: Trick number 13; Cross Text Selection. When we select any portion, any part of the text in the browser, it shows the blue color. It's the default color that is generated in every browser. But there is CSS's tricks that helps us to change this, to change color for a different browser. We're in the CSS file in our exercise and let's create pseudo-class which is called selection. For this one, we can apply the color which we like to have our text be highlighted. So to think I apply a simply background color and I pick the yellow one, I'm saving it, refreshing my website, and I can see that the selection is yellow. If I remove this pseudo-class to selection class, you will see the default blue. So let's get back to our yellow color, and let's apply different color. For instance, for Firefox, I was using Chrome, but let's switch to Firefox and let's have different color for Firefox. So for Firefox, we need to add pseudo-element pseudo-class, but with the vendor prefix. So I'm adding moz for Mozilla and selection. Let's apply background-color, salmon. I'm opening Firefox, which was already prepared for you and if I select a text, it's salmon color. For Chrome, it's yellow. So you can play with it, and I think it's a nice, nice small effect that has the influence on the user experience. Feel free to use stacked selection, feel free to change it, feel free to use different backgrounds. 16. Trick #14 – Conic gradient: Trick number 14, conic gradient. I was super surprised when I found that we can use pure CSS to create pie charts. I think it's super fun because for a simple visualization, we don't need to create SVG or we don't need to apply complicated JavaScript libraries. It's just CSS and it's just only one line of code guarding to do website, which I'm linking here right now. It describes that coning ingredient is the CSS function that creates an image consisting of a gradient with color transitions, rotated around a center point rather than radiating from the center. This is why we can achieve this pie chart like effect. Let's have a look into our website. What you can see is the pie chart, that is created with only one line of CSS. Let's have a look how it's constructed. I've got three colors in a pie chart. It's the background property set. It sets to value conic ingredient. We've got three colors. What's happening here is they are divided into percentages. The first color, that orange one, takes 25 percent of the whole circle. You can see it's exactly one-fourth quarter. Then we've got the blue one, which takes 25-56 percent, which is 31 percent. This one, and the last one takes the rest. From 56-100, which is 34 percent. This is how we can construct a conic gradient. Of course you can play with different colors. Let's get back to our code when looking for a pie chart. It's here. We applied back rounds conic gradient. Here we've got, for instance, salmon, blue and yellow. Sorry for not pasting the appropriate colors, but I hope that you will get them from the package. Salmon, let say from zero percent to 30, from 30-50, and yellow from 50 percent to 100. I'm saving it, refreshing the page. What I see is almost the result we would like to achieve. But the thing is that we also need to apply border-radius thick the percent to achieve the circle. I'm applying border-radius 50 percent and I have the graph. I'm pasting it saving, and my graph is ready. Of course, you can change the colors of the legend. You can change the colors to play with it, its symbol, it's fun and I think that you can also use it for decorative purposes. 17. Trick # 15 – Word break tag: Trick number 15, word break tag. Although I titled the course 20 CSS tricks, I'll be mentioning one HTML tag which is work break opportunity. It's not very popular, but I decided to share my information because I think it might be very handy in some situations. So let's have a look. Work break opportunity tag specifies where in a text it would be okay to add a line break. It can be used in cases when a word is too long or we're afraid that the browser will break our lines in the wrong place. In the second part you'll see that there is a telephone number and what about dividing this text into some parts? What about breaking this text in particular places? For instance, for every five numbers, every five characters. How this long telephone number will behave if we change the width of the browser? Let's see. The number stays in one line and actually it's changed its position, its now inside, but still behaves as full as the line. What if you would like to break it in several places without adding any extra space, extra character. We can use work break opportunity tag. So let's see our HTML. This is my telephone number, span disrupt in a span tag. I can add work break tag every four or five or six characters. So here we can give even number, and our whole telephone number will be break. I'm saving, refreshing and I see that my telephone number is now broken. It starts in the first line and it also appears in second one. One of the part of this number. So you can see that this is the first one, the second part, the third one, and the last one. So when making the window browser smaller, more narrow, you will see that some parts of the number will change its position regarding the work break opportunity tag. This is the telephone number, we can remove it, and we can write here, for instance, a very long word. After every word, we can add word break tag. So it will break the whole text into lines we would like to achieve. So knotted around them way. We have a very long text, let's highlight this. I cannot see it. So this is the word very long. You can see that it keeps very long. So it doesn't divide in the middle of the word and here we've got another very long word. Although it might seem very niche tag, I think that there are some cases which it might help. 18. Trick #16 – Custom Bullet Points: Trick number 16; Custom Bullet Points. What about creating a list which is unordered, using UL tag, but having a custom bullet points? We can also apply an image. How to do it? Well, let's have a look into the code. If I check out the code, I will see that my class code list has list elements, and the very important thing is to reset the list-style, set it to none. We want to have those default black bullet points. The next thing that it's applied here is the pseud-element. It's the before pseudo-element class. It's applied to the LI, the element of the list. To make it work, we need to set content. It can be empty, but it's very important to have the content property. Then we have some positioning connected with this yellow circle and a background. If I change the background color, you will directly see the change happening here. Of course we can have the squares, we can change the height and the width of it. We can play with some positioning, everything is up to you. There's also a magic thing that we can add, and it's adding the background to the content. There's also one cool thing that we can actually apply an image, to the before pseudo-class. What if I would like to add an image here? Image before every element of the unordered list. We can do it using content property and we set the value to URL. Instead of having this content empty, of course we can write something in here. Let me write it once again. Like one, two, three, we can actually provide the URL function. The function which has the path to our image, I remember that I have image called banana icon, and it's an IMG tag. So I'm writing url(../img/banana-icon.png), and I have my icon with banana ready. Of course I can command out the background, or maybe I can change it to having it in pink color. I can also mix the background. I can mix some dimensions with the content, which is actually an image in here. Your task now is to create a similar thing. I switched to the website that we're currently working on, and if you go a bit lower you'll see that there is a list. It would be great if we could apply the styles to it. The thing that you need to remember is that, first we need to reset list-style. If I navigate to it, we've got UL class list. For this LI we have already list-style set to none, which is very important. Then we need to apply the pseudo-class before for LI element, and the very important is content. Even if we don't want to apply an image here, the content is very important to make the pseudo-class actually appear. I'm leaving this task for you. If you have any problems, you can go back to the first second of the lesson and see how the pseudo class is created. If I switch to the code editor you'll see that I've already created this selector for you, so we've got before pseudo-class for LI element in container that has list class, and you can write here everything what you want to get the custom bullet point. Please remember about content property. 19. Trick #17 – Object fit: Trick number 17, object-fit. Object-fit, CSS property, defines how the content of img or video should be resize to fit its container. We have various options, such as cover, fill and contain. Let's have a look into practical examples. In this exercise, we're going to limit the height of the image container. This is the final result we would like to achieve. If we inspect the image, we'll see that actually it has 600 pixels width and 400 pixels height. In our current project, we see that our image is super long in terms of height. What we're going to do is we're going to introduce some limitations. I have the class object-fit, I already created it for you. Let's add height for a 100 pixels. Unfortunately, the whole image is getting smaller, but we would like to achieve a different result, the one that I've already showed you in the previous layout. For this, we can also add with 100 percent, thanks to the what our image will be stretched. But I don't like the fact that it actually changes its proportion. Thanks to object-fit, we can define how the image will behave in this area of limitation, the container that we set on the img tag. We can choose "contain", so the whole image will be contained in this container, 600 by 400 pixels. We can add cover, so it will be stretched to the fullest width we can "fill" so, every pixel will be filled by the image no matter how stretched it should be. We can set none, so the image will keep its natural size. Let's choose "cover" for it. Object-fit once again, cover and this is the result we would like to achieve. I think that object-fit is a great property also in terms of responsive design, sometimes we have really strange proportions of the images, and it also varies depending on the resolution, whether it's mobile or desktop. I strongly recommend you to play with it. I just want to copy all this properties I wrote. I'm getting back to my code and looking for class object-fit, which is ready for you, pasting those lines, so height with an object-fit. Refreshing the website and my image looks really nice. 20. Trick #18 – Column count: Trick number 18, column count. Column count property breaks the content of the given element, for instance, paragraph into specified number of columns. So the browser will evenly distributed the content in exactly the number which we gave it. So what if we would like to have two columns instead of this one block of text, we can easily do it. We have class outro, and here we can apply column count properties and set it to two. Just like that. Easy and simple. Of course you can increase the number. We can get back to the previous situation where we have just one column. So it's very easy to manipulate the content of the container using column-count. Getting back to my code looking for outro, pasting column count to saving, refreshing and my change is ready. 21. Trick #19 – Adjacent Sibling Combinator: Trick number 19, adjacent sibling combinator. The adjacent sibling combinator matches the second element only if it immediately follows the first element. What's more, both are children of the same parent element. What if I would like to style this paragraph and add a bigger margin top and have the width limited? I can see that this paragraph is the children of col-md-6, and it's the next tag, the next selector after chart legend. We can use adjacent sibling combinator. I've already prepared a selector for you. This selector selects paragraph that is immediately after chart-legend class. In other words, paragraph immediately follows chart-legend. If I would like to apply here margin-top 20 pixels and max-width, let's say, 300 pixels, I'm saving it, refreshing my page, and I see that these styles are applied and these styles are applied only to this paragraph. The other paragraphs, like for instance this one, is not affected by our selector. Even if I add another paragraph, we can change its content, and this paragraph will be also the children of col-md-6 container. Let's see which tiles would affect it. Let's see how our website will be rendered and how these two paragraphs will look like. I'm refreshing the page. If you compare it, you will see that only the first paragraphs right after chart-legend will have the styles applied. This one would have just general p selector which we created earlier. We can tell that adjacent sibling combinator works. You can use this for various purposes. Sometimes it's easier for us to use such selectors rather than creating classes. I think it's worth playing with it. 22. Trick #20 – General Sibling Combinator: Trick number 20, general sibling combinator. General sibling combinator separates two selectors and matches the second element only if it follows the first element. However, it is not necessary that the second element is the immediate follower. Both of these elements should be the children of the same parent element. So the same situation as for the general sibling combinator. What if we would like to apply one style, for instance, line-height for all the paragraphs that follow chart legend, but not necessarily immediately after chart legend. All of the p tags, so all the paragraphs that follow charts legend so this one and this one will have the styles applied. Let's add line height, 200 percent and if I refresh the page, both the first one and the second will have the line height 200 and the other paragraphs would have 150. Feel free to use general sibling combinator for your needs. 23. Final word: So I'm leaving you with a current stage of the website. If you did all of the exercises I was explaining, this is the stage you should have at this point. So there are some things that still needs to be added if we compare it to the final version, which I have on my computer, you'll see that we still need to work on this section where I apply it multiple backgrounds and of course you can find all the images in the package. There's also some styles on the text in here. So we should apply here the images, we should change the text stroke here. So still some homework for you. If you would like to compare your website from the exercises. You can open the PNG file. There is in the package, so you will see all the details thoroughly. Of course, you're invited to experiment with CSS I prepared for you. You can change the values. You can use the creative techniques I just showed you for various purposes. Of course, you're more than welcome to show what you've came up with. I am very eager to track your progress and to see what's you're inspired by. Please post your works into community section. In general, I hope that you had fun and became more familiar with CSS properties.