How to Style a Block Quote With CSS

Video Transcript

"Hello, my name is Luis Estrada and I am a software developer. In this video I'll show you how to style a BlockQuote with CSS. I am using FrontPage. FrontPage is a registered trademark of Microsoft, a company to which I have no affiliation. CSS stands for Cascading Style Sheets, style sheets define how HTML elements should be displayed. Styles are usually saved in external dot CSS files. External style sheets enable you to change the appearance of layout of all the pages of your website by editing one single CSS document. Imagine how much time you could save using CSS if you have a website with hundreds of pages. As a web designer you could define a style for each HTML element and apply it to as many web pages as you want. In this clip we will create a simple example of CSS to style a BlockQuote. In this page you can see some text above and below the block quote. The block consists of an image background with a custom font and size. Now lets take a look at our code. Since we have only one page in this example we will insert the CSS code inside the head tag of the page. However you should use an external CSS file in order to reuse this code among other pages of your site. As you can see I have defined a style tag. Inside it I can specify as many CSS elements as I want. In this case the element is called BlockQuote. Inside the blankets of the element you specify its attributes or characteristics. In the first line we are telling the browser to display this block in an area of three hundred pixels in width by three hundred and twenty-eight pixels in height. Which are the actual dimensions of the image. In the fact line we use an image background called post-it. This is a relative reference meaning that the image is inside the same folder as the open HTML file. In the next slide we tell the browser not to repeat the image when displayed. Then we specify the position horizontally as left and vertically as center. Next we write the characteristics of the text inside the block. We will define a padding relative to the top and to the sides. The top padding takes a value of thirty pixels, meaning that the text will be displayed thirty pixels below the beginning of the vertical position of the background image. The left padding value means that the text will start thirty-one pixels from the left side of the image. Then the right padding value specifies that the text will make a line break when it reaches twenty-nine pixels before the right edge of the image. Finally we specify the characteristics of the font used. We are using an Italic bold font of twenty pixels and an alba font face. Inside the body tag we use the CSS element by surrounding our formatted text by BlockQuote tags. I'm Luis Estrada and I've just showed you how to create a multi-media website using FrontPage."