Can't regain font size after CSS reset |
Can't regain font size after CSS reset |
R1S8K |
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> |
pandy |
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.
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? |
R1S8K |
Oct 6 2020, 11:45 AM
Post
#3
|
Newbie Group: Members Posts: 13 Joined: 5-October 20 Member No.: 27,578 |
|
pandy |
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. |
R1S8K |
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: |
pandy |
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% } |
R1S8K |
Oct 7 2020, 01:13 AM
Post
#7
|
Newbie Group: Members Posts: 13 Joined: 5-October 20 Member No.: 27,578 |
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; } |
pandy |
Oct 7 2020, 02:04 AM
Post
#8
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
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... |
R1S8K |
Oct 7 2020, 05:18 AM
Post
#9
|
Newbie Group: Members Posts: 13 Joined: 5-October 20 Member No.: 27,578 |
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 |
Christian J |
Oct 7 2020, 06:53 AM
Post
#10
|
. Group: WDG Moderators Posts: 9,630 Joined: 10-August 06 Member No.: 7 |
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 |
pandy |
Oct 7 2020, 07:10 AM
Post
#11
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,716 Joined: 9-August 06 Member No.: 6 |
I want them to get back to their default sizes. You mean you want the browsers to decide what size they should be. 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. |
R1S8K |
Oct 7 2020, 10:59 AM
Post
#12
|
Newbie Group: Members Posts: 13 Joined: 5-October 20 Member No.: 27,578 |
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. |
pandy |
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; .
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/ |
R1S8K |
Oct 8 2020, 09:08 AM
Post
#14
|
Newbie Group: Members Posts: 13 Joined: 5-October 20 Member No.: 27,578 |
Where did that come from? I thought you had font: inherit; . 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. |
pandy |
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.
|
Lo-Fi Version | Time is now: 28th March 2024 - 12:10 PM |