Jump to content

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


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>

 

 

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.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.