Frames and framesets HTML frames are used to

Creating Frames • To use frames on a page we use <frameset> tag instead

<frameset> Tag Attributes • cols – Specifies how many columns are contained in the

• rows • This attribute works just like the cols attribute and takes

The <frame> Tag Attributes • src This attribute is used to give the file

Grouping Selectors If you have elements with the same style definitions, like this: h

It will be better to group the selectors, to minimize the code. To group

Three Ways to Insert CSS § There are three ways of inserting a style

External Style Sheet • With an external style sheet, you can change the look

• An external style sheet can be written in any text editor. The

Internal Style Sheet • • An internal style sheet may be used if one

Inline Styles • An inline style may be used to apply a unique style

CSS Colors • All modern browsers support 140 color names

RGB Value • In HTML, a color can be specified as an RGB value,

HEX Value • In HTML, a color can be specified using a hexadecimal value

CSS Backgrounds • CSS background properties: – background-color – background-image – background-repeat – background-attachment

Background Color • The background-color property specifies the background color of an element. •

Background Image • The background-image property specifies an image to use as the background

Background Image - Repeat Horizontally or Vertically • By default, the background-image property repeats

Background Image - Fixed position • To specify that the background image should be

Text Formating • Text Color • The color property is used to set the

Text Alignment • The text-align property is used to set the horizontal alignment of

• When the text-align property is set to "justify", each line is stretched

Text Decoration • The text-decoration property is used to set or remove decorations from

Text Transformation • The text-transform property is used to specify uppercase and lowercase letters

Text Indentation • The text-indent property is used to specify the indentation of the

Letter Spacing • The letter-spacing property is used to specify the space between the

Line Height • The line-height property is used to specify the space between lines:

Text Direction • The direction property is used to change the text direction of

Word Spacing • The word-spacing property is used to specify the space between the

CSS Fonts • The CSS font properties define the font family, boldness, size, and

Font Family • The font family of a text is set with the font-family

Font Style • The font-style property is mostly used to specify italic text. •

Font Size • The font-size property sets the size of the text. The font-size

Set Font Size With Pixels • Setting the text size with pixels gives you

Set Font Size With Em • To allow users to resize the text (in

Font Weight • The font-weight property specifies the weight of a font: Example p.

Slides: 42

Download presentation

Frames and framesets • HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document. • A collection of frames in the browser window is known as a frameset. • The window is divided into frames in a similar way the tables are organized: into rows and columns.

Creating Frames • To use frames on a page we use <frameset> tag instead of <body> tag. • The <frameset> tag defines, how to divide the window into frames. T • he rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames. Each frame is indicated by <frame> tag and it defines which HTML document shall open into the frame. • Note − The <frame> tag deprecated in HTML 5. Do not use this element.

<frameset> Tag Attributes • cols – Specifies how many columns are contained in the frameset and the size of each column • Absolute values in pixels. For example, to create three vertical frames, use cols = "100, 500, 100". • A percentage of the browser window. For example, to create three vertical frames, use cols = "10%, 80%, 10%". • Using a wildcard symbol. For example, to create three vertical frames, use cols = "10%, *, 10%". In this case wildcard takes remainder of the window.

• rows • This attribute works just like the cols attribute and takes the same values, but it is used to specify the rows in the frameset. For example, to create two horizontal frames, use rows = "10%, 90%". You can specify the height of each row in the same way as explained above for columns.

The <frame> Tag Attributes • src This attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. For example, src = "/html/top_frame. htm" will load an HTML file available in html directory. • name This attribute allows you to give a name to a frame.

CSS

Grouping Selectors If you have elements with the same style definitions, like this: h 1 { text-align: center; color: red; } h 2 { text-align: center; color: red; } p { text-align: center; color: red; }

It will be better to group the selectors, to minimize the code. To group selectors, separate each selector with a comma. In the example below we have grouped the selectors from the code above: Example h 1, h 2, p { text-align: center; color: red; }

Three Ways to Insert CSS § There are three ways of inserting a style sheet: External style sheet Inline style

External Style Sheet • With an external style sheet, you can change the look of an entire website by changing just one file! • Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section: • Example • <head> <link rel="stylesheet"type="text/css" href="mystyle. css"> </head>

• An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a. css extension. Here is how the "mystyle. css" looks: body { background-color: lightblue; } h 1 { color: navy; margin-left: 20 px; }

Internal Style Sheet • • An internal style sheet may be used if one single page has a unique style. Internal styles are defined within the <style> element, inside the <head> section of an HTML page: Example <head> <style> body { background-color: linen; } h 1 { color: maroon; margin-left: 40 px; } </style> </head>

Inline Styles • An inline style may be used to apply a unique style for a single element. • To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property. • The example below shows how to change the color and the left margin of a <h 1> element: Example <h 1 style="color: blue; margin-left: 30 px; ">This is a heading</h 1>

CSS Colors • All modern browsers support 140 color names

RGB Value • In HTML, a color can be specified as an RGB value, using this formula: • rgb(red, green, blue) – Eg: rgb(255, 99, 71)

HEX Value • In HTML, a color can be specified using a hexadecimal value in the form: – #rrggbb • Where rr (red), gg (green) and bb (blue) are hexadecimal values between 00 and ff (same as decimal 0 -255). • For example, #ff 0000 is displayed as red, because red is set to its highest value (ff) and the others are set to the lowest value (00).

CSS Backgrounds • CSS background properties: – background-color – background-image – background-repeat – background-attachment – background-position

Background Color • The background-color property specifies the background color of an element. • The background color of a page is set like this: • Example • body { background-color: lightblue; }

Background Image • The background-image property specifies an image to use as the background of an element. • By default, the image is repeated so it covers the entire element. • The background image for a page can be set like this: Example body { background-image: url("paper. gif"); }

Background Image - Repeat Horizontally or Vertically • By default, the background-image property repeats image both horizontally and vertically. • Some images should be repeated only horizontally o vertically, or they will look strange, like this: • Example body { background-image: url("gradient_bg. png"); background-repeat: repeat-x; }

Background Image - Fixed position • To specify that the background image should be fixed (will not scroll with the rest of the page), use the background-attachment property: • Example • body { background-image: url("img_tree. png"); background-repeat: no-repeat; background-position: right top; background-attachment: fixed; }

Text Formating • Text Color • The color property is used to set the color of the text. The color is specified by: a color name - like "red" a HEX value - like "#ff 0000" an RGB value - like "rgb(255, 0, 0)" • The default text color for a page is defined in the body selector. • Example • body { color: blue; } h 1 { color: green; }

Text Alignment • The text-align property is used to set the horizontal alignment of a text. • A text can be left or right aligned, centered, or justified. Example h 1 { text-align: center; } h 2 { text-align: left; } h 3 { text-align: right; }

• When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers): Example div { text-align: justify; }

