Appllying Indents throughout HTML documents

HTML & CSS
1

I have several lengthy html documents to edit. All of the documents are controlled by an external style sheet. All of the documents have 3 subject headings: a main header, a sub-header and an inner paragraph header.

Most if not all of the inner sub-headers need to be lined up under the 2nd header. I want to create an embedded SS to do this. Can anyone recommend the best formatting element or technique to accomplish this? I have looked at the NBSP and the Pre tab but I am not convinced these are the best ways.

Thank you.

2

What you are seeking to do sounds very easy, but we would need to see the HTML and CSS to know how to best apply the style. If you can post a link to an active page, that would be a big help.

3

Thank you for responding! I have a practice set of code below. However once I figure out how to do this I will apply them to the restricted documents I have at work. I hope this helps. The H3 selector would be changed to do an indent instead of changing color to green. Many thanks!

<!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>
<title>First doc with an Embedded Style “Sheet”</title>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8” />

<style type=“text/css”>
/Embedded Style/
h3{
color:Green;
}
</style>
</head>

<body>
<h2>This is the Main Header - Largest Font Size in this doc - No indent</h2>
<p><h3>This is my intermediate header (Sub Header #2) Should be indented </h3></p>

<p>This is the inner-most header(#3) Should be nested under the Sub header </p>
<p> Lipsum ogmoor islish dabba dabba doo Lipsum <span style=“color:blue”;>This text is affected by the span style where it can apply a format anywhere you put it</span>doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo</p>

</body>
</html>

4

Welcome to SitePoint JR,

for starters, you cant put a header inside a P tag.
ok, once we get that fixed:



<!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>
<title>First doc with an Embedded Style "Sheet"</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
/*Embedded Style*/
h2,h3,h4, p{ margin:0; padding:0}
h2 + h3{  /*  use the adjacent '+'  selector to target the element.  In this case any H3 DIRECTLY AFTER an H2*/
	color:Green;
	text-indent: 1.5em;
}
p{ margin-top: 1em}
.blue{ color:blue;}/* avoild  inline CSS!!!*/
</style>
</head>

<body>
<h2>This is the Main Header - Largest Font Size in this doc - No indent</h2>
<h3>This is my intermediate header (Sub Header #2) Should be indented </h3> 
 <p>This is the inner-most header(#3) Should be nested under the Sub header </p>
<p> Lipsum ogmoor islish dabba dabba doo Lipsum <span class="blue">This text is affected by the span style where it can apply a format anywhere you put it</span>doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo</p>

</body>
</html>

hope that helps

5

Not much context showing, but see if this fills the bill…


<!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>
    <title>First doc with an Embedded Style "Sheet"</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
/*Embedded Style*/
h3 {
    color:green;
}
.indent {
    padding-left:2em;
}
    </style>
</head>
<body>

<h2>This is the Main Header - Largest Font Size in this doc - No indent</h2>
<div class="indent">
    <h3>This is my intermediate header (Sub Header #2) Should be indented </h3>
    <p>This is the inner-most header(#3) Should be nested under the Sub header </p>
    <p> Lipsum ogmoor islish dabba dabba doo Lipsum <span style="color:blue";>This text is affected by the span style where it can apply a format anywhere you put it</span>doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo Lipsum ogmoor islish dabba dabba doo</p>
</div>

</body>
</html>