Welcome! Log In Create A New Profile

Advanced

CSS: Lesson1: Topic 1A

Posted by gouwem-77858204 
Announcements Last Post
Announcement SoC Curricula 09/30/2017 01:08PM
Announcement Demarcation or scoping of examinations and assessment 02/13/2017 07:59AM
Announcement School of Computing Short Learning Programmes 11/24/2014 08:37AM
Announcement Unisa contact information 07/28/2011 01:28PM
CSS: Lesson1: Topic 1A
March 11, 2013 10:14PM
Hi Guys

Please can you assist.

I have just started with CSS and also busy with revision for HTML.

Just a question on CSS. I have download the files that I have to work with but i'm missing one file.

Activity 1 - 1 says
In the Open dilog box, browse to locate the Color and Typography/Illuminati/info.html file - which I did after many many clicks of trying to find it now it then goes and says

1. Open about.html in SimpleText, BBEdit, or your preferred text editor. This "about.html" I spended almost 20 minutes searching for it, not if have to create one but sure I have to open it somewhere as the instruction says " Open about.html." please can you adivice where do I find the file. eish frustrated sad smiley

Thanks
M
avatar
Mac
Re: CSS: Lesson1: Topic 1A
March 12, 2013 08:20AM
Re: CSS: Lesson1: Topic 1A
March 14, 2013 10:05AM
Hi Mac

I did thanks.
Re: CSS: Lesson1: Topic 1A
April 08, 2013 08:26AM
Hi there,

I am having trouble with coding and running the styles, please see code below:
<style>
a.navGreen:hover { color: Green; font-family:Kristen ITC; }
a.navGreen:link { color: green; font-family:Kristen ITC; }
a.navGreen:visited { color: green; font-family:Kristen ITC; }
</style>

I call the Style using a Class, <a class="navGreen">Home</a>,
This works perfectly until the adding of the href bit. Why is this?

"i-Halla"
77862139
Re: CSS: Lesson1: Topic 1A
April 08, 2013 09:05AM
Re: CSS: Lesson1: Topic 1A
April 08, 2013 09:22AM
Hi there,

The link performs as per coded on Hover; It turns green and the font family changes.
The problem is that the style ony works when there is no HREF on the <a> tag.

Once I add the HREF in the<a> tag, the link does not turn green and the font doesnt change on Hover.

Ill have practiced using the styling on the w3schools' "Try this" page and it worked.
When I apply it on my page it doesnt.

Correct me if I'm wrong, the class"" code is best practice when calling an embedded style, right? Because I only want the style to run on some of the <a> tags.


"i-Halla"
77862139
Re: CSS: Lesson1: Topic 1A
April 08, 2013 09:59AM
Hi there,

I have found a solution:
Previously, the embedded style was as follows:
a.navGreen:hover { color: Green; font-family:Kristen ITC; }
a.navGreen:link { color: green; font-family:Kristen ITC; }
a.navGreen:visited { color: green; font-family:Kristen ITC; }

I have changed it to:
a.navGreen:link { text-decoration: none; }
a.navGreen:hover { color: Green; font-family:Kristen ITC; text-decoration: none; }

The order of the procedures counts as well as the number of procedures added.
I removed the :visited procedure and the style runs perfectly, Thanks.

"i-Halla"
77862139
avatar
Mac
Re: CSS: Lesson1: Topic 1A
April 08, 2013 10:18AM
Change the style of all anchor tags (all links):

Language: HTML
a { <!-- style --> }
Re: CSS: Lesson1: Topic 1A
May 03, 2013 09:20PM
I have realised that embedded CSS overwrites linked CSS and inline CSS overwrites both.

So basically if you set your font color to white in the CSS file and blue in the embedded CSS, your text will be blue one your webpage. Similarly you can override both these colours by choosing a different color with inline CSS.

I do not recommend that you attempt overriding the different styles as your code will become unmanageable.
avatar Re: CSS: Lesson1: Topic 1A
May 06, 2013 06:34PM
Well, I use the linked css to make a default layout and override each page with embedded css when I want to change each page's main content (the content excluding the header, navigation bar and footer). I also use inline css for singular components that have unique properties. In my opinion, if you're able to keep your linked and embedded css sorted, you should use overriding css to your advantage. See Section 3 (CSS Section) pages 66 and 71 in your textbook for more information on how css code is prioritized smiling smiley
Sorry, only registered users may post in this forum.

Click here to login