Your Ad Here

Posts Tagged ‘styling’

Connecting a style sheet with a HTML file

Connecting a style sheet with a HTML file:

Today I will tell you how to import a style sheet into a HTML file, it is very simple. There are a few ways of doing it. So let us being…

Method 1: Writing a style sheet within a HTML page

Well after the <title> in the <head>, we mention that we are giving a link to a style sheet and start coding there. This is what the html code will look like

<html>

<head>

<title>Untitled-1</title>

<link rel=”stylesheet” type=”text/css”>

<style type=”text/css”>

h1{

background:black;

color:white;

}

background:black;

/** and so on and so forth the styling can be continued**/

</style>

</head>

If your web has not a lot of styling involved then only I recommend, because if your webpage is totally based on a lot of styles, then it gets rather complicated or if the style is being imported to many pages.

Method 2: Linking to an external style sheet

In the head we can import an external style sheet. The advantage to this is that it can be applied to as many pages without having to put the whole CSS code into the HTML file.

<html>

<head>

<title>Untitled-1</title>

<link rel=”stylesheet” type=”text/css” href=”/style/style.css” media=”all”>

</head>

Well if you see href=”/style/style.css”, this is more like a hyperlink to the style sheet. Well indeed it is a hyperlink to the style sheet. Now an important piece of information, you should place the link in the href from the root to the web site. Most of the websites use this method, as it is better and easier to implement. And changes can be made much more easily as compared to method 1 of adding styles to your web page.

We can multilink that is connecting multiple style sheets; here is a specific pattern by which results comes. We can embed 2 or more style sheets by the following code

<html>

<head>

<title>Untitled-1</title>

<link rel=”stylesheet” type=”text/css” href=”/style/style.css” media=”all”>

<link rel=”stylesheet” type=”text/css” href=”/style/style_new.css” media=”all”>

</head>

Method 3: Importing a style sheet

This is a built in declaration that we can use to import a style sheet into a HTML page. The syntax is as follows

<html>

<head>

<title>Untitled-1</title>

@import url(styles/style.css);

</head>

Method 4: Inlining style sheets

We can put our styles individually to elements, this can be done as follows:

<p STYLE=”color:red; background: black; align: center”>This paragraph will be styled as red text on black background.</p>.

So this is about it. I hope you understood the basics of connecting a style sheet with an HTML file. In case of any questions feel free to contact. Have a great day .

Posted on June 12th, 2009 by Mutedart  |  1 Comment »

Links in CSS

Styling links using CSS:

Link styling, a very basic concept that can be achieved using CSS. How to style your links? A question many face. Well there are many tutorials on how to make fancy buttons, attractive buttons, and professional buttons. But what are the basics of the whole thing? I will be explaining the basics of link styling, I won’t go into the exact styling but a general explanation of the whole thing.

So starting with the very basics of links

In a plain html file, we have our link is link

<a href=”home_page.html” target=”_self” >Home Page </a>

Not so complicated and not so styled as well. It will look very simple and in most cases it will not suit the over all page layout if your page is totally custom. So there we have either use java scripting to make image rollovers as links, or very simply style them. It seems the word styling is very common in the article. But to be honest styling is a very basic tool to enhance the page look without needing to get into very complicated methods or very sophisticated coding. I am assuming here you know how to import or connect or embed a style sheet (i.e. a CSS file) into an HTML file. So the first thing is the basic selectors in styling links. There are 4 selectors in styling links which are:

a:link – the default look of a link at a page load

a:visited – this is activated for a link that has been viewed

a:hover – As soon a mouse is taken over a link, it generates the code on that link

a:active- the code is generated when that page is being viewed

These are often called linked pseudo classes. Well this is every thing we need in order to style our links. A little explanation of each selector is described with it. The first thing we can do is add a background, change the font family, vary the size of the font, change the color of the font, add a border, etc. there are many things we can play around with here.

There can be a few scenarios though those need to be looked into, let us start…

The first scenario is where we want all the links to have a single style applied. This is relatively very simple. No need of id’s, classes, etc. the code of the CSS file can simple be,

/**Styling of links**/

/***Note: we can continue adding as many things as we want. I am just giving a few examples here.

a:link{

background: black;

color: white;

text-decoration: none;

}

a:visited {

background: #333333;

color: white;

text-decoration: none;

}

a:hover {

background: #990000;

color: black;

text-decoration: underline;

}

a:active{

background: black;

color: #990000;

text-decoration: underline;

}

Well this was the first case. Not considering a somewhat complicated case; in which we have top panel of buttons, a side bar, and a body where the buttons come. So now we have the fun part. Getting indulged in inserting <div>, and introducing id’s, classes etc.

The first thing we need to see is will the same style be applied to various locations in a page. In case the answer is YES, we will implement classes in these situations. Other wise if its being implemented to an id that is it is going to unique and used only once. So how to implement an id

Top Links come here… <div id=top>

Side links come here

<div class=side>

Body comes here links of body

<div id=body>

Side links also come here

I did not mention the html code. In case you need it for the above table let me know. I would post it; Implementation in CSS. The ids, classes that is required are given in the table it self.

The code for CSS is as follows

/****For the ID=top****/

#top a:link {

/**Styling for Normal link here**/

}

#top a:visited {

/**Styling for visited link here**/

}

#top a:hover {

/**Styling for Hovering here**/

}

#top a:active{

/**Styling for Active link here**/

}

/****For the class=side****/

.side a:link {

/**Styling for Normal link here**/

}

.side a:visited {

/**Styling for visited link here**/

}

.side a:hover {

/**Styling for Hovering here**/

}

.side a:active{

/**Styling for Active link here**/

}

/****For the ID=body****/

#body a:link {

/**Styling for Normal link here**/

}

#body a:visited {

/**Styling for visited link here**/

}

#body a:hover {

/**Styling for Hovering here**/

}

#body a:active{

/**Styling for Active link here**/

}

That is the basic layout of the code to call the ids or classes for styling the links. The styling will be done in the { }. I have mentioned before what can be done to the links.

So I guess this is about it. Very simple styling help. I tried to explain the very basics of ids, classes and styling. If you have any questions leave them as comments I will try to help you out as soon as possible.

Posted on June 10th, 2009 by Mutedart  |  No Comments »