Author Topic: H1 Styling (Read 115 times)

GrumpyYoungMan · « **on:** 8 Feb 2023, 11:12:46 am »

Hello

Would it be acceptable to use two different stylings for the H1 tag?

My thoughts are if you wanted it extra large on a log on page, but then made it smaller on the main website header?

something like

Code: [Select]

h1 { 
     bold 2em "Verdana";
}

#login h1 {
     font-size: 8em
}

GrumpyYoungMan · « **Reply #1 on:** 8 Feb 2023, 11:52:19 am »

Primary Page:

Code: [Select]

<!DOCTYPE html>
<html
    lang="en-GB"
>
<head>
    <meta
        charset="UTF-8">
    <title>Welcome to GYM - Grumpy Young Man</title>
    <link
        rel="stylesheet"
        href="global-gym-screen.css"
        media="screen"
    >
</head>
<body>
<main>
    <section id="welcomeSplash">
        <h1>
            <span>G</span><span>Y</span><span>M</span>
            <span><span>Grumpy</span> <span>Young</span> <span>Man</span></span>
        </h1>
        <a href="?page=index">enter</a>
    </section>
</main><footer>
    &copy; 2023 <span>G</span>rumpy <span>Y</span>oung <span>M</span>an
</footer>
</body>
</html>

Secondary Page:

Code: [Select]

<!DOCTYPE html>
<html
    lang="en-GB"
>
<head>
    <meta
        charset="UTF-8">
    <title>TITLE HOLDER</title>
    <link
        rel="stylesheet"
        href="global-gym-screen.css"
        media="screen"
    >
</head>
<body>
<h1>
        <span>G</span><span>Y</span><span>M</span>
        <span>
            <span>G</span>rumpy <span>Y</span>oung <span>M</span>an</span>
        </span>
    </h1>
<main>
load a database page
</main>Array
(
    [name] => index
    [content] => Hello - Index Here
    [added] => 2023-02-08 15:57:56
    [updated] => 2023-02-08 15:57:56
)
<footer>
    &copy; 2023 <span>G</span>rumpy <span>Y</span>oung <span>M</span>an
</footer>
</body>
</html>

CSS:

Code: [Select]

html, body, h1 {
    margin:0;
    padding:0;
}
a {
    display:block;
    text-decoration:none;
    color: inherit;
}
html, body{
    height: 100%;
}


body {
    font: normal 1em / 1.5 "Courier New";
    display:flex;
    flex-direction: column;
    background:#000;
    color:#FFF;
}
main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


body > h1 {
    background:#111;
}
h1 {
    font: bold 2em "Verdana";
}
h1 > span:nth-of-type(4) {
    display: block;
}
#welcomeSplash span:nth-of-type(4) {
    font: bold 0.25em "Verdana";
}


#welcomeSplash h1 {
    font-size: 8em;
}
h1 > span:first-of-type {
    color:#C8102E;
}
h1 > span:nth-of-type(2) {
    color:#fff;
}
h1 > span:nth-of-type(3) {
    color:#012169;
}

h1 span:nth-of-type(4) {
    font: bold 0.75em "Courier New";
}

#welcomeSplash {
    border: 1px solid /*#BC5D2E;*/ #39A0ED; /*#C2E812;*/
    border-radius: 0.5em;
    background:#111;
    padding:2em;
    text-align:center;
}
#welcomeSplash a {
    color:darkgreen;
    padding:1em 0;
}
#welcomeSplash a:hover {
    color: greenyellow;
}


footer {
    padding:1.25em 0;
    text-align: center;
    font: normal 1em "Courier New";
}

footer span {
    font: bold 1.25em Verdana;
}

Jason Knight · « **Reply #2 on:** 10 Feb 2023, 01:58:03 am »

Not sure why/how your H1 would be inside MAIN... or a SECTION for that matter... Or why you'd suck down an entire "splash" section for just a heading. NOT that I do spash / hero sections on websites in "normal" practice since I consider them a waste of space and an attempt to cover up for a lack of "value of content"

CUTCODEDOWN
Minimalist Semantic Markup