Charnwood Sunday Football League

Admin (No PMs Please!) · Posted: Tue Jan 08, 2008 4:05 pm Post subject: Beginners Guide To CSS

Welcome to the beginners guide to CSS -- please ensure you read this before looking at the advanced HTML section!

Thank you! Smile

(See the next post for the intro/start of tutorial).

_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Tue Jan 08, 2008 4:34 pm Post subject:

Well, the first thing to note is that "CSS" stands for Cascading StyleSheets. CSS is what's called a "coding language" and is completely different (and separate) to HTML.

CSS works alongside HTML to help provide much more control over the layout and look of a website. To give you an understanding of how powerful CSS really is, I don't mind saying that only 34 lines of CSS control the entire Charnwood Sunday Football League website, and that includes the "custom classes/IDs"! Not bad eh? 1 change to the CSS file, and it would make the change effective on ALL of the web pages I have linked to it (which happens to be all of them in this instance).

CSS can do much more than HTML in this regard, and can be used specifically or universally - whichever suits your own needs!

YOU MUST REMEMBER that to "style" our webpages using CSS, you must always place the code between your (HTML) <head> and </head> tags on your webpage (until we look at external stylesheets!)

The tags we use to start "styling" our page is <style type="text/css"> and </style>. This tells the browser what we are doing (ie: styling our page with CSS).

Now we have the little "intro" out the way, look at the bit of code below:

<style type="text/css">

Your "style rules" will go here!

</style>

This is the absolute start for us... see the next post to start looking at changing our font in our webpage.
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Thu Feb 14, 2008 12:57 pm Post subject:

Ok, now I am assuming that to be looking at this topic, you already know the absolute basics of HTML so I will not be explaining any of the HTML aspects during this topic...

Get a HTML template (<html>, <head> and <body> tags). Between the <head> and </head> tags, write this bit of code:

