Styling in CSS does not impact the PHP paragraph

My PHP code has a paragraph that is not being affected by my CSS style, and I can't figure out why. I'm unfamiliar with PHP, so I'd appreciate it if someone could help me troubleshoot this issue. Here's the code:

<html>
<style>
    h1 {
        font-family:"Arial";
        padding: 5px;
        color: #1e90ff;
    }
    p {
        font-family:"Arial";
        padding-left: 15px;
        color: #000;
    }
    span {
        font-family:"Arial";
        padding: 15px;
        color: #000;
    }
    #contentwrapper {
        width: 750px;
        border: 2px solid #666666;
        border-radius: 5px;
        background-color: #808080;
        text-align: center;
    }
</style>
<div id="contentwrapper">
<?php

//connect
I REMOVED THE CONNECTION INFO

//query the db
$getnews = mysql_query("SELECT * FROM page_index") or die(mysql_error());

while ($row = mysql_fetch_assoc($getnews))

{
//get data
$title = $row['title'];
$header = $row['header'];
$content= $row['content'];
echo "
<title>$title</title>
";
echo "
<center><h1>$header</h1></center>
";
echo "
<p>$content</p><br><br>
";
}
?>
</div>
</html>

I prefer using the p tag over spans for a specific reason. Any insights would be appreciated. Thank you!

Answer №1

  1. Create a basic template for the webpage using only HTML, excluding any PHP elements.
  2. Separate the CSS into its own file and link it to the HTML. Confirm that step 1 is visually appealing.
  3. Edit step 1 to include content from the database.

Answer №2

Looks like your HTML code is missing some crucial elements.

Consider inserting a <head> tag right after opening the <html> tag. Don't forget to close the </head> tag after the <title> tag.

Make sure to include a <body> tag at the beginning of your content and close it with a </body> tag before ending with another </html> tag.

Answer №3

Save the following content as test.html and verify if it meets your expectations. If not, make necessary changes to your CSS and then reapply it to your PHP code. Make sure to include the head and body tags in your PHP code.

<html>
<head>
<style>
    h1 {
        font-family:"Arial";
        padding: 5px;
        color: #1e90ff;
    }
    p {
        font-family:"Arial";
        padding-left: 15px;
        color: #000;
    }
    span {
        font-family:"Arial";
        padding: 15px;
        color: #000;
    }
    #contentwrapper {
        width: 750px;
        border: 2px solid #666666;
        border-radius: 5px;
        background-color: #808080;
        text-align: center;
    }
</style>
</head>
<body>
<div id="contentwrapper">
<title>title</title>
<center><h1>header</h1></center>
<p>paragraph</p><br><br>
</div>
</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing intricate CSS selectors for integration testing with webdriverjs

In my quest to develop integration tests using Selenium with JavaScript bindings, WebdriverJS, Mocha, and Chai, I stumbled across an interesting suggestion in this article. It proposed using WebdriverJS over the official SeleniumJS bindings for some reason ...

Most effective method for incorporating external content onto website without using iframes (all websites are owned by me)

Managing a collection of websites is no easy task, especially when they are all powered by WordPress. One common feature among these sites is a simple "name, graphic, and social media links" page located at foo.domain.com/partner. Now, I'm looking to ...

Comparison between global and local styling in VueJS

As I develop a project using .vue files, I find it beneficial to have the ability to write CSS (SASS), JS, and HTML all within the same file. For my global components written in SASS, I have created an assets/styles/app.scss file to house my grid, variabl ...

Showcasing a pair of images adjacent to each other with adequate spacing using CSS

I'm having trouble displaying two images side by side on my website with a gap in between. I've used CSS to position the images next to each other. This is the HTML code I'm using: <div id="divCenter"> <img src="Company L ...

Collecting, gathering content repeatedly

Hey there, just checking in. I'm currently working on extracting information related to CEO Pay Ratio and compiling links to this section for processing by a function. My goal is for the function to capture content starting from a specified tag and en ...

