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,734
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
pandy
post Oct 7 2020, 02:04 AM
Post #5


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

Group: WDG Moderators
Posts: 20,734
Joined: 9-August 06
Member No.: 6
QUOTE(R1S8K @ Oct 7 2020, 08:13 AM) *

OK, what to do in this situation ?


How to you want the headings to look? Basically you create a rule for each heading and format it as you wish.

Or you can remove the font-size rule from the reset CSS and accept the sizes the browser chooses. That rule is pretty pointless anyway. If you choose to create your own rules for headings it will be overridden and I think headings are the only element of those listed browsers will style the font size of...

Personally I'm not fond of these canned reset blocks...
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
R1S8K
post Oct 7 2020, 05:18 AM
Post #6


Newbie
*

Group: Members
Posts: 13
Joined: 5-October 20
Member No.: 27,578
QUOTE(pandy @ Oct 7 2020, 02:04 AM) *


How to you want the headings to look? Basically you create a rule for each heading and format it as you wish.


I want them to get back to their default sizes.

I thought the way to go is to set each one as %100 which means to get it to its original size in CSS.

But I think each one has its specific size in internal style sheet, then when I set a new CSS file and change the styles of the html page.

QUOTE
Or you can remove the font-size rule from the reset CSS and accept the sizes the browser chooses. That rule is pretty pointless anyway.


OK, that is a nice one to do. Yep, now I know I should care about font size, and the reset.css is taking care of anything else; like, margins, paddings ... etc.

This is a good start I guess. Thanks for the tip.

QUOTE
If you choose to create your own rules for headings it will be overridden and I think headings are the only element of those listed browsers will style the font size of...


Yep, got this point.

QUOTE
Personally I'm not fond of these canned reset blocks...


You mean the reset codes provided by css programmer ? Then what alternatives you do ?

.......

Thanks, you really helped me in my start smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 7 2020, 07:10 AM
Post #7


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

Group: WDG Moderators
Posts: 20,734
Joined: 9-August 06
Member No.: 6
QUOTE(R1S8K @ Oct 7 2020, 12:18 PM) *

I want them to get back to their default sizes.


You mean you want the browsers to decide what size they should be. wink.gif

Then just remove this line from that reset block.

CODE
font-size: 100%;


Done.

I'd actually recommend you remove the whole reset block. It will stop you from learning what's going on. For example that sometimes margins are added to elements by the browser.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
R1S8K
post Oct 7 2020, 10:59 AM
Post #8


Newbie
*

Group: Members
Posts: 13
Joined: 5-October 20
Member No.: 27,578
QUOTE(pandy @ Oct 7 2020, 07:10 AM) *




Then just remove this line from that reset block.

CODE
font-size: 100%;


Done.


Yep, it worked.

I actually had to removed two lines:

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


QUOTE
I'd actually recommend you remove the whole reset block.


Yeah but when I wanted to do a top nav bar, there was an unwanted margin from the top, so learning
about resetting css was a handy tip.

As a start I would think it would provide me a full control of every html element.


QUOTE
It will stop you from learning what's going on. For example that sometimes margins are added to elements by the browser.
That's what put me in a question mark position when I got the margin from the top that I didn't know how to remove.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 7 2020, 11:08 AM
Post #9


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

Group: WDG Moderators
Posts: 20,734
Joined: 9-August 06
Member No.: 6
Where did that come from? I thought you had font: inherit; . unsure.gif

I've not fully understood the initial value yet. I didn't think it would make font size the same for all elements, but maybe that's how it works. I read this a while back, but it didn't help really. Guess I should read it again.
https://css-tricks.com/getting-acquainted-with-initial/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
R1S8K
post Oct 8 2020, 09:08 AM
Post #10


Newbie
*

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

Where did that come from? I thought you had font: inherit; . unsure.gif

I've not fully understood the initial value yet. I didn't think it would make font size the same for all elements, but maybe that's how it works. I read this a while back, but it didn't help really. Guess I should read it again.
https://css-tricks.com/getting-acquainted-with-initial/


I got it from here:

CSS Tools: Reset CSS - Meyerweb

I just googled "css reset" and this one also seemed to be a known one since I followed a youtuber tutor and linked this link.

Thank you .. you supported me a lot. I'm now working on flexbox and want to fix the size, position ... etc.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 9 2020, 10:58 AM
Post #11


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

Group: WDG Moderators
Posts: 20,734
Joined: 9-August 06
Member No.: 6
I meant I didn't see it in the CSS you posted here.
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
2 User(s) are reading this topic (2 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: 20th May 2024 - 07:30 AM
Invision Power Board © 2024  IPS, Inc.
Licensed to: HTMLHelp.com, LLC