Add Web Design Quote Byline with airSlate SignNow

Add quote digisign

hey guys he going in this video I'll be showing you how to style a block quotes for the web using CSS so if you're not too sure what block quotes are essentially they allow you to communicate a message which is typically a quote from a person so for example you might see them on news websites or just basically anywhere where you would like to quote a person or something along those lines so right here are three different examples of what we're going to be creating in this tutorial so we have up top here the most basic example we have no quote symbol and no border just simply text I'm in the middle here we've got an author so the person who said the quote or whatever it may be then we have a border and then below here we have basically everything so we have a little quote icon in the top left corner the border the author and of course the text so you can mix and match all of these three different styles in order to create what suits your own scenarios so let's go inside this tab right here and begin from scratch to create or style up block codes using CSS so inside the text editor we have right here this index.html file so firstly let's make a new CSS file here called blockquote CSS and this will contain all of the styles for the block words and then of course we can just include this link up the top here so link for CSS and then of course blockquote CSS okay cool so dot forward slash right there so now let's work on the HTML first and then move on to the CSS so for the HTML we're going to be using the block quotes element right here with a class of block code so by default this block code element is going to apply a slight margin to the text that's within it so I might just add a new paragraph right here and give this a class let's give our class of block quotes underscore underscore text so as usual using the block element modifier CSS naming convention or BM but you can of course name these classes whatever you like I'm gonna go inside here and just copy and paste some text which I prepared earlier okay cool so now saving this and then refreshing gives us this right here as we can see by default the browser has added a margin to the text so we're gonna of course apply some CSS to turn this right here into something like this okay so let's go inside the CSS right here and we can begin by firstly targeting the block-post class just like this and this of course is the base class for the container so this one right here so firstly let's add a max width of 600 pixels of course this one is completely optional you may not want to apply a maximum width let's also add a margin of 10 pixels for our top and bottom and 34 left and right let's add some padding for the text so let's just say 25 pixels let's add a background also so this will be hash f8 fffp of course choose your own colors for the background I recommend going for an extremely light color that is almost white but not but of course not actually what okay so that's my color right there a border of 1 pixels and then solid and then hash that's going to be B 0 D 2 C B so this color right here is a slightly darker version of the background so of course make this color in the same color palettes or same general color as your background ok cool let's also add a color this would be essentially just the text color and this one's going to be 0 B 4 and then 2 3 7 so I've chosen here a much darker closer to black version of what I've got up here so make sure all these three colors are of the same general color okay also a box sizing of border box is going to help keep things consistent so we can say water box just like that so now saving this and refresh gives us something like this as we can see you know most of the base styles when it comes to the container have now been completed we can move on to doing the actual text so for the text I'm gonna be including a Google font so of course this is completely optional once again so head over to Fahnestock Google comm if you want to include your own custom font I've chosen the gelasio font or gallaccio font it's a nice serif font with a nice italic version so when you're searching for these fonts I'll just go back here when you're searching for these fonts ensure you've chosen a serif font right here because typically your block quotes are going to be Sara but some of them may also be censor if of course completely up to you but in my example I'm using a serif font and I've also ensured that they come with an italic version okay so of course right here gelasio works perfectly fired for me so I'm going to select it right here and down here I'll go to customize I'm gonna choose regular 400 italic regular 400 as well as bold and bold italic so those are the four fonts we're gonna need just to sort of you know cover every scenario with the bold down here and the italics up here and if there was to be any bold text inside the actual main text so let's just go ahead now and select this font by going to the embed section and just copying this link right here to the HTML head okay so just like that and now we can actually use the font so let's go into block code CSS and just target right here the plot sorry I'd be block quote underscore underscore text class and for this we're gonna say font family we're gonna make this gelasio and then sans so once again of course you can use serif fonts or whatever font you like for this but in my version I'm using italics serif okay actually know what this has to be surf mom like so a serif font with a serif fallback let's also add a font style and make this italic also it's at a font size of 1.15 a.m. so 50% bigger than the current font size also a line height of 1.5 as well as a margin of 0 so now saving this and refreshing gives us this right here as we can see it's looking pretty good so far however if I was to go inside here in the HTML and just copy this paragraph once again let's save this and refresh we can see now that there is no space between the paragraphs so that is of course due to our margin of 0 so who would actually remove this margin 0 and then try again we now get something like this so now even though we have a space here we have spaces on the top and the bottom which is sort of questionable obviously it's personal preference but for me I prefer to have no space on the top and bottom so to solve this issue let's just put this margin back and go down here and say block quote text then we're going to say : not and then we're gonna say inside here in parenthesis we're gonna say last child so basically we're saying to select every block quote text element that is not the last child and for this we're gonna say margin bottom and make this one a.m. so now saving this and refreshing gives us this right here we have no space on the top and bottom but we do have a space between these two paragraphs right here so of course that margin right there is applying for each paragraph that is not the last child ok cool so we are done with the block quote text so I'll just go back inside here and remove this second paragraph and now we can move on to adding this border right here as well as the little author or credit section in the bottom right corner about here so first let's start with the border this is going to be really easy so let's go back inside here just add a modifier class to the blockquote elements so we're gonna say blockquote - - bordered ok so this right here is a modifier class of course is going to be modifying the blockquote element or component ok so for this let's go inside the CSS and we're gonna say right here block quote - - bordered just like this and fully bordered version we're gonna simply increase the boarder left width we're gonna say boarder left width and make this ten pixels so now saving this and refreshing gives us this right here and that is all for the bordered version so now we can move on to adding the author or the credit whatever you want to call it in the bottom right corner so for this we're going to be using CSS pseudo elements so let's just go inside the HTML and add a new paragraph tag and this paragraph tag will have a class of block quote underscore underscore text - - credits okay so of course you may want to call this - - author completely up to you for me I'm gonna say credits and inside here I'm gonna say for example relevant Coleman okay so now saving this and refreshing gives us this right here so of course now we can just apply some you know our CSS to move this to the to the right side so I might just go back inside here and make sure that I've actually included the block quote text class as well because of course this - - credit is a modifier for the block quote text class so now saving this and refreshing gives us this right here so let's go inside the CSS and we can of course target the block quote text block by text - - so it has a block quote text - - credit class okay and for this we're gonna simply say font weight and gonna make this bold we're gonna say font style and make this normal just to cancel out the italics which we set up here we're also gonna say text the line and make this to the right side so now saving this and refreshing gives us this right here so now at this point you have two options for adding a line right here of course you can simply go inside the HTML and you can say - and then a space and that's going to work perfectly fine giving us this right here however you may want to have a CSS only solution just to avoid always putting this - and since the - is they're sort of purely for cosmetic or visual purposes it may make sense to include it inside the CSS so we're going to be doing it that way using our CSS pseudo elements okay so let's go back inside here and remove this - under space and go inside the CSS and we're gonna say block code our text - - credit then we're going to say colon colon before so right here this before is a CSS pseudo element and essentially this is creating a virtual element just before the actual contents of of this element okay so for this we're gonna say content I'm gonna say right here one sec just to switch my keyboard back to Australia we're gonna say right here content I'm gonna make this backslash 2014 or to zero one four and that right there is gonna give us a long - so now saving this and refreshing and gives us this right here we now have our d long - right there and we can also say inside here we're gonna say our backslash zero zero two zero and this is zero zero two zero is gonna give us a space so now saving this and refreshing gives us this right here we get the - and also a space so now we can move on to simply just including the actual quotes in the top left corner so for this we're gonna once again be using a CSS pseudo elements which we use down here for the - so let's go back inside the HTML and include another pseudo another modifier class for the block quotes we're gonna say block quote - - quoted okay so for this let's go inside the CSS and we're gonna go down to the block quotes section we're gonna say block quotes - - quoted then we're gonna say : : before so of course once again creating a virtual element and the content for this element is going to be back / - 1 C so this one here is going to give us that left sorry that left a double quote so now saving this and refreshing it gives us this right here okay so let's just increase the font size of this double quote and apply the color and things like that so let's go back inside here we're gonna say font size and make this 100 pixels boss then give us up so it we're going to give this a color of 0 0 9 5 7 8 this right here is my decode green color once again from the same color palette or same general color as these three up there we're also going to set a display property of block and a margin bottom of negative 40 pixels and a margin top of negative 20 pixels so I might just comment out these two lines right here to demonstrate its purpose I'm now going to save this and then refresh and we can see we get this right here so of course it looks pretty nice however there's a lot of space between the actual text and the text down here so using those negative margins right here is going to cancel that out so saving this and refreshing it gives us that right there and of course that is the final result and once again you can mix and match these modifier classes and of course the inclusion of the credit section to create something that works for you in your own scenario so that is how to create or style block clothes sorry block quotes for the web using CSS thanks for watching guys and I'll see you later