If I assign the ID Test to a section in HTML and modify that in CSS, the text is modified. But, when I change it to an ID like About the CSS no longer works on the text, and it's just normal <p> formatting. How do I fix this?
<section id="About">
<p>We define a Christian as someone who affirms the Nicene Creed</p>
</section>
#About
{
text-align: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
Related
I'm confusing. I read diferents opinions about main. The first one says that main (as it's the principal section) could contain header and footer as direct children.
<main>
<header></header>
<section>for the content</section>
</main>
Others says that main can't contain header as direct children, instead use article or section as parent. So the result would be:
<main>
<article>
<header></header>
<section>for the content</section>
</article>
</main>
Currently I have this layout, but I'm confused if It's necessary to add an article or a section to wrapp the header and the content:
Both variants available.
Do what you prefer more, I like first variant.
I am not sure in format of your work. If it is theoretical use: MDN Library
If it is practical, make sure that it is working and readable.
Do not worry as much as you are doing about tags. Every tag ususally worth nothing, only browsers characterise tags. If you want - you can even create your own tag.
For example:
<style>
main-header{display: block;}
heading-large{display:inline; font: 700 1.5em system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: #111; margin: 0; padding: 0;}
</style>
<main-header>
<heading-large>
It is working
</heading-large>
</main-header>
But you will need to characterize it in css and there are will be a lot more problems that you will need to solve with going through, but they are miserable for not corporate projects.
main-header{display: block;}
heading-large{display:inline; font: 700 1.5em system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; color: #111; margin: 0; padding: 0;}
<main-header>
<heading-large>
It is working
</heading-large>
</main-header>
Ok after more research it's seems to be ok to use main with header as a direct children.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/main
If I understand this, main could be parent of any flow content.
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#flow_content
I'm going to start with saying I'm a total noob in coding school and to please be kind. I'm attempting to help my husband with his blog: https://directionandpace.com/ There is an issue with the title Direction and Pace.
First, he asked if I can remove title link that redundantly links back to the page. There isn't a way to easily edit WordPress HTML (just the stylesheet) so I thought I'd figure that out later and just change the link color to black instead of blue. ;)
Second, we both realized that when you click on the second page "Who We Are" the title changes to a non bold serif and ITS DRIVING ME CRAZY.
Code Below:
What should be just the body and the only Serif in the CSS:
body, button, input, select, textarea {
color: #776f6f;
font-family: Merriweather, Georgia, serif;
font-size: 15px;
line-height: 2;
}
The CSS for the Title:
.entry-title {
font-family: Montserrat, "Helvetica Neue", sans-serif;
font-size: 28px;
font-weight: 700;
margin-bottom: 5px;
}
Is it somehow assuming the entire second page (including the title) is the body? Halp.
The issue is that on your homepage that text is wrapped in a <h1> element but in the who-we-are page it's wrapped in a <p> element. Your CSS has the rule:
h1, h2, h3, h4, h5, h6 {
margin: 0 0 15px 0;
font-family: Montserrat, "Helvetica Neue", sans-serif;
font-weight: 700;
text-rendering: optimizeLegibility;
color: #1a1a1a;
}
that is applied on the homepage but not on the who-we-are page. Easiest solution would be to update the code or template for the who-we-are page to change the <p> to a <h1> to match the home page.
Home page heading HTML:
<div id="site-identity">
<h1 class="site-title">Direction & Pace</h1>
<p class="site-description">Explore. Experience. Always.</p>
</div>
Who we are heading HTML:
<div id="site-identity">
<p class="site-title">Direction & Pace</p>
<p class="site-description">Explore. Experience. Always.</p>
</div>
The title on the main page is wrapped in a heading tag, so it's getting the correct heading styling:
<h1 class="site-title">Direction & Pace</h1>
However, the title on the about page is wrapped in a <p> tag, so it's getting the body styling:
<p class="site-title">Direction & Pace</p>
I'm trying to change the font-family of the pre tag, but it's not working:
<pre font-family: "Avenir", Verdana, sans-serif; style="font-size: 10px">.......</pre>
How to fix it withing the tags without using css?
You need to put all of your inline CSS inside the style attribute, not just your font-size:
<pre style="font-family: 'Avenir', Verdana, sans-serif; font-size: 10px">.......</pre>
Im trying to change the font-family of the pre tag, but it's not
working
If you're using inline CSS then you must encapsulate all the CSS rules inside the style attribute.
change this:
<pre font-family: "Avenir", Verdana, sans-serif; style="font-size: 10px">.......</pre>
to this:
<pre style="font-size: 10px; font-family: "Avenir", Verdana, sans-serif;">Hello World</pre>
If you need to use inline CSS, you should add
style
attribute to make the code meaningful.
If you need to add the required styles to all the pre tags add the below mentioned style to your style sheet:
pre
{
font-family: "Avenir", Verdana, sans-serif;
font-size: 10px;
}
I have a little experience with css, and learning it day by day, but I need to figure this out.
I have a little problem with defining the styles for the page.
My page contains the following sections:
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:Light' rel='stylesheet' type='text/css'>
</head>
.
.
.
.
<article>
<header>
<h1 class="txtName">Your pathway to success starts here</h1>
</header>
<p class="txtDesc">
SomeText.................SomeText
</p>
</article>
and I have the .css file containing the following section:
article h1
{
color: #0140be;
font-family: 'Open Sans';
font-style: Light;
font-size: 20px;
font-weight: normal;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', Arial, sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
The text inside the header is displayed with correct styles, however, text inside the paragraph is not displayed correctly. Looks like it is not recognizing given styles.
It displays the right font-family, but does not recognize font-weight.
What am I doing wrong here? Need some help.
Thank you
Link : https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
As you can see there is styles for fonts like "Light 300 Italic" or "Extra-Bold 800". You must select that styles for bolder or lighter fonts. Then you can use font-weight in css otherwise it doesnt works.
Dont Forget: When you select "light 300" you can use font-weight:300. So font-weight:200 is not make any differences. If you select too much font styles it will take more time to load fonts from google when opening your page. You can see performance indicator on right.
Your link tag should look like
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300' rel='stylesheet' type='text/css'>
You need to include each of the font weights that you want in the URL.
Your styles should be:
article h1
{
color: #0140be;
font-family: 'Open Sans', sans-serif;
font-size: 20px;
font-weight: 300;
}
article p.txtDesc
{
line-height:1.6;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
margin-left: 18px;
font-weight: 400;
}
You select which font style you want with the font-weight attribute.
JSFiddle
My custom css has the following code
h1 a {
font-family:'Droid Sans Mono''Share Tech Mono''Ropa Sans', sans-serif;
'Poiret One''Cutive Mono''Helvetica Neue''Arial'; !important;
}
this is at the top of my custom css:
#import url (http://fonts.googleapis.com/css?family=Roboto|Droid+Sans+Mono|Share+Tech+Mono|Ropa+Sans|Cutive+Mono|Poiret+One|Lato:100,600,900) ;
and my in page code is:
<h1 style="font-size: 25px; font-weight: bold; color: #ffffff; hover font-family:'Droid Sans Mono''Share Tech Mono''Ropa Sans', sans-serif;"><a href="http://www.xxx.com/?page_id=4348"></h1>
But the none of the fonts seem to be loading. What am I doing wrong?
You're loading the CSS in your custom CSS, which is good, but you're not calling it properly.
You have this:
h1 a {
font-family:'Droid Sans Mono''Share Tech Mono''Ropa Sans', sans-serif;
'Poiret One''Cutive Mono''Helvetica Neue''Arial'; !important;
}
Not only is that code wrong, it's scary.
This is what it should be like:
h1 a {
font-family: 'Droid Sans Mono', 'Share Tech Mono', 'Ropa Sans', sans-serif, 'Poiret One', 'Cutive Mono', 'Helvetica Neue', 'Arial' !important;
}
Each new font call should be seperated with a , and the !important goes before the ; and the style will always only have one ; right at the very end of the css style rule.
Also just for the record, there is no good reason you need to include that amount of fonts, and if Droid Sans Mono and Share Tech Mono and even Ropa Sans don't load, anything after sans-serif won't load as sans-serif will be the font of choice as it's a default choice and should only really be used as a last resort/fallback (if you have other fonts you want to take precedence, that is).
If they do load, then you're only going to ever be using Droid Sans Mono and then it's a waste calling all the other fonts.
Make sure you're actually using all of those fonts, as it could essentially slow down the website load time drastically.
Side note:
Please try and refrain from using inline css (css that is put in using the style in a html attribute). However, if you must do it, you need to fix your h1 tag also:
<h1 style="font-size: 25px; font-weight: bold; color: #ffffff; font-family:'Droid Sans Mono', 'Share Tech Mono', 'Ropa Sans', sans-serif;"><a href="http://www.xxx.com/?page_id=4348"></h1>
Don't just include the word hover in there because it will break your CSS and anything after has a high chance of not running. Again, separate each instance of font with a , and have only a ; after each new css style rule.
You don't need both inline css and a css file styling two identical attributes, just use the .css file.
Please make sure that you have url( and not url (. Although it is a simple (space), it is a function and will not work if the ( is not directly after url.
you're not loading the font anywhere. i suggest you install and use this plugin: http://wordpress.org/plugins/wp-google-fonts/
you'll choose the font you want on your website and you will be able to use it.
hope this helps