How to Customize & Design any WordPress Theme - WordPress CSS Tips & Tricks Tutorial

hello friends I am Nishita Locke to.com entering this way I'll teach you some tips and tricks of using CSS to improve the design and user experience on your website now many times it happens that you want to do something on your website but you're not able to achieve that because your WordPress theme doesn't have the design functionality so at that time these simple CSS tips and tricks can come in handy and towards this video to follow this video don't need to know any HTML or CSS it's all gonna be super simple hopefully now without wasting any time let's start doing it so first of all how to use it so for this we'll be using all free tools in fact there is no tool required at all so we'll be using inspect elements so what is inspect element so you can go to any website so suppose this is your website you can go to your website and if you want to make some changes for example to this title what you do is you just bring your mouse cursor over there right click and type in our selecting inspect ok you will see this option now you can do one more thing you can just press f12 on your keyboard and you will see this inspect element at the bottom now what you can do is you will see this cursor over here if you can if you can follow my mouse cursor you will see this select item so when you click on that wherever you bring this whatever you select for example if you select this button now you can see on top of that button you can see all the different details for example you can see the class name what is the size so here the size is 165 in 243 so width is 165 of this button and height is 43 the color of the text is white font is 7th in pixels poppins background color is this red color EF 3 F 4 9 padding is 12 pixels top and bottom and 25 24 pixels left and right so you can see all this details so if you go if you bring your cursor to this option to new arrival this text you can see all the details over here as well so we'll be using this tool and we'll see how to do some changes over here we'll be seeing many different CSS elements now the first one that I want to show you is the alignment one so we'll start with all the simple and very basic ones and later on in this video we'll see some more advanced things now those are also going to be very simple it's advanced but it will be very simple to follow along so we'll see at the end of video how to use backgrounds and how to use in a box shadow how to use different you know image in D and how to position this many different things you will learn everything in detail don't worry now first of all is alignment so what I will do is I want to select this option so you can simply select this thing now whatever changes you want to make just select that thing for example if you want to make some changes to this text which is in the middle click on that text now this text is by default aligned to two in the middle if you want to change the alignment to left or right you can do that so now let me increase the size of this thing so you can see at the right hand side you have all the different options over here so these options are related to this text you can see the font the font size and everything now what I want to do is I want to add some you know alignment thing or your so I'll just type in text align and I'll make it maybe left now as you can see this text is now aligned left if I just type in right over here okay now as you can see this text is now aligned in the right side so this is how you can do the basic alignment changes now what happens is whenever you do some changes like this you should always copy this text okay you should always copy this code so just copy it from here because when you refresh the website everything will come back to normal everything will become normal or whatever or however it was so this text was in the middle and now still it is in the center now if you want to make some actual changes on this website what you have to do is you have to create a new file you should always create a new file select this option let me bring it a little bit up above you should create a new text document so what I'll do is I'll select new and I'll select this text document you can name it anything so I'll just name it text I'll just name it see if it's CSS and I'll paste in that code over here so this is the code now what you should be doing is above every single code you should add some comment over here so that you know what this code is for so I can now type in something like hero section because that was hero section so hero section subtitle because that was here subtitle in the hero section so I know what this code is for okay so this is how you enter a comment you just put a forward slash few Asterix inside that whatever your comment is then again you end this with few Asterix and this forward slash then after that you have your code now what you can do is you can copy this thing come back to your website now you can click on this option customize or you can use some other free plug-ins free custom CSS plugins as well but I think this thing is pre-built in every single theme so we can use this option you can simply click on customize now your from the left hand side bottom you'll see this custom CSS option there are many different codes already present over here so I'll paste this one at the bottom now as you can see as soon as we pasted in this code this text is now aligned towards right now what you have to do is you have to just you can now just change everything from here if you just select this right and type in left over here now as you can see this text is aligned towards left if you just type in center over here this is now aligned in center okay rest all the text will be same if you just make it for example right okay only that text will change for example only this text is aligned to right rest all the other thing on your website is same okay now we can publish this page now alignment for text and everything is very simple but for button it is a little bit trickier so let me just show you that so I'll right click on this button click on inspect okay let's see whether we have selected this button now if you select this button and if you click on this option for example if you click on this plus button which you can see if you follow my cursor click on that plus button and let's add a new code over here so I'll type in text-align:left now as you can see no changes is taking place in this button okay because button is a four button and for images and something like that which is a block element you you cannot do these changes so for that you can select the wrapper okay here is the wrapper as you can see element or button wrapper so you can select basically the div class you'll see this div class is equal to so you have to select the div class inside which this button is present so when you click on that when you however that div class you'll see that it is selecting the button section so click on that div class now click on this button this plus button and here you can type in the thing text-align now tap-in left now as you can see the button is aligned towards left or whatever you want to type you know your right center so if you like this code just copy though here paste it on your website and this will make the button or left a line or write a line now what I'll do is I will delete this code because I don't want this to be left and right aligned it's not looking good I just wanted to show you so delete this thing click on publish okay now let me refresh this page I guess now let's move on to our next element which is display element and in display element I am I'm looking at only one specific element which is display:none so this is very useful especially for me and in many different cases so what we'll do is we'll select this option especially in e-commerce type of website for example this is the perfect example over here now here if you go to the shop page as well if you click on shop page now this is the ocean WP by default in ocean WP you have all these things now in shop page I do not want to display this select button or Add to Cart button so what I can do is I can just right click on that button click on inspect now when you select this button you'll see all the code related to this button at the right hand side now here as you can see there is one display property already present over your display:inline-block so we have to make it display:none because I want to hide this button so what you can do is you can select this inline block delete it and type in none now as you can see as soon as we type in none that button is now gone so what you can do is you can just copy this much code from you come back to your CSS click on custom CSS and paste in this code at the bottom now remember one thing let me first see this thing okay so this code starts from here you can always give it some comment at the top now you don't need all the other codes you can delete them if you want for example float and background color and everything because we just wanted this code display:none rest all the other codes you can if you want you can delete them okay just like this if you want you can leave them if you want you can delete them I recommend only selecting the one or you know leave the one which you have done the changes to now click on publish that button is called similarly if I don't want this category name this t-shirt is the category name if I don't want that I can right-click on that click on inspect or you can do this option as well click on this select option and bring your cursor on that text you'll see that text over here now what I'll do is I'll select this option on top of that as you can see this is the category this is displaying the category so I'll click on that and here also you can see display is equal to block so I'll select this block and I'll type in none now again that thing is now gone so I can again copy this much code and paste it over here ok and again if you want you can get rid of all the other code just leave this one display:none and click on publish so this thing can be very useful so many many times for example this suppose in the menu I have this menu and on top of that I have this top part but I don't know how to get rid of this top or how to delete that or how to disable that top bar so here also this thing can be useful you can just right-click on that top bar click on inspect ok just select the one ok from from bottom select the one where everything is getting selected now as you can see this is the one ID div ID is equal to top bar wrap I'm selecting this option now at the right hand side you have all the other options all the options related to this option and here for this div it is block so what I'll do is this time I'll click on this plus button again and here I'll type in display ok and after that I'll type in none now as you can see that thing is gone ok that top bar is gone again I'll copy this thing paste it at the bottom and click on publish cut this thing now even if i refresh this page let's see what happens ok now as you can see that thing is still not present over here so this that is now permanently gone so you can do this thing as well so this is also a very useful property especially for me now let's quickly move on to another one because these are very simple so another one is color which is again very simple so for that also so for example you can see this button color you can right click on this color click on inspect now whenever you click on inspect you will see this color or your background color if you wanna change this thing simply delete it and type in your own color for example let's make it you have all the options over here if you to make it brown when you type in brown as you can see the color is changed if you type in something else for example blue or maybe coral select that option and now as you can see the color is changed we also have some border over here so if you want you can also change that color so this is how you do the changes over here simply change that color and again whenever again you have to simply copy this code if you want to have this changes paste those code under custom CSS similarly you can change color of almost anything for example if you change the color of this text I select this option select tool bring click on that text and here as you can see the color is white if I want to change the color to maybe black I can just type in black or I can just type in the code for of the black okay now as you can see when you type in black that text is now black okay so you can do these changes as well so the color is very simple and yeah for example let's select this thing you can also change the background color and I can color if you want so I'll select this select tool I'll select this I can this is a font awesome I can if I click on that I can and let's see wherever is that color okay I'll select this option okay I option from bottom let's see where we have the color okay so here is the color so I'll change this color I'll make it maybe let's see aqua beige black not black let's make it blue now as you can see this color is now changed to blue you can simply copy this code paste it under custom CSS and this color will be changed to blue if you want to change the background color again select tool will select the background will I will click on this option now at the right hand side you'll see the background color is this red color I want to make it some maybe blue color okay so this is how you do it again you can copy this code paste it under custom CSS if you want this changes on your website so this is color again which is very simple you can also change menu footer all the other colors for example if you can simply inspect element on the menu you can change the menu color menu color is white over here suppose if you want black menu color you can type in hashtag zero zero zero which is the black color code now as you can see the menu is black and on on that menu because the title and everything the menu elements were also black if you want to change them to white you can right click on that click on inspect okay now let's change this text to white so let's see here it is select this option type in FFF for white now as you can see all the other all the text on the icon is now white so you can do these things okay so if you want you can do do it like this and whatever again I am saying whatever changes you want simply copy that code which I have shown you multiple times paste it under custom CSS so that that changes are applied on your website so this was also very simple now let's move on let me just refresh it because I don't want these changes on the website I guess now let's see fonts so fonts are also very useful by default you have this font so I can simply right-click on this click on inspect so when you right click on and click on inspect and or when you select this select tool you can see this is Poppins font font 90 pixels Poppins and you can first let me click on that now at the right hand side you'll see this Poppins font font size and everything now you can change the font and if you want to know all the other fonts you can do one thing you can go to this website fonts dot google.com you will see all these google fonts available over here and I would recommend you to type in something for example just type in a word for or a letter or a sentence for example let me just copy and paste in this sentence so your type sentence so it will display this sentence in all different fonts you can see we have monserate we have lat - all the amazing fonts we have Roboto poppins which these are all famous very useful fonts now suppose I if I if I like this font lacto so what I can do is this is the name of the font lat oh so I can come back to my website which is over here I can select this font family click on this delete this poppins and type in lat oh now as you can see the font families change if you want you can select Roboto okay now again the font families change if you want you can select Railway which is another amazing font now as you can see this font family is also changed then after that you can also change the font size by default it is 90 pixels if you want you can make it 120 pixels this is now more bigger if you want you can just decrease the size to 2 N to your 10 pixels now as you can see this is smaller now let me make it hundred pixels okay you can also do more changes for example you can change the font weight which means that you can make it lighter or bolder nine hundred is the boldest if you type in hundred over you and now as you can see your font is very lighter if you type in 300 over here a little bit bolder if you type in 500 this is the normal font size 500 if you type in 700 a little bit bold and if you type in 900 the boldest that you can get now as you can see this font is also using text shadow but will see text shadow at the end not now so let's not touch that thing over here so this is the font you can also change font saw on the button as well if you right click on this button click on inspect okay so for this font also because on this button this discover now font is present so if you want you can do some changes over here as well okay so here also you can see this is using Poppins and everything if you want you can change this from here you can simply click on this plus button and change this thing so you'll type in font family okay like this and you can just select any font family for example instead of Poppins I want to select Roboto now as you can see the font on the button is now completely changed so you can do this thing as well okay then after that let's move on to padding and margin which is also very important so for that let's select let's select any section for example let's select this section so you can simply right click on that click on inspect now padding and margin color you can see if you go at the right hand side in the bottom you'll see the margin color will be displayed this orange color and padding color will be this green color so wherever you you select this select tool whatever tool you however whatever text or thing or element you hover over you'll see what is the margin and padding available so as you can see at the bottom there is some margin available and you can see the exact 20 pixels bottom at the right hand side you can see margin bottom 20 pixels here when you hover or some other element for example here as you can see below this text also we have some margin bottom 20 pixels if you select this maybe this title whatever you select you can see all the margin and padding in this crow or in this element if you select this entire row as you can see we have some padding this green color at the bar at the top so there is some padding available over there so if you want to change this padding so this is 50 pixels padding top if you want to change if you want to increase or decrease this padding you can first of all click on that go at the top and search for that padding here it is padding now by if you see some number like this on padding it means top right bottom left okay top right bottom left so for top it is 50 pixels I want to increase this to 150 pixels now as you can see not one not 1500 150 now as you can see the padding at top is now increased if you want to add some padding at left and right you can do that as well so you can change some padding like this similarly you can also change the margin for example let's see where we had I think we had margin below this text so let's select this select tool yeah we have some margin below this thing so I'll click on this then I'll search for that margin here it is margin bottom 20 pixels okay if you want maybe not 20 if you want zero now as you can see you can just type in zero pixels and that bottom margin is now gone so you can use these things as well then after that padding and then after that we have one more important thing which is that element is also called important element let's see why it is call that for example let's select this price text over here let's see the inspect element for this now let me explain you one very simple concept or rule of CSS now if we select this select this option price option and let's search here it is the price color is this color if you just type in something else for example instead of this color you can type in red but there will be no changes on on the website as you can see this is not getting changed so in this case what you can do is after red you can type in exclamation mark important okay type in this thing and let me come back over there okay this is this has changed this this color okay this thing which is in between this thing so similarly you can select this first or text and you can change this color too instead of this green again you can type in red but there will be no changes you have said so whenever something like this happens you can type in this thing after that you can type in important ok now as you can see this is changed successfully so this is very useful but I think you should not use it many times because you know it can cause some problem on your website so for this amount or wherever the website or wherever on your website amount will be used it will be in the red color because we have said this thing too important so whatever color is preset in the website it will it will change that and it will make it red because we have said this as the important option so sometimes you can face this problem if you want to change the text but it is not getting changed after that you can type in this thing important option ok so this is also a very important one then after that let's see container so what is container let me show you if you go to your blog page specially you'll see the container now container is the for example now let me cut this thing now container is the width in which this content should be present for example as you can see this this is the width at the left hand side we have some gap at the right hand side we have some gap and in between we have this content if you see the menu still the content is starting over here this also the content is starting over here this image also the content is starting over here at the left and right we have some gap so you can do one thing you can increase or decrease the container let me show you so you can right-click anywhere click on inspect now we have clicked on the perfect place and as you can see here the class container is used ok as you can see class container and you can see the container class option over here this is the option at the right hand side you can see container and the width of the container is set to 1200 if you want to increase or decrease this thing you can do it for example let's make it 800 now as you can see all the content will have to adjust within 800 pixels okay as you can see now we have a lot of GABA at left and right and everything will have to adjust inside 800 pixels okay so you can have this option as well if you want to change this to maybe 1400 okay you can do that 1400 now there is another option which is very useful maximum with 90% now this is very important if you just and take this thing now whatever you type in it will just you know it will just keep on increasing but we are setting one limit over here so whatever number I type in it should not go it should be maximum of 50 90 percent width let me explain you one more thing if you type in one more thing minimum width mean width and if you type in for example 70 percent okay or maybe 80 percent let's type in 80 percent now again if you go to width and type in 800 pixels now there is no changes taking place for you why because we are saying that the minimum width should be 80 percent it cannot go below 80 percent okay so that is the reason why it is happening and maximum width should be 90 percent I hope you understood this thing if you don't understood this thing if you don't understand this thing I'm sorry but this is how it is if you again and take this minimum width this will become 800 but if you have but if you add this minimum width option over here 80 percent or anything like that this will make it make your web set like this so container is also very useful okay as you can see sometimes some websites use a very narrow container sometimes some websites use a very broad container so you can use this maximum width and minimum width over here that will be very useful for you so this was container then after that let's move on to position now position also can be very useful for example if you see this menu when I scroll down that menu disappears but on many web sites you might have seen you know sticky menu for example this website when I scroll down or up the menu is still sticking with me okay you can see at top the menu is always present if you want to make your web system if you want to make your website menu a sticky or fixed you can use this position option so what you can do is you can right click on your menu click on inspect element okay now as you can see this is perfectly selecting the entire menu now at the right hand side you can see position is set to relative I'll delete that and I'll make it fixed okay now when you type in when you type in fixed when you scroll up or down the menu is sticking with you okay as you can see menu is sticking with you so if you want to make your menu or fixed you can use this option as well then after that I'll let me first refresh it I don't wanna do that then after that we okay there could be one more thing in position fixed for example I this thing that you see this button this back to top button when you click on this button it you know brings you to the top of the page so this button is always floating over here okay in the corner in the right bottom bottom right corner so you can do some changes okay for example if I want to make this icon this LinkedIn I can I can click on this link dean inspect element I can bring this icon or I can make this eye I can always floating or fixed in a position let me show you now I'll select this option I class ocean WP LinkedIn I can go at top click on this plus button and let's do let's try we are just experimenting something let's type in position over here so position fixed okay now I'm gonna type in fixed as you can see that menu is always present at the bottom but what I want to do is I want to do some changes over here okay I want this menu in the left side so after that I'll type in left okay and let's add maybe 20 pixels over here now as you can see this meant this I can you cannot see it properly because it is getting hidden over here then again I'll do something I'll type in bottom 20 okay now you can see the menu let me type in 20 now I you can see the icon so what I'm saying this right now is the position should be fixed just leave 20 pixels from the left and 20 pixels from the bottom which you can see over here if you if I right click on this button now I think you should see this 20 pixels let me show you now as you can see 20 pixels position is added if you can see this in the bottom right corner 20 pixels is added at the left hand side and 20 at the right hand side okay so this is how it works now that many now that I can is fixed in that position if I cut this thing scroll down or up you can always see that LinkedIn icon okay so you if you want you can try something like that now let's see sidebar let me first refresh it so this is the width of this sidebar if you wanna increase or decrease the width of the sidebar or anything like that you can do that as well right click oh you click on inspect okay now perfectly the entire site but is selected and as you can see the idea here is right sidebar now the width oh here is 28 pixels now let's do some experiment over here let's type in 50 pixels half the page okay now obviously when you do 50 pixels this will not fit in over here because here we have only twenty eight pixels space left twenty-eight percentage space left I am sorry and when you make that thing bigger it will obviously go down so if you want to bring both these sections side-by-side we'll have to decrease the width of this content area to also 50% so we'll right click over here click on inspect maybe a little bit down click on inspect all right let's select the entire we have okay this is the content wrap okay as you can see id divided a content wrap okay here it is under this thing we have this div ID primary okay when you see this code and here you can see the width is 72 pixels I can change this to 50 pixels or 50 percentage again and again I'm saying pixels 50 percentage now you can see this thing is now the content is at the left hand side the sidebar is at the right hand side so you can do these things as well okay so this is 50 percentage both the sides so you can do some changes in the side where you can change the color of this sidebar you can change the color or this you know if you see some there is some border in between this thing this light grey border you can change those things as well there are many things that can be done I am just showing you you know a little bit of a small example and you can just learn from this and you can do some experiment by yourself now let's see backgrounds so let me first refresh it again now for this wheel I'll use this website okay this agency dot near shake dot-com and there is a new tutorial coming very soon very nice show you how you can design this website and this is a very advanced tutorial so make sure you don't miss that thing I think we after one or two weeks this tutorial will be coming there is there is a lot of advanced things going on obviously when you see that website you don't you cannot see that you cannot make out that but there are many things going on on this website in background specially so explaining how to do that in that tutorial make sure you watch that now for the background color we have already seen how we can change the background color how we can change the background color of the footer or the menu or anything now let's see how we can add some image in the background so just like this in fact I'll use this same website I'll go back to the home page and let me use this featured products because here there is nothing in the background so we can use this thing so I'll inspect element okay now we have selected this entire row in this entire section so what I'll do is now I'll add something in the background so I can click on this plus button and I can just type in background and you can you can first add a background color just like this if you select black now as you can see background color black is added now I don't want to add background color but SOTA what I'll do is I'll just type in background instead of background color I'll just type in background and instead of this color I'll type in URL when you type in URL you will get this option URL and after that we have this brackets now inside this bracket you have to enter the link of the image so let me do one thing let me open a new tab and type in maybe Google PNG I can Google logo okay so let's go to images maybe let's select a little bit smaller one these are all big ones alright let's see this one okay this looks good so what I'll do is I'll open this image in a new tab right click open image in a new tab this is how the image looks like so I'll copy the link come back to the website and under this URL thing I'll paste in the link okay now as you can see we have that image in the background now let's do some let's see some more options or more elements related to background let me make it a little bit smaller so first of all we have this you we have this image in the background now what I want to do is this image is getting repeated okay as you can see we want only one so I'll type in background repeat' and after that I'll type in none so I don't want this background to rebuild so I'll type in background no repeat okay so background is not getting repeated now let's change the size of this I can if you want you can make it bigger if you want you can make it smaller so I will type in background sighs okay now you can set this to cover you can set this to contain Auto you have many different options preset options over here as you can see or you can do one thing you can type in some percentage for example let's type in 50 percentage okay this is how it will look if I type in 10 percentage you can see that small I can there at the top right corner at the top left corner and you can also change the position by default it is in the top left corner if you want you can select this option background position and let's make it maybe Center Center so just type in Center and after that again type in Center now as you can see this is Center Center you can type in something like top left or top right it was already top right left so let's make it top right now as you can see this icon in the top right corner so you can do these changes as well and you can also have some custom positions so instead of this top left top right center Center you can type in some number so for this will just get rid of this background position and will type in new element background position X and background position Y so first background position X so obviously on the x axis what should be the position on the y axis what should be the position so horizontally and vertically what should be the position so first background position X let me type in da game background position X and let me type in you have to enter everything in pixels so I will type in 100 pixels now you can see the position you can also type in in negative for example if you type in minus hundred now that is get that is hidden so I'll type in maybe 9 minus 50 or maybe 9 minus 70 now that is hidden half okay now I can type in I can change the background position on y-axis so I'll type in background position Y and after that lets let me type in maybe 100 pixels okay now as you can see it is coming down 100 pixels so you can do all these Changez this is just for fun but you can always you can use this thing to make your website really amazing for example in this tutorial I've used that thing to make it really amazing for example if you see this image over here this 3/4 line icon this is also done using that background thing and it is not done any using any of this code it is done using Elementor so make sure you watch that tutorial this thing is also if you see this background thing this orange color big circle that is an image which we have been used in the background and we have set a custom position and a custom size just to make it look like this so let me very quickly move on to the last one which i think is the most useful one and let's see contact forms for that so when you by default when you use any contact form plug-in you get a very simple design like this one but you can design it really amazing so first of all what I want to do is you should always design your form like this one let me show you this agency website which is coming ok this form looks much professional much better in terms of design and everything then this regular form so you should always use this placeholder instead of this label okay so this is this thing which is at the top is called label which is inside this box is called placeholder so let me do one thing let me get rid of this labels so I'll right-click on that label select that label and display:block I'll type in display:none now all the labels are gone now you should always disable the label only if you have some place something in the inside this thing inside this placeholder like this name email message so that a person knows what this field is for what this field is for okay so maybe it's not good idea to get rid of that label let let the label be as it is now let me do some changes in this box so I will right click on this box and click on inspect now let me do some changes in the border so I'll select this input at the right hand side let me make it a little bit bigger we have all the options now by default as you can see we have border all the sides one pixel solid this color I will type one thing I'll do I just want border at the bottom so I will type in instead of border I'll type in border bottom okay now as you can see you have border only at the bottom and that thing I'll just type in border:none okay now this looks much better so what I'm doing over here is not this color border none' okay this so I'm doing first I'm saying I don't want any border then after that I'm typing in this code I just want border at the bottom one pixels solid this color okay and let me change this color let me make it more lighter maybe this f7 f7f seven okay it is very lighter I think let it be whatever it was this color now you can do few more changes for example by default you can if you see these sides of this border it is getting curved okay because we have some radius so with your border radius so I'll delete that thing as well so I'll type in border radius and I'll type in zero now as you can see these are very simple line so what is body radius if you if I type in 100 pixels over here these lines are now more circular if you see you can see that very easily okay so it makes your box no circular it makes the corners of your box rounder and circular that is what this border radius do if you just type in zero it will make it very sharp so it will make it rectangular let me show you that thing over here in this box so this is a square box I'll inspect element over here let's select this box if you want you can select some border radius over here so I'll type in border radius and I'll type in maybe hundred pixels okay now is you can see this box this is become circular box so you can use this border radius if I type in 0 it will be very sharp the corners of this thing will be sharp and this will be a rectangular or a square box so that is what this border radius does so in contact from this thing can be very useful you can also change the contact button option so we can inspect element let me do one thing let me make this button full size 100% width so I'll type in width 100% now as you can see this button is full size and let's do some more thing let's change the background color so just type in background type in some color like this whatever color you like okay maybe let not okay maybe let's select okay let's select this color and I want to change the color of this text submit to white so I'll type in color and I'll just type in white fine and you can also add some border a shadow box shadow let's do that so just type in box shadow now in box shadow first of all you have to type in two values first is a horizontal offset and second is vertical offset let me explain you if I type in just ten pixels then after that again I'll type in 10 pixels and after that you have to type in some color for example you can just type in this black color and this is how it will look now as you can see horizontal offset 10 vertical offset 10 in this color now if you want to make this color transparent or if you want to increase or decrease some transparency you can paste in that RGB value now in RGB a value what happens is you can change the transparency so you'll see under RGB there are 253 one for some digit okay and the fourth digit is the transparency so by default this one if you want to decrease the transparency you can type in 0.5 now as you can see that is become very lighter if we type in 0.1 that is becoming even more lighter more transparent so if you have if you want you can have a border a shadow like this box shadow like this and let's decrease the horizontal and vertical offset so instead of 10 let me type in 2 for both horizontal and vertical okay now very light and let me increase or decrease the transparency a little bit now you can see this shadow like this okay let's open a new tab and type in RGB a 2 hex ok just type in this thing RGB a 2 hex use this option hex color tool and here you can see whatever color you like for example let me just select this color okay suppose I if I want this color you can see the RGB a value of this color so copy this now if you want to learn anything about CSS there is a there is an amazing website w3schools calm or and there are many many free tutorials available on YouTube and there are many other websites like w3 schools this is not the only one so whatever for example whatever element you want to learn CSS you can just go to google and type in CSS for example as you can see CSS box-shadow now as you can see the results now most of the times I have seen w3 schools is always at the top so you can click on this link now this is this will very no very neatly explain you this thing for example if you click on try to yourself now as you can see this is explained and with all the text a development with a shadow the first value is the horizontal offset and the second value is the vertical offset the shadow color will be any inherited from the text color and everything so all the different options are explained to you so whatever CSS element you want for example CSS what we say ceases position let's see CSS position w3schools CSS layout so different positions how you can use that position you can click on try it yourself and you can use that you can see that thing and you can obviously try it for yourself all right guess why I wanted to make this tutorial very small but I think I I just made it a little bit bigger so sorry for that I wanted to cover only few things but I just you know kept on adding more and more things there are many more things obviously available that we have not even seen so if you want to learn anything about CSS you can do your own research but this was a very short tutorial or only focusing on few things just to explain you that you can do these things like I know you can do these things using simple CSS tools or simple CSS code so I hope you guys find this video helpful if you find this video helpful give a thumbs up to this video subscribe and click on the bell sorry don't miss any future updates whatever I post in the future only useful videos you can get to all the notifications now if you have any doubt any comments any suggestions for me you can leave them in the comment section below thanks a lot for watching guys see you in the next video

Channel: Nayyar Shaikh

Views: 65,842

Keywords: wordpress css, wordpress theme, simple custom css, wordpress, wordpress change css, create a website, wordpress css tutorial for beginners, wordpress css tricks, nayyar shaikh css, wordpress theme customization, wordpress customization, wordpress design tutorial, wordpress design, how to customize wordpress website

Id: LgBKBTEaF40

Length: 42min 3sec (2523 seconds)

Published: Sun Oct 20 2019