CSS

Viewing CSS sheets for cascading styles.

Other notes on how to present HTML elements. This is accomplished by attaching attributes presentation in any HTML element or subclass of it.

For example, we want all paragraphs to have a red background and yellow text, we would use the following code.

If we want to specify the styles to be used on a page we use the STYLE tag while the LINK tag is used to indicate the external file which holds the styles that we will use in page. The STYLE tag should be placed at the top of the page. The TYPE parameter is used to indicate the syntax we will use to define the styles, in our case we will use text / css.

The LINK tag is used as follows. Styles are usually saved to an external file with the .css extension. Styles stored outside do enable you to change the appearance of all pages of a Web site by editing a only. Style sheet format As we saw above the format of a style sheet is as follows:

<Item> {<format>}

CSS syntax is case sensitive. This syntax allows us to specify the format we want to we have in the paragraphs of our website. In HTML 4.0 a CLASS attribute has been added which us enables the creation of element classes to which the style will be applied.

For example, to define a paragraph class that we call formatted, we would write:

There is also a method for assigning a particular style to specific paragraphs. For this we need to define the style of HTML elements using CSS using the syntax of following:

SPAN and DIV

Previously, we saw how to assign styles to HTML elements, but we sometimes want to assign styles to sections of text or content that are not part of an HTML block.

This is done through the DIV and SPAN tags. If we want to label a part of content in order to give it the style we want, we need this content to put inside a SPAN or DIV tag. Unlike SPAN, the DIV sets an interrupt row at the beginning and end of each section thus creating blocks of text without having the need to put them in other tags like paragraph.

Other CSS features

Some of the features that serve to determine the appearance of the text are:

font-family: fonts such as: serif, cursive, sans-serif, fantasy or monospace. We can assign a text to some text or some by dividing them by commas from each other. Care must be taken that the fonts that we will define are installed on the computer.

Font-size: the font size. xx-small, x-small, small, medium, large, x-large, xx-large and numerical values.

• font-style: font style. Can be used normal, italic, italic small caps, oblique, oblique small caps and small caps.

The following features are used in text blocks such as paragraphs.

• margin-top,

margin-right,

margin-bottom,

margin-left: the minimum distance between a block and the adjacent element.

• padding-top,

padding-right,

padding-bottom,

padding-left: fills in the space between the border and the contents of the block.

• border-top-width,

border-right-width,

border-bottom-width,

border-left-width: the contour width of the block in numeric values.

• border-style: the contour style of the block. none, solid or 3D.

• border-color: the color of the contour.

Legacy

It is one of the most powerful qualities of CSS and has the meaning that once we specified a property for an element this property will be inherited to the elements who are children of the above element that has specified the quality in question. For example if we specified the font-family property for the <body> ath element this property will be inherited by everyone the elements contained in the body of the page.

This quality is quite facilitating for your code as you do not have to redefine it at all page element but only in a “parent” element.

But you have to be careful! If a property is specified specifically for an element then the attribute inherited from the parent element will become overwrite with the specified property at the level of that element.

In our first example we saw that the font type defined at the <body> element level was arial. But there were some special table cells that used the Courrier font type. These cells were the cells which had associated the rules of the class-es code. So even though these cells are running being “children” of the <body> element inherit the quality of the Arial font type from their “parent”; manage to overwrite this quality with the Courrier quality which is defined at the odd element level classa code. This is because the selector being specifically defined for td.class is in able to precede attributes placed at the highest hierarchical level. CSS Image Galleries CSS can also be used to create image galleries. more below is the code for an image gallery. The gallery contains three labeled images image1, image2, image3 and save to file named image.

<html>

<head>

<style>

#gallerywrapper

{

float:left;

position:relative;

z-index:5;

}

.gallerydisplay

{

padding:0;

margin:0px 0 0 0;

list-style-type:none;

float:left;

}

.gallerydisplay img.mainimage,

#defaultimage img.mainimage

{

border:0;

width:200px;

height:200px;

}

.gallerydisplay li

{

float:left;

margin:10px 0 10px 0;

}

.gallerydisplay li a img.mainimage

{

position:absolute;

left:0;

display:none;

border:0;

top:55px;

z-index:5;

}

.gallerydisplay li a:active img.mainimage,

.gallerydisplay li a:hover img.mainimage,

.gallerydisplay li a:focus img.mainimage

{

display:block;

}

.gallerydisplay li img.thumbnail

{

height:27px;

width:27px;

margin-right:4px;

border:1px solid #666;

}

.gallerydisplay li a:active img.thumbnail

{

border:#eee solid 1px;

}

#defaultimage img

{

position:absolute;

top:55px;

left:0;

z-index:-1;

}

</style>

</head>

<body>

<div id=”gallerywrapper”>

<div id=”defaultimage”>

<img class=”mainimage” src=”images/image1.jpg” title=”Image 1″ width=”100 px” hei

ght=”100 px” alt=”Image 1″ />

</div>

<ul class=”gallerydisplay”>

<li>

<a href=”#”> <img class=”thumbnail” src=”images/image1.jpg” title=”Image 1″

alt=”Image 1″ >

<img class=”mainimage” src=”images/image1.jpg” title=”Image 1″ alt=”Image 1

” /> </a> </li>

<li>

<a href=”#”>

<img class=”thumbnail” src=”images/image2.jpg” title=”Image 2″ al

t=”Image 2″ />

<img class=”mainimage” src=”images/image2.jpg” title=”Image 2″ al

t=”Image 2″ />

</a>

</li>

<li>

<a href=”#”>

<img class=”thumbnail” src=”images/image3.jpg” title=”Image 3″ alt=”Image 3″

/>

<img class=”mainimage” src=”images/image3.jpg” title=”Image 3″ alt=”Image 3″ />

</a>

</li>

</ul>

</div>

</body>

</html>

Posted in C++

admin

Leave a Reply

Your email address will not be published. Required fields are marked *

You May Like