Cascading Style Sheets (CSSs) - ChakarovIntroduction to Web Technologies Stoke-on-Trent College...

Introduction to Web Technologies Stoke-on-Trent College Cascading Style Sheets (Part I) Ivailo Chakarov

Cascading Style Sheets (CSSs) – (Part I)

Introduction................................................................................................................1 The Anatomy of a Style .............................................................................................1 Applying Styles Locally ............................................................................................2 Creating an Internal Style Sheet ................................................................................3 Creating an External Style Sheet ...............................................................................5 Defining Styles for Classes........................................................................................6 Special Tags for Styles...............................................................................................9 Defining Styles for Links.........................................................................................11 Text Formatting with Styles.....................................................................................13

Choosing a Font Family....................................................................................13 Embedding Fonts on a Page .............................................................................14 Applying Bold Formatting ...............................................................................15 Setting the Font Size .........................................................................................16 Setting the Line Height .....................................................................................17 Setting the Text Colour.....................................................................................18 Changing the Text’s Background ....................................................................19 Controlling Spacing ..........................................................................................20 Aligning Text .....................................................................................................21 Underlining Text................................................................................................22 Making Text Blink ............................................................................................22 Changing the Text Case....................................................................................23

Introduction to Web Technologies Stoke-on-Trent College Cascading Style Sheets (Part I) Ivailo Chakarov 1

Cascading Style Sheets (CSSs) – (Part I) Introduction Cascading Style Sheets (CSSs) (which are also known as simply styles) are used to assign several properties at once to all the elements on a page marked with a particular tag. CSSs offer several advantages:

1. Style sheets save time – with styles you type a single line at the top of the page.

2. Styles are easy to change – the edits are made in only one place.

3. Styles are applied better, ensuring consistency.

4. With styles text can be controlled in ways, which are not possible with simple

HTML tags. They allow you to set line spacing, text background colour, etc.

5. Styles allow you to create a common format for all your pages very easily and make changes easily to that common format, by just changing their definition.

The Anatomy of a Style A style consists of a tag name (or a selector), and one or more definitions (or declarations) that determine how the elements marked with that tag should be displayed. Each definition contains a property, a colon, and one or more values. Multiple definitions must be separated by semi-colons. Example h2 {font-size: 14pt; color: blue} In the above example: h2 is the name of the HTML tag (or the selector) { is the opening curly bracket font-size: 14pt is a definition font-size is a property : is a colon 14pt is the value of the font-size property color: blue is a definition color is a property : is a colon blue is the value of the color property } is the closing curly bracket


Some properties can be grouped together with a special umbrella (or summary) property. For example if we want to group the three properties of font-size: 14pt; font-family: Arial; font-weight: bold then we can group them as one umbrella property font: bold 14pt Arial Styles can be applied in three different ways: locally, internally or externally. The style definitions on all of these three occasions always look the same, with the only difference being the use of quote marks instead of curly brackets when applying styles locally. Some of the properties defined by a style are inherited automatically. For example, if the h3 tagged text was defined as red, then any text marked with a b tag inside the h3 tag would also appear in red. Applying Styles Locally Applying styles locally is an easy task, which allows you to use additional formatting which is impossible to create with conventional HTML tags. In order to apply styles locally:

1. Within the HTML tag, which you would like to format, type style=" 2. Type property: value (for example color: red)

3. Type a semicolon (;) to separate the property from any additional definitions.

4. Type the final quote "

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>Styles applied locally</title> </head> <body> <p> </p> <p style = "background: gray; color: black; border: double medium black; font-size: 14pt">

David Blunkett, the Home Secretary, confirmed yesterday that tough legislation, which could breach human rights laws, would be brought before MPs soon. Britain, he said, must throw down the gauntlet to terrorists as never before. </p>

</body> </html>


Creating an Internal Style Sheet Internal style sheets are normally used for individual pages with lots of text. In order to apply an internal style sheet:

