Html changing the font style of text on whole page

5496ben · January 25, 2017

Could somebody help me please my HTML code that I have pieced together is affecting the font style of the whole page. Could some one please advise me

<!DOCTYPE html>
<html>
<head>
<style>
table,th {
border: 1px solid white;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
text-align: left;
padding: 8px;

border: 1px solid none;
}
tr:nth-child(odd){background-color: white}

p {
text-align: right;
font-weight: normal;
}

</style>
</head>
<body>

<div style="overflow-x:auto;">
<table>

<h2>Package One - Day Service</h2>

<tr><td>Arrive one hour before the cermony, provide coverage thoughout the day until the last dance </td></tr>
<tr><td>At least 300 photographs, that come with reproduction rights.</td></tr>
<tr><td>A private gallery for sharing your photographs with family and friends</td></tr>
<tr><td>All travel and processing costs for the photographer</td>
</tr>
<tr><th><p>Total Cost £900</p></th></tr>

</table>

</div>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
table,th {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 100%;
}

th, td {
text-align: left;
padding: 8px;

}

tr:nth-child(even){background-color: #f2f2f2}

p {
text-align: right;
font-weight: normal;
}
div {
font-size:large;
}

</style>
</head>
<body>

<div style="overflow-x:auto;">
<table>

<table>

<tr>

<h2>Package Two - Part Day Service</h2>
<td>Arrive one hour before the cermony, provide coverage throughout the day until the wedding breakfast</td>
<tr>
<td>At least 200 photographs that come with reproduction rights</td>
</tr>
<tr>
<td>A private gallery for sharing your photographs with family and friends</td>
</tr>
</tr>
<td>All travel and processing costs for the photographer</td>
</tr>
<tr><th><p>Total Cost £600</p></th></tr>

</table>

</div>

</body>
</html>

Hikin' Mike · January 25, 2017

Without seeing your site, I can only guess. Are you inserting your code on "this page" or the whole site?

One thing is if you're adding <!DOCTYPE html> to your hTML/CSS, you don't need it.

Allen · January 25, 2017

BTW, that code is CSS not HTML. Put in CSS widget not HTML widget.
Without the <!doc... >part.

5496ben · January 26, 2017

Hi, my site is vibrancephotography.co.uk/Package-info thank you, sorry can post links yet

Hikin' Mike · January 26, 2017

Maybe I'm missing something, but what exactly is the problem?

Lille Ulven · January 26, 2017

If I am guessing right, than what you wanted is the CSS-code to affect only the text that you have given below each code segment but not the entire page?

If I am right, what you need to do is:
a) add two HTML blocks to your page (and set your page to "only this page" to start with)
b) in the two HTML blocks you add your text in a HTML format
(should look somewhat like this below)
[code]

Package One - Day Service

Arrive one hour before the cermony, provide coverage thoughout the day until the last dance At least 300 photographs, that come with reproduction rights. A private gallery for sharing your photographs with family and friends All travel and processing costs for the photographer
Total Cost £900

[/code]
And your CSS-code (which you gave in your initial post) add to the CSS-tab of that particular HTML block.
That way the CSS will only take affect on the HTML-block it belongs to and not the entire page.

Good luck

Lille Ulven

Hikin' Mike · January 26, 2017

I would use one HTML/CSS block.

Add this to your HTML block:

<div class="package one">   

    <table> 

        <caption>Package One - Day Service</caption>    

            <tbody>

                <tr><td>Arrive one hour before the cermony, provide coverage thoughout the day until the last dance </td></tr>
                <tr><td>At least 300 photographs, that come with reproduction rights.</td></tr>
                <tr><td>A private gallery for sharing your photographs with family and friends</td></tr>
                <tr><td>All travel and processing costs for the photographer</td></tr>
                <tr><th>Total Cost £900</th></tr> 

            </tbody>

    </table>

</div>

<div class="package two">   

    <table>   

        <caption>Package Two - Part Day Service</caption>

            <tbody>

                <tr><td>Arrive one hour before the cermony, provide coverage throughout the day until the wedding breakfast</td></tr>
                <tr><td>At least 200 photographs that come with reproduction rights</td></tr>
                <tr><td>A private gallery for sharing your photographs with family and friends</td></tr>
                <tr><td>All travel and processing costs for the photographer</td></tr>
                <tr><th>Total Cost £600</th></tr>  

            </tbody>

    </table>

</div>

Add this to the CSS section:

/**
* Package Table Stuff
********************************************/
.package {
    overflow-x: auto;
    margin-bottom: 25px;
    }   

table {
    border-collapse: collapse;
    width: 100%;
    }

caption {
    padding: 15px 8px;
    font-weight: bold;
    font-size: 2rem;
    color: white;
    background: black;
    }

th, 
table {
    border: 1px solid black;
    }   

td,
th {
    padding: 8px;
    }   

td {
    text-align: left;
    }

th {
    text-align: right;
    }

tr {
    background-color: white;
    }

    tr:nth-child(even){
        background-color: #f2f2f2;
        }

You can change the CSS to suit.

Hikin' Mike · January 26, 2017

Just to add, if you want to make the two tables different, like colors, I added a class .one and .two. So if you want the caption for package to be red, add this:

.two caption {
    color: red;
    }

5496ben · January 26, 2017

this is just what I wanted thank you so much for your help!!!

Html changing the font style of text on whole page

Comments

Package One - Day Service