Unexpected behavior is being encountered with the else statement, and there are compatibility issues with IE and Mozilla Browser in the overall script

Script is functioning as expected in Google Chrome, but is not responsive in IE and Mozilla browsers JavaScript code: <script src="jquery.min.js"></script> <script> function Run() { if(jQuery('#inputtext').val() == '0 ...

Retrieve specific form data with the help of jQuery

In a unique situation, I am dealing with a webpage that contains multiple forms and I am attempting to retrieve the data submitted in each form. Here is an example of the HTML code: <form name="form1"> <input type="text"> <input ty ...

`Modify the title property of raphael elements`

I am currently using raphael.js for drawing and I would like to customize the title attribute (such as changing color, font size, etc). circle.attr({ title: 'This is a circle.', fill: 'red' }); You can view my example on jsfi ...

How to Utilize a Google Map Embed on Your Website?

Can I incorporate a Google Map into my website using only CSS? <div class="map"></div> .map{ background: url("https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d4450.37576469368!2d47.31305345548099!3d56.101968401211494!2m3! ...

My challenges with optimizing positioning in Media Queries for Hover Buttons

After completing the coding for all Smartphone devices, I moved on to working on Tablets. However, I encountered an issue during this process as I am unsure of how to fix it. Here is a preview of my "Section Skills" layout for mobile: View Section on Mobi ...

Is there a way to apply CSS to a PHP file within a WordPress website?

Similar Question: How To Add CSS and jQuery to a WordPress Plugin? I am trying to insert a button into a Wordpress plugin. I would like to customize the style of the button by linking a CSS file. I understand how to link a CSS file in an HTML docum ...

Is there a way to dynamically update an image in my CSS without having to refresh the page?

Is it possible to update an image in CSS dynamically using the value of console.log without reloading the page? function reply_click(clicked_id){ $(function() { $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': ...

I find myself grappling with the styling issue in MUI select

<FormControl> <Select labelId="unique-label" id="unique-id" value={1} className={styles.uniqueCustomSelectRoot} IconComponent={() => <MyUniqueIcon />} sx={{ " ...

The CSS styles are not immediately applied when the window is resized; they are only applied when scrolling

When utilizing the Angular approach to apply CSS, I noticed that changes are not applied when resizing the window. The canvas height adjusts correctly upon resize, but the table height only updates when we scroll the window. Is there a way to set the canva ...

Why is the session variable in PHP failing to store the value?

Could you assist me with the following PHP code snippet? I'm trying to ensure that when the update function is called, the session variable 't' increments its value. However, every time I run the code, the output remains at Value: 1. What ad ...

Guide on how to align multiple divs at the center of a container using CSS

Experimenting with centering a divider in the style of Windows metro. .container { height: 300px; width: 70%; background: #EEE; margin: 10px auto; position: relative; } .block { background: green; height: 100px; width: 10 ...

Placing a Picture in a precise location with the help of jquery

My HTML code created by Apex <tr> <td class="labelCol"> <label for="login_page:signup_form:pb2:j_id5:j_id12">Contact Name</label> </td> <td class="dataCol "> <input name="login_page:signup_form:pb2:j_ ...

css customized vertical scrollbar for a static division panel

I have the following HTML content and I need a fixed sidebar with 100% height. The vertical scrollbar should appear when content is added in mainContent or Content. <div class="mainContainer"> <h2>Title</h2> <div class="Content"&g ...

Having trouble creating a full-screen modal with NgbModal by passing content as a component?

I've been using Bootstrap widgets and trying to create a full-screen modal where the header sticks on top, the footer stays at the bottom, and the body scrolls in the middle. Initially, I found a simple HTML solution for this: However, when I want to ...

How can I incorporate my styles into a separate css file for use in a React project?

Although it may seem simple, I am interested in incorporating SCSS into my React application for styling purposes. I understand that React will interpret all of my styles and render them in separate <style> tags within the <head> section. I hav ...