cascading style sheets (csss) – (part ii)cascading style sheets (part ii) ivailo chakarov 1...

Further Web Development Stoke-on-Trent College Cascading Style Sheets (Part II) Ivailo Chakarov

Cascading Style Sheets (CSSs) – (Part II)

Page Layout with Styles.........................................................................................1 Offsetting Elements ...............................................................................................1 Positioning Elements Absolutely...........................................................................3 Positioning Elements in 3D ...................................................................................4 Displaying and Hiding Elements ...........................................................................5 Setting an Element’s Height and Width.................................................................6 Setting an Element’s Border ..................................................................................7 Adding Padding around an Element ......................................................................8 Setting the Margins around an Element...............................................................10 Aligning Elements Vertically ..............................................................................12 Wrapping Text around Elements .........................................................................13 Stopping Text Wrapping......................................................................................15 Changing the Foreground Colour ........................................................................16 Changing the Background....................................................................................17 Determining where Overflow Should Go............................................................19 Clipping an Element ............................................................................................20 Setting List Properties..........................................................................................21 Specifying Page Breaks .......................................................................................23


1

Cascading Style Sheets (CSSs) – (Part II) Page Layout with Styles Every item that is created using CSSs is enclosed in an invisible box - the size, colour, spacing and the way it flows can be controlled with respect to other objects on the page. An element’s box may be block-level or inline; whilst the first generates a new paragraph, the second does not. There are three special areas of the box, which can be controlled – the padding, border and margin. Surrounding the contents of the box is the padding; around the padding is the border, and around the border is the margin (a transparent space). The margin’s width and height can be changed in order to control the position of the elements on your page. Some elements may contain other elements on the page; they are referred to as parents. Offsetting Elements Each of the elements on a page has a natural location in the flow of the page. Relative positioning refers to the movement of an element with respect to its original location. Relative positioning does not affect the positioning of any surrounding elements at all. In order to offset an element within the natural flow:

1. Type position: relative; in the element’s definition in the <style> section of the HTML document (or in the relevant section of the external .css file).

2. Type top, right, bottom or left 3. Type : d; where d is the desired distance that you want to offset

the element from its natural location; either as an absolute or relative value.


2

Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head> <title>Offsetting Elements within the Natural Flow</title> <style type="text/css"> img {position:relative; top: 0px; left:0px;} img.test {position:relative; top:-20px; left:25px;} </style> </head> <body>

<br />

<img src="logo.gif" alt="html4.co.uk’s logo" /> <img src="logo.gif" alt="html4.co.uk’s logo" class="test" />

</body> </html>

The relative positioning refers to the element’s original position, not the surrounding elements. You cannot move elements with respect to other elements, just with respect to where they used to be. The other elements are not affected by the offsets – they flow with the original containing box of the element.


3

Positioning Elements Absolutely The elements in your web page would flow in the order in which they appear. If the <ol> tag for example appears before the <table> tag, then the ordered list would appear before the table. This is known as the normal flow. In addition to being able to offset individual elements, styles also allow you to take elements out of the normal flow, and position them absolutely – by specifying their precise position with respect to their parent element. In order to absolutely position elements:

1. Type position: absolute; in the element’s definition in the <style> section of the HTML document (or in the relevant section of the external .css file).

2. Type top, right, bottom or left

3. Type : d; where d is the desired distance that you want to offset the

element from its natural location; either as an absolute or relative value.


<head> <title>Positioning Elements Absolutely</title> <style type="text/css"> img {position:absolute; top:10px; left:10px;} </style> </head> <body>

<br />

<img src = "logo.gif" alt="html4.co.uk’s logo" />

<img src = "minilogo.gif" alt="html4.co.uk’s mini logo" />

</body> </html>


4

Because absolutely positioned elements are taken out of the natural flow, they can overlap each other. Positioning Elements in 3D Having tried out both relative and absolute positioning, you may want to choose, which element should be on top. In order to position elements in 3D: Type z-index: n in the element’s definition in the <style> section of the HTML document (or in the relevant section of the external .css file), where n is a number, which indicates the position of the element in the stack of objects. Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head> <title>Positioning Elements in 3D</title> <style type="text/css"> img {position:absolute; top:10px; left:10px} img.test {position:absolute; top:10px; left:10px; z-index:-1} </style> </head> <body> <img src = "logo.gif" alt="html4.co.uk’s logo" /> <img src = "minilogo.gif" alt="html4.co.uk’s mini logo" class="test" /> </body>

