HTML to CSS and something else

Question

cavpollo 0 Newbie Poster

14 Years Ago

How can I make this HTML into CSS? Also, after making it css I want to save it in a file (.css) and then call it from a different file (an html web page). What I dont know is how to add the "custom code" (the table has 2 holes. An image goes inside the first hole and in the second one I want to add the"custom code" that will be found in my html page).

<table  border="1" cellpadding="5" cellspacing="0" width="100%" style="border-width: 4px; border-style:solid; border-color: blue;">

<tr>
<th style="text-align:left; background-color:#00008B; border-width: 4px; border-style: inset; border-color: black;">
        <a href="http://www.cavpollos.webs.com"><img src="http://cavpollos.webs.com/Imagenes/HexaCAV200x200%28lowWeigth%29.GIF"; border="0"; style="float: left"; alt="Go To CAVPOLLOS Comics!!!"  /> </a>
</th>
<tr><th>
<!--Stuff I want to add from the page this code is called -->
</tr></th>
</table>

web-design

2 Contributors
1 Reply
200 Views
9 Hours Discussion Span
Latest Post 14 Years Ago Latest Post by Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 1 · 2009-10-10T07:18:43+00:00

Cavpollo,

You can't convert HTML to CSS. They are different things. CSS is concerned with presentation while HTML "describes" content (and historically allows a certain degree of control over presentation, which should be delegated to CSS these days).

What you can do is remove your inline CSS styles and put them in a separate style sheet. This is very simple:

.myTable {
	border-width : 4px;
	border-style : solid;
	border-color : blue;
}
.myTable .imageCell {
	text-align : left;
	background-color : #00008B;
	border-width : 4px;
	border-style : inset;
	border-color : black;
}
.myTable .imageCell img {
	border : 0;
	float : left;
}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Airshow :: Move inline styles to Style Sheet</title>
<link rel="stylesheet" type="TEXT/CSS" href="styles.css">
</head>

<body>

<table class="myTable" border="1" cellpadding="5" cellspacing="0" width="100%">
<tr>
<th class="imageCell"><a href="http://www.cavpollos.webs.com"><img src="http://cavpollos.webs.com/Imagenes/HexaCAV200x200%28lowWeigth%29.GIF"; alt="Go To CAVPOLLOS Comics!!!"  /></a></th>
<tr><th>
<!-- Stuff I want to add from the page this code is called -->
</th></tr></table>

</body>
</html>

Save the CSS to a separate file named styles.css , in the same folder as the main, HTML file.

The "Stuff I want to add from the page this code is called" is not something that CSS can help you with. You need to use a server-side scripting language such as PHP/ASP/JSP, though it can also be achieved with Javascript.

Server-side scripting allows marked up content to be generated dynamically - often in concert with a database. Less typically, server-side scripts can be used to generate CSS and client-side script (Javascript) dynamically. CSS and Javascript are more typically hard coded.

The best approach depends on exactly what you are trying to achieve, and where the "Stuff you want to add" is generated/stored.

Airshow