Okay, I have one <h1> in my <header> , and one <h1> in my <section>. The first question is why the size of this both <h1> different? I assume that they have their own size depends on their parents tags, which is I'm not certain of it. The second is I have styling this <h1> with external CSS, like:
h1{
font-size:2em;
}
tutorial
but, the <h1> inside the <header> won't change, only the <h1> inside the <section> make sense. I'm still beginner even in html, so please explain nicely. Thanks in advance.
Issue demo: http://jsfiddle.net/c06tpb3u
You're not using any CSS reset, which means you're at the browser's mercy and the default Stylsheet.
h1 {
display: block;
font-size: 2em;
font-weight: bold;
margin: 0.67em 0;
}
are the default styles set for h1 heading element
while for section things are getting salty:
h2, *:-moz-any(article, aside, nav, section) h1 { /*<<<< note h1 here*/
display: block;
font-size: 1.5em; /*<<<< and the new value*/
font-weight: bold;
margin: 0.83em 0;
}
h1 {
/*display: block;*/
/*font-size: 2em;*/
/*font-weight: bold;*/
/*margin: 0.67em 0;*/
}
so as you can notice (the above is inspecting in FF) that h1 is getting overwritten for h1 being inside section. <heading> element is omitted from that group leaving heading1 at the 2em default font size.
Browsers' default CSS for HTML elements
https://developer.mozilla.org/en/docs/Web/CSS/length
em This unit represents the calculated font-size of the element. If used on the font-size > property itself, it represents the inherited font-size of the element.
This unit is often used to create scalable layouts, which keep the vertical rhythm of the page, even when the user changes the size of the fonts. The CSS properties line-height, font-size, margin-bottom and margin-top often has a value expressed in em.
To override any CSS add the !important notation to the style..
h1{
font-size:2em !important;
}
This will override any of the browsers default CSS.
Related
I am working on some homework for my HTML class and I believe I am doing what the directions ask but it keeps marking it as wrong. I tried reaching out to the professor and she told me to go read the book but I am doing it exactly as the book says and its wrong. Maybe someone here can spot the issue.
questions:
1:
Add a blank line after the CSS reset style rule, add a comment with the text, Style rule for body and image, and then create new style rules for the body and img selectors.
Create a style rule for the body selector that sets a background color value of #e3eaf8.
Create a style rule for an img selector that sets a max-width to 100% and displays the images as a block.
2:
Add a blank line after the img style rule, add a comment with the text Style rule for header content, and then create a new style rule for the header h1 descendant selector that aligns text center; sets a font size value of 3em; sets a font family value of Georgia, Times, serif; sets a padding value of 3%; and sets a color value of #101a2d.
3:
Add a blank line after the header h1 style rule, add a comment with the text Style rules for navigation area, and then create the following style rules for the nav, nav ul, nav li, and nav li a selectors.
Create a style rule for the nav selector that sets the background color to #1d396d.
Create a style rule for nav ul that sets the list style type to none, sets the margin to 0, and aligns text center.
Create a style rule for nav li that sets the display to an inline-block, sets a font size of 1.5em, sets a font family value of Verdana, Arial, sans-serif, and a font weight value of bold.
Create a style rule for nav li a that sets the display to a block, sets a font color value of #e3eaf8, sets top and bottom padding values of 0.5em and left and right padding values of 2em, and removes the text decoration.
Those are the questions and I have tried to change my code a bunch of different ways and I can not seem to get it right
Code:
<DOCTYPE html>
<!--
Student Name: Nicholas Prawl
File Name: styles.css
Date: 02/13/2021
-->
<!--
CSS Reset
margin: 0;
padding: 0;
border: 0;
-->
<!--
Style rule for body and image
body {
background-color: #e3eaf8;
}
img {
max-width: 100%;
display: block;
}
-->
<!--
Style rule for header content
header h1 {
text-align: center;
font-size: 3em;
font-family: Georgia, Times, serif;
padding: 3%;
color: #101a2d;
}
-->
<!--
Style rules for navigation area
nav{
background-color: #1d396d;
}
nav ul{
list-style-type: none;
margin: 0;
text-align: center;
}
nav li{
display: inline-block;
font-size: 1.5em;
font-family: Verdana, Arial, sans-serif;
font-weight: bold;
}
nav li a{
display: block;
color: #e3eaf8;
padding-top: 0.5em;
padding-bottom: 0.5em;
padding-left: 2em;
padding-right: 2em;
text-decoration: none;
}
-->
Many things are wrong with your code.
First, you’re adding CSS code inside what I presume to be HTML without using the style tags. Please refer to this article to learn how to properly embed CSS code in HTML:
https://www.w3schools.com/css/css_howto.asp
Also, you're not adding the comments correctly. See how to add comments in CSS code here: https://developer.mozilla.org/en-US/docs/Web/CSS/Comments
How do you make the h1, h2 seem like standard text?
For example, I want the word 'standard' in the sentence above be a H1 on my page... I can make it the same size, issue is it makes a new line and margin etc...
set this in your CSS file (or tag).
play with the font sizes and such in order to set proper text size and color.
h1 {
font-weight: bold;
color: #fff;
font-size: 32px;
}
h2 {
font-weight: bold;
color: #fff;
font-size: 24px;
}
Both the <h1> and <p> elements are block level. Change them to inline so they don't occupy full width.
p, h1{
display:inline;
font-size:1em;
font-weight:normal;
}
<h1>hello</h1>
<p>there</p>
Just style it in CSS:
.your_class h1{
font-size:20px;
font-weight:400;
margin:0; // if You use for example bootstrap
padding:0; // if You use for example bootstrap
}
Let's pretend your font-size is 14px for the entire page. Change the h1 font-size to that and apply 0px line-height. This is the closest I was able to get.
h1 {
font-size: 14px;
line-height: 0px;
}
Edit: I didn't add bold because I am assuming you wish to keep the default font-weight applied by h1.
If you are wanted to make the word "standard" a different size to the rest of the text try wrapping it in a span and then give the span an id and edit it from CSS to be a larger size
I changed markup in one page like this,
before change
<div class="header-wrapper header">
<h1 wicket:id="headerTitle" class="dealer-name">Excellence Holden</h1>
</div>
after change
<h1 class="header-wrapper header">
<span wicket:id="headerTitle" class="dealer-name">Excellence Holden</span>
</h1>
after changing the mark up the font size of "Excellence Holden" is increasing .It will happen or I am doing something wrong ?
css code:
.header-wrapper {
padding:15px 0;
}
.header-wrapper .dealer-name {
text-align: center;
font-size: 1.3em;
}
After the change, the font size set on the inner element, 1.3em, changes its meaning. The reason is when used in the value of the font-size element, the em unit denotes the font size of the parent element. Here the parent element is an h1 element, and the common and recommended browser default is that h1 element has a font size of 2em, i.e. twice its parent’s font size.
To override this effect, add the following:
h1.header-wrapper { font-size: 1em; }
You need to change the font size of the span in css, find the font defined for h1 then apply the same font to the tag
Because if you do not reset the font-size for h1, it automatically is higher than normal.
I would say that is a CSS related,
usually the new CSS files contains Font (Size, Family, weight) properties for <h1> tags.
please check both h1 and span CSS Attributes. you can use the browser inspectors (Chrome Inspect Element) to see the actual attributes.
It's because of your styling. When changing HTML like this you need to ensure that the styling is also changed accordingly.
For example:
div.header { font-weight:bold; }
div.header h1 { font-size:24px; }
The above CSS would be applied to the first HTML snippet, but not the second. You'd have to change this to:
h1.header { font-weight:bold; }
h1.header span { font-size:24px; }
And also ensure that there is no other h1 or span styling that may affect this.
My Drupal theme generates:
<div class="field1">
Field 1
</div>
<div class="field2">
<h3>Field 2</h3>
</div>
The results is that Field 2 has another style.
How can I remove the effects of h3 using CSS?
Better way - remove h3 tag. But sometimes, when you need to reset all styles of parent element - use global attributes, like "font" for "font-size", "font-style" and so on...
Warning of inheriting paddings, margins borders and background styles - this can be look ugly. For example, when your element has padding and border wiil duplicates for each element:)
.someclass * {
font: inherit;
color: inherit;
/* optional reset */
background: transparent;
border: none;
margin: 0;
padding: 0;
}
http://jsfiddle.net/iegik/q72EM/
you can access the h3 as follows:
.field2 h3{ //style here }
This will change the style of any h3 inside an element with a class of field2. If you want to be extra specific:
div.field2 > h3 { //style here }
This will only change the style of an h3 element that is a first level descendant of a div with a class of field2. I would recommend you look into css selectors.
To remove any existing effects, you would have to overwrite them. This can be done by just setting the values back to the default for the element.
You can only "remove" the effects by setting properties to whatever value they had before the styles for <h3> get applied. For example you can reset the font size with
.field > h3 {
font-size: medium;
}
You will need to do this for all properties that get modified by your CSS or the browser's internal stylesheet, but there's help to be had: modern development tools (e.g. Chrome's) will allow you to inspect an element and show you what properties it has and where they came from (so you can see that font-size has been modified). Looking at the appropriate CSS standards will show you what the default value is for each of these properties (e.g. font-size is here).
you can easily edit like this :-
CSS
.field2 h3 {
color:red;
font-size:12px;
font-family:arial;
}
DEMO
Used to this
as like this
.field2 h3{
color:black;
font-size:20px;
}
You cannot remove the effects of tags in CSS, except by writing CSS code that overrides stylistic settings that elements have due to browser defaults or other settings.
For an h3 element, the properties that are probably set in browser default style sheets are display, unicode-bidi, font-size, font-weight, margin, and page-break-after. (Cf. to Appendix D of the CSS 2.1 spec, Default style sheet for HTML 4.) You can set these to the desired values, and even a simple selector will suffice, e.g.
h3 { font-size: 120%; font-weight: normal; margin: 0; }
However, other style sheets that affect your document may have other settings on h3. And there is really no law against browser default style sheets using e.g. colors for headings or setting a specific font family.
To override other CSS settings in general, you need to use CSS rules with a sufficiently specific selector.
I have a navigation layer, and I cannot seem to get the links to center within.
This is the stylesheet I am using
.Layer1 {
position:absolute;
width: 10%;
height: 95%;
list-style-position: outside;
list-style-type: disc;
background-color: #D2FFFF;
}
.Layer1 a {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: 600;
color: #0066FF;
text-decoration: none;
text-align: center;
}
Using standard a href links makes no difference, nor does specifying the style to be a href. I am wondering what I am missing.
Have you tried adding:
text-align: center;
to .Layer1 {}?
I am assuming by your style properties that you are applying them to a <ul> element. They have pretty wacky default padding/margin properties (a good reason to always use a reset). If you set the text-align: center; as suggested by Stuart AND then set padding: 0; it will be centered as you might expect. Just tested it on IE and FF.
Links are inline elements, so setting text-align center on them won't achieve anything. Try making the link a block with an assigned width and then applying text-align center.
Is layer 1 a div or a ul? if it is a div, text-align: center should work, as long as you haven't set display: block on your a tags.
to center a block element, you need to use margin: auto. to center an inline element, it is text-align: center. if that doesn't work, it has to do with your markup, or some other way that styles are getting overridden. I would highly suggest using firebug to see what is going on, I used to have these "wtf is going on" moments all the time with html, but since getting good with firebug they rarely last more then a few minutes.
The other thing is text-indent is for indenting the first line of a paragraph. use padding-left to add whitespace inside a block element, or margin-left to add it outside.