So I have a regular CSS/HTML website for my upcoming book. It has a section called Bonus Features for extra articles that I’ve written. They pop up using jQuery UI that reads from external HTML pages.
Because I want the titles and dates… i.e.
Hello World
May 6, 2011
…to be very close together, instead of your usual gap, I’ve created a separate CSS stylesheet (dialog.css).
body {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
}
h1 {
font-weight: bold;
margin: 0;
}
h1 + p {
margin: 0;
}
h2 {
margin: 0;
}
h2 + p {
margin: 0;
}
p {
font-size: 14px;
line-height: 18px;
margin-bottom: 10px;
margin-top: 0px;
}
Unfortunately, dialog.css seems to be overriding default.css (for the website) because whenever I open then close the pop-up, the text on the Bonus Features page clutters together, reading from dialog.css, until a browser refresh.
Is there a way to prevent this from happening, like a special HTML or CSS code?
Thanks.
It sounds like dialog.css is being loaded in the main page's scope.
if your dialog is built like this:
<div id="dialog">
<!-- content -->
</div>
then you can make your css like this:
#dialog h1 {
font-weight: bold;
margin: 0;
}
and those properties will only apply to elements within an element of id #dialog
Sometimes, it can be as simple as minding the order that the css loads. The last one in order defined will generally take precedence. Yes, there are exceptions, but as a rule of thumb, put your most customized CSS file at the end of a series of CSS declarations, while loading things like jQuery UI's css first.
use firebug (or something similar) to find out how this property is set. to override this rule you need to use the same exact selectors or more powerful. thats the way CSS works and thats where the name came from.
also you may try adding !important after each rule.
Related
I have written plugin/widget to website example.com which is pasted as .css and .js code. Plugin is mounted on example.com #app element. Site example.com has it's own stylesheet with
html {
font-size: 12px;
}
which affect for entire website including my plugin. I've tried
#app {
font-size: 16px;
}
but some of widget's elements have still font-size: 12px property. Both, example.com and my widget using bootstrap 4.
EDIT:
Please take a look on fiddle:
https://jsfiddle.net/aq9Laaew/264383/
The problem is that some of the widget's elements are inheriting the font size from the first css rule.
One way to do it is to set the font size for all descendant elements of #app like that:
#app * {
font-size: 16px;
}
try using !important tag.
#app{
font-size:16px!important;
}
I looked at all the other similar questions and couldn't find an answer.
So first of all I'm noob at programming and I just started learning CSS.
I made a page with these codes:
<html>
<style>
body {
p.Welcome {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 23px;
font-weight: bold;
color: white;
text-align: center;
}
section {
border-radius: 1em;
padding: 1em;
position: absolute;
top: 49%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
</style>
<section>
<p class="Welcome">hi</p>
<img src="blablabla whatever image" />
</section>
<html/>
And I want to force desktop version even on mobile, like even when I open that page with mobile, the same page must show up with no change in resolution and other stuff.
I've added some comments below, just to help you correct some errors in your HTML. You have to understand that errors like this leave a lot up to interpretation of the browser, to which each may use a different engine or different method which can't guarantee uniform results.
Comments Added:
You should not use empty rule declarations (located under body rule in CSS).
Always look for closing tags. Try to use maybe Sublime, VS Code, or Atom as they have "problem" notifiers that may help you catch these mistakes when learning. (located under body rule in CSS).
If your goal is responsiveness, try and stay away from absolute positioning, or you'll have to media query your way to the same results. (located under section rull in CSS).
Every tag opened must be closed. Especially for compatibility. Every browser will handle these errors differently, so leaving it up to the browser to decide the result, you won't see the same results in every browser (located above body closing tag in HTML).
When you close HTML tags, the format is </html>. Slashes after are for self-closing tags. (located at the end of the document).
To answer your question more directly, it's difficult. You should understand all screens have varying sizes and dimensions and you must design around this, no exceptions. There is no way to force otherwise. If you set an element to have a width of 800px but the screen is 324px wide, you will not fit that element on the screen.
So my answer is that you're looking for a way to get out of designing for responsiveness, and you can't. Yes, it can be a lot of work, but you'll develop habits as you go. Might I recommend freeCodeCamp as well, since they've added some excellent challenges to help teach newer practices to make your projects more responsive, as well as fundamentals like box model.
<!-- Always specify your DOCTYPE, note that DOCTYPE is case sensitive. -->
<!DOCTYPE html>
<html>
<!-- You should have a head tag -->
<head></head>
<style type="text/css">
/* You should not use empty rule declarations */ body {}
/* Always look for closing tags. Try to use maybe Sublime, VS Code, or Atom as they have "problem" notifiers that may help you catch these mistakes when learning. */
p.Welcome {
font-family: "Comic Sans MS", cursive, sans-serif;
font-size: 23px;
font-weight: bold;
color: white;
text-align: center;
}
section {
border-radius: 1em;
padding: 1em;
position: absolute;
/* If your goal is responsiveness, try and stay away from absolute positioning, or you'll have to media query your way to the same results. */
top: 49%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%)
}
</style>
<!-- Sections are used for giving semantic clarity to your document, so summarize what the section is -->
<section id="welcome">
<p class="Welcome">hi</p>
<img src="http://whatever.com/image.jpg" />
</section>
<!-- Every tag opened must be closed. Especially for compatibility. Every browser will handle these errors differently, so leaving it up to the browser to decide the result, you won't see the same results in every browser -->
</body>
<!-- When you close HTML tags, the format is </html>. Slashes after are for self-closing tags. -->
</html>
Is there any way to alias / make custom elements behave like others
E.g. <large> should work like <h1>
There are a few ways to do this, but they reach have their own problems.
Using Classes - This would create the same effect, but isn't what you asked for.
Assigning default h1 values to large like so:
large{font-size:32px;}
This isn't a true alias though, since you have to apply your rules for every alias. This is also problematic, because older versions of IE won't render rules for custom HTML tags, like "large."
Using JavaScript.
Apply no CSS rules to the custom tags, and use JS to generate them. Of course, JavaScript doesn't have universal support, but older browsers should still handle it just fine.
I recomend do class .h1.
large will only looks like h1.
.h1 {
display: block;
font-size: 2em;
margin-top: 0.67em;
margin-bottom: 0.67em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
}
<large class="h1"> AAA </large>
<h1>AAA</h1>
In CSS:
.stop-p-lf p { display: inline; }
Then in HTML:
<div class="stop-p-lf"><p>This will be inline</p></div><p>And this don't</p>
I have a page where I want to represent a URL to the student (but not have browser defaults, like changing to a pointer on hover, etc), and I am losing my styles by wrapping the text in div. I have
index.html:
<p>
we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
<div style="color:blue;">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>
styles.css:
body {
background: #f0f0f0;
width: 80%;
margin: 0 auto;
}
h1 {
text-align: center;
margin-top: 35px;
margin-bottom: 60px;
}
p {
font-size: 20px;
font-family: sans-serif;
}
.cl {
margin: 38px;
padding: 25px;
background: #f8f8f8;
font-family:DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New;
font-size: 12px;
}
.fake-url {
color: blue;
}
Most recently I had tried using .fake-url in the div,
<p>
we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
<div class="fake-url;">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>
and after that I did
p, p div {
font-size: 20px;
font-family: sans-serif;
}
I'd like to suggest you to use a span instead of a div, div are block elements in the other hand spans are inline elements and fit better in the context you want to use it.
And as someone mentioned above, you have an extra ; inside the div's class
<div> elements don't belong inside <p> elements. Browsers usually rework this so that the <p> element is closed just before the <div> element and then opened again just after. This effectively splits your paragraph into two pieces, one before the <div> and one after.
Instead, use a <span> or, more appropriately, a <a> element.
MDN has an entry that mentions this. Specifically, in the section marked "Tag omission", it mentions that if an opening <p> element is followed by an opening <div> element then the paragraph is implicitly closed.
<p>
we can see Django made us our first url, the admin. Since this file is our url entry point (as declared in `settings.py`), if our hostname is "www.eat-it.com",
<div class="fake-url">www.eat-it.com/admin</div> is now available. We'll talk more about Django admin later.
</p>
Just removing the ; from the class name in the div will fix it.
I have recently learnt how to create a html internal link; allowing my members to jump down the page to specific information.
However the coding I have used is set at a standard size and font. I would like to edit the font size and font style of the topic title.
a name="category-one">Under 6's</a>
Above is my current coding; how can I increase the text of the title "Under 6's"?
you can use inline style in a element this way
<a name="category-one" style="font-size:18px; color: green;" >Under 6's </a>
You should always use css for styling.
You can give each element a separate class and style those accordingly.
Under 6's
In css:
.title a{color: blue;}
There's much more efficient ways to refer to an object.
class is versatile in that you can apply it multiple times, this is the prefered way.
id is not as versatile because each id must be unique so your'e limited to just styling a single element.
a[name='category-one'] {
font-size: 16px;
font-family: "Palatino Linotype";
}
a.category-two {
font-size: 1em;
font-family: "Source Code Pro";
}
a#category-three {
font: 1rem;
font-family: "Verdana";
}
a:hover {
font-size: 20px;
font-family: "Arial";
}
<a name="category-one">Under 6's (refer by name attribute)</a>
<a class="category-two">Under 7's (refer by class attribute)</a>
<a id="category-three">Under 8's (refer by id attribute)</a>
There's three ways to apply styles:
The prefered way is using a separate file (e.g. style.css) and then pointing to it from your main page:
<link href="http://www.example.com/css/style.css" rel="stylesheet"/>
It may be more work to maintain a separate file, but it can be used by multiple pages on your site.
Another way to provide CSS rules is to use the <style> element and place that before the closing </head> tag. Although faster when loading, the code will become difficult to manage and it can only be used by one page (the page the <style> is on.)
....
<style>
.foo { height: 60px; }
....
</style>
</head>
Inline styles are discouraged and should be used sparingly if at all. They are limited to only the element they are on and harder to locate and debug. One advantage is that the rules will take priority over all other non-inline style rules (or should I say, most of the time, because there's always a bug or edge cases).
<a name="category-four" style="color: red; background: #000;">Under 9's</a>