Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
This seems like kind of a basic question. What are the reasons one would choose to use a css document instead of altering the style with the style tags in the html document? Is it not possible, for instance, to alter IDs and classes from within the html style tags? Thanks- this is my first stackoverflow question!
There's nothing technically wrong with using the style tag, but most pages have a seperate style sheet file.
Here are some reasons to use a seperate style sheet file:
The page may load faster due to asynchronous loading by the browser.
Seperates your HTML markup from your CSS styles.
Caching.
Easier to maintain because all the CSS is in one place.
You may also want to look into LESS or SASS.
There are several benefits
Reusability. An external site sheet can be used by multiple documents, so you don't have to write a new style sheet for each.
Coherence. With external style sheets you can be sure that the documents have at least the same basic styles and are visually consistent. Embedded style sheets tend to drift away from the standard.
Performance. An external style sheet can be cached by the browser, which means it doesn't have to be transferred every time the client requests a document. An embedded style sheet has to be transferred every time the browser requests a document.
Maintainability. If you have a set of documents that have the same visual appearance, and a change has to be made (changes to the corporate identity for example), if the style sheet is external you have to change it in only one place. Using embedded styles you would have to make the same change in each document.
Check out this LINK
In my own words, using CSS makes thing a lot simpler as adding styles for each tag in HTML is basically just not practical. Hence defining how a particular element will look on the page just once and then reusing the same style multiple times saves a lot of time
CSS files is cacheable by the browser, the style tag in an HTML document just adds an extra file size overhead that needs to be downloaded everytime.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 months ago.
Improve this question
So I am now learning html, and I was just wondering why tags such as cite even exist. When I open a website as a user, I still see the text as italic when the code is written as cite.
I found that the tags are useful when it comes to screen readers, so basically for users that have problems with their vision.
Are there any more reasons for these tags? Thank you so much in advance!
Tags are small snippets of HTML coding that tell engines how to properly “read” your content. In fact, you can vastly improve search engine visibility by adding SEO tags in HTML.
When a search engine’s crawler comes across your content, it takes a look at the HTML tags of the site. This information helps engines like Google determine what your content is about and how to categorize the material.
Some of them also improve how visitors view your content in those search engines. And this is in addition to how social media uses content tags to show your articles.
In the end, it’s HTML tags for SEO that will affect how your website performs on the Internet. Without these tags, you’re far less likely to really connect with an audience.
About cite tag: The tag defines the title of a creative work (e.g. a book, a poem, a song, a movie, a painting, a sculpture, etc.). Note: A person's name is not the title of a work. The text in the element usually renders in italic.
Regarding the cite tag, according to MDN:
The HTML element is used to describe a reference to a cited
creative work, and must include the title of that work. The reference
may be in an abbreviated form according to context-appropriate
conventions related to citation metadata.
This enables you to manage all the css applied to quotes easily, were that to be your use case (if you happened to have a lot of quotes on a site). The italics you have observed are part of that css, or rather the default css applied by the browser.
In the broader spectrum
Oftentimes you will run into tags that as of today are not in use anymore. There's different industry standards for different time periods.
All of the tags exist, because there was a reason for web browsers to have a specific way of reading a piece of content.
For example centering a div used to be an almost legendary task that was achievable using multiple methods, all of which had different advantages and disadvantages. However, nowdays it's customary to use the flexbox.
Bottom line is its a way for web browsers and search engines to read and interpret the content you're providing
Tags such as and are used for text decoration nothing else you can also change text fonts and styles by using CSS.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
So i am currently creating a website for a eSports team in wordpress, and i have just ran into a problem, that i do not remember how to sort out. I remember from making chrome extensions there is a method for doing this, but i do not remember, and that is why i am here now :)
First code
As you can see on the picture, that is what is in the CSS, and i need to keep that for other pages, but i want my one page to overwrite that. I have a box where i am allowed to add custom CSS, but when i add the code, it gets overwritten by the old code. I know why this happends, but not how to fix it without changing the original css (which i would prefer to avoid)
Overwritten code
So my question is, how to i make my new css overwrite my old css?
(i have tried !important and it does nothing)
When inspecting what code currently applies on a particular element, Chrome also tells you what specific selector applies that rule and where it's coming from. All you need to do is write a stronger selector and it will apply. In your example, body:not(.template-slider) #Header { } will be overridden by...
body.page:not(.template-slider) #Header {/* CSS here */ }
Ideally, though, it would be best to not have to increase the specificity of current selectors, but apply your rules last, using the same selectors. The easiest way to do that is to add your CSS at the end of your active theme's style.css, unless your theme/WP installation is messed up.
By the way, if you're using a theme you haven't developed yourself, your active theme should be a child theme. This is important, but it's something you should look into separately as per why it's important, what are the benefits and how to do it.
If writing to style.css of your active theme (by far, the recommended WordPress way) is not an option, you can always put all your CSS into a separate stylesheet of your choice (i.e. my-custom-style.css), placed in your active theme's folder, and register it using the following code in functions.php of your active theme:
function add_styles_to_your_active_theme() {
wp_enqueue_style (
'my-custom-style',
get_stylesheet_directory_uri() . '/my-custom-style.css',
array(),
null
);
}
add_action( 'wp_enqueue_scripts', 'add_styles_to_your_active_theme' );
After adding it and making sure it loads, you can modify its position in the <head> tag by specifying other registered stylesheets as dependencies of yours, using the third parameter in the above call to wp_enqueue_style().
You need to place handles of other registered scripts into that array. You can find the handles by looking into the <head> tag of any page, finding the last loaded <link rel="stylesheet" /> tag and removing the ending -css from its id. For example, if your last loaded styleheet's link id is some-theme-style-css, the third parameter of your call to wp_enqueue_style() should be array('some-theme-style').
After that, check the <head> tag again and make sure yours is last. If not, add each <link />'s id to the $deps array, stripping -css, until yours is last. When your stylesheet loads last, you can copy-paste any applying selectors to it, change the rules to whatever you want and they will apply.
But do note that, under normal usage conditions, the method described above is unnecessary. Normally you should use a child theme, put your CSS in its style.css and not have to worry about tricky details like this, reserved for theme and plugin creators.
Yo can overwrite CSS with adding child selectors for your specified DIV element.
Fiddle Example here http://jsfiddle.net/JfGVE/2031/
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I'm creating a website, and the styles change frequently between pages. So what I have is images of pages that have the same header, same footer, and out-of-whack body styles. I started with the header and footer, and used a single css file that is linked in the header.
The problem is, as I do the pages, I have been adding css I need to the css page. I now have 1600 lines of css and I'm not done. I commented everything really well, but I have to use ctrl-f to find the element I need to change.
Now, I could separate them into different files and have a header with 10ish linked style sheets, but I didn't know if this was the "right" thing to do. Am I better off just having one large file? Is there a performance issue with multiple linked css files? Or is inline styling the better answer?
I've always opted for having a single file, but depending on the organization of your CSS, it might be easier to break it into multiple. At the end of the day there is no one right answer. It depends on the circumstances and developer's preference. I would say that whatever you do, make it consistent.
separating the stylesheets is entirely acceptable, and up to you. Anyhow, you can do one stylesheet for the base styles, and one stylesheeet for any custom sections if you want.
You wouldn't want to do one custom stylesheet for header, and one for footer, etc.., i dont think that's a good idea, separate them by content, not by html tags.
if you get a chance, post a site link so we can take a look at the styles.
how you would do this is just include each stylesheet from your main index file, or wherever your loading the files, like this..
<head>
<link rel="stylesheet" type="text/css" href="base.css">
<link rel="stylesheet" type="text/css" href="theme.css">
<link rel="stylesheet" type="text/css" href="gallery.css">
</head>
EDIT:
i should mention, please note, the order you load them in is important if you accidentally, or purposely override any styles.
say for instance you have a body style on the first sheet loaded, theme.css in this case, then if you have a different body style in gallery.css it will override it. so be careful not to do any overrides unless you intend.
Overrides are a great way to have more control also, take for example if you include bootstrap.css first, you include your theme.css after, overriding any bootstrap styles that you want to customize for example. you would leave the styles alone on bootstrap.css never touching them, then put a duplicate style name on your theme.css and change one or more of its properties to override it. This is why its important to load them in order. So pay attention to the order you load them in if you split your stuff up.
Its best to put your primary and most important style sheet first, then your override anything you need on a custom basis after.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question does not appear to be about programming within the scope defined in the help center.
Closed 9 years ago.
Improve this question
Is it a bad practice have non-HTML tags of the page? I need to use them for internal content processing needs and wonder if there are any troubles with it (SEO for example)?
Yes it is bad. Not particularly for SEO but for browsers. You are relying on the browser to ignore your tags and render the page correctly. Since every rendering engine loads a page slightly differently, you have no way of knowing how it will handle your bad html.
Can you wrap them in html comments? Like so:
<!--<not a real tag>-->
The browser and spiders will ignore these but since they are still part of the html, your parser might still be able to read them.
An alternative is to use HTML5's custom data attributes. Your parser should also be able to read these.
W3C also have an experimental custom elements spec. Browser support looks poor at present but this may be of interest in future.
Yes, it's bad for browsers (and a little for SEO). Each browser could interpret a random tag on its own way.
If you need to do internal content processing, you can store your data in attributes of your existing HTML tags, with data-* attributes (HTML5 spec.), like this:
<div class="simple-div" data-file="./abc.txt" data-pattern="(.+)"></div>
My link!
The HTML document shouldn't store data anyway.
I dont know what you want to do specifically, but you could use an invisible div or hidden field with custom data attributes? or even a comment?
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I'm designing an HTML template for an email newsletter. I've learned that many email clients ignore linked stylesheets, and many others (including Gmail) ignore CSS block declarations altogether. Are inline style attributes my only choice? What are the best practices for styling HTML emails?
I've fought the HTML email battle before. Here are some of my tips about styling for maximum compatibility between email clients.
Inline styles are you best friend. Absolutely don't link style sheets and do not use a <style> tag (GMail, for example, strips that tag and all it's contents).
Against your better judgement, use and abuse tables. <div>s just won't cut it (especially in Outlook).
Don't use background images, they're spotty and will annoy you.
Remember that some email clients will automatically transform typed out hyperlinks into links (if you don't anchor <a> them yourself). This can sometimes achieve negative effects (say if you're putting a style on each of the hyperlinks to appear a different color).
Be careful hyperlinking an actual link with something different. For example, don't type out http://www.google.com and then link it to https://gmail.com/. Some clients will flag the message as Spam or Junk.
Save your images in as few colors as possible to save on size.
If possible, embed your images in your email. The email won't have to reach out to an external web server to download them and they won't appear as attachments to the email.
And lastly, test, test, test! Each email client does things way differently than a browser would do.
Campaign Monitor have an excellent support matrix detailing what's supported and what isn't among various mail clients.
You can use a service like Litmus to view how an email appears across several clients and whether they get caught by filters, etc.
Mail chimp have got quite a nice article on what not to do. ( I know it sounds the wrong way round for what you want)
http://kb.mailchimp.com/article/common-html-email-coding-mistakes
In general all the things that you have learnt that are bad practise for web design seem to be the only option for html email.
The basics are:
Have absolute paths for images (eg.
https://stackoverflow.com/random-image.png)
Use tables for layout (never thought
I'd recommend that!)
Use inline styles (and old school css
too, at the very most 2.1, box-shadow
won't work for instance ;) )
Just test in as many email clients as you can get your hands on, or use Litmus as someone else suggested above! (credit to Jim)
EDIT :
Mail chimp have done a great job by making this tool available to the community.
It applies your CSS classes to your html elements inline for you!
In addition to the answers posted here, make sure you read this article:
http://24ways.org/2009/rock-solid-html-emails
The resource I always end up going back to about HTML emails is CampaignMonitor's CSS guide.
As their business is geared solely around email delivery, they know their stuff as well as anyone is going to
'Fraid so. I'd make an HTML page with a stylesheet, then use jQuery to apply the stylesheet to the style attr of each element. Something like this:
var styleAttributes = ['color','font-size']; // all the attributes you've applied in your stylesheet
for (i in styleAttributes) {
$('body *').css(styleAttributes[i],function () {
$(this).css(styleAttributes[i]);
});
}
Then copy the DOM and use that in the email.
I find that image mapping works pretty well. If you have any headers or footers that are images make sure that you apply a bgcolor="fill in the blank" because outlook in most cases wont load the image and you will be left with a transparent header. If you at least designate a color that works with the over all feel of the email it will be less of a shock for the user. Never try and use any styling sheets. Or CSS at all! Just avoid it.
Depending if you're copying content from a word or shared google Doc be sure to (command+F) Find all the (') and (") and replace them within your editing software (especially dreemweaver) because they will show up as code and it's just not good.
ALT is your best friend. use the ALT tag to add in text to all your images. Because odds are they are not going to load right. And that ALT text is what gets people to click the (see images) button. Also define your images Width, Height and make the boarder 0 so you dont get weird lines around your image.
Consider editing all images within Photoshop with a 15px boarder on each side (make background transparent and save as a PNG 24) of image. Sometimes the email clients do not read any padding styles that you apply to the images so it avoids any weird formatting!
Also i found the line under links particularly annoying so if you apply < style="text-decoration:none; color:#whatever color you want here!" > it will remove the line and give you the desired look.
There is alot that can really mess with the over all look and feel.