sylesheet newbie help

Hello, my first post on this forum and a novice at web design.

This may be a real basic (stupid) question but I'm confused.

I thought stylesheet.css was typically written in HTML?

I have my page up and running and in the process of tweaking bits. I use mozillla firebug to view and test edit the html source code. I copy the changes into s text document.

I open the sylesheet.css ecpecting to see the same html as the source. The CSS looks nothing like the source code / not in html. Is this normal?

Should I expect css to be a different language to html?

Cheers

HTML and CSS both have their own different/specific syntax, but you can create them in a plain text file (on PCs people use Notepad).

There are helpful applications, such as Dreamweaver, that can be used to create your HTML and CSS text files.

I didn't quite follow your query. It's always best if you post the code
-- inside

Code:

---

and

---

which will set the code apart and make it easier to follow. Most helpful would be to provide a link to an online page.

=========
P.S.-- HTML <tags> form the structure of page content. CSS style rules can be applied to these HTML <tags> to affect the appearance of the page content. Sounds like you need to do some homework to better understand how CSS works with HTML markup.

See for instance http://www.html.net/tutorials/css/lesson2.php,
http://www.webdesignfromscratch.com/...work-together/,
http://www.w3.org/Style/Examples/011/firstcss.en.html,
http://www.webmonkey.com/2010/02/how-css-works/

CSS an HTML are not one in the same - HTML is what formats your content as a web page and CSS is what is used to position and style that content. What may confuse you is if you have seen bad coding where people are still using 'inline styling' within their HTML, for example

Code:

---

<p style="font-size: 12px; color: #FFFFFF;">Paragraph Text</p>

---

.

Therefore if you want to change the style of something in your HTML then you change it in your stylesheet and it will be applied (as long as you are linking to your stylesheet from the head of your HTML).

Thanks guys, I'll get my head in the books now. I do need to learn CSS pronto.

I've solved my problem thanks to you guys and hope this explanation may help other newbies with the same problem as me.

IT literate (I work in IT as a SW Admin) so the tools required are not a problem (FTP, Notepad2/notepad++ used daily, dreamweaver, photoshop etc all installed on my PC but haven't used dreamweaver). Shell scripting in other languages a daily task so also used to what code looks like but no experience of web design or CSS.

With no experience of CSS, I built my site with an e-commerce template, it took me some days to work out the structure of the site navigating the back end.

My site is up and running (I'm selling items) but there are small changes I wanted to make to perfect the look of the page. I thought only the stylesheet.css controlled the look of the page but needed to find the code I wanted to edit - didn't know where to start. An area very close to that I wanted to edit I had already edited on the stylesheet CSS so I did not know why I could not find this perticular code?

I opened my page on a web browser (I prefer mozilla with the firebug extension added). By pressing F12, I could see code inside an HTML format and with firebug it allows you to edit the page (any page, doesn't have to be your own - it's only editing it in your browser). This started leading me to thinking CSS was written in HTML.

I found the area I wanted to edit and edited it to my preference - it looked great!

It was now time to make the same changes to the actual site.

I opened my stylesheet.css expecting to see the same code but it was nowhere to be found - I was confused.
I thought either this e-commerce template converts what is normally HTML into another language and I had to somehow decode the stylesheet back into HTML or CSS is it's own language but the headings are totally different - so trial and error I'd need to change every possible items (buttons etc) to see which is the correct? Nothing looked like the one I wanted - the other buttons I could see were for another part of the page. This is obviously through lack of knowledge in web design but figured no way should it be this diffiicult to find the correct code.

That's when I joined this forum - I just didn't get why the area I wanted to edit wasn't there and started thinking maybe this should be in HTML? I assumed you had to re-translate the code in a different language.

I hit youtube again after my two replies on here, a few videos on CSS confirmed what I was trying to do was correct I.E. the stylesheet looked normal and the parts I needed to edit "should" be there - so even more puzzled?
I then watched more videos on firebug - what a pleb.
I wasn't using firebug properly and did not know enough about CSS to know there may be more than one CSS file referenced to a page - it's an extension I've been trying to edit.
A couple of tutorial videos on Youtube (on using firebug), I realised you can view the references to where the code is held.

I then realised the code I wanted to edit was not in stylesheet.css, it had it's own CSS file. I opened the correct file in a text editor and there it was - the code I've been looking for - for days. I've made the changes to my site now and a very happy monkey :)

To everyone on here, I know the above is probably entry level day 1 type stuff but it had me stumped for ages - so hopefully help others too.

WM

HTML and CSS syntax sticky points can trip up beginners. One point that non-programmers have a problem with is the lesser-than < and greater-than > brackets surrounding each HTML <tag>. Every <tag> needs to be complete with both a start < and end > bracket. Then try to describe that most <tags> come is pairs with an opening and closing counterpoint </tag> (the opening tag element precede by a slash / ) which describe content between the <tag> pair </tag>

The opening <tag> can contain attribute="value" pairs to further define content that follows; the closing </tag> only has the element preceded by a slash.

"Empty" <tag>s -- such as <img> image (which is a placeholder), <br> line break, <hr> horizontal rule -- do not haw a counterpart closing because they do not define content in-between. XHTML doc-type follows XML self-closing rule <br /> for empty tags.

Once brackets for <tags> is digested, it is usually clear sailing,

Inside the <tags> are HTML elements (a for <a> link anchor, p for <p> paragraph, ol for <ol> ordered lists, li for <li> list item, and so forth). The "bare" elements (without their <tag> brackets) can be used as "selectors" styled with CSS. Users can also create their own independent .CLASS (preceded by . period) and #ID (one unique to a page) style rule- selectors that can be applied to any <tag> -- using <DIV class="CLASSname" id="IDname"> inside the opening tag </DIV>.

CSS style rules can be in linked external text files (with .css MIME-type extension). or embedded in page within HTML <STYLE> tags </STYLE>. or applied inline to an HTML tag as an attribute <p STYLE="property:value; property2:value2;"> in an opening tag</p>

Remember CSS="Cascading Style Sheet" means that the specitivity and order in which style rules appear determine which rule applies and which are overridden. As an inline attribute, the style rule is more specific (and physically closer) than embedded <STYLE>rules</STYLE> so it takes precedence However, inline styles are least efficient and can be as bad as the deprecated <FONT> tags. Likewise the embedded <STYLE>rules</STYLE> overide rules in a linked external .CSS text file. While less specific, the rules in an external .CSS text file are the most efficient way of applying styles to a web site.