The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

> Can't regain font size after CSS reset
R1S8K
post Oct 5 2020, 01:14 PM
Post #1


Newbie
*

Group: Members
Posts: 13
Joined: 5-October 20
Member No.: 27,578
Hello,

I just learned about CSS reset. Did it and worked perfectly. But I'm now stuck at font-size that can't be changed.

This is the part that set the font size.

CODE
html,
body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acr
onym,address,big,cite,code,del,dfn,
em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd
,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,ar
ticle,aside,canvas,details,embed,figure,figcapton,footer,header,hgroup,menu,nav,
output,ruby,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


When I realized that the font size is constant and I can't change it, I returned to this part of code and tried to modify and point the lines that control the font size.

Then I removed these two lines:

CODE
    font-size: 100%;
    font: inherit;


And the font changed back to its original h size. Then with pasting/removing, the code now isn't responding to these lines anymore. And my page design is at reset state as before.

What to do ?

This is my html code:

CODE
<!DOCTYPE html>
<html>

<head>
    <title>Products Links page</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/main.css">
</head>

<!-------------------------------------------------------------------------------------------------------------->
<!-------------------------------------------------------------------------------------------------------------->
<!-------------------------------------------------------------------------------------------------------------->

<header>
    <div class="main_header">
        <ul>
            <li><a class="active" href="../#Home.html">Home</a></li>
            <li><a href="#Courses.html">Courses</a></li>
            <li><a href="#Products Links.html">Products Links</a></li>
            <li><a href="#Contact.html">Contact</a></li>
        </ul>
    </div>
</header>


