I have been told, as well as read that using the style attribute in html is considered bad/sloppy/poor form. Further, that all rendering specific bits should be divorced into css and other parts as appropriate. I am trying to understand why exactly this is.
I can see why you might want to keep the HTML a pure semantic DOM, that speaks about the structure of the document, but for practical pages, the importance is that the page looks right and functions appropriately.
Is there some more compelling reasons for this separation?
Separation of concerns This makes it easy to replace the styles without changing the markup, or vice versa. Plus you can have one person working on CSS and another working on content
Don't Repeat Yourself You can apply a style to many elements without having to repeat it over and over. Smaller pages means quicker load times using less bandwidth. Plus it's easier to modify later, because you can change it in one place in one file, instead of many places in many files.
Cachability If the same style sheet is used on every page of your site, browsers can download it once and then cache it, instead of downloading the styles with the content of every single page. And they won't have to re-download it whenever the content of those pages changes.
Multiple Versions It is easy to create multiple versions of the visual layout and appearance of your site since you just need to swap out the stylesheet file to change the appearance of every page. For instance, you can create a white-label version of a web application which your partners can re-skin to match their brand. See CSS Zen Garden for some great examples of how flexible this approach can be.
Start with this code:
<ul>
<li style="color: blue;">One</li>
<li style="color: blue;">Two</li>
<li style="color: blue;">Three</li>
<li style="color: blue;">Four</li>
</ul>
Let's say that today, you decide to change the link color to red. Since these styles are inline, you tediously have to walk through each element and change the style attribute. Imagine doing this for 10, maybe 20 HTML pages and you'll see why this becomes a problem.
Using a stylesheet separates the content:
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
From the style:
ul li {
color: blue;
}
Had you used a stylesheet from the beginning, changing the color is as simple as changing blue to red in your stylesheet.
Aside from making the document easier to style, there's also selector specificity. Imagine that you inherited the first code chunk from a previous developer and would like to change the color again, but you (being a nice developer) prefer stylesheets:
ul li {
color: red;
}
You'll soon become frustrated and resort to using !important, as your selectors can't override the inline styles.
CSS should be another file included in HTML because, if you want to change one style of an element that is included in more than one pages you will just change one style from CSS and the changes will be applied to all of the files. If you have the style in HTML, you would need to go on the pages one by one and change the styling. Its a good template building practice.
By separating markup and css. You can use css to change the look of everything, without affecting the markup.
Benefits include:
Creating different designs for the same html.
Dividing work within a team. One front-end developer can focus entirely on the css.
Back-end developers, do not have to hassle with the css.
Easier to change the look in the future.
Easier to migrate the html-markup to a new platform or content management system in the future.
Related
Hello StackOverflow Community,
I just started using Squarespace to create a site for a client & friend offering some safety and equipment training courses, I love the templates, it's quite easy to use with the drag and drop of it all. However, I'm running into a problem with the course catalog page. I'm adding custom HTML to allow for a nicely laid out list with descriptions but the class and id selectors just don't target the elements. Targeting the <li> and <ul> elements targets them all, site wide. Anyone with any experience using Squarespace, could you possibly share your knowledge on how I might target specific elements? Thanks so much in advance.
I did post in the Squarespace forum but haven't gotten any replies, so here I am.
For Squarespace-related questions (both on the Answers forum and here on SO), it's usually easiest to provide a solution if you provide the URL of the page in question and the view-only password if applicable (necessary for sites that are in trial mode and not yet paid for).
In any case, assuming that you are using a code block in order to insert your HTML, you can add a classes to your elements in your HTML and then target them by adding CSS via the CSS Editor, or within a style tag with the code block itself.
For example, if putting it all inside the code block itself, something like:
<ul class="myclass1 myclass2">
<li>List item one.</li>
<li>List item two.</li>
</ul>
<style>
.myclass1 li {
color: red;
}
</style>
Now, if you were to add the CSS via the CSS Editor, you would exclude the <style>...</style> bit from the code block above, and instead insert the following via the CSS Editor.
.myclass1 {
color: red;
}
Note that, when using the CSS Editor, the <style> tag is excluded.
If neither of the above work, it is likely because you are dealing with Squarespace's own rules having a greater level of specificity. That simply means that Squarespace's default CSS rules are overriding your own. To compensate for this, you can either rewrite the rule above as color: red !important; or use your browser's developer tools web inspector to select the element in question, inspect the CSS rules that are applying to it (which will reveal Squarespace's default rules), then rewrite your rules with the same or greater specificity.
Finally, if my original assumption that you are using a code block is incorrect, then you are in fact using a text block. It is still possible to target specific elements within specific blocks in Squarespace. To do so, you must use the block ID.
To obtain the block ID, you must be comfortable using your browser's web inspector (mentioned earlier). Using it, locate the block in question.
Note that you do not want to use block IDs starting with yui.... Those IDs are dynamically generated and change with each page load. IDs starting with anything else are fine to use, such as block-yui....
Once you have the block ID, you can use it as part of your CSS, like so:
#block-yui_3_17_2_3_1425032049582_4670 ul li {
color: red;
}
Here again, specificity may be an issue and you may therefore have to add !important or write the rule with greater specificity as mentioned above.
Generally, it's difficult to actually get answers on Answers; StackOverflow is probably more effective.
I wonder about something, why should i name classes and style them, when i can just target then with css3 pseudo-classes? Will not be lesser "html code"?
<header>
<nav>
Link 1
Link 2
</nav>
</header>
In my CSS instead of i style the menu like this
.menu {
background-color: red;
width 50px;
}
I can just write like this?
header nav a:link {
background-color: red;
width 50px;
}
This is just an demostration/example i wrote fast, because if this is "smarter" or "better" coding then alot of webpages can get rid of alot unncesseriy classes and divs then they just target them as an Child-element?
Is this better or not?
Short answer: because it makes things easier.
It may be:
very difficult to write specific rules to target very specific elements
impossible to target elements directly if the HTML is very dynamic
cumbersome to add a lot of specific selectors if you want to style several elements the same in different parts of the document
difficult to move elements around in the document, because you need to touch the CSS rules as well every time
Classes identify groups of elements which you all want to treat equally, completely independently of their position within the document. This enables you to decouple your CSS and your document structure and reuse CSS efficiently for different documents.
The content of a web is often (very often) dinamic. that means it is developed in a team when (in my case) I do all the styles and they do all the programing stuff. You may have a container (div) and you may know what is going to be inside (links) but you will never know if you may have one or 200 links inside. You can control the html container and give it a class but even if my mates could make that any link inside has a class as it is generated, why bother them if I can target perfectly the links through header nav a:link
My professor asked us to develop a website using pure HTML,
JUST HTML. And it's really hard to design without CSS but I have to follow her instructions.
Anyway, my question is do you consider this code as CSS even if I removed the type="text/css"?
<style>
a {color:white; }
</style>
This maybe a dumb question but thanks for your time to answer it, I just really want to use CSS to make it easier.
Could you suggest anything that would make my coding easier? I just don't want to have repetitive code.
You are having this snippet,
a {
color:white;
}
is an element selector with the color property, whatever you write, i.e, between <style> tag, or style attribute, or stylesheet, all are CSS, if your professor is vintage fan, and is asking you to assign the color to a than you can use the font tag with color attribute with a value of white
<font color="white">Hello</font>
Demo
Note: Please read the box on the Mozilla Developer Network which says
SO DON'T USE IT
And just incase your professor understands, and his mind comes back to 2014... than would like to point out that even using
a {
color: white;
}
will target all the a elements in your document, so make sure you use a class or a specific selector to select particular a element.
Anyway, my question is do you consider this code as CSS even if I removed the type="text/css"?
CSS is CSS, not matter how it is added to the document or labeled.
it's really hard to design without CSS but I have to follow her instructions.
Could you suggest anything that would make my coding easier?
I'd start by clarifying if CSS really is forbidden and, if it is, what the purpose of forbidding it is. I can think of a number of possible reasons:
To prepare you to deal with code written by someone from 1996
To make you focus on the structure and semantics instead of the appearance
The course you are taking is almost two decades out of date
How you deal with the problem depends on which of those is the reason.
If it is the first one, then you need to look at all the obsolete, deprecated (and possibly non-standard too) presentational features of HTML (like <font> and background attributes).
If it is the second one, you just don't worry about how it looks and deal with the structure and the semantics. Let the browser's default stylesheet control the way it looks.
If it is the third one, then you probably have little option but to grit your teeth and bare it or find a better course.
<style>
a {color:white; }
</style>
Yes you write type="text/css" or not it will be considered as css.
The content of a style element is CSS, for most practical purposes (it would hardly make sense to use anything else there, since no other style sheet language is supported by browsers). The attribute type="text/css" does not change this, because the de facto default style sheet language is CSS.
On the other hand, the style element, including its content, is HTML. The content is not defined in HTML but in other specifications. Similar considerations apply to style attributes, as in <a style="color: white">...</a>: the attributes are HTML, and but they contain embedded CSS.
When you are told to use “pure HTML, JUST HTML”, then you are probably expected to refrain from using CSS or JavaScript in any way. On the other hand, you are probably allowed to use images, even though images are not HTML but are used via external references or data: URLs. There is nothing particularly logical in such a requirement.
As suggested in other answers, simply do not try to control the rendering of the page. Worry about the rendering only if it becomes intolerably messy and there is a reasonable way to prevent that in “pure HTML”. For example, don’t try to set link colors (this would in fact be an improvement over the way most web pages deal with links), backgrounds, fonts, etc. But if you use e.g. a data table, consider using , which often makes a table essentially more readable.
Yes, you can:
and too you can put style inline in your body or header
<style>
a{
color: #ffffff;
}
</style>
and so, all your css you can write it in your native .html without use of another .css file
Do you guys ever use inline styles for one-offs?
For example, I wanted to make just one particular list on my site use letters:
<ol style="list-style-type:lower-alpha">
Is that really so bad? Or would you slap on an ID and then bury it in your big master CSS file where it will be a pain to ever find again?
The presentation of your problem reveals a further issue that is affecting your decision: either inline the style or hide it in a large CSS file.
You know that placing the relevant styling rules in a CSS file is the better choice. You want to place the relevant styling rules in a CSS file but are daunted by the task of managing the CSS file.
Defining the styling rules inline is less painful than maintaining a large CSS file. The problems you are facing with a large CSS file are only going to get worse the more the project grows.
You need to break the large CSS file into a set of more managable CSS files.
A set of CSS files can be much easier to manage if they are sensibly named and contain appropriately-grouped rules. You may opt for one CSS file for layout, one for typography, one for colours and perhaps one per page for each page that is significantly different.
A set of CSS file is easier for you, a single CSS file is better from an end-user performance perspective.
Resolving these two conflicting needs is straightforward: develop with a set of CSS files and have your build process combine these into a single (minimised!) CSS file.
No,what you did is right.Inline styles are meant to use for only once.Of course i find many times this is over(ab)used.
No... don't ever do this. Wherever you think there is a one-off, just around the corner lurks a two-off. Then a three. Then a four.
Take the extra 60 seconds to do it right--you, and whomever follows you with maintenance, will be glad you did.
I would still put it in the file as a class, if that is what you are doing everywhere else. Imagine if someone else tried to find that style in the master CSS file and spent hours looking for something that was not there.
Additionally, what happens if you decide you like this style and want to use it elsewhere? You would have to put in the master CSS file anyway.
For me the #1 reason to always avoid inline styling is predictability in large projects involving several designers/developers.
Say you've added your one-off inline style to that ordered list, then another participant want to add some general styling to all ordered lists through your mammoth style sheet. Since your site/project is so large, he is likely to never notice your one-off hack, and therefore will believe that the new styling also applies to your ordered list, not realizing you've overridden the styling with your inline styles.
But if you're the only person maintaining this project... go ahead!
I would put it in a class, but define the class in inline CSS in the page. Then, if you need to expand to using it elsewhere, you can just move the class into a shared CSS file.
Also, I agree with the other answer noting that Firebug or similar can track down where any particular piece of styling comes from, so making "where's that coming from?" obvious is no longer a highly-weighted concern in my book. It's good to do when it's trivial, but not worth trading off on other measures for.
I vote for inlining. If this style is truly special to this one particular instance, that's a perfectly fine place to define it, and it saves you from a bloated and hard to maintain CSS file, especially if you have a large site and you're using a single CSS file for your entire site.
The argument that "CSS is where I look for styles" simply means you're being lazy.
The argument that someone would take hours to find this if it was inline rather than in the CSS means they are not a very good web developer.
The argument that someone else is going to want to globally change the style for say "<li>" later and will miss this instance is actually a good reason TO inline it. If you know you want this to be a unique style, than make it so, either via specificity in your CSS or inline, but I vote the latter.
I do this, but strictly only with the following rules:
1) An inline style rule must have exactly one property
<!--// Acceptable --//-->
<ol style="list-style-type:lower-alpha">
<!--// No!!! --//-->
<ol style="list-style-type:lower-alpha; font-weight: bold; ">
2) Any element with an inline style rule may not contain any descendant elements that have an inline style rule.
<!--// Acceptable --//-->
<ol style="list-style-type:lower-alpha">
<li>Item One</li>
<li>Item Two</li>
</ol>
<!--// No!!! --//-->
<ol style="list-style-type:lower-alpha;">
<li>Item One</li>
<li style="font-size: small;">Item Two</li>
</ol>
<!--// Instead (example) --//-->
<ol class="product-details">
<li class="shortdesc">blah blah</li>
<li class="longdesc">Blah Blah Blah</li>
</ol>
I wouldn't slap an id on it, I'd slap a class on it and quickly find it later using my editor's search feature.
I would class it. If the site will one day be inherited by anyone else, do them a favor and stay consistent. Besides, it will be easier to change if some day you decide lower-alpha no longer works for you.
You should still put it in the CSS file. I have a mental model that says styling = CSS. If it's not in the CSS, I would frankly get confused down the line.
Also, what if you find yourself wanting to use the style again. I mean you say it's for ONE item now, but who knows.
It's just good practice to use css/classes, and it'll usually pay off.
Are .css files always needed? Or may I have a .css "basic" file and define other style items inside the HTML page?
Does padding, borders and so on always have to be defined in a .css file that is stored separately, or may I embed then into an HTML page?
It is technically possible to use inline CSS formatting exclusively and have no external stylesheet. You can also embed the stylesheet within the HTML document. The best practice in web design is to separate out the CSS into a separate stylesheet. The reason for this is that the CSS stylesheet exists for the purpose of defining the presentation style of the document. The HTML file exists to define the structure and content of the document. And perhaps you may have JavaScript files which exist to add additional behavior to the document.
Keeping the presentation, markup, and behavior separate creates a cleaner design.
From a practical perspective, if you have a single external CSS stylesheet the browser can cache it. If multiple pages on your site have the same look and feel, they can use the same external stylesheet which only needs to be downloaded once by the web browser. This will make your network bandwidth bills lower as well as creating a faster end user experience.
You can include CSS inside an HTML page. It goes within the <style> tag, which goes within the <head> tag:
<head>
<style type="text/css">
body{ background-color: blue; }
</style>
</head>
Note, however, that it is best practice to use .css files.
Putting rules into the HTML page gives them greater "specificity," and therefore priority, over external rules. If several CSS rules conflict, ID wins over class, and inline styles win over ID.
<head>
<style type="text/css">
span.reminder {color: blue;}
span#themostimportant {color: red;}
</style>
</head>
<body>
<span class="reminder" id="themostimportant">
This text will be red.
</span>
<span class="reminder" id="themostimportant" style="color: green;">
This text will be green.
</span>
</body>
You can define CSS at three levels, externally, embedded in the document (inside a <style> tag), or inline on the element.
Depending on your needs, you might use all three, as a rule of thumb external sheets are good for overall styles as you can apply them globally. If you have specific cases that you must handle you can then use the other levels.
You can do either. However, by shifting your CSS out to a separate file, it can be cached. This reduces the amount of data that you need to transmit for each page, cutting down on bandwidth costs, and increasing speed.
You don't have to keep your CSS in an external file, no. What you're asking about is "inline" css: including style directives directly within the page itself via <style> blocks.
There are times where that may makes sense, in moderation, but in general it's not the way you want to go. Keep your CSS isolated in an external stylesheet makes it much easier to maintain both your HTML and your styling, especially as a project scales and changes hands.
One big advantage of having CSS in an external file is that one rule can apply to many different pages. Here is a contrast of three CSS approaches:
Inline Styles - to change the color to blue, you have to find each place that the red style exists - maybe on many pages.
<span style="color: red;">This is a warning.</span>
Page Styles - this allows you to label what something is - in this case, a warning - rather than what it looks like. You could change all the "warnings" on the page to instead have a yellow background by changing one line of code at the top of the page.
<head>
<style type="text/css">
.warning {color: red;}
</style>
<body>
<span class="warning">This is a warning.</span*>
External File - same code as above, but the fact that the style info is in a separate file means that you can use the "warning" class on many pages.
You can use anywhere, css files are not a requirement. using css files however is recommended as it makes the site easier to maintain and change in the future
Have to? No. You can do it however you prefer.
Generally it's better stype to keep your CSS out of your html whenever possible though.
That's what i usually do.
At least at the begining. When a page design gets close to final, I move most things to the 'main' style.css
I prefer to keep styling in CSS as it separates view from presentation, allowing me to swap between presentations fairly easily. Plus it keeps all the information in one place instead of split between two places.
Css can improve performance, because they are cached from browser, and pages are smaller!
Use an external file for all styles that are used sitewide, document stylesheet for styles that are only used on that page and use inline styles when the style only affects that single element.
External stylesheets do not always lower bandwidth. If you put every style for every page in your site into one giant css file, your users incur a large initial download even if they only visit your homepage once ever.
Thoughtful division of your styles into a main.css with the most common styles and then into additional stylesheets as users drill down deeper can help to make the downloads smaller for some paths through the site.