</html>


5

Displaying and Hiding Elements The display property is useful for hiding or revealing particular elements on your web page depending on the visitor’s browser, language preference, or other criteria. You can also choose, whether you want to display an element as block-level or inline. In order to specify how your page’s elements should be displayed:

1. Type display: 2. Type none in order to hide elements

block in order to display the element as a block-level (which would start a new paragraph) inline in order to display the element as inline (which would not start a new paragraph) list-item in order to display the element as if though it was a list element.


<head> <title>Displaying and Hiding Elements with Styles</title> <style type="text/css"> img {position:absolute; top:10px; left:10px;} img.test {display:none} </style> </head>


6

<body> <img src= "logo.gif" alt="html4.co.uk’s logo" /> <img src= "minilogo.gif" alt="html4.co.uk’s mini logo" class="test" /> </body>

</html>

In contrast to the previous example, the image, which was positioned behind the logo above, has not appeared, as the display: none property was used in the style’s definition. Setting an Element’s Height and Width Styles are also used to set the height and width for most elements on your page, including images, form elements and even blocks of text. In order to set the height and width for an element:

1. Type width: w where w is the width of the element, and can be expressed either as an absolute value or as a percentage of the window width.

2. Type height: h where h is the height of the element, and can be

expressed only as an absolute value. You cannot set the width property for most text tags (such as P and H1).


7


<head> <title>Setting an Element’s Height and Width</title> <style type="text/css"> img {position:absolute; top:10px; left:10px; width: 30%; height: 200px} </style> </head>

<body> <img src="logo.gif" alt="html4.co.uk’s logo" /> </body>

</html>

Setting an Element’s Border Styles allow you to create a border around an element and then set its thickness, style and colour. In order to set the border:

1. Type border 2. If wanted, type –top, -bottom, -left or –right with no space after

border in order to limit where the border should go.

3. If wanted, type :thin, medium, thick or an absolute value to specify the thickness of the border.


8

4. If wanted, type none, dotted, dashed, solid, double, groove,

ridge, inset or outset to specify the border style.

5. If desired, type color where color can be either one of the sixteen pre-defined colours or a hexidecimal colour code.


