I want to change the font of the <p> tag in HTML so I tried:
<p style="font-family:'Myriad Pro','sans-serif'; font-size:10.0pt; color:#BE2D0F; ">
But it doesn't work, any suggestion how to do that? I need to change the font to this font color, font, and font type.
That code is correct.
See: http://jsfiddle.net/bcEKb/
Note that this only sets the style for that single <p> tag. To set the style of EVERY <p> tag, you need to use a separate stylesheet or put it in <head> like so:
<html>
<head>
<style type = "text/css">
p
{
font-family: "Myriad Pro", "sans-serif";
font-size: 10pt;
color: #BE2D0F;
}
</style>
</head>
<body>
<p>This paragraph has the style applied.</p>
<p>So does this one.</p>
</body>
</html>
See: http://jsfiddle.net/G6TKe/
If you have a external CSS file, ensure that you put a class for p if you want it to be used on EVERY paragraph, if its just the one paragraph then just put the code inline (as you have done and it works)
Try specifying the font names without the single quotes.
Related
I have two font styles, and i want to apply each different font to <p> tag when lang attribute in html changed. For example when lang set to fr change <p> font-family to fr-font.
You can select your elements with CSS' attribute selectors. Your code might look like this:
html[lang=fr] p {
font-family: sans-serif;
}
Use the :lang pseudo-class which matches an element based on what language it is specified to be (and languages are inherited so you don't need to worry about targetting an element with a specific attribute, descendant combinators, or nesting).
p:lang(en) {
font-style: italic;
}
p:lang(fr) {
color: blue;
}
<div lang="en">
<p>Is this English?</p>
<p lang="fr">Est-ce français?</p>
</div>
<div lang="fr">
<p lang="en">Is this English?</p>
<p>Est-ce français?</p>
</div>
u can use the :lang() attribute in css like this
p:lang(fr) {
font-family: yourFont;
}
I have just started making a website and wish to include multiple fonts. I'm new to HTML and CSS and don't quite get how they interact. When looking up a tutorial for how to do so, it shows only HTML, despite explicitly saying CSS.
The W3Schools tutorial I am currently using shows this:
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
</body>
</html>
Doesn't the header define this as an HTML file? How does CSS play into this?
The style tag (a.k.a. what you are mentioning) specifically allows CSS to be embed into a HTML document. It can use any CSS, as long as it is encapsulated within the tag.
<style>
body {
background-color: #333;
}
</style>
This is different from the linking of a external CSS file which uses the link element:
<link rel="stylesheet" href="./styles.css">
However, you can also use the style attribute to add styles to an individual element on its tag's HTML.
Google
For the relationship between the two, HTML (Hyper Text Markup Language) is the basic blueprint / building blocks for the page and the structure it should be rendered in, while CSS (Cascading Style Sheets) describes what the page should look like. They are tightly knit and are meant to be used together. That is why the style tag specifically includes CSS in HTML. You can include both CSS and JavaScript in HTML or you can link them through external files.
Everything between the tags <style>and </style> is the css here.
There are other ways to integrate css.
You can attach a style directly to an html element:
<p style="text-align: center; color: green;">
this paragraph will be centered and green
</p>
Or you can write your styles into an extra textfile and link to this file in the header of your page
<head>
<link rel="stylesheet" href="stylesheet.css">
...
</head>
The following is my code.
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="utf-8">
<title>Test Webpage</title>
</head>
<body>
<h1>This is the Heading of the webpage.</h1>
.mainpara {background-color: #d3e5f2;}
<div class="mainpara">
<h3>And it will be the <strong>heading 2</strong>, main content body.</h3>
<p>This is another body, composed of plain text. It's defined internally as a paragraph. Some style will be applied to this and the above heading 2 text by CSS applications.</p>
</div>
<h6>Note that this webpage designing enthusiasm was generated out of necessity for edition of the theme at Japanaddicts, a website of <strong>cool people</strong> specialising in <em>Japanaddicting</em> others.
<p style="color: #f60; font-size: 15px;">This is a line now. Yes another one. However, an inline CSS has been applied to it. This particular paragraph has a different style. It's troublesome, this inline CSS but it's experimental.</p>
</body>
</html>
As you can see, there's a "mainpara" division. How do I specifically apply styling to it? I tried .mainpara {background-color: #d3e5f2;}, as you can see. I also tried putting it above the class.
You need to put CSS in a stylesheet, not as free text in the middle of your HTML.
Either use a style element or (preferably) put your CSS in an external file and reference it with a link element (both of which would go in the head, not the body).
There are examples of both in the specification
<style>
.mainpara {background-color: #d3e5f2;}
</style>
you can not write css code in html page without using style tag
<!DOCTYPE html>
<html lang="en-UK">
<head>
<meta charset="utf-8">
<title>Test Webpage</title>
<style type="text/css">
<!-- ALL STYLES SHOULD BE DEFINED HERE OR MOVED INTO A SEPERATE STYLE SHEET FILE THEN IMPORTED -->
.mainpara {
background-color: #d3e5f2;
}
<!-- Changes color and font size for all p tags on page -->
p {
color: #f60;
font-size: 15px;
}
<!-- Use an id for specific p tag -->
#customParaStyleId {
color: #f60;
font-size: 15px;
}
<!-- Use a class when you plan to apply it to many p tags on the same or additional pages -->
.custParaStyleClass {
color: #f60;
font-size: 15px;
}
</style>
</head>
<body>
<h1>This is the Heading of the webpage.</h1>
<!-- CLASSES ARE USED TO REPEAT STYLES ACROSS SITES -->
<div class="mainpara">
<h3>And it will be the <strong>heading 2</strong>, main content body.</h3>
<p>This is another body, composed of plain text. It's defined internally as a paragraph. Some style will be applied to this and the above heading 2 text by CSS applications.</p>
</div>
<h6>Note that this webpage designing enthusiasm was generated out of necessity for edition of the theme at Japanaddicts, a website of <strong>cool people</strong> specialising in <em>Japanaddicting</em> others.
<!-- USING ID AS EXAMPLE TO TARGET SPECIFIC SINGLE TAG -->
<p id="customParaStyleId">This is a line now. Yes another one. However, an inline CSS has been applied to it. This particular paragraph has a different style. It's troublesome, this inline CSS but it's experimental.</p>
</body>
</html>
CSS should be separated from the body of your HTML Code. It can be placed in either a separate style sheet that you import/include or it can appear between a <style type="text/css"><!-- YOUR STYLES HERE--></style> tags.
TIP:
Often I begin designing and manipulating styles in the head before separating them out into a style sheet. This allows me to focus on the design without having to worry about whether I attached the style sheet properly or not.
Once I finish the page I then move the working styles to a separate sheet to provide re-usable styles across the entire site.
<style>
.mainpara {background-color: #d3e5f2;}
</style>
If you have a stylesheet file or style.css you can just insert:
.mainpara {background-color: #d3e5f2;}
inside of the style.css file
I want to build by a plainText that is read from a file.
That file has that look:
Line1
Line3
Line2 is totally empty, even without a space.
The html file then looks like
<!DOCTYPE HTML PUBLIC><html>
<head>
<style type='text/css'>#editor { white-space: pre; }</style>
</head>
<body style="font-family: 'Segoe Print'; font-size:14pt">
<p id='editor', style=" margin-top:0px; margin-bottom:0px; margin-left:0px">Line1</p>
<p id='editor', style=" margin-top:0px; margin-bottom:0px; margin-left:0px"></p>
<p id='editor', style=" margin-top:0px; margin-bottom:0px; margin-left:0px">Line3</p>
</body></html>
The code lines with "p id=..." are important. The middle line of them is ignored, so that there are only two lines shown. Thats because there is no text before the closing /p, right? I could of course enter a " " (space), but thats a dirty solution...
I've found a half-way solution by inserting "margin-top:Xem" instead of "margin-top:0px" in the lower line. X is "1". The question now is:
How can i put any other value, e.g. 4, for X when the program figured out that there are 4 empty lines?
EDIT: Here is what I tried. Nothing changed...
<!DOCTYPE HTML PUBLIC><html>
<head>
<style type='text/css'>p.editor { white-space: pre; min-height:1em; }</style>
</head>
<body style="font-family: 'Segoe Print'; font-size:14pt">
<p class='editor' style=" margin-top:0em; margin-bottom:0px;">Line1</p>
<p class='editor' style=" margin-top:0em; margin-bottom:0px;"></p>
<p class='editor' style=" margin-top:0em; margin-bottom:0px;">Line3</p>
</body></html>
A few points:
IDs must be unique. Change those to use classes instead.
You only need spaces to separate element attributes, not commas.
You should use CSS rather than inline styling.
If you want a a p element to display without any text included, simply give it a minimum height.
<p class="editor">Line 1</p>
<p class="editor"></p>
<p class="editor">Line 3</p>
p.editor {
white-space: pre;
margin:0;
min-height:16px;
}
By default p elements default to the height of the content within. With no content, there is simply no height. Specifying a minimum height means that the empty p element will always have some height regardless of whether it has content or not.
JSFiddle example.
If you want the empty line to be copy-able, however, you'll need to modify the HTML itself to use a non-breaking space ( ) instead of leaving your elements empty:
<p class="editor">Line 1</p>
<p class="editor"> </p>
<p class="editor">Line 3</p>
With this you wouldn't need the extra minimum height as the non-breaking space adheres to the font size of the element.
JSFiddle example.
The solution is for me:
<!DOCTYPE HTML PUBLIC>
<html>
<head>
<style type='text/css'>h1 { white-space: pre; min-height:1em; font-family: arial;
font-size:8pt; color:green; margin-bottom:0px; margin-top:0px}
</style>
</head>
<body>
<h1>Line1</h1>
<h1></h1>
<h1>Line3</h1>
</body></html>
Inserting that in Phase, it works.
Setting that to a QTextBrowser, it does not. But that's another question
My HTML is this:
<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="stylesheet.css">
<head>
</head>
<body>
<p>hiya</p>
<h1>this is h1</h1>
<h2>this is h2</h2>
</body>
</html>
My stylsheet.css is this:
:not(p)
{
color:#ff0000;
}
Yet everything is red, including <p>. I've tried Firefox 20, Internet Explorer 10, and Chrome. It doesn't seem to get any more basic than this, but I can't figure out why this isn't working (preventing <p> from being red, that is). Any help on this would be much appreciated.
:not(p) matches body.
The default color value is inherit.
p has no style set.
p is therefore inheriting its colour from body, which is red.
Solutions: explicity define what you want to be red, OR explicitly set a different colour for p (ie. don't use :not), OR use :not(body):not(p)
This looks it is because you have not defined a specific style for p tag. So :not(p) applies even to body element and inherited.
You can create a separate id for the <p> and you can use not in css.
HTML
<p class="hiya" id="hiya">hiya</p>
<p class="hi" id="hi">hi</p>
<h1>this is h1</h1>
<h2>this is h2</h2>
CSS
p:not(#hiya)
{
color:#ff0000;
}
This will produce the output red color for the <p> except the <p> with the id "hiya".