<body>
    <h1>Products Links</h1>

    <section>
        <div>
            <h4>Modules</h4>
            <ul>
                <li><a href="https://www.aliexpress.com/item/4000302521201.html?spm=a2g0o.productlist.0.0.5c5374a1ukHfrk&algo_pvid=1bb7f8da-0eaa-4902-90e8-d26185c7d24d&algo_expid=1bb7f8da-0eaa-4902-90e8-d26185c7d24d-2&btsid=0b0a0ae216015780988953086ea99e&ws_ab_test=searchweb0_0,searchweb201602_,searchweb201603_">8-outputs IO expander</a></li>
                <li><a href="https://www.aliexpress.com/item/4000046656442.html?spm=a2g0o.productlist.0.0.43d0b991v3cUc7&s=p&ad_pvid=202010011149511513664265177360012663898_1&algo_pvid=c28b2671-a855-458b-b79f-d31673ef63d5&algo_expid=c28b2671-a855-458b-b79f-d31673ef63d5-0&btsid=0b0a050b16015781908647957e6e84&ws_ab_test=searchweb0_0,searchweb201602_,searchweb201603_">L298n motor driver</a></li>
            </ul>
        </div>


        <div>
            <h4>Dev boards</h4>
            <ul>
                <li><a href="https://www.aliexpress.com/item/32831857729.html?spm=a2g0o.productlist.0.0.64a2213f8cpTdu&algo_pvid=2094c556-d513-4a8c-81e2-a88e18bf6ab1&algo_expid=2094c556-d513-4a8c-81e2-a88e18bf6ab1-4&btsid=0b0a050116016474035154764ea48b&ws_ab_test=searchweb0_0,searchweb201602_,searchweb201603_">Arduino uno</a></li>
                <li><a href="https://www.aliexpress.com/item/4000903444456.html?spm=a2g0o.productlist.0.0.38ec4442UjyJsu&s=p&ad_pvid=202010020705467706929797332550000236341_2&algo_pvid=ee48f52d-6b29-4f02-83ce-911c0f9f44a2&algo_expid=ee48f52d-6b29-4f02-83ce-911c0f9f44a2-1&btsid=0b0a0ae216016475464085476ea921&ws_ab_test=searchweb0_0,searchweb201602_,searchweb201603_">Arduino nano</a></li>
                <li><a href="https://www.aliexpress.com/item/4000053141180.html?spm=a2g0o.productlist.0.0.9ca67543GcQcUj&s=p&ad_pvid=2020100111501011244865626294720012682666_1&algo_pvid=6ab00d0d-33a0-4744-be21-53d353c6ae57&algo_expid=6ab00d0d-33a0-4744-be21-53d353c6ae57-0&btsid=0b0a182b16015782105845181edab4&ws_ab_test=searchweb0_0,searchweb201602_,searchweb201603_">ESP8266 NodeMCU 1.0</a></li>
            </ul>
        </div>



        <div>
            <h4>Diplays</h4>
            <ul>
                <li><a href="https://www.aliexpress.com/item/32977643629.html?spm=a2g0o.productlist.0.0.31e03adbAmMKwJ&algo_pvid=743feac8-4db8-4481-b970-58b2a90bde86&algo_expid=743feac8-4db8-4481-b970-58b2a90bde86-4&btsid=0b0a0ac216015782423481733e70d7&ws_ab_test=searchweb0_0,searchweb201602_,searchweb201603_">0.92" OLED</a></li>
                <li><a href="https://www.aliexpress.com/item/1873400756.html?spm=a2g0o.productlist.0.0.4ac66737BOnVJs&algo_pvid=b3def726-dc30-42e2-a707-773dd8a17d71&algo_expid=b3def726-dc30-42e2-a707-773dd8a17d71-2&btsid=0b0a0ac216015782977651408e707a&ws_ab_test=searchweb0_0,searchweb201602_,searchweb201603_">ST7920 128x64 LCD</a></li>
            </ul>
        </div>

        <div>
            <h4>Motors</h4>
            <ul>
                <li><a href="https://www.aliexpress.com/item/33005212720.html?spm=a2g0o.productlist.0.0.90af59a3ALDRXS&s=p&ad_pvid=202010011209024266361835870000012791645_1&algo_pvid=a128e5fc-f1d2-4293-9c8c-2a7cdf362416&algo_expid=a128e5fc-f1d2-4293-9c8c-2a7cdf362416-0&btsid=0b0a050116015793423434148ea441&ws_ab_test=searchweb0_0,searchweb201602_,searchweb201603_">Stepper motor</a></li>
                <li><a href="https://www.aliexpress.com/item/32907126360.html?spm=a2g0o.productlist.0.0.5421203boutDCg&algo_pvid=5d727e21-5622-4206-84e7-aa50e5f4cc69&algo_expid=5d727e21-5622-4206-84e7-aa50e5f4cc69-31&btsid=0b0a050b16015793638221408e6e4d&ws_ab_test=searchweb0_0,searchweb201602_,searchweb201603_">Servo motor</a></li>
                <li><a href="https://www.aliexpress.com/item/32889130160.html?spm=a2g0o.productlist.0.0.3ed21791CsS2ns&s=p&ad_pvid=202010011210254355761918741070012789701_4&algo_pvid=b6ebcbd3-9469-4fb2-9094-8ad91f9fcc54&algo_expid=b6ebcbd3-9469-4fb2-9094-8ad91f9fcc54-6&btsid=0b0a0ac216015794250128704e70b8&ws_ab_test=searchweb0_0,searchweb201602_,searchweb201603_">DC motor</a></li>
            </ul>
        </div>
    </section>


</body>

</html>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
 
 Reply to this topicStart new topic
Replies
R1S8K
post Oct 6 2020, 01:03 PM
Post #2


Newbie
*

Group: Members
Posts: 13
Joined: 5-October 20
Member No.: 27,578
OK, this is my sketch.

I have headings reset at reset.css

Then I set them again in body_style.css with this:

CODE
h1,
h2,
h3,
h4,
h5,
h6 {
    color: blue;
    font-size: 150%;
}


in html code:
CODE
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>



But they appeared at the same size:

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 6 2020, 01:08 PM
Post #3


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,735
Joined: 9-August 06
Member No.: 6
You've told them to be the same size.

This...

CODE
h1,
h2,
h3,
h4,
h5,
h6 {
    color: blue;
    font-size: 150%;
}


is the same as this.

CODE

h1     { color: blue; font-size: 150% }
h2     { color: blue; font-size: 150% }
h3     { color: blue; font-size: 150% }
h4     { color: blue; font-size: 150% }
h5     { color: blue; font-size: 150% }
h6     { color: blue; font-size: 150% }
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
R1S8K
post Oct 7 2020, 01:13 AM
Post #4