<head> <title> Setting an element’s border</title> <style type="text/css"> img {position:absolute; top: 10px; left: 10px; border-left: thick double #ff00ff;} </style> </head>

<body> <img src="logo.gif" alt="html4.co.uk’s logo" /> </body>

</html>

Adding Padding around an Element Styles allow you to add padding (extra space) around the contents of an element but inside the border. You can change the padding’s thickness, but not its colour or texture.


9

In order to add padding around an element:

1. Type padding 2. If wanted, type –top, -bottom, -left or –right with no space after

padding in order to limit the padding only around one side of the object.

3. Type : x where x is the amount of desired space to be added,

expressed in units or as a percentage of the parent element. When adding padding with styles, several shortcuts are available to allow us to set the padding values. Here are some of them: In order to set the top, right, bottom and left values in that order at once, type padding: t r b l In order to set the top and bottom values equally and the left and right values equally, type padding: v h In order to set the value for all sides, type padding: a Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head> <title>Adding Padding around an Element</title> <style type="text/css"> h1{padding:50px; border: thick double black;} </style> </head>

<body> <h1>Welcome to my web-site</h1> <img src="logo.gif" alt="html4.co.uk’s logo" /> </body>

</html>


10

Setting the Margins around an Element The margin is the amount of transparent space between one element and the next, in addition to and outside of any padding or border around the element. In order to set an element’s margin:

1. Type margin 2. If wanted, type –top, -bottom, -left or –right with no space after

margin in order to limit where space should be added.

3. Type : x where x is the amount of desired space to be added, expressed in units or as a percentage of the width parent element.

When setting the margins with styles, several shortcuts are available to allow us to set the margin values. Here are some of them: In order to set the top, right, bottom and left values in that order at once, type margin: t r b l In order to set the top and bottom values equally and the left and right values equally, type margin: v h In order to set the value for all sides, type margin: a


11


<head> <title>Setting the Margins around an Element</title> <style type="text/css"> h1{padding:50px; margin-bottom: 50px; border: thick double black;} </style> </head>

<body> <h1>Welcome to my web-site</h1> <img src="logo.gif" alt="html4.co.uk’s logo" /> </body>

</html>

In contrast with the previous example there is an additional margin of 50 units added after the ‘Welcome to my web-site’ element of the above web page.


12

Aligning Elements Vertically The elements of a Web page can be aligned vertically in the same way, like for example images on a web page. In order to align elements vertically:

1. Type vertical-align: 2. Type baseline to align the element’s baseline with the

parent’s baseline middle to align the middle of the element with the middle of the parent sub to position the element as a subscript of the parent super to position the element as a superscript of the parent text-top to align the top of the element with the top of the parent text-bottom to align the bottom of the element with the bottom of the parent top to align the top of the element with the top of the tallest element on the line bottom to align the bottom of the element with

the bottom of the tallest element on the line

percentage of the line height of the element (positive or negative) Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head> <title>Aligning elements vertically</title> <style type="text/css"> img {vertical-align:top} </style> </head>


13

<body>

<br />

<img src="logo.gif" alt="html4.co.uk’s logo" />

<img src="minilogo.gif" alt="html4.co.uk’s mini logo" />

</body> </html>

Wrapping Text around Elements Styles can be used to wrap text around elements. In order to wrap text around elements:

1. Type float: 2. Type left if you want the text to flow to the right of the element.

or right if you want the text to flow to the left of the element.


14


<head> <title>Wrapping text around elements using styles</title> <style type="text/css"> img.left {float:left} img.right{float:right} ol{text-indent:2em} </style>

</head> <body> <br /> <img src = "logo.gif" alt="html4.co.uk’s logo" class="left" /> Welcome to html4.co.uk ! <p>The topics covered on the course are as follows:</p> <ol> <li>HTML Basics</li> <li>Text Formatting</li> <li>…..</li> </ol> <p>Today's teaching session is aimed to show you how to construct a

web page using HTML.</p>

<p>Before we start constructing HTML pages however, I would like to introduce you briefly to the HTML language and some basic HTML concepts.</p>

<p> <img src="logo.gif" alt="html4.co.uk’s logo" class="right" /></p> <p>HTML stands for Hyper Text Markup Language and was developed in Switzerland by the programmers at the CERN research laboratory.</p>

<p>The father of HTML is considered to be Tim Berners Lee, who was the driving force behind the development of the World Wide Web. </p> </body>

</html>


15

Stopping Text Wrapping In addition to allowing you to wrap text around elements, styles also allow you to stop the text from wrapping around an element. In order to do that:

1. Type clear: 2. Type left to stop the flow until the left side is clear of all

elements right to stop the flow until the right side is clear of all

elements both to stop the flow until both sides are clear of all

elements none to continue the flow


16

Changing the Foreground Colour Styles allow you to change the colour of any element, including horizontal lines, form elements, and tables. In order to change the foreground colour:

1. Type color: 2. Type colorname where colorname is either one of the 16 pre-

defined colours, a colour’s hexidecimal value (#rrggbb), or is denoted by specifying the amount of red, green and blue (either using integers from 0-255 – rgb (r,g,b) or percentages – rgb (r%, g%, b%)


<head> <title>Changing the foreground using styles</title> <style type="text/css"> img.left {float:left} ol{text-indent:2em} hr {color:blue; height:20px;) </style>

</head> <body> <br /> <img src="logo.gif" alt="html4.co.uk’s logo" class="left" /> Welcome to html4.co.uk ! <hr></hr> <p>The topics covered on the course are as follows:</p> <ol> <li>HTML Basics</li> <li>Text Formatting</li> <li>…..</li> </ol>

</body> </html>


17

Changing the Background The background in this context refers not to the background of the entire page, but to the background of a particular tag. In order to change the background of a tag:

1. Type background: 2. Type transparent or colorname

where colorname is either one of the 16 pre-defined colours or the colour’s hexidecimal value (#rrggbb).

3. If wanted, type url(image.gif), to use an image for the background;

if wanted, you can also type: repeat to tile the image both horizontally and vertically repeat-x to tile the image only horizontally repeat-y to tile the image only vertically fixed or scrolled to specify whether the background should scroll with the canvas

or type x y where x and y can be expressed as a percentage or as

an absolute distance, or can be the values of top, center and bottom for x and left, right and center for y.


18


<head> <title>Changing the background using styles</title> <style type="text/css"> img.left {float:left} ol{text-indent:2em} body{background: url(minilogo.gif)} p.intro {background: white; padding:5px) </style>

</head> <body> <br /> <img src = "logo.gif" alt="html4.co.uk’s logo" class="left" /> Welcome to html4.co.uk ! <p>The topics covered on the course are as follows:</p> <ol> <li>HTML Basics</li> <li>Text Formatting</li> <li>…..</li> </ol> <p class="intro">Today's teaching session is aimed to show you how to construct a web page using HTML. Before we start constructing HTML pages however, I would like to introduce you briefly to the HTML language and some basic HTML concepts.</p> </body> </html>


19

Determining where Overflow Should Go As explained at the beginning of this handout, every element is enclosed in a box (container) on the web page. If the element’s box height and weight are changed in such a way that the contents of the element are in excess of the box’s dimensions then an overflow occurs. In order to deal with this overflow, you should follow these instructions:

1. Type overflow: 2. Type visible to expand the element’s box so that its contents can fit

in it.

or type hidden to hide any contents that don’t fit the element’s box or type scroll to add scroll bars allowing the visitor to access the overflow, which has occurred.


<head> <title>Dealing with Overflow using styles</title> <style type="text/css"> body{background: url(minilogo.gif)} p.intro {background: white; padding:5px;}

</style> </head> <body>

<div style="position:relative; width:100px; height:100px; overflow:scroll"> <p class="intro">Today's teaching session is aimed to show you how to construct a web page using HTML. Before we start constructing HTML pages however, I would like to introduce you briefly to the HTML language and some basic HTML concepts.</p> </div>

</body> </html>


20

Clipping an Element Styles allow you to reveal only a particular section of an element by clipping the element. In order to clip an element:

1. Type clip:rect ( 2. Type t r b l where

t is top r is right b is bottom l is left coordinates of the rectangular portion of the element that you want to display.

3. Type the final )

With the current style sheets specification, an element has to be positioned absolutely before it can be clipped. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head> <title>Clipping an Element using styles</title> <style type="text/css"> body{background: url(minilogo.gif)} p.intro {background: white; padding:5px;} </style> </head>


21

<body>

<div style="position:relative; width:100px; height:100px; overflow:scroll"> <p class="intro">Today's teaching session is aimed to show you how to construct a web page using HTML. Before we start constructing HTML pages however, I would like to introduce you briefly to the HTML language and some basic HTML concepts.</p> </div> <img src="logo.gif" style="position:absolute;top:150px; clip:rect(0 180 130 40)" alt="logo"/>

</body> </html>

Setting List Properties Styles allow you to set up list properties. In order to set the properties of a list:

1. Type list-style: 2. Choose one of the following:

disc to set the list item marker to a solid, round circle circle to set the list item marker to an empty round circle square to set the list item marker to a solid square decimal to set the list item marker to use arabic numerals lower-alpha to set the list item marker to use lowercase letters upper-alpha to set the list item marker to use uppercase letters


22

lower-roman to set the list item marker to use lower-case

Roman numerals upper-roman to set the list item marker to use upper-case Roman numerals url(image) where image is the URL of the image you want to use as a list marker

3. If wanted, type outside to hang the marker to the left of the list

items or inside to align the marker flush left together with the list items.


<head> <title>Setting List Properties using styles</title> <style type="text/css"> body{background:white} li{list-style:url(minilogo.gif) inside} </style> </head> <body>

<ol> <li>Today's teaching session is aimed to show you how

to construct a web page using HTML.</li> <li>Before we start constructing HTML pages however, I would like to introduce you briefly to the

HTML language and some basic HTML concepts.</li> </ol>

</body> </html>


23

Specifying Page Breaks If your visitors want to print out your Web page, the browsers would automatically adjust the contents on the page in order to best fit the paper size the visitor has chosen in the Page Setup dialog window. Cascading Style Sheets (version 2) allows you to specify where you want the page to break when your visitor prints out the web page. In order to specify a page break after a tag just type: page-break-after:always In order to specify a page break before a tag just type: page-break-before:always In order to remove page breaks just type: page-break-before:auto or page-break-after:auto Example <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

<head> <title>Specifying page breaks using styles</title>

<style type="text/css"> body{background:white} p.first,p.second{page-break-before:always} </style> </head> <body>

<p class="first" style="page-break-before:auto"> Today's teaching session is aimed to show you how to construct a web page using HTML. </p> <p class="second">Before we start constructing HTML pages however, I would like to introduce you briefly to the HTML language and some basic HTML concepts. </p>

</body> </html>


24

cascading style sheets (csss) – (part ii)cascading style sheets (part ii) ivailo chakarov 1...

Documents