<style type="text/css">
h5 {color:#ff0000}
i {color:#0000ff}
</style>

Now, between the <body> </body> tags, write this code:

<p>Some normal text for you to compare against the CSS styles</p>
<h5>This is the header that you have styled</h5>
<p>Another example which includes making the text <i>italic - styled with CSS as well!</i></p>
<p>Another normal bit of text for extra comparison.</p>

Ok, let's walk through this one as it's the first one an' all!
You have got 4 things in this Style Rule (that's what they are called by the way!)....
1: The element. In this example, the elements are "h5" and "i" (in other words, the tag you want to format is called the element). When you are writing CSS, you do not include the'<' '>' part of the tags! Just write the actual name of the tag (ie: p, strong, i).

The elements in this example are "h5" and "i".

2: The declaration. This is what formatting you want doing; You declare what you want to change, and what it needs to change to. You must always put your declaration inside curly braces (or brackets) --- the '{' and '}' holds the declaration.

The Declarations in this example are: "{color:#ff0000}" and "{color:#0000ff"}

When entering a declaration, you must always separate (or "delimit") the property from the value by using a colon ":" -- The property must have the colon immediately after it without a space, however you can choose whether to have a space between the colon and the value. Both of the declarations below are acceptable:

{color:#0000ff}
{color: #0000ff}

This would NOT be acceptable -- it would throw up an error:
{color :#0000ff} When writing/coding something incorrectly, it is called a "syntax error". That means, check what you have written! You have an error (or some errors!) somewhere in your code. Some browsers may still accept the style rule, others will completely ignore it (Netscape is one example of a browser that will totally ignore the style rule).

3: The Property. The property is what you want to change - similar to the "attribute" in HTML.
4: The Value. The value is what you will change the property to (ie: name of a colour, font type etc). It has the same principal as a "value" for a attribute in HTML.

Try this example.... do you see what has happened? This has basically changed the fonts' formatting (in this example, it changed the colours). You could of course do this by using HTML tags, but that would mean many more hours of coding as you'd need to write the code out every time you wanted something to be italic and in blue... doing it this way means that every time you use the <i> and <h5> tags, they will automatically be the format you want!

I will show you (later on) how to write a CSS file that can format specific areas of your website, or the entire site leaving your web pages much lighter and looking better, in case you ever need to troubleshoot/decode them.

This is a very good starting point, and I want you to familiarise yourself with coding CSS. So, with that in mind, I want you to format different HTML tags to make them different colours -- only change the colour for the time being.
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Thu Feb 14, 2008 2:02 pm Post subject:

Let's move on to styling fonts. It is useful to know that CSS has replaced the HTML tag <font> for almost all circumstances.

Now we begin! The first thing you should decide on is what typeface you want your text to be (eg's: Times New Roman, Arial, Courier New etc etc). In CSS, this property is called "font-family". Let's style a few HTML tags to use different typefaces.

So, let's start a Style Rule (between the <head> </head> tags):

<style type="text/css">
p {font-family:times new roman,Arial,Tahoma,sans-serif}
h6 {font-family:Courier New,Verdana,Arial}
blockquote {Arial,sans-serif}
</style>

Now, between the <body> </body> tags, enter this code:

<h6>Welcome to styling different font faces with CSS!</h6>
<p>See the different font face compared to the main header?
<blockquote>Have you noticed the 3 different font faces that are being used overall?</blockquote><br><br>
This is more of the parapraph.</p>

You should notice straight-away the differences in the font faces (or font "family").

Now, what if you wanted the <p> tags to be a specific font size all the way through your web pages? Easy! Check the example below:

<style type="text/css">
p {font-family:times new roman,arial,tahoma,sans-serif; font-size:8pt;}

Note that when you want to have multiple declarations (ie: 2 or more!), you need to separate (or delimit) each declaration with a semi-colon ";" -- you must put a semi-colon after each declaration, even the last one you make. This is correct coding and good coding practice to get into the habit of, for when you learn things like JavaScript and more advanced languages.
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Celtic_Steve · Posted: Thu Feb 14, 2008 2:24 pm Post subject:

Admin (No PMs Please!) · Posted: Thu Feb 14, 2008 2:27 pm Post subject:

When formatting your text, you can also make use of other properties linked to text. See below for examples/explanations of other properties that you can use when formatting your text:

font-weight :: This refers to the thickness of lines that make up a letter. Different font faces have their own value system, so if the weight was set for 700 on Arial, it is not necessarily the same thickness as 700 being set for Verdana. Some people think that this to make the text "bold"; although it appears "bolder", it does not actually hold the same value as setting something to be "bold" -- If you set something to be weighted as 900, it may be "bolder than bold" (pardon the pun!). End line: Do not confuse this with the HTML tag, <strong> or <b>! I won't get into the technicalities of it all, but trust me, it is not the same thing!

font-style :: There are 3 font-styles, italic bold and normal. The default value is "normal". Unless you want italic or emboldened text, you do not need to use this property. This can come in handy when styling a tag specifically to emphasise something.
Eg:
<style type="text/css">
h3 {font-weight:700; font-family:arial,courier new,verdana; font-size:26pt; font-style:italic}
</style>

The final one that I will note (because you never know if you'll want to use it!) is a property called "font-variant". This property is best explained with an example:

<style type="text/css">
p {font-variant:small-caps}
</style>

This will simply make whatever you write using the HTML tag <p>, into capitals but it will remain the same size as the small (non-capital) letters.

Try it out - that's the best way to learn/understand with this property! A note to remember is that this property does NOT work with every font face/family. If you choose a face/family that does not allow this property, you can use the "font-weight" and "font-size" properties to mimic the effect.
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Thu Feb 14, 2008 2:52 pm Post subject:

Celtic_Steve · Posted: Thu Feb 14, 2008 3:19 pm Post subject:

You can use that format in-line, not just in external sheets as long as it's contained within the style element.

Didn't mean to interrupt your flow Steve, I was just trying to help people who may make mistakes and then get frustrated when they can't un-pick their own mess. In my opinion, when it comes to good programming practice, get it right now, not later; when you learn to drive a car, you learn the highway code at the same time, not in the last lesson after you've already mowed down five grannies! Laughing

_________________
http://www.loughboroughceltic.co.uk

Admin (No PMs Please!) · Posted: Thu Feb 14, 2008 3:35 pm Post subject:

Next, I want to bring in "margin".

You should remember that margins are set from top, right, bottom then left. People tend to remember this by thinking of a clock, and going clockwise! Seems weird to me, but if it helps you remember then that's great!!

I also want to mention that when working with margins, you will be using "%" and "em"s to allocate margin space. It is always best to use the "%" for setting left and/or right margins. It is always best to use the "em" for setting top and/or bottom margins. Confused

:What's "em"??? Well, the "em" unit comes from traditional paper printing. It is approx. the line height of your specified font. **Different fonts have different heights** The reason it is best to use "em" for top/bottom margins, is that using the "%" could get quite tricky unless you know the height of each individual page you've coded. Even then, it may cause more hassle than it's worth!

So, we want to add a margin to a quote we intend to have on our web page.... see the example below:

(between your <head> </head> tags:)
<style type="text/css">
blockquote {margin: 5em 15% 5em 15%}
</style>

(between your <body> </body> tags:)
<p>This is some normal text, check the difference between this and the 'blockquote' text.</p>
<blockquote>You should hopefully see a big enough difference in comparison to the normal text above and below this text!</blockquote>
<p>Some more normal text just to clarify how much space the margins use. See the difference?</p>

Notice anything different Question

Hopefully, you will have noticed that I have made the margin sizes working from top to left (so the top margin will be 5em, the right margin will be 15%, the bottom margin will be 5em and the left margin will be 15%).

Also, you should have noticed that I did not use any comma's when stating the margin specifications. When stating the margin specifications, you should only use spaces to separate each margin space. Do not use comma's... you are not delimiting (separating) the margins.

Please note that this is a shorthand way of coding the margins... to code only one margin, or a couple of margins you can/should use each specific property for that margin. For example:
{margin-top:5em; margin-left:15%; margin-bottom:5em; margin-right:15%} is the same as what I wrote above, but using each specific property. Use whichever method you feel most comfortable with.
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Thu Feb 14, 2008 3:45 pm Post subject:

Admin (No PMs Please!) · Posted: Fri Feb 15, 2008 11:31 am Post subject:

okay, before I continue, please make sure you save your HTML page (with the CSS in it). Save it with whatever name you want, but be sure to save it in the same folder that was created when looking at the HTML Beginners Tutorial, on your C:\ (C: Drive).

Next post, we will look at the align property -- this can be used in place of the "align" attribute in HTML (it really depends on what you are trying to do).
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Admin (No PMs Please!) · Posted: Fri Feb 15, 2008 1:42 pm Post subject:

The property for aligning text is called.... "text-align"! Shocker eh?!

Anyway, this property holds the same values as the HTML tag "align"... "left", "right", "center" and "justify".

Let's make headers that've been aligned to the centre. It's real simple! See the example below:

<script type="text/css">
h2,h1 {font-family:arial,times new roman,verdana; font-size: 20pt; text-align:center;}
</script>

You hopefully will have noticed the bit in green? -- I have created the same format for 2 different HTML tags. If you ever want to use the exact same CSS on more than 1 HTML tag, you simply separate the tag names with a comma! So you can have as many or as little amount of HTML tags all formatted one specific way.

Moving to the alignment of the headers:

Write this code in your web page:

<h2>Normal H2 header tag, but automatically aligned to the center without having to use the "align&quotl; attribute in HTML.</h2><br>

<h1>This should be style <strong>exactly</strong> the same as the other header -- size, font face, alignment... if not, the code written is incorrect and you need to double-check what you've written.</h1><br>

<p>Some normal text, not formatted and not aligned in any way... see the differences?</p>

Again, save this file (filename does not matter.... anything will do). in the same folder as the rest.

Other text properties to note include:
text-decoration: the values that you can enter here are:
overline, line-through, underline and none. Try messing around with these to see the effect they produce, although they are obvious.... but get the practice in as you will use the text-decoration property when styling your links etc.

line-height is another text property... (almost forgot that one!): Line-height sets the height of a text line. This is the space between the line (imaginery) that runs along the bottom of the letters, and another. It may help to think of a piece of lined paper, the space between 2 lines is what would be increased or decreased when setting the line-height property. An example would be:

p {line-height:200%} This example doubles the normal amount of space between each line.

p {line=height:.60%} This example is set as .60%. This would be equal to 3/5s of the normal line height.

This uses only percentages (%), and you cannot use negative values -- using a negative value would simply be ignored.

Make a brand new page with all of the above styles, using different header sizes, using the <p> tag a few times, and any other HTML you want to try out with these CSS properties you've recently learnt. Save the document, under the name "Multi_CHT.html" -- we will be using this page at a later stage (more than likely in the Advanced CSS section and/or the CSS-P section.
_________________
No longer the General Secretary -- Any queries/questions should be directed to either Brian Bunn (Chairman) or Tony Pietrzyk (Vice Chairman).

Please do not PM this user account anymore -- It will soon be disabled and, later on, it will be deleted for re-use by a standing Administrator of the site.

Welcome To Our Forum - We hope you enjoy yourself Guest!