Text Decoration • The text-decoration property is used to set or remove decorations from text. • The value text-decoration: none; is often used to remove underlines from links: Example h 1 { text-decoration: overline; } h 2 { text-decoration: line-through; } h 3 { text-decoration: underline; } a { } text-decoration: none;

Text Transformation • The text-transform property is used to specify uppercase and lowercase letters in a text. • It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word: Example. uppercase { text-transform: uppercase; }. lowercase { text-transform: lowercase; }. capitalize { text-transform: capitalize; }

Text Indentation • The text-indent property is used to specify the indentation of the first line of a text: • Example • p { text-indent: 50 px; }

Letter Spacing • The letter-spacing property is used to specify the space between the characters in a text. • The following example demonstrates how to increase or decrease the space between characters: Example h 1 { letter-spacing: 3 px; } h 2 { letter-spacing: -3 px; }

Line Height • The line-height property is used to specify the space between lines: • Example p. small { line-height: 0. 8; } p. big { line-height: 1. 8; }

Text Direction • The direction property is used to change the text direction of an element: Example p { direction: rtl; }

Word Spacing • The word-spacing property is used to specify the space between the words in a text. • The following example demonstrates how to increase or decrease the space between words: Example h 1 { word-spacing: 10 px; } h 2 { word-spacing: -5 px; }

CSS Fonts • The CSS font properties define the font family, boldness, size, and the style of a text.

Font Family • The font family of a text is set with the font-family property. • The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on. • Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available. • Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman". • More than one font family is specified in a commaseparated list: Example p { font-family: "Times New Roman", Times, serif; }

Font Style • The font-style property is mostly used to specify italic text. • This property has three values: • normal - The text is shown normally • italic - The text is shown in italics • oblique - The text is "leaning" (oblique is very similar to italic, but less supported) Example p. normal { font-style: normal; } p. italic { font-style: italic; } p. oblique { font-style: oblique; }

Font Size • The font-size property sets the size of the text. The font-size value can be an absolute, or relative size.

Set Font Size With Pixels • Setting the text size with pixels gives you full control over the text size: • Example • h 1 { font-size: 40 px; } h 2 { font-size: 30 px; } p{ font-size: 14 px; }

Set Font Size With Em • To allow users to resize the text (in the browser menu), many developers use em instead of pixels. • The em size unit is recommended by the W 3 C. • 1 em is equal to the current font size. The default text size in browsers is 16 px. So, the default size of 1 em is 16 px. • The size can be calculated from pixels to em using this formula: pixels/16=em Example h 1 { font-size: 2. 5 em; /* 40 px/16=2. 5 em */ } h 2 { font-size: 1. 875 em; /* 30 px/16=1. 875 em */ } p { } font-size: 0. 875 em; /* 14 px/16=0. 875 em */

Font Weight • The font-weight property specifies the weight of a font: Example p. normal { font-weight: normal; } p. thick { font-weight: bold; }