1. In the <head> section of your HTML document type the <style> tag 2. Type the name of the tag whose properties you would like to define (e.g. p, h1,

a)

3. Type an opening curly bracket { to mark the beginning of the tag’s properties

4. Define as many properties as you want separating them by using a semi-colon

5. Type the closing curly bracket } to close the tag’s properties

6. Define as many additional tags as you want

7. Type the closing </style> tag. 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>Applying an internal style sheet</title> <style type=“text/css”>

p {text-align:justify; text-indent:8pt; font: 10pt/15pt "Myriad Roman", "Verdana";

background: white; color: black; border: double medium black}

</style> </head> <body> <br /> <p>

</body> </html>

You can define properties for several tags at once by separating each tag with a comma; for example: h3, h4, h5 {color: blue} You may also define the properties of a tag that depends on another one; for example: h3 b {color: blue} In the above instance, the b tag, which appears within the h3 tag would be shown in blue. You may also add comments after the opening <style> tag and before the closing </style> tag, in order to hide the ‘styles code’ away from browsers that cannot implement them. 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>Applying an internal style sheet</title> <style type= "text/css">  </style> </head> <body> <br />


<p>


</body> </html> Creating an External Style Sheet External style sheets are used to give your Web pages a common appearance. This ensures consistency, but also enables easy changes to be made. In order to create an external style sheet:

1. Create a new text document. 2. Type the name of the tag whose properties you would like to define (e.g. p, h1,

a)

3. Type an opening curly bracket { to mark the beginning of the tag’s properties

4. Define as many properties as you want separating them by using a semi-colon

5. Type the closing curly bracket } to close the tag’s properties

6. Define as many additional tags as you want

7. Save the document in a text only format, giving it an extension of .css (cascading style sheet).

Example

styles.css p { text-align:justify; text-indent:8pt; font: 10pt/15pt "Myriad Roman", "Verdana"; background: white; color: black; border: double medium black} In order to use the external style sheet, in the <head> section of the HTML pages, which would use the style sheet, type the following line: <link rel="stylesheet" type="text/css" href="externalfile.css">



<head> <title>Creating an external style sheet</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <br /> <p>


</body> </html>

Defining Styles for Classes The HTML elements can be divided into categories or classes in order to apply styles to them selectively. In order to define styles for classes:

1. Mark the elements in your HTML page, which belong to the same class by adding the class=classname attribute to them.

2. In the style section of your HTML document type mytag.classname where

mytag is the tag that the class is a subset of, and classname has the same value as in the previous step.

3. Type an opening curly bracket { to begin the definitions

4. Define as many properties as you want, separating them by using a semi-colon

5. Type the closing curly bracket } to close the tag’s properties.


You can only use class style definitions with internal and external style sheets. 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>Defining styles for classes</title> <style type= "text/css">

p.intro {text-align:justify; text-indent:8pt; font: 14pt/18pt "Arial", "Verdana";

background: white; color: black; border: double medium black} p.other {text-align:left; text-indent:8pt; font: 10pt/15pt "Myriad Roman", "Verdana";

background: black; color: white; border: double medium white}

</style> </head> <body> <br /> <p class="intro">

David Blunkett, the Home Secretary, confirmed yesterday that tough legislation, which could breach human rights laws, would be brought before MPs soon. Britain, he said, must throw down the gauntlet to terrorists as never before.</p>

<p class="other">

The proposed legislation is thought to include increased powers of arrest for the police to interrogate suspects and moves to abolish some rights of judicial appeal for immigrants turned back at airports. </p>

<p class="other">

Police may be allowed to arrest people suspected of having knowledge about terrorism, simply to interrogate them. Legislation to allow transcripts of telephone conversations bugged by MI5 to be used as evidence in court is also reported to be under consideration. </p>

</body> </html>


