How do I use the same text in multiple HTML so that I can edit it using CSS?

Asked

Viewed 174 times

1

I have several HTML (over 500 HTML) that will use the same title for everyone, for example: "2017 Projects" will be the title in the 500 files

Then I will need to change the title to "Projects 2018"

But I don’t want to take the trouble to open all 500 html and change only one word in each one

What I wanted was to change the title in just one file and so change in all the other 500 at once

How can I do this using CSS through <link href="*.css" type="text/css" /> ???

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css">
.title div:after {
    content: "Andrei webmaster";    
}
.titlecenter {
    text-align: center;
    color: #F00;
    font-weight: bold;
}
</style>
</head>

<body>
<div class="title">
  <div class="titlecenter"></div>
</div>
</body>
</html>
html css
  • 1

    With CSS it is not possible. With Javascript, yes, but you will have to insert the file reference in all HTML files in the same way. Text editors' "Find/Replace" tool does not serve you?

  • Put a include on the php page to center the title in just one file.

  • 1

    It is possible yes. Just not elegant rs.

  • With css da, but the only way I know is by using after or before {content:"2018 projects";}. I wonder if there are other ways. I didn’t want to use Javascript

  • Just out of curiosity: why CSS? Why not use JS or simply change the value with "Find/Replace"?

3 answers

1

With pure css, you can do some tricks, but you have to adapt in the layout, example :

<h1>Projetos de 2017</h1>
<style>
h1{visibility: hidden;}
h1:before{content:"Projetos 2018";visibility: visible;}
</style>

For your code would look like this, you forgot to hide the first content with visibility:hidden and depending on the structure before falls better than after.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sem título</title>
<style type="text/css">
.title div{visibility: hidden;}
.title div:after {
    display:block;
    width:250px;
    margin:0 auto;
    content: "Andrei webmaster";
    visibility: visible;
    color: #F00;
    font-weight: bold;
}
.titlecenter {
    text-align:center;
    color: #F00;
    font-weight: bold;
}
</style>
</head>

<body>
<div class="title">
  <div class="titlecenter">Andrew Stuart Tanenbaum</div>
</div>
</body>
</html>

  • 1

    I believe he refers to the title in <title></title>, from what I understand.

  • 1

    No!! Inside the <body></body> same

  • Here’s the code, Magichat. Here’s the text: "Andrei webmaster" would be modified in all html files using ' link href="*. css" ' Open Sloth 500 html =p

  • There’s nothing incremental there, Leon Freire. It’s all static anyway!! Just html and css. I happen to work in a public body where I publish tables in html on the web with statistical data converted from xls to html. But all tables have the same title in the body (body). I had finished the work, but the statisticians here asked me to modify the title. Then I will modify, ok! But next time I will be cautious and I will change the title of the tables just at once

  • @Andrei if any of the answers are correct, consider validating it... This way other users can benefit

  • using the title div{visibility: Hidden;}, I didn’t notice much difference. But the question is whether there would be a more elegant way to do this via CSS, but without using " before || after "

  • @Andrei Ah bro what do you want elegance for, doing gambiarra ? I went;;;;

Show 2 more comments

1

Now that I have had a greater understanding of your problem. I can also recommend an alternative solution. You can use the ctrl + f from Notepad++ and simply swap all occurrences at once across all files in one folder, in the third option (Find in files). I think since your problem is simply laziness, this should be the most practical way! D

  • Uia knew that a good......

  • @Magichat It’s hand on wheel! Haha..

0

The ideal thing for this type of task is to use PHP. It’s very simple: just copy all the code you want to change later into a separate file. EX:

site
├ index.php
└ page_elements
  └ header.php

<?php require 'page_elements/header.php';?>

You can also do this with Javascript:

window.onload = function(){
  var titulo = document.getElementById("title");
  titulo.innerHTML = "<h1>Novo título</h1>";
}
<div id="title">
  <h1>Título inicial</h1>
</div>

A CSS gambit that is not recommended at all:

h1{color: transparent}
h1:before{
  display: block;
  content: "Título que gostei";
  font-size: 1em;
  color: #222;
}
<h1>Título que não gostei, mas sempre estará lá, caso não use uma linguagem de programação.</h1>

  • I opted for javascript. Thanks to all

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.