The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> 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
pandy
post Oct 5 2020, 04:23 PM
Post #2


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

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



I don't understand.

QUOTE(R1S8K @ Oct 5 2020, 08:14 PM) *

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


Of course it can be changed. You can override that for any element you want to be different. Just add for instance this.

CODE
H1   { font-size: 150% }




QUOTE
Then I removed these two lines:

CODE
    font-size: 100%;
    font: inherit;[/quote]

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 the part I don't understand. You removed the font-size, which worked? So what is the problem?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
R1S8K
post Oct 6 2020, 11:45 AM
Post #3


Newbie
*

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



QUOTE(pandy @ Oct 5 2020, 04:23 PM) *


CODE
H1   { font-size: 150% }





oh, didn't know the default size of h1 is %150. so in this respect, h2, 3, 4 .. etc should be at specific numbers lower than h1. so h1 - h6 are default sizes in CSS. but other than that I can put things at any size. ok got that !
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 6 2020, 12:12 PM
Post #4


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

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Well, no. There are no default sizes for headings or anything else. Traditionally browsers show unstyled headings with falling size, H1 being the largest and H6 the smallest. And that's the smart way to do it when not many other options are available. But all browsers don't display them at exactly the same size. I just assumed you wanted the header larger and grabbed a number.

But there is no law that says it need to be this way. You can style headings any way you want, but it's good if there is some thought behind it.

Say you have several chunks of text, each with a heading above. You decide the headings should be H3. You could do this.

CODE
body   { background: #fff; color: #000;
         font: 100% Arial }
h3     { color: #00f;
         margin: 0;
         font-size: 100%; font-weight: normal }
p      { margin: 0 0 1em }


HTML
<h3>Web Authoring Reference</h3>
<p>
Includes the HTML 4 Reference, the HTML 3.2 (Wilbur) Reference, and our Cascading Style Sheets Guide. Offline versions are also available, as well as the HTML 4 Reference in German, the HTML 4.0 Reference in Japanese, the CSS Guide in Japanese, the CSS Guide in Chinese, and the CSS Guide in Spanish.</p>

<h3>Tools</h3>
<p>
Online tools including our HTML Validator; CSSCheck, a Cascading Style Sheets lint; cg-eye, a CGI test kit; Link Valet, a Link Checker; and WiDGets, authoring tools and accessibility add-ons for IE4 for Win95/NT4. Site Valet, a deluxe website monitoring service incorporating online tools.</p>


The headings are the same size and font-weight as the rest of the text and there's no margin between heading and text. I'm not saying it's pretty, but everyone gets those are headings, right? And without CSS everything looks the usual way. Basically that's all that matters. The rest is esthetics.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
R1S8K
post Oct 6 2020, 01:03 PM
Post #5


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 #6


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

Group: WDG Moderators
Posts: 20,716
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 #7


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 #8


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

Group: WDG Moderators
Posts: 20,716
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 #9


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
Christian J
post Oct 7 2020, 06:53 AM
Post #10


.
********

Group: WDG Moderators
Posts: 9,630
Joined: 10-August 06
Member No.: 7



QUOTE(R1S8K @ Oct 7 2020, 12:18 PM) *

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.

No, each CSS property has an "initial" value that you can reset with the "initial" keyword: https://developer.mozilla.org/en-US/docs/Web/CSS/initial however these "initial" values pertain to the CSS properties and are the same for all HTML element (e.g. font-weight: normal, font-size: medium, etc).

QUOTE
But I think each one has its specific size in internal style sheet

Yes, that's called the browser's default stylesheet. These can differ between browser versions and vendors, but here's an example for HTML4 elements: https://www.w3.org/TR/CSS2/sample.html while this page seems to contain HTML5 as well: https://www.w3schools.com/cssref/css_default_values.asp



User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 7 2020, 07:10 AM
Post #11


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

Group: WDG Moderators
Posts: 20,716
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 #12


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 #13


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

Group: WDG Moderators
Posts: 20,716
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 #14


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 #15


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

Group: WDG Moderators
Posts: 20,716
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

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

 



- Lo-Fi Version Time is now: 28th March 2024 - 12:10 PM