Style sheet

Hey Guys,

I'm trying to insert class=contentlink as show below as a eg. in a hrefl link from an external stylesheet (not within web page).

View PDF (433 kB)

Trying to generate this in my website globally using the following code below in an external xml style sheet. Thanks for your help.

 body { font-family: Arial, sans-serif; font-size: 11px; color : #002A66; } a { font:11px/20px arial, sans-serif; text-decoration : underline; font-weight: bold; } a.contentLink { color: #002A66; text-decoration: underline; } h1 { font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; color : #002A66; } h2 { font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; color : #002A66; } } .contentLink { color: #002A66; } { border:none; }

Find more posts tagged with

Comments

Ambuj

Hey Guys,

I'm trying to insert class=contentlink as show below as a eg. in a hrefl link from an external stylesheet (not within web page).

View PDF (433 kB)

Trying to generate this in my website globally using the following code below in an external xml style sheet. Thanks for your help.

 body { font-family: Arial, sans-serif; font-size: 11px; color : #002A66; } a { font:11px/20px arial, sans-serif; text-decoration : underline; font-weight: bold; } a.contentLink { color: #002A66; text-decoration: underline; } h1 { font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; margin-top: 0px; margin-left: 0px; margin-right: 0px; margin-bottom: 0px; color : #002A66; } h2 { font-family: Arial, sans-serif; font-size: 14px; font-weight: bold; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: 0px; color : #002A66; } } .contentLink { color: #002A66; } { border:none; }

I didn't get your question. Is it related to TeamSite.. ??

begood321

This is not a direct Teamsite question, but these changes are required for Teamsite I'm currently working on. This question can also be separate from teamsite.

Adam Stoller

Hey Guys,

I'm trying to insert class=contentlink as show below as a eg. in a hrefl link from an external stylesheet (not within web page).

View PDF (433 kB)

Trying to generate this in my website globally using the following code below in an external xml style sheet. Thanks for your help.
 <stylesheet><![CDATA[
...
a.contentLink {
 color: #002A66;
 text-decoration: underline;
}
...
}
.contentLink { color: #002A66; }
 { border:none; }
 ]]></stylesheet>

You appear to have some syntactic errors in your code.

begood321

Thanks Fish tried your code but still didnt work. Here is an example of the result I'm trying to achieve from an external style sheet within a tags class="contentlink" on a webpage.

google

ISCBorisB

Thanks Fish tried your code but still didnt work. Here is an example of the result I'm trying to achieve from an external style sheet within a tags class="contentlink" on a webpage.

google

That was not Fish code. It was fragment of yours with highlighted css syntactical Errors. Have you fixed them?

begood321

Yeah I fixed them still not getting desired result.

Adam Stoller

Yeah I fixed them still not getting desired result.

Please describe in excruciating detail what it is you are trying to achieve and what is / is not happening when you attempt to do it.
If you want to display HTML code samples - please wrap them within

[html]...[/html]

tags so that they do not get interpreted by the forum software.

begood321

Sorry didn't notice that forum software would interpret website code, anyway Here is an example of the result I'm trying to achieve from an external style sheet within a tags class="contentlink" on a webpage.

[html]View PDF (433 kB)[/html]

ISCBorisB

Sorry didn't notice that forum software would interpret website code, anyway Here is an example of the result I'm trying to achieve from an external style sheet within a tags class="contentlink" on a webpage.

[html]View PDF (433 kB)[/html]

The following works perfectly well for me. What is your problem? Styles are not applied, external CSS references not found,
you do not now how to generate your HTML Tag with class(es)? What is the problem you are trying to solve?[html]

&amp;amp;lt;br&amp;amp;gt;&amp;amp;lt;!--&amp;amp;lt;br&amp;amp;gt;a { &amp;amp;lt;br&amp;amp;gt; font:11px/20px arial, sans-serif; &amp;amp;lt;br&amp;amp;gt; text-decoration : underline;&amp;amp;lt;br&amp;amp;gt; font-weight: bold; &amp;amp;lt;br&amp;amp;gt;}&amp;amp;lt;br&amp;amp;gt;a.contentLink {&amp;amp;lt;br&amp;amp;gt; color: #002A66;&amp;amp;lt;br&amp;amp;gt; text-decoration: underline;&amp;amp;lt;br&amp;amp;gt;}&amp;amp;lt;br&amp;amp;gt;.contentLink { &amp;amp;lt;br&amp;amp;gt; color: #002A66;&amp;amp;lt;br&amp;amp;gt; border: none;&amp;amp;lt;br&amp;amp;gt;}&amp;amp;lt;br&amp;amp;gt;--&amp;amp;gt; &amp;amp;lt;br&amp;amp;gt;

Foo

Moo

[/html]

Adam Stoller

Sorry didn't notice that forum software would interpret website code, anyway Here is an example of the result I'm trying to achieve from an external style sheet within a tags class="contentlink" on a webpage.

[html]View PDF (433 kB)[/html]

Two things regarding the above:

begood321

Thanks Boris I know I can achieve the same result with your solution, but I wanted the class for links [html]Moo[/html]
to be created from an external style sheet automatically so that I don't have to change thousands of pages manually for a website I'm currently working on.

ISCBorisB

...I wanted the class for links to be created from an external style sheet automatically so that I don't have to change thousands of pages manually

This is not possible. CSS settings are applied by the browser. On it's own CSS does not generate/modify any HTML Tags.
The best you can accomplish without assigning classes into Tags is the use of 'a' Selector. Disadvantage is that it
applies to all anchor Tags

You'd have to use some other mechanisms (TeamSite?) for "class for links to be created...automatically"

begood321

Thanks Boris, i'll check to see what's the best option.

LMX

Classes should only be used when absolutely necessary. In order to properly apply a style sheet, you have to have a properly formed HTML document. You must apply the 'cascading' rules of CSS to truly leverage them. Unfortunately, most developers don't see the value of well formatted markup and style sheets.

Use of content containers is key to applying managable style sheets.

[html]
#content a {
color:#f00;
text-decoration:none;
}
...

Link Text

[/html]

In the snippet above, all links within the content container would be red and would not be underlined... the point of the snippet is to show how minimalistic the markup is when you apply ID specific styles to html tags.

The biggest problem with applying markup and styles within TeamSite is eWebEditPro/TinyMCE -- they don't apply proper, custom CSS efficiently.

To work around this issues within my VisualFormatter instances, I remove all attributes from HTML tags it applies to the content while removing non-compliant tags alltogether. Secondly, I create "#content TAG_NAME {}" values for all XHTML compliant tags within my style sheet.

Combining this with well structured TPLs and you have a very simple approach to acheiving WAI, WCAG and XHTML valid code no matter how hard the end-user tries to break it Smiley Wink

Anyhoo, just food for thought... it's an approach that I have found very successful.

begood321

Thanks LMX. This is valuable information I will use in the future. I have figured out the solution. class=contentlink was placed in another .ipl file that used the tags which generated these links. After which I set up hover, active and visited classess to be generated after the links are created in stylesheet. It all works fine now. I was trying to do it all thru the style sheet 1st but in the end I got the desired result now.

Thank You and to all who helped me with this problem. I hope to be as good as you guys someday to return the favour.

ISCBorisB

Classes should only be used when absolutely necessary. In order to properly apply a style sheet, you have to have a properly formed HTML document. You must apply the 'cascading' rules of CSS to truly leverage them. Unfortunately, most developers don't see the value of well formatted markup and style sheets.

Use of content containers is key to applying managable style sheets.

[html]
#content a {
color:#f00;
text-decoration:none;
}
...

Link Text

[/html]

In the snippet above, all links within the content container would be red and would not be underlined... the point of the snippet is to show how minimalistic the markup is when you apply ID specific styles to html tags.

The biggest problem with applying markup and styles within TeamSite is eWebEditPro/TinyMCE -- they don't apply proper, custom CSS efficiently.

To work around this issues within my VisualFormatter instances, I remove all attributes from HTML tags it applies to the content while removing non-compliant tags alltogether. Secondly, I create "#content TAG_NAME {}" values for all XHTML compliant tags within my style sheet.

Combining this with well structured TPLs and you have a very simple approach to acheiving WAI, WCAG and XHTML valid code no matter how hard the end-user tries to break it

Anyhoo, just food for thought... it's an approach that I have found very successful.

Although I would agree that structuring helps, your emphasis on using CSS Id Selectors is questionable at best and seriously
misleading at worst. The main Id purpose is to provide *addressing* for local scripting languages, not for Styling.
IMO Id Selectors "should only be used when absolutely necessary", <div>, with Classes are to be used instead.

According to the HTML specification the name of the id attribute should be document-wide unique. Granted, CSS-capable browsers
accept in CSS the same value of the id-attribute in several places so your styling will work. However, what if you have several
*blocks* with A-B-A-B styles?

To give another example, in my current project I generate JSP Tiles to be assembled Run-Time by WebSphere Application like Lego pieces. For many of them I
have no way of knowing upfront where, when and how CMS-generated Tiles will be assembled together. We provide Styling by using Classes,
often several for the same element. Is it the best approach? I do not know, perhaps not. It works though and (with the extensive JS usage) it's impossible to do with ID's.

LMX

Although I would agree that structuring helps, your emphasis on using CSS Id Selectors is questionable at best and seriously
misleading at worst. The main Id purpose is to provide *addressing* for local scripting languages, not for Styling.
IMO Id Selectors "should only be used when absolutely necessary",
, with Classes are to be used instead.

Spoken like a true programmer, not a designer Smiley Happy

Look at all the work done by the likes of Eric Meyer... IDs are always used by the best of CSS developers to structure pages and apply styles. Furthermore, what is preventing you from using these container names in scripts if needed? Whenever scripting is involved, there's no reason why you can't apply an additional ID to a specific HTML element as well.

The problem with the "class" and span approach is that it requires changes to the HTML everytime you need to make a CSS change. When dealing with 3rd party content editors, the customization/maintenance issues can be overwhelming.

Every site I build uses at least 4 basic IDs for the sake of design: headerContainer, navigationContainer, contentContainer and footerContainer. These containers are strictly used for layout, while I apply additional IDs to CSS block elements (such as images, ULs, etc.) for the sake of scripting.

According to the HTML specification the name of the id attribute should be document-wide unique. Granted, CSS-capable browsers
accept in CSS the same value of the id-attribute in several places so your styling will work.

I never implied using an ID more than once on a page... containers and IDs should never be used more than once on a page.

However, what if you have several
*blocks* with A-B-A-B styles?

I would assume containers (blocks) would all have distinct style requirements... something like the content container wouldn't have the same styling needs as a navigation container. While some design elements might be repeated (such as fonts), it's hardly sloppy or detrimental to the integrity of the style sheet to repeat certain values.

To give another example, in my current project I generate JSP Tiles to be assembled Run-Time by WebSphere Application like Lego pieces. For many of them I
have no way of knowing upfront where, when and how CMS-generated Tiles will be assembled together. We provide Styling by using Classes,
often several for the same element. Is it the best approach? I do not know, perhaps not. It works though and (with the extensive JS usage) it's impossible to do with ID's.

Apples and oranges. I'm sure we can at least agree that every implementation has different needs/requirements. My example was the for the typical TeamSite/TPL approach the majority of people use, and for basic web design as a whole. Complex front-end engines couldn't care less about semantic markup, and you have to get by anyway you can.

ISCBorisB

Spoken like a true designer, not a programmer.

We can certainly agree or disagree on anything. In my experience it is cleaner, simpler and more portable
to apply intra and inter Page reusable styles by Classes. <div> and Tags with Classes are used
to style logical blocks. With this approach Scripting and Styling are independent.

It seems that in your experience it is better to apply unique styles by "at least four basic IDs". Granted,
that creates unwanted cross-section between logically independent local (browser-side) Coding and Styling but no
worries! We can always "apply an additional ID to a specific HTML element".

Let's just agree to disagree on that one.

As to "complex front-end engines" that "couldn't care less about markup"(?!), check for example TeamSite. Product's
overall merits (or lack thereof) aside, it has nice modern Browser-based GUI, mostly portable (there are exceptions),
customizable and whatnot. All that is styled by dozens CSS Classes and not a single styled ID.