Web Design for Print Designers WEB DESIGN FOR PRINT DESIGNERS: WEEK 6

Transcription

1 Web Design for Print Designers

2

3 CSS uses a variety of declarations for styling text. Many use the variations of the font declaration. Other styles are done using different declarations. The font declaration has the following variables: font-family font-style font-variant font-weight font-size

4 font-family declares the font face of the text. You can use multiple fonts, based on preference. font-family: Helvetica, Arial, sans-serif Font-style defined by normal, italic or oblique. Really no difference between italic or oblique, and browsers usually use oblique if italic isn t available. Italic is a true type style, whereas oblique is the normal typeface slanted.

5 font-variant is defined by normal or small-caps. font-weight is defined by normal or bold. font-size defines the size of the type. You can use any of the variants: percentage: 80% length: px(14px); em (2em), cm (16cm), pt (14pt) name: small, medium, large, x-large

6 You can use shorthand using the font declaration to condense several declarations font: style variant weight size family; font: italic normal bold 24px Helvetica, Verdana; If style, variant and weight are all normal, you can shorten it to one value. If you omit any of the three, browsers will assume normal as the default.

7 line-height declaration specifies the leading of a block element percentage: 80% length: px(14px); em (2em), cm (16cm), pt (14pt) Using a relative value allows flexibility if you adjust any of the type sizes. Absolute values provide greater control over spacing.

8 letter-spacing allows you to control the kerning in text h1 { letter-spacing:.2em;} word-spacing controls the gap between words. You can only use length values (px, pt, em, etc.). Using a relative value such as ems allows for better adjustment than using an absolute value such as px.

9 CSS3 offers additional font declarations, but aren t currently supported in browsers. However, you can still include them in anticipation when browser support is available: font-size-adjust: number, none, inherit; font-stretch: wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, normal, semi-expanded, expanded, extra-expanded, ultra-expanded, inherit;

10 text-transform changes the case of text in one of the following values: text-transform: none = default text-transform: capitalize = Caps first letter of every word text-transform: uppercase = Renders all type in caps text-transform: lowercase = Renders all type lower case

11 text-decoration: none, underline, overline, line-through, blink None is the default setting. Blink is only currently supported in FireFox and Opera browsers. text-align: left, right, center, justify Justify is discouraged, especially for short columns, because browsers don t hyphenate words.

12 vertical-align: baseline, sub, super, top, text-top, middle, bottom, textbottom It is NOT intended to allow you to vertically align text in the middle of a block level element, although it does have that effect when applied to table <td> and <th> elements. It is more commonly used on inline elements such as <img>, <strong> or <em> elements.

13 text-indent: length (px, em, cn, etc), percentage Indents the first line of a block element. You can use a negative value. text-overflow: clip, ellipsis When text exceeds a defined space, this declaration will either clip the text to where the space stops, or render it with...

14 text-shadow: h-shadow v-shadow blur color; text-shadow: 5px 5px 2px #000; Renders a 5px shadow bottom right with a 2px blur in black. Positive values render left and down. Negative values render right and up The blur value can be omitted if not used. Not supported in pre- IE9.

15 text-outline: thickness blur color; text-outline: 2px red; Blur is optional value, but thickness and color are required. Currently not supported in any browsers. text-wrap: normal, none, unrestricted, suppress; This property specifies line breaking rules for text. Currently not supported in any browsers.

16 list-style-type allows you to control the shape or style of a bullet point, or marker, on any ordered or unordered list. The following values can be used for unordered lists: disc: (ul default) circle: (ul default for nested lists) square: ul li { list-style-type: circle; } ul li li { list-style-type: square; }

17 The following values can be used for ordered lists: decimal: (ol default) decimal-leading-zero: lower-alpha: a. b. c. lower-roman: i. ii. iii. upper-alpha: A. B. C. upper-roman: I. II. III. ol li { list-style-type: decimal-leading-zero; } ol li li { list-style-type: lower-alpha; }

18 list-style-image allows you specify an image to act as a bullet point. ul { list-style-image: url('redarrow.png'); } item 1 item 2 item 3 This applies to all the list-items within a list. You cannot vary the image within a list using this declaration.

