Jump to content

Is it possible to have an external css document and inpage css fomatting?


paddyhaig

Recommended Posts

Would this be the correct way of doing it in my example below? Or is the a more acceptable standardized way? Thanks in advance for your help.

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>example/title>

<!-- This is an experiment using an inpage style -->
<style type="text/css">

#box_a {
height: 184px;
width: 145px;
padding: 0px;
left: 160px;
top: 120px;
position: absolute;
margin-top: -55px;
margin-right: auto;
margin-bottom: auto;
margin-left: -65px;
}	
</style>

<!-- This is an experiment using also an external style sheet -->
<link href="css/text_test.css" rel="stylesheet" type="text/css" />

</head>
<body>
</body>
</html>

You have 3 forms to include CSS:

 

External:

<link href="stylesheet.css">

 

Internal:

<style type="text/css">

..

</style

 

And inline:

<p style="color: blue">..</p>

 

inline overwrites internal, internal overwrites external.

Thank you for your answer. What I want is for all the pages to share a single style css sheet for their backdrop and text, so that the backdrop and text through-out the site is consistent. But the table placement in the pages is unique, so I want the div's and css rules for the table placement to internal. I don't want a huge and difficult to understand external css sheet. Is the below valid? I guess unlike the first example I should put the link to the external style sheet first (Before the internal style sheet's styles)? Is this the correct way to do this???

 

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>example/title>

<!-- This is an experiment using an external style sheet -->
<link href="css/text_test.css" rel="stylesheet" type="text/css" />

<!-- This is an experiment using also an internal style -->
<style type="text/css">

#center_box {
height: 184px;
width: 145px;
padding: 0px;
left: 160px;
top: 120px;
position: absolute;
margin-top: -55px;
margin-right: auto;
margin-bottom: auto;
margin-left: -65px;
}
</style>
<!-- I would like for the styles to be pulled from both the style rule containers -->

</head>

<body>
<div id="wrapper">
<div id="small-blue-box">
<div id="center_box">

</body>
</html>

 

 

  Quote
Is the below valid? I guess unlike the first example I should put the link to the external style sheet first

 

It doesn't matter where you put what as long as it's in the <head>-section.

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.