In addition to creating a whole class of HTML tags, it is also possible to identify individual tags (in order to apply style sheets or JavaScript functions). In order to identify a particular tag:

1. Add to the element in your HTML page, the id=idname attribute. 2. In the style section of your HTML document type mytag#idname where mytag

is the tag that is identified with the id attribute, and idname has the same value as in the previous step.

3. Type an opening curly bracket { to begin the definitions

4. Define as many properties as you want, separating them by using a semi-colon

5. Type the closing curly bracket } to close the tag’s properties.


<head> <title>Identifying particular tags</title> <style type= "text/css">

p.intro {text-align:justify; text-indent:8pt; font: 14pt/18pt "Arial", "Verdana";


p#other {font: 10pt bold italic "Times New Roman"} </style>

</head>


<body> <br /> <p class="intro">


<p id="other">

The proposed legislation is thought to include increased powers of arrest for the police to interrogate suspects and moves to abolish some rights of judicial appeal for immigrants turned back at airports. </p>

</body> </html>

Special Tags for Styles There are two tags, which are particularly useful for applying styles. They are the <div> and <span> tags. The <div> tag applies to one or more parts of your HTML document, while the <span> tag applies to a few words of text. In combination with a class or ID, and a style definition these two tags allow you to create your own HTML tags. In order to apply styles, using the <div> tag:

1. In the <style> section of your document or the external style sheet, type div.classname or div#idname

2. Type {property.value} and create any additional definitions separating them by

a semi-colon ;



<head> <title>Applying styles using the DIV tag</title> <style type= "text/css"> div.first {background: yellow; font-size: 16pt}

</style> </head> <body> <br /> <div class="first">

David Blunkett, the Home Secretary, confirmed yesterday that tough legislation, which could breach human rights laws, would be brought before MPs soon. Britain, he said, must throw down the gauntlet to terrorists as never before. </div>

</body> </html>

In order to apply styles, using the <span> tag:

1. In the <style> section of your document or the external style sheet, type span.classname or span#idname

2. Type {property.value} and create any additional definitions separating them by

a semi-colon ;

3. At the beginning of the desired words, type <span class="classname" or id="idname">

4. Create the text, which you want to span the effect

5. Finally, type the closing </span>.



<head> <title>Applying styles using the SPAN tag</title> <style type= "text/css"> span.fletter {font-size: 300%; background: black; color: white}

</style> </head> <body> <br /> <p>

<span class="fletter">D</span>avid Blunkett, the Home Secretary, confirmed yesterday that tough legislation, which could breach human rights laws, would be brought before MPs soon. Britain, he said, must throw down the gauntlet to terrorists as never before.</p>

</body> </html>

Defining Styles for Links You can change the background and foreground colour of links in order to make them stand out by using styles. However, link styles have a special syntax. This can be achieved as follows:

1. In the <style> section of your document or the external style sheet, type A: 2. Type

a. link to change the appearance of the links that currently aren’t being clicked or pointed at

b. visited to change the appearance of the links which have already been clicked on by the visitor


c. active to change the appearance of the links when clicked d. hover to change the appearance of the links when pointed to.

2. Type {property.value} and create any additional definitions separating them by a semi-colon ;

3. In order to change the appearance of all the links at once, just type A

{property.value} 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>Applying styles to the SPAN tag</title> <style type= "text/css"> span.fletter {font-size: 300%; background: white; color: black} a:link {background:black; color:white} a:visited {background:white; color:black} a:hover {background:navy; color:yellow} a:active {background:red; color:blue}

</style> </head> <body> <p>

<span class="fletter">D</span>avid Blunkett, the <a href="http://www.homeoffice.gov.uk">Home Secretary</a>, confirmed yesterday that tough legislation, which could breach human rights laws, would be brought before MPs soon.</p>

</body> </html>


Text Formatting with Styles The main objective of the HTML language is to be universal, rather than look beautiful. Due to being monotonous, local formatting is being replaced by the use of style sheets, which offer more possibilities. Choosing a Font Family The font-family marker allows Web page designers to specify more than one font, in case the first specified font is not available on the visitor’s system. In order to set the font family:

1. Type font-family: fontname1 where the fontname1 is the first choice of font 2. If wanted, type fontname2, fontname3, …. for the second, third, … choice of

fonts. 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>Choosing a Font Family Example</title> <style type= "text/css"> h2 {font-family: "Times New Roman", "Arial"} </style> </head> <body> <h2> Blunkett wants ID cards for all </h2>

David Blunkett, the <a href="http://www.homeoffice.gov.uk">Home Secretary</a>, confirmed yesterday that tough legislation, which could breach human rights laws, would be brought before MPs soon.

</body> </html>


Embedding Fonts on a Page Style sheets allow you to embed a font on a page and have it downloaded to the visitor’s system, just like an image. In order to achieve that the following line has to be added to the <style> section of the page or the external style sheet: @font-face{font-family: "fontname"; src: url (fonturl)} where fontname is the name of the font that is to be embedded and fonturl is the font’s url Example @font-face {font-family: "Nueva Roman"; src: url(NUEVAR1.eot)} You cannot choose any font file for the embedded font; Internet Explorer for example, requires fonts to have an .eot extension. Installed fonts can be converted into one with an .eot extension using a program called WEFT. WEFT http://www.microsoft.com/typography/web/embedding/weft Creating Italics In order to create italics, using style sheets just type font-style: italic If you want to remove the italics, just type font-style: normal 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>Creating Italics using Styles</title> <style type= "text/css"> h1 {font-family: "Times New Roman", "Arial"; font-style: italic} h1 b{font-style: normal} </style> </head> <body> <h1> <b>Blunkett</b> wants ID cards for all </h1>



</body> </html>

Applying Bold Formatting In order to apply bold formatting, using style sheets just type font-weight: bold If you want to remove the bold, just type font-weight: normal 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>Applying Bold Formatting using Styles</title> <style type= "text/css"> h1 {font-family: "Times New Roman", "Arial"; font-weight: bold} h1 i {font-weight: normal} </style> </head> <body> <h1 > <i>Blunkett</i> wants ID cards for all </h1>


</body> </html>


Setting the Font Size In order to set the font size, using style sheets just type font-size: value where value can be one of the following:

• xx-small • x-small • small • medium • large • x-large • xx-large

• larger • smaller

• exact size, like 12pt or 20pt

• or a percentage

relative to any parent style


<head> <title>Setting the Font Size using Styles</title> <style type= "text/css"> h1 {font-family: "Times New Roman", "Arial"; font-size: xx-large} h1 i {font-size: x-small} font {font-size: 72pt} </style> </head> <body> <h1> <i>Blunkett</i> wants ID cards for all </h1>

<font>D</font>avid Blunkett, the <a href="http://www.homeoffice.gov.uk">Home Secretary</a>, confirmed yesterday that tough legislation, which could breach human rights laws, would be brought before MPs soon.

</body> </html>


Setting the Line Height The line height refers to the amount of space between each line in a paragraph. In order to set the line height, using style sheets just type line-height: n where n is a number that is multiplied by the font-size to obtain the desired line height or type line-height: p% where p% is a percentage of the font-size or type line-height: a where a is an absolute number in points or pixels 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>Setting the Line Height using Styles</title> <style type= "text/css"> p {line-height: 30pt; font-size:12pt} </style> </head>


<body> <h1> <i>Blunkett</i> wants ID cards for all </h1>

<p>David Blunkett, the <a href="http://www.homeoffice.gov.uk">Home Secretary</a>, confirmed yesterday that tough legislation, which could breach human rights laws, would be brought before MPs soon. The proposed legislation is thought to include increased powers of arrest for the police to interrogate suspects and moves to abolish some rights of judicial appeal for immigrants turned back at airports.</p>

</body> </html>

Setting the Text Colour In order to set the text colour, using style sheets just type color: colourname where colourname can be one of the 16 predefined colours, #rrggbb (this being the hexadecimal representation of a desired colour) or rgb (r%, g%, b%) where r, g and b specify the percentage of red, green and blue respectively. 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>Setting the Text Colour using Styles</title> <style type= "text/css"> h1 {color: blue} </style> </head>


<body> <h1> <i>Blunkett</i> wants ID cards for all </h1>


</body> </html>

Changing the Text’s Background In order to set the text colour, using style sheets just type background: colour to set the colour of the text’s background background: transparent to make the background transparent background: url(image.gif) to use an image for the background background: fixed or scroll to determine whether the background

should scroll along the canvas. 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>Changing Text’s Background using Styles</title> <style type= "text/css"> h1 {background: yellow} </style> </head> <body> <h1> <i>Blunkett</i> wants ID cards for all </h1>


</body> </html>


Controlling Spacing With styles you can add more space between words (tracking), between letters (kerning) or indents before particular paragraphs. In order to achieve this, you should type the following: word-spacing: length to set the space between words in pixels

or points letter-spacing: length to set the space between letters in pixels or points text-indent: value to set paragraph’s indents using an

absolute value or a percentage 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>Controlling Spacing using Styles</title> <style type= "text/css"> h1 {letter-spacing: .5em} p {text-indent: 8pt; word-spacing: 4pt} </style> </head> <body> <h1> <i>Blunkett</i> wants ID cards for all </h1>

<p> David Blunkett, the <a href="http://www.homeoffice.gov.uk">Home Secretary</a>, confirmed yesterday that tough legislation, which could breach human rights laws, would be brought before MPs soon. </p>

</body> </html>


Aligning Text In order to align text, using style sheets just type text-align: direction where direction can be either left, right, center or justify 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 Text using Styles</title> <style type= "text/css"> h1 {text-align: right} p {text-indent: 8pt; word-spacing: 4pt} </style> </head> <body> <h1> <i>Blunkett</i> wants ID cards for all </h1>


</body> </html>


Underlining Text In order to underline text, using style sheets just type text-decoration: value where value can be either underline, overline, line-through or none. 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>Undelining Text using Styles</title> <style type= "text/css"> h1 {text-decoration: underline} </style> </head> <body> <h1> <i>Blunkett</i> wants ID cards for all </h1>


</body> </html>

Making Text Blink In order to make text blink, using style sheets just type text-decoration: blink This tag works only with Netscape Navigator.



<head> <title>Making Text Blink using Styles</title> <style type= "text/css"> h1 {text-decoration: blink} </style> </head> <body> <h1> <i>Blunkett</i> wants ID cards for all </h1>

<p> David Blunkett, the <a href="http://www.homeoffice.gov.uk">Home Secretary</a>, confirmed yesterday that tough legislation, which could breach human rights laws, would be brought before MPs soon.</p>

</body> </html> Changing the Text Case In order to change the text case, using style sheets just type text-transform: value where value can be either capitalize to put the first character of every word in uppercase uppercase to change all the letters to uppercase lowercase to change all the letters to lowercase none to leave the text as it is 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>Changing the Text Case using Styles</title> <style type= "text/css"> h1 {text-transform: uppercase} </style> </head> <body> <h1> <i>Blunkett</i> wants ID cards for all </h1>

<p> David Blunkett, the <a href="http://www.homeoffice.gov.uk">Home Secretary</a>, confirmed yesterday that tough legislation, which could breach human rights laws, would be brought before MPs soon.</p>

</body>


</html>

Cascading Style Sheets (CSSs) - ChakarovIntroduction to Web Technologies Stoke-on-Trent College...

Documents

Transcript of Cascading Style Sheets (CSSs) - ChakarovIntroduction to Web Technologies Stoke-on-Trent College...