1 CS428 Web Engineering Lecture 07 Font, Text & Background (CSS - II)

Block-Level Elements A block level element in HTML create a “block” or “box”. Browsers typically display the block-level element with a new line. Block level elements may contain inline elements and other block-level elements. The block level elements create “larger” structure than inline elements.

List of Block-Level Elements Contact information (HTML5) Figure caption Ordered list (HTML5) Article content (HTML5) Groups media content with a caption (HTML5) Form output (HTML5) Aside content (HTML5) Section or page footer Paragraph (HTML5) Audio player Input form Preformatted text Long (“block”) quotation Heading levels (HTML5) Section of the page (HTML5) Drawing canvas (HTML5) Section or page header. Table. Definition description (HTML5) Groups header information Table footer Document division Horizontal rule (dividing line) Unordered list Definition list Field set label (HTML5) Video player

Inline Elements An Inline element in HTML occupies only the space bounded by the tags that define the inline element. Generally, inline elements may contain only data and other inline elements. By default, inline elements do not begin with new line.

List of Inline Elements

The & Tags A... element defines an “inline” structure, i.e. it simply defines a stretch of text. Thus it can be used within a paragraph or table element without affecting the flow of the text. A... element defines a “block” structure. Usually the browser will place line breaks before and after this element, but otherwise it has no effect itself.

The Box Model CSS operates on something known as the box model. When displaying documents, CSS treats each element in the document as a rectangular box. –Components of a box Content Padding Border Margins

The Box Element Content Margin Padding Border Default value for margins, borders, and padding is zero. However, width can be specified using CSS. Different widths can be given for each side of the box.

Paragraph Example: Make all paragraphs have 10 spaces indentation (hint: 6em) and make a text red. p { text-indent: 6em; color: red; } This is the first paragraph with the red text and large indent. This is the second paragraph with the red text and large indent.

CSS Font Properties You can set following font properties of an element:  The font-family property is used to change the face of a font.  The font-style property is used to make a font italic or oblique.  The font-variant property is used to create a small-caps effect.  The font-weight property is used to increase or decrease how bold or light a font appears.  The font-size property is used to increase or decrease the size of a font.

font-family This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system. Output: This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system.

Generic Font Family These are the generic name values for the font-family property, followed by an example of each that the browser might select from the user’s system fonts: 12 Generic font-family NamesExample serifTimes New Roman sans-serifArial cursiveZapf-Chancery fantasyWestern monospaceCourier

13 font-style This text will be rendered in italic style. Output: This text will be rendered in italic style. Possible Values: normal, italic, oblique(more slanted than normal)

14 font-size This font size is 20 pixels. Output: This font size is 20 points. Possible values: px, small, xx-small, x-small, medium, large, x- large, xx-large or in %

15 font-weight This font is bold. Output: This font is bold. Possible values: normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

16 font-variant This text will be rendered in small caps. Output: T HIS TEXT WILL BE RENEDERED AS SMALL CAPS. Possible values: normal, small-caps

17 line-height The line-height property is used to set the vertical distance between the baselines of adjacent lines of text. You can use only this property with block- level elements.

18 line-height The line-height property is just spaces the lines. and this is the second line. Output: The line-height property is just spaces the lines. and this is the second line. Possible Values: normal or any number with %, px or em unit

CSS Text Formatting You can set following text properties of an element:  The color property is used to set the color of a text.  The letter-spacing property is used to add or subtract space between the letters.  The word-spacing property is used to add or subtract space between the words.  The text-indent property is used to indent the text of a paragraph.  The text-align property is used to align the text of a document.

 The text-decoration property is used to underline, overline and strikethrough text.  The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.  The text-shadow property is used to set the text shadow around a text.  The white-space property is used to control the flow and formatting of text. 20

21 color This text will be written in red. Output: This text will be written in red. Possible values: any color name in any valid format.

22 letter-spacing This text is having space between letters. Output: T h i s t e x t i s h a v i n g s p a c e b e t w e e n l e t t e r s. Possible values: normal or a number.

23 word-spacing This text is having space between words. Output: This text is having space between words. Possible values: normal or a number.

24 text-indent The text-indent property is used to indent only the first line of text within an element. The default value for this property is 0. It only applies to block-level elements.

25 text-indent This text will have first line indent by 1cm. and this line will remain at its actual position. Output: This text will have first line indent by 1cm. and this line will remain at its actual position. Possible values: % or a number.

26 text-align This will be right aligned. Output: This will be right aligned. Possible values: left, right, center, justify

27 text-decoration This will be underline. Output: This will be underline. Possible values: none, underline, overline, line-through, blink

28 text-transform This will be in uppercase. Output: THIS WILL BE IN UPPERCASE. Possible values: none, capitalize, uppercase, lowercase

29 white-space The white-space property is used to specify whether the blank space between words both horizontally and vertically is collapsed to a single character space or is retained and preserved as is. The white space property is used with block-level elements.

30 white-space This text has a line break and the white-space pre setting tells the browser. Output: This text has a line break and the white-space pre setting tells the browser. Possible values: normal, pre,

31 text-shadow If your browser supports the css text-shadow property, this text will have a blue shadow. Output: Possible values: numbers

CSS background Properties You can set background of various HTML elements:  The background-color property is used to set the background color of an element.  The background-image property is used to set the background image of an element.  The background-repeat property is used to control the repetition of an image in the background.  The background-position property is used to control the position of an image in the background.  The background-attachment property is used to control the scrolling of an image in the background.

33 background-color This text has a yellow background. Output: Possible values: any color in a valid format.

34 background-image this table has background image which repeats multiple times. Output: Possible values: any image with valid format

35 background-repeat <table style=“background-image: url(images/cat.gif); background-repeat: no-repeat; ” > by default background-repeat property have repeat value. Output: Possible values: repeat, repeat-y, repeat-x, no-repeat

36 background-size <table style=“background-image: url(images/cat.gif); background-repeat: no-repeat; background-size: 200px 200px; ” > background-size property is used to expand the background image. Output: Possible values: repeat, repeat-y, repeat-x, no-repeat

37 background-position <table style=“background-image: url(images/css.gif); background-position: 100px 200px; ” > this table has background image positioned 100 pixels away from the left and 200 pixels from the top. Output: Possible values: X% Y%, top left, Xpx Ypx left top center top left bottom center bottom right bottom

38 background-attachment <p style=“background-image:url(images/css.gif); background-attachment: fixed; ” > This paragraph has fixed background image. Output: Possible values: fixed, scroll