How do I format a paragraph on one page without affecting paragraphs on another page
For example I made my homepage index.html and thats ok but for the next page I want to apply new effects to the text layout. So how to speak to that particular body of text?
It will have a larger font size for the first word and then smaller for the body and this will be repeated several times.
Add a class to the body tag <body class="home"> then you will be able to style all elements uniquely within that page by using the body class.
so as an example:
body.home p {
color: green;
}
Related
How to print a html page with header and footer by default (without explicitly clicking checkboxes during printing)?
For example, for displaying background picture, i found "-webkit-print-color-adjust: exact;":
.print-layout {
width: 210mm;
margin: 0 auto;
#media print {
-webkit-print-color-adjust: exact;
}
}
But how to do it for footer and header?
In my HTML page, I don't have any header and footer classes explicitly.Hence in my case,header is name of tab and date, footer is link of site and number of page in my case.
As far as i am aware you cannot get a header and footer added on by just adding css, the new features in HTML allow you to add <footer> and <header> tags to your HTML and you could add in an <a> tag with the URL link to the webpage, again if you need something dynamic like the data changing every time you would have to add in a script with the new Date() method.
The -webkit-print-color-adjust property is a non-standard CSS extension which is not really recommended to be used as it does not give reliable outcomes every time.
I am trying to print a repeating header on a dynamically generated HTML page in print.
The header shows a logo, and uses CSS to display page numbers.
My site lets users add blocks of text, or collages of images, and adds them independently with "add text" and "add image" buttons.
the resultant code is (somewhat) as follows: (slim/HAML syntax)
editable-section.ng-cloak(
ng-repeat='section in story.sections'
editable='false'
)
= render 'header'
.show-content-wrapper
= render 'sections/section'
The size of this content can vary wildly, and so I don't want to place a 'page-break-before:always;" rule before each ... because I may want them to stack more than one on a page to save paper and not look silly.
My problem is, inside each editable-section, I have an HTML header I only want to display if this is the first editable-section on the page.
So the question is, how would I only display the first header on each printed page? I imagine it would be something to the effect of:
#media only print {
#page {
header {
display:none;
&:first-of-type {
display:block;
}
}
}
}
However, "You can't change all CSS properties with #page. You can only change the margins, orphans, widows, and page breaks of the document."
https://developer.mozilla.org/en-US/docs/Web/CSS/#page
Thoughts?
Are you aware of this javascript?
document.getElementsByTagName('h1')[0]
With the brackets you can select a particular element with the 0th being the first.
Does this help?
I'm trying to change font size and color for "Price" on product page only. When I change .price on style.css it would change price format on all pages which is not what I need. I need to change price format on product page only.
Any help,
Thanks
You can simply make the change at the top of that particular page or even on that line. Simply place open and close style tags above the body tag and between them insert the rule delaration. This will override the linked style sheet.
You can keep your CSS consolidated and still do this. Add an ID to the body tag of the products page:
<body id="pgProducts">
Or Wrap the contents
<div id="pgProducts">
then you can use that in your "over-ride" selector
#pgProducts .Price {
/*Style to appear in pgProducts only*/
}
This could give you greater extensibility should this style end up required elsewhere.
Of course you can use what ever ID you like here. You could also use a class instead of an ID but an ID has better specificity.
I'm trying to get a different background color for each different main content block on the pages on this website: http://www.amachielsenadvies.nl .
So far I have found out that this line in css can control the background color:
.sidebarwidth .box.one { background-color: #f8dffc;}
but I want a different color on different pages. A page ID i have found is 18 (or post ID), but it is unclear what has to be added in css to accomplish
Can anyone help me with that?
Each page can be uniquely identified through the page-id-* class on the body.
So to change the background color on the home page, e.g.
.page-id-45 .sidebarwidth .box.one { background-color: #f8dffc;}
If the page has an ID of 18...perhaps ID="post-18" I would assume that this has been applied to the body
<body ID="post-18">
then the CSS would be
#post-18 .sidebarwidth .box.one { background-color: #f8dffc;}
Just use the body classes
example
body.page-id-18 .sidebarwidth .box.one { background-color: #f8dffc;}
I have a page from which I call fancybox which contains some html template (something like an email template). The problem is that all CSS from the main page affects the content in the fancybox and vice versa. What I would like is to isolate them somehow, so that their CSSs don't affect each other.
Example: I have background image set for h3 for the main page. Also, in fancybox I have h3 element which has no CSS assigned to it, but it pulls the style from the main page and gets the same background image (which shouldn't happen).
Is this somehow possible?
You could split your CSS into multiple files, only pulling in what you need to for each html. If you aren't able to do that you can give the body a specific #id for your template that gets loaded into the fancybox.
<body id="fancy_content">
and then adapt your styles for that template
body#fancy_content h3 {
color: green;
}
You may still end up with a bit of style clash if you leave it in one file but this will give you a method to go on to get it working.
You have 3 options really.
Run the fancybox content in iframe mode which means the content will have to be on it's own page without the main stylesheet. You can do any styling you like here or none at all.
Reset styles in the fancybox content, though this may be quite tedious depending on the number of elements affected.
Place the fancybox content outside the main #wrapper div of your page, and make all page styles inherit from #wrapper. i.e. instead of h3 {...} use #wrapper h3 {...}
try adding IDs to your html elements then use CSS IDs
h3#idname { color: #FF0000; }