Let's apply some CSS to the font style within the body

Question

Let's apply some CSS to the font style within the body

I've been incorporating a "footer.php" page into all other pages of my website. This footer showcases the site's name at the bottom of the screen and uses a custom font loaded with @font-face.

Initially, I had something like this placed inside the body:


<div id="scoped-content">
    <style type="text/css" scoped>
        @font-face { 
            font-family: 'LilyUPC'; 
            src: url('/common/upcll.ttf'); 
        }
        
        div.footer {
            position: fixed; 
            bottom: 0; 
            left:0; 
            right:0;
            background-color: black;
            float: down;
            text-align: center;
            z-index: 20;
            font-family: "LilyUPC";
            color: red;
            font-size: 12pt;
            text-decoration: underline;
        }
    </style>
</div>
<a href="/index.php">
    <div class="footer">
        SiteName
    </div>
</a>

Lately, I've become more diligent about writing proper HTML/CSS and have started validating my entire site using the W3C validator. The only error it shows is related to this:

https://i.sstatic.net/1hkCM.jpg Thus far, I haven't found any solutions online. How can I achieve the same (@font-faces) without using the style tag?

It's worth mentioning that I cannot place these declarations in the style.css file because the footer is used in various sub-sites within the website where the style.css files differ.

html css w3c-validation

Answer 1

Answer №1

The issue arises when the <style> is placed within the <div>. Avoid this mistake by relocating the code to an internal or external CSS file. External CSS is recommended as it enhances reusability.

Answer 2

The issue arises when the <style> is placed within the <div>. Avoid this mistake by relocating the code to an internal or external CSS file. External CSS is recommended as it enhances reusability.

Answer 3

Answer №2

script within the body tag is anticipated to be permitted in HTML 5.2 (the upcoming HTML Recommendation from W3C).

The current Working Draft of HTML 5.2 for the style element can be found here, and it outlines the following:

Contexts where this element can be utilized:

When metadata content is expected.

Within a noscript element that is nested inside a head element.

In the body, where flow content is required.

(It's worth noting that this last point is not mentioned in HTML 5.1, which is the existing HTML Recommendation.)

Here is the request to update the validator used by the W3C:
style element conforming in body in w3c HTML

Answer 4

script within the body tag is anticipated to be permitted in HTML 5.2 (the upcoming HTML Recommendation from W3C).

The current Working Draft of HTML 5.2 for the style element can be found here, and it outlines the following:

Contexts where this element can be utilized:

When metadata content is expected.

Within a noscript element that is nested inside a head element.

In the body, where flow content is required.

(It's worth noting that this last point is not mentioned in HTML 5.1, which is the existing HTML Recommendation.)

Here is the request to update the validator used by the W3C:
style element conforming in body in w3c HTML

Answer 5

Answer №3

Don't forget to check out the styles in the inspect element for more information

var styles = "<style>"+
    "@font-face { "+
      "font-family: 'LilyUPC'; "+
      "src: url('/common/upcll.ttf');}"+

   "div.footer {"+
        "position: fixed;" +
        "bottom: 0;" +
       "left:0;" +
        "right:0;" +
       "background-color: black;" +
        "float:down;" +
        "text-align:center;" +
        "z-index: 20;"+
        "font-family: 'LilyUPC';" +
        "color:red;" +
        "font-size:12pt;" +
        "text-decoration:underline;}" +
"</style>";

$("head").append(styles);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="other">Unstyled content here</div>
<div class="footer">Styled content here</div>

After, you can include this JavaScript snippet in PHP using <script </script> and echo the entire script

Here's an example of how to do it:

echo("
     <script>
        var styles = \"<style>\"+
        \"@font-face { \"+
              \"font-family: 'LilyUPC'; \"+
              \"src: url('/common/upcll.ttf');}\"+

         \"div.footer {\"+
               \"position: fixed;\" +
               \"bottom: 0;\" +
               \"left:0;\" +
                \"right:0;\" +
               \"background-color: black;\" +
               \"float:down;\" +
               \"text-align:center;\" +
                \"z-index: 20;\"+
                \"font-family: 'LilyUPC';\" +
                \"color:red;\" +
                \"font-size:12pt;\" +
                \"text-decoration:underline;}\" +
        \"</style>\";

        $(\"head\").append(styles);

     </script>
   ");

Answer 6

Don't forget to check out the styles in the inspect element for more information

var styles = "<style>"+
    "@font-face { "+
      "font-family: 'LilyUPC'; "+
      "src: url('/common/upcll.ttf');}"+

   "div.footer {"+
        "position: fixed;" +
        "bottom: 0;" +
       "left:0;" +
        "right:0;" +
       "background-color: black;" +
        "float:down;" +
        "text-align:center;" +
        "z-index: 20;"+
        "font-family: 'LilyUPC';" +
        "color:red;" +
        "font-size:12pt;" +
        "text-decoration:underline;}" +
"</style>";

$("head").append(styles);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="other">Unstyled content here</div>
<div class="footer">Styled content here</div>

After, you can include this JavaScript snippet in PHP using <script </script> and echo the entire script

Here's an example of how to do it:

echo("
     <script>
        var styles = \"<style>\"+
        \"@font-face { \"+
              \"font-family: 'LilyUPC'; \"+
              \"src: url('/common/upcll.ttf');}\"+

         \"div.footer {\"+
               \"position: fixed;\" +
               \"bottom: 0;\" +
               \"left:0;\" +
                \"right:0;\" +
               \"background-color: black;\" +
               \"float:down;\" +
               \"text-align:center;\" +
                \"z-index: 20;\"+
                \"font-family: 'LilyUPC';\" +
                \"color:red;\" +
                \"font-size:12pt;\" +
                \"text-decoration:underline;}\" +
        \"</style>\";

        $(\"head\").append(styles);

     </script>
   ");

Let's apply some CSS to the font style within the body

Answer №1

Answer №2

Answer №3

Similar questions

Eliminate repeated entries in a drop-down menu and display them with commas in between

The PHP login form must be submitted twice

Troubleshooting CSS Issues in ASP.NET Boilerplate

Acquiring the applicable CSS for a JavaFX 8 widget

Center text vertically in a textarea

Designing a fresh look for the developer portal on Azure API Management Services

The Chrome extension for the New Tab Page is taking the spotlight away from the address bar

Update a script that handles input float labels to support textarea elements as well

Remove and modify an li element that has been dynamically generated within a ul list

How can I wrap content with the <li> element in a cross-browser compatible way?

Django failing to detect empty URL configuration

Thrilling visual loops in motion with CSS animations

Expand a section of the webpage to fill the entire screen

When using Jsoup, make sure to nest the <div> tag within an <a>

Transferring data from JavaScript to PHP with the help of AJAX

how to style a page with a CSS arrow shape

Reverse animation transition not activating in CSS

What is the process for integrating a personalized font into the <head> section of the ConvertTo-HTML?

Using JQuery with the latest version of Google Sites is a game-ch

Angular Recursive Bootstrap Breadcrumb Guide