Normal but other values are bolder lighter 100 200

Info iconThis 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
Background image of page 2

Info iconThis 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.
Background 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 ]}

Page2 / 5

normal but other values are bolder lighter 100 200 300 400...

This preview shows document pages 2 - 4. Sign up to view the full document.

View Full Document Right Arrow Icon
Ask a homework question - tutors are online