Post by troyzone on Oct 12, 2006 18:27:26 GMT -5
Hi Everyone,
A common problem I see on the forum while people are modifying their sites is getting their links and other text to be the size, style, and color that they want, and getting them consistent throughout their pages. Such problems can be caused by conflicts between styles configured in the page's CSS code (if such code exists for the page in question) and styles specified on individual sections of text or links.
Styles specified on the page generally override CSS styles, but which one takes effect in the end depends on factors such as where/how the styles are specified in the code, what order they are in, and so forth. When your page is loading up, there could be a war going on inside your browser and you may not even know it
I'll give a brief overview of CSS here, but if you do not know what CSS (Cascading Style Sheets) is or what it is used for, I recommend that you check out Jim's explanation and his implementation of it in his Planning For Growth Using CSS post inside the Website Creation Tool Kit FAQ section of the forum for more complete info.
Basically, CSS is a section of code that controls the appearance of various things for your page including text and link styles, colors, and so forth. You can change your link colors, underlines, and other attributes in one place by using CSS, rather than having to specify the attributes each time. You can also override a CSS style for a particular area of the page if you wish.
A CSS stylesheet can either be inline (contained inside the <head> section of a web page's source code) or it can be in an external file with a .css extension at the end of the filename. In the latter case, there is a link to the .css file inside the web page's <head> section so that the browser knows where to find it.
An internal stylesheet works just fine for a single page, while an external one would be better if you wish to manage styles for multiple pages throughout your site by making changes in a single .css file. Jim's template (and the standard TOPS site since it is based on Jim's template) is a single page design for simplicity and has an inline CSS stylesheet.
Whenever you make changes to CSS settings and they don't take effect for a given area of text, it is likely due to there being different settings specified for that text. Specifying a particular font or color for any given text on your page generally overrides any global or CSS values that are set elsewhere. That's something to keep in mind when trying to figure out why a global setting (like a default font set in a page's <body> tag or in a CSS stylesheet) is only working in some areas of the page but not in others.
Likewise, if you are trying to specify a particular style or color on text and it's just not working, it is likely that there are conflicting styles specified on the text, or you have a CSS style definition that is set on a particular tag inside of the problematic area that is taking effect after the fact. The best thing to do is clean up your code as much as possible by removing unneeded tags and styles to make things less confusing for both you and your browser.
Now let's get down to the NVU portion of this post. One thing I've noticed about NVU is it has good support for CSS, and you can check your CSS style definitions right from within NVU without having to dig through the source code. After all, people generally use WYSIWYG (What-You-See-Is-What-You-Get) HTML editors such as NVU to avoid working in the source code to begin with to save time or because they don't know how.
CSS stylesheet info can be viewed and changed in NVU by using its CSS Editor feature, which is located under the Tools menu.
Let's say for example that your page has internal CSS code that is configured to not underline links but you want them underlined. To change the CSS attributes for the underlining of links, go to the Tools menu in NVU and then choose CSS Editor. On the left you'll see a window that says Sheets and rules above it, and inside the window is an internal stylesheet with a + beside it. Click on the + to expand the list, then you'll see the various attributes that are defined for the internal stylesheet.
If you click on the one that says a:link then on the right you'll see a window showing its various settings. In this example, one was initially text-decoration: none and we want to change it to text-decoration: underline. This can be done by simply by going to the Text tab at the top and clicking on the Underline check box that appears in the lower-right area of this window. I would also change the a:visited attribute to text-decoration: underline as well so that the underline doesn't disappear after someone visits a link. You can then OK your way back to your main window and preview your site to see how it looks.
The above is just one example of what you can do using the CSS Editor feature of NVU. There are many other attributes that you can change, add, remove, whatever you wish, and you can even create your own custom styles to use on your page.
CSS is very versatile and powerful once you get used to working with it, as with just a few minor changes in CSS you can completely change the look of an entire site. The main purpose of this post though is to make you aware of this feature in NVU and where to find it, as CSS code can be affecting the look of your page or conflicting with certain styles you are trying to specify on areas of text, and you need to keep this in mind as you're working on your site.
Troy
A common problem I see on the forum while people are modifying their sites is getting their links and other text to be the size, style, and color that they want, and getting them consistent throughout their pages. Such problems can be caused by conflicts between styles configured in the page's CSS code (if such code exists for the page in question) and styles specified on individual sections of text or links.
Styles specified on the page generally override CSS styles, but which one takes effect in the end depends on factors such as where/how the styles are specified in the code, what order they are in, and so forth. When your page is loading up, there could be a war going on inside your browser and you may not even know it
I'll give a brief overview of CSS here, but if you do not know what CSS (Cascading Style Sheets) is or what it is used for, I recommend that you check out Jim's explanation and his implementation of it in his Planning For Growth Using CSS post inside the Website Creation Tool Kit FAQ section of the forum for more complete info.
Basically, CSS is a section of code that controls the appearance of various things for your page including text and link styles, colors, and so forth. You can change your link colors, underlines, and other attributes in one place by using CSS, rather than having to specify the attributes each time. You can also override a CSS style for a particular area of the page if you wish.
A CSS stylesheet can either be inline (contained inside the <head> section of a web page's source code) or it can be in an external file with a .css extension at the end of the filename. In the latter case, there is a link to the .css file inside the web page's <head> section so that the browser knows where to find it.
An internal stylesheet works just fine for a single page, while an external one would be better if you wish to manage styles for multiple pages throughout your site by making changes in a single .css file. Jim's template (and the standard TOPS site since it is based on Jim's template) is a single page design for simplicity and has an inline CSS stylesheet.
Whenever you make changes to CSS settings and they don't take effect for a given area of text, it is likely due to there being different settings specified for that text. Specifying a particular font or color for any given text on your page generally overrides any global or CSS values that are set elsewhere. That's something to keep in mind when trying to figure out why a global setting (like a default font set in a page's <body> tag or in a CSS stylesheet) is only working in some areas of the page but not in others.
Likewise, if you are trying to specify a particular style or color on text and it's just not working, it is likely that there are conflicting styles specified on the text, or you have a CSS style definition that is set on a particular tag inside of the problematic area that is taking effect after the fact. The best thing to do is clean up your code as much as possible by removing unneeded tags and styles to make things less confusing for both you and your browser.
Now let's get down to the NVU portion of this post. One thing I've noticed about NVU is it has good support for CSS, and you can check your CSS style definitions right from within NVU without having to dig through the source code. After all, people generally use WYSIWYG (What-You-See-Is-What-You-Get) HTML editors such as NVU to avoid working in the source code to begin with to save time or because they don't know how.
CSS stylesheet info can be viewed and changed in NVU by using its CSS Editor feature, which is located under the Tools menu.
Let's say for example that your page has internal CSS code that is configured to not underline links but you want them underlined. To change the CSS attributes for the underlining of links, go to the Tools menu in NVU and then choose CSS Editor. On the left you'll see a window that says Sheets and rules above it, and inside the window is an internal stylesheet with a + beside it. Click on the + to expand the list, then you'll see the various attributes that are defined for the internal stylesheet.
If you click on the one that says a:link then on the right you'll see a window showing its various settings. In this example, one was initially text-decoration: none and we want to change it to text-decoration: underline. This can be done by simply by going to the Text tab at the top and clicking on the Underline check box that appears in the lower-right area of this window. I would also change the a:visited attribute to text-decoration: underline as well so that the underline doesn't disappear after someone visits a link. You can then OK your way back to your main window and preview your site to see how it looks.
The above is just one example of what you can do using the CSS Editor feature of NVU. There are many other attributes that you can change, add, remove, whatever you wish, and you can even create your own custom styles to use on your page.
CSS is very versatile and powerful once you get used to working with it, as with just a few minor changes in CSS you can completely change the look of an entire site. The main purpose of this post though is to make you aware of this feature in NVU and where to find it, as CSS code can be affecting the look of your page or conflicting with certain styles you are trying to specify on areas of text, and you need to keep this in mind as you're working on your site.
Troy