19 list-style-position indicates the position of the marker Outside is the default. The marker sits to the left of the block of text. "Get that finger out of your ear You don't know where that finger's been "There's no reason to become alarmed, and we hope you'll enjoy the rest of your flight. By the way, is there anyone on board who knows how to fly a plane? " "Let's see... altitude: 21,000 feet. Speed: 520 knots. Level flight. Course: zero-niner-zero. Trim and mixture: wash, soak, rinse, spin."

20 With the inside position, the marker sits to the left of the block of text. "Get that finger out of your ear You don't know where that finger's been "There's no reason to become alarmed, and we hope you'll enjoy the rest of your flight. By the way, is there anyone on board who knows how to fly a plane? " "Let's see... altitude: 21,000 feet. Speed: 520 knots. Level flight. Course: zero-niner-zero. Trim and mixture: wash, soak, rinse, spin."

21 As with several other CSS properties, you can write shorthand for list styles (list-style). You can express the marker s style, image and position properties in any order. The default is used if not specified. list-style: inside circle; By using the value none, you can eliminate all the values. This is useful when using background images for each list item.

22 You can specify different values for text in specific instances using pseudo-elements. You specify them at the end of a selector, then specify the declaration in CSS. p:first-letter = controls the first letter of a paragraph p:first-line = controls the first line of a paragraph

23 Pseudo-classes refer to the state of a particular element. They aren t applied to the element the same way pseudo-elements are. Instead they refer to the action of the user. You still add them to the CSS the same way as pseudo-elements. :link = sets styles for unvisited links :visited = sets styles for visited links :hover = sets styles for when the user hovers over an element :active = applied when an element is being activated, such as buttons :focus = applied when an element has focus. Most commonly used when a form input field is clicked on to accept typing.

24 <a href= contact.htm >Contact Us</a> a:link { color:blue; text-decoration:underline;} a:visited { color:grey; text-decoration:underline;} a:hover { color:red; text-decoration:none;} You don t necessarily have to include the :link pseudo-class, but the :visited and :hover are recommended.

25 You can set styles on elements when they are in relationship to other elements. There are two types: parent-child and sibling relationships. Parent-child relationships are when an element is nested within another. Sibling relationships are two elements that are next to another.

26 Adjacent sibling selectors You can set specific styles for the second element of two consecutive elements. For example, if I want to bold a every paragraph that immediately follows a H1 headline. h1 + p { font-weight: bold; } Only the paragraphs that follow an H1 will appear bold. It will not affect any other paragraphs.

27 General sibling selectors The difference with adjacent siblings is that that the element being selected doesn't need to immediately succeed the first element, but can appear anywhere after it. p ~ p { margin-top:.8em; } In this example, any paragraph following the first one will have a margin-top being applied to it.

28 Parent-child selectors Parent-child selectors allow you to style an element that is immediately nested within another. ul li { font-weight: bold; } The above will bold every list-item in an unordered list. But what if I want to bold only the first list-item? ul > li { font-weight: bold; } Only the first list-item following the opening <ul> tag will be bold.

29 :first-child and :last-child selectors :first-child works the same and the parent-child selector, but you don t have to define the parent element li:first-child { font-weight: bold; } In this case, all first list-items, regardless if they are in an unordered or ordered list, will be bold. This wasn t widely adopted until recently since pre-ie7 browsers didn t support this pseudoelement.

30 :first-child and :last-child selectors Just as :first-child applies to the first element, :last-child applies to the last element li:last-child { font-weight: bold; } All last list-items in this case would be bold. This pseudo-element isn t supported by pre-ie9 browsers.

31 :nth-child selectors You can get even more specific with which child elements to style using the :nth-child pseudo-element. Within the selector, you need to specify which element(s) you want to affect.

32 li:nth-child(5) { font-weight: bold; } Bolds only the fifth list-item in the list. li:nth-child(n+6) { font-weight: bold; } Bolds all but the first five list-items. li:nth-child(-n+5) { font-weight: bold; } Bolds only the first five list-items. li:nth-child(odd) { font-weight: bold; } Bolds only the odd list-items.

33 Homework Diagram out in HTML the content and layout for the Callahan website design. For layout, use HTML 5 elements (article, aside, header, etc.) Designate any class or ID names for elements as necessary

34 Next Week Styling text with CSS Begin building the Callahan web page