Online Diary of Renzou

Showing posts with label CSS. Show all posts

What is Cascading Style Sheet (CSS)?

Tuesday, May 05, 2009 · Posted in CSS

Have you ever thought about what a web page is? Actually there are 3 Layer part of the web page and than are the Content, Presentation and its behavior.

Content Layer is always present in a web page actually. It comprises the information the author wishes to convey to his or her audience or readers and is embedded within the HTML or the Hypertext Mark-up Language or either the XHTML that defines its structure and semantics. As we can see in all the web pages today most of the content of it is text but some of the content can also be images, animations, videos, sound and etc.

Presentation Layer it defines how the content will appear to a human being who access the document in one way or another. The conventional way to view web pages is with a regular web browser.

There are also advantage in using the CSS from the traditional HTML because in CSS we can modify or replace any of the layers without having to change the others an styling can be kept entirely separate from the content also the most important is that the CSS also provides more and far control over presentation than do presentational elements types of HTML.

No Comments »

Sample Static Website

Thursday, April 30, 2009 · Posted in CSS, HTML

Well I am proud to say that this is our project and work during our WEB Development 1 subject. We made it for almost 1 and a half month. This is our project in which we really manipulated it on CSS and not in HTML, because our professor really required us not to manipulate our website just by inline or internal CSS but we have to use external CSS in which I can really say that it is one of the difficult part of making this project. But still I am so thankful that we made it with my group. Especially to Eman, who really help me, guide me and really give his support in making this project and also to Alfid who made our very beautiful banner, to Janine who serves as our Profile Editor, Mervyn and Bamba for being the News Editor In Chief, Kenneth Rofuli as the Events Editor In Chief, to Pink, Karl Inte, Christopher, Sil john and Lemuel. I am so happy and grateful that evens for one time only I have all of you as my members without you our project would be rather useless, because the most important is that the friendship and understanding that we have made when we were acting and making this project as one so, I hope that the friendship that we started would never end. To Group 1 especially to their leader which is my partner, good luck also.

4 Comments »

How to create a simple hover menu using CSS

· Posted in CSS, HTML

This is one of the most beautiful and most amazing if you know how to manipulate your HTML and your CSS or the Cascading Style Sheet. Actually as you can see on its HTML there are no design just only pure HTML and the question is how it comes that you came on your output just like this? Easy, my answer is that I manipulate my design, structure, characteristics and effects in CSS. I use CSS to make this hover menu.

OUTPUT:
HTML:

CSS:

*
{
font-family: Tahoma;
font-size:12px;
color:#ffffff;
}
#navsite
{
position:absolute;
width: 100px;
height: 20px;
left: 79px;
top: 69px;
}
a
{
text-decoration:none;
}
#navsite ul
{
list-style:none;
padding:0px;
margin:0px;
background-color:#0066ff;

}

.lastline
{
border-bottom:1px solid #000;

}

#navsite ul li
{
display:block;
border-top:1px solid #000000;
border-left:1px solid #000000;
border-right:1px solid #000000;
text-align:center;

}

#navsite ul li:hover
{
display:block;
background-color:#000;
}

No Comments »

How to Insert Image in HTML using CSS

Friday, March 27, 2009 · Posted in CSS

This is a tutorial about on how to inserting an image in HTML by using the CSS or the Cascading Style Sheet, most web programmers are using CSS in creating their websites. To begin with follow the steps that I provide for you below.

1. Make a directory/folder name myfirstcss.

2. Look for an image which you were going to use for this activity.

3. After creating the directory and looking for image. Open your text editor and create a file titled first_activity.html.

4. Next, create another file name style.css. This is were we are going to put all our css later.

5. You may now start. just try to follow the code given below.

HTML:

<html>
<head>
<title>your title goes heretitle>
head>
<link rel="text/css" type="stylesheet" href="style.css" />
<body>
<div id="image">div>
body>
html>

This is now the css and you have to save it in the same directory and has a filename of style.css.

#image
{
position:absolute;
width:600px;
height:100px;
background-image:url('john.gif');
background-repeat:no-repeat;
}

Sample Output:

If there is some questions about this article just CLICK THIS LINK to be redirected to the forum page.

3 Comments »

How to create hover button without javascript

Sunday, February 15, 2009 · Posted in CSS

In this example it illustrates on how to create a hover menu without using a javascript but only pure css.

Output:

CSS:

div
{
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
text-decoration:none;
color:#000000;
list-style:none;
}

td
{
background-image:url(banner2.jpg);
width:150px;
left: 14px;
top: 0px;
text-align:center;

}
a:hover div
{
color:#FFFFFF;
opacity:.2;
background-color: #0000FF;
}