Newbie
*

Group: Members
Posts: 13
Joined: 5-October 20
Member No.: 27,578
QUOTE(pandy @ Oct 6 2020, 01:08 PM) *

You've told them to be the same size.

This...

CODE
h1,
h2,
h3,
h4,
h5,
h6 {
    color: blue;
    font-size: 150%;
}


is the same as this.

CODE

h1     { color: blue; font-size: 150% }
h2     { color: blue; font-size: 150% }
h3     { color: blue; font-size: 150% }
h4     { color: blue; font-size: 150% }
h5     { color: blue; font-size: 150% }
h6     { color: blue; font-size: 150% }



OK, what to do in this situation ?

Also h1 in the picture is moved to the right and has margin from h2 and h3, why ?

Here are all my CSS code:

reset styles:
CODE
/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}



main styles:
CODE
@import url(../css/reset.css);
@import url(../css/body_style.css);
@import url(../css/elements_styles.css);
@import url(../css/head_styles.css);



header styles:
CODE


body {
    background: white;
    /*function of padding not clear here*/
}

.main_header {
    background: aquamarine;
    overflow: hidden;
    padding: 0px;
    margin: 0px;
}

.main_header a {
    float: left;
    color: blueviolet;
    text-align: center;
    padding: 10px;
    text-decoration: none;
    font-size: 17px;
}

.main_header a:hover {
    background-color: aqua;
    color: black;
}

.main_header a.active {
    background-color: yellowgreen;
    color: white;
}

h1 {
    color: blue;
    font-size: 150%
}

h2 {
    color: blue;
    font-size: 150%
}

h3 {
    color: blue;
    font-size: 150%
}

h4 {
    color: blue;
    font-size: 150%
}

h5 {
    color: blue;
    font-size: 150%
}

h6 {
    color: blue;
    font-size: 150%
}



body styles:
CODE

section {
    display: flex;
    background: burlywood;
    padding: 0px;
    margin: 0px;
}

div {
    background: grey;
    /*display: flex;
    position: relative;
    */
    padding: 0px;
    margin: 0px;
}

li {
    display: list-item;
    /*to remove list bullets*/
}

ul {
    list-style-type: none;
    padding: 0;
}

h4 {
    padding: 0px;
    margin: 5px;
}

h1 {
    padding: 0px;
    margin: 50px;
}
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Posts in this topic
R1S8K   Can't regain font size after CSS reset   Oct 5 2020, 01:14 PM
pandy   I don't understand. I just learned about CSS...   Oct 5 2020, 04:23 PM
R1S8K   H1 { font-size: 150% } oh, didn't ...   Oct 6 2020, 11:45 AM
pandy   Well, no. There are no default sizes for headings ...   Oct 6 2020, 12:12 PM
R1S8K   OK, this is my sketch. I have headings reset at r...   Oct 6 2020, 01:03 PM
pandy   You've told them to be the same size. This.....   Oct 6 2020, 01:08 PM
R1S8K   You've told them to be the same size. This....   Oct 7 2020, 01:13 AM
pandy   OK, what to do in this situation ? How to you w...   Oct 7 2020, 02:04 AM
R1S8K   How to you want the headings to look? Basically ...   Oct 7 2020, 05:18 AM
Christian J   I want them to get back to their default sizes. ...   Oct 7 2020, 06:53 AM
pandy   I want them to get back to their default sizes. ...   Oct 7 2020, 07:10 AM
R1S8K   Then just remove this line from that reset blo...   Oct 7 2020, 10:59 AM
pandy   Where did that come from? I thought you had font: ...   Oct 7 2020, 11:08 AM
R1S8K   Where did that come from? I thought you had font:...   Oct 8 2020, 09:08 AM
pandy   I meant I didn't see it in the CSS you posted ...   Oct 9 2020, 10:58 AM

« Next Oldest · General Web Design · Next Newest »
 

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Switch to: Standard · Switch to: Linear+ · Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 2nd June 2024 - 10:43 PM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC