Normal but other values are bolder lighter 100 200

Info icon This preview shows pages 2–4. Sign up to view the full content.

View Full Document Right Arrow Icon
normal but other values are bolder, lighter, 100, 200, 300, 400 (same as normal), 500, 600, 700 (same as bold), 800 or 900. font-style This states whether the text is italic or not. It can be font-style: italic or font-style: normal. text-decoration This states whether the text has got a line running under, over, or through it. text-decoration: underline, does
Image of page 2

Info icon This preview has intentionally blurred sections. Sign up to view the full version.

View Full Document Right Arrow Icon
what you would expect.text-decoration: overline places a line above the text.text- decoration: line-through puts a line through the text (“strike-through”).This property is usually used to decorate links and you can specify no underline with text-decoration: none. text-transform This will change the case of the text. text-transform: capitalize turns the first letter of every word into uppercase.text-transform: uppercase turns everything into uppercase.text-transform: lowercase turns everything into lowercase.text-transform: none I’ll leave for you to work out. Text spacing Before we move on from this introduction to styling text, a quick look at how to space out the text on a page: The letter-spacing and word-spacing properties are for spacing between letters or words. The value can be a length or normal. The line-height property sets the height of the lines in an element, such as a paragraph, without adjusting the size of the font. It can be a number (which specifies a multiple of the font size, so “2” will be two times the font size, for example), a length, a percentage, or normal. The text-align property will align the text inside an element to left, right, center, or justify. The text-indent property will indent the first line of a paragraph, for example, to a given length or percentage. This is a style traditionally used in print, but rarely in digital media such as the web. The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left are the self- explanatory properties you can use. The Box ModelMargins, padding and borders (see next page) are all part of what’s known as the Box Model. The Box Model works like this: in the middle you have the content area (let’s say an image), surrounding that you have the padding, surrounding that you have the border and surrounding that you have the margin. To make a border around an element, all you need is border-style. The values can be solid, dotted, dashed, double, groove, ridge, inset and outset. border- width sets the width of the border, most commonly using pixels as a value. There are also properties for border-top-width, border-right-width, border-bottom-width and border- left-width. Finally, border-color sets the color.
Image of page 3
Image of page 4
This is the end of the preview. Sign up to access the rest of the document.

{[ snackBarMessage ]}

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern