Work-in-Progress Question: Constants in CSS

HTML-CSS
1

birth data example
birth data example573×122 11.8 KB

This is a work in progress.
In the ss you can see that each line is preceded by a constant (Born/Birthplace/Mother/Father) followed by content. This will be part of a screen that contains other biographical data in other bordered elements. Thinking ahead, I want to be able to set up a javascript for entering those data elements (July 4, 1776; Independence Hall, Philadelphia, PA; Freedom; Revolution) but I want those constants to be part of the style within the CSS.

Here is the file as it is currently drafted. As I work out details, the styles will all be in CSS files instead of declared in the element of HTML; I have them here for convenience and to avoid any problems using in HTML, for now.

Can I do what I described? How?

<!DOCTYPE html>
<HTML>
  <HEAD>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Birthstone">
  </HEAD>
    <STYLE>


.ancestor-container 
{
  width: 1200px;
  height: 800px;
  margin-left: auto;
  margin-right: auto;
  border-style: ridge;
  border-width: 7px;
  border-radius: 20px;
  border-color: brown;
  background-color: rgb(234, 217, 201);
}


.bio-1masthead {
text-align: center;
width: 600px;
height: 40px;
font-size: 26px; 
} 

.bio-2name {        
  width: 560px;
  height: 30px;
  margin-top: 5px;
  margin-left: auto;
  margin-right: auto;
  font-family: "Birthstone";
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  border-style: ridge;
  border-color: brown; 
  border-width: 3px;
  border-radius: 10px;
  padding-top: none;
  padding-bottom: 10px;
  }

  .bio-4birth-label             
{ 
grid-area: birth; 
width: 50px;
height: 20px;
margin-top: 6px;
margin-right: 2px;
border-style: ridge; 
border-width: 1.5px;
border-radius: 5px;
border-color: brown;
font-family: "Birthstone";
font-weight: 700;
text-align: center;
}

.bio-5birth-data {            
grid-area: 2 / 1; 
width: 360px;
height: 70px;
margin-top: 4px;
margin-right: 74px;
border-width: 1.5px;
border-radius: 5px;
border-color: brown;
font-family: "Birthstone";
font-size: 13px;
font-weight: bold;
padding-left: 5px;
}

    </STYLE>
  <BODY>
    <div class="ancestor-container">
    
      <div class="bio-1masthead">
      </div>
      
      <div class="bio-2name">
          Uncle Sam
      </div>
      
     <!-- <div class="bio-4birth-label">
          Birth
      </div>-->
      
      <div class="bio-5birth-data">
          Born: July 4, 1776<br>
          Birthplace: Independence Hall,
          Philadelphia, PA<br>
          Mother:  Freedom<br>
          Father:  Revolution
      </div>

    </div> <!-- Closes ancestor-container -->
      




  </BODY>


</HTML>

Note: I’m experimenting with font families and might not use this one.

2

look up :before and :after