H1,H2 headings are to big |
I have big H1, H2, H3, H4, H5, H6 Headers.
How can I reduce that with CSS or there's another way. I know i'm a beginner and seems stupid question.
You can control your Hx tags in any way you want with CSS. For instance, if you want to set a font size and color for your H2 tags you'll do:
h2 { font-size: 12pt; color: #333; } And you can do that for any sort of HTML tag, Hx or whatever.
h1 {
font-size: 20px; } h2 { font-size: 16px; } ...etc
Simpler is always better
Thanks for the quicq answer Donpwinson
I have This in style.css /* HEADINGS */ h1 {clear:both; margin:0 0 10px; font-size:2.25em; line-height:1.25em;} h2 {clear:both; margin:0 0 10px; font-size:1.80em; line-height:1.25em;} h3 {clear:both; margin:0 0 10px; font-size:1.45em; line-height:1.5em;} h4 {clear:both; margin:0 0 10px; font-size:1.20em; line-height:1.5em;} h5 {clear:both; margin:0 0 10px; font-size:1em; line-height:1.5em;} h6 {clear:both; margin:0 0 10px; font-size:0.80em; line-height:2em;} What's wrong with this one's what font-size is the same of em
Generally, 1em = 12pt = 16px
Adjust them to the size you want
Simpler is always better
You can make your css a lot more compact:
Code: h1,h2,h3,h4,h5,h6 { clear:both; margin:0 0 10px; }
Everything you ever wanted to know about CSS Font-Size: em vs. px vs. pt vs. percent
(09-22-2017, 04:07 PM)dave friend Wrote: Everything you ever wanted to know about CSS Font-Size: em vs. px vs. pt vs. percent Super answers people. Thank you very much. Thank you for your efforts!
(09-21-2017, 12:27 PM)CodeNoobGniter Wrote: I have big H1, H2, H3, H4, H5, H6 Headers. html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input,hr {margin:0; padding:0;} h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,code,em,strong,th {font-size:1em; font-weight:normal; font-style:normal;} fieldset,img,hr {border:none;} caption,th {text-align:left;} table {border-collapse:collapse; border-spacing:0;} td {vertical-align:top;} .html{ background-color: #D4D4D4; } ol, ul{ margin-left: 20px; } .header{ background: #1e5799; /* Old browsers */ } .content{ margin:auto; width: 1000px; /*background: white;*/ background-color: #D4D4D4; padding: 25px 10px 20px 20px; font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif; border-left:thin gray solid; border-right:thin gray solid; border-bottomolid gray 1px; min-height: 500px;} .footer { margin:auto; margin-top: 50px; } .snelmenu{ background:white; border: thin gray dashed; margin: 5px; padding: 10px; width: 250px; float: right;} .tip{ background:#66CCFF; padding:10px; border: thin gray dashed; font-size: 12px;} .opgelet{ background:#FF6666; padding:10px; border: thin gray dashed; font-size: 12px;} .aandacht{ background:#FF00FF; padding:10px; border: thin gray dashed; font-size: 12px;} h1,h2,h3,h4,h5,h6 { clear:both; margin:0 0 10px; } h1,h2 { line-height: 1.25em; } h3,h4,h5 { line-height: 1.5em; } h1 { font-size: 2.25em; } h2 { font-size: 1.8em; } h3 { font-size: 1.45em; } h4 { font-size: 1.2em; } h5 { font-size: 1em; } h6 { font-size: .8em; line-height:2em;} p { font-size:12px; font-family:Arial, Helvetica, sans-serif; font-weight:normal; font-style:normal; line-height:18px; color:black;} My code of style.css html body div div ul dl dt dd h1 h2 h3 h4 h5 h6 pre form p blockquote fieldset input hr {margin: 0; padding: 0;} h1, h2, h3, h4, h5, h6, pre, code, address, caption, cite, code, em, strong, th {font-size: 1em; font-weight: normal; font-style: normal;} fieldset, img, hr {border: none;} caption, th {text-align: left;} table {border-collapse: collapse; border spacing: 0;} eg {vertical-align: top;} .html { background-color: # D4D4D4; } ol, ul { margin-left: 20px; } .header { background: # 1e5799; / * Old browsers * / } .content { margin: auto; width: 1000px; / * background: white; * / background-color: # D4D4D4; padding: 25px 10px 20px 20px; font: 67.5% 'Lucida Sans Unicode', 'Bitstream Vera Sans', 'Trebuchet Unicode MS', 'Lucida Grande', Verdana, Helvetica, sans-serif; border-left: thin gray solid; border-right: thin gray solid; border-bottom: solid gray 1px; min-height: 500px;} .footer { margin: auto; margin-top: 50px; } .menu { background: white; border: thin gray dashed; margin: 5px; padding: 10px; width: 250px; float: right;} .tip{ background: # 66CCFF; padding: 10px; border: thin gray dashed; font size: 12px;} .observed { background: # FF6666; padding: 10px; border: thin gray dashed; font size: 12px;} .attention{ background: # FF00FF; padding: 10px; border: thin gray dashed; font size: 12px;} h1, h2, h3, h4, h5, h6 {clear: both; margin: 0 0 10px; } h1, h2 {line-height: 1.25em; } h3, h4, h5 {line-height: 1.5m; } h1 {font-size: 2.25em; } h2 {font-size: 1.8em; } h3 {font-size: 1.45em; } h4 {font-size: 1.2em; } h5 {font-size: 1em; } h6 {font-size: .8em; line-height: 2em;} p { font size: 12px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-style: normal; line-height: 18px; color: black;} I'm still having trouble with the big ones of the h1, h2, h3, h4, h5, h6 headers What am I doing wrong in this code? I do not know if I can show my website to show what's wrong. But the H1 and H2 headers seem to me to be huge Does anyone at the top of the code see something wrong or so? Please help. |
Welcome Guest, Not a member yet? Register Sign In |