Difference between revisions of "CSS:Basics"

From mi-linux
Jump to navigationJump to search
 
Line 8: Line 8:
  
 
Create the following example:
 
Create the following example:
−
  <nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+
  <nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
−
<HTML>
+
"http://www.w3.org/TR/html4/strict.dtd">
−
  <HEAD>
+
<HTML>
−
      <TITLE>CSS 1</TITLE>
+
  <HEAD>
−
  </HEAD>
+
    <TITLE>
−
  <BODY>
+
      CSS 1
−
<H1 style="font-family: Arial; color: green; font-weight: bold">
+
    </TITLE>
−
Section 1
+
  </HEAD>
−
</H1>
+
  <BODY>
−
<P style="font-family: Courier; color: red">contents of section 1</P>
+
    <H1 style=
−
<H1 style="font-family: Arial; color: green; font-weight: bold">
+
    "font-family: Arial; color: green; font-weight: bold">
−
Section 2
+
      Section 1
−
</H1>
+
    </H1>
−
<P style="font-family: Courier; color: red">contents of section 2</P>
+
    <P style="font-family: Courier; color: red">
−
<H1 style="font-family: Arial; color: green; font-weight: bold">
+
 
−
Section 3
+
      contents of section 1
−
</H1>
+
    </P>
−
<P style="font-family: Courier; color: red">contents of section 3</P>
+
    <H1 style=
−
  </BODY>
+
    "font-family: Arial; color: green; font-weight: bold">
−
</HTML></nowiki>
+
      Section 2
 +
    </H1>
 +
    <P style="font-family: Courier; color: red">
 +
      contents of section 2
 +
    </P>
 +
    <H1 style=
 +
    "font-family: Arial; color: green; font-weight: bold">
 +
      Section 3
 +
    </H1>
 +
 
 +
    <P style="font-family: Courier; color: red">
 +
      contents of section 3
 +
    </P>
 +
  </BODY>
 +
</HTML>
 +
 
 +
</nowiki>
  
 
Here we see we have used Inline CSS as shown in previous chapters to control several aspects of the font for both the headings and paragraphs in the form.  However, you should also be able to see that the formatting commands to change the font size and colour are repeated over and over again.
 
Here we see we have used Inline CSS as shown in previous chapters to control several aspects of the font for both the headings and paragraphs in the form.  However, you should also be able to see that the formatting commands to change the font size and colour are repeated over and over again.

Revision as of 15:35, 4 September 2007

Which CSS?

There are 3 different ways to include CSS in your websites: Inline, Internal and External

(The example of External Style Sheets below have already been created- others have been added so show examples)

Inline Style Sheets: The STYLE attribute of HTML elements

Create the following example: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
    <TITLE>
      CSS 1
    </TITLE>
  </HEAD>
  <BODY>
    <H1 style=
    "font-family: Arial; color: green; font-weight: bold">
      Section 1
    </H1>
    <P style="font-family: Courier; color: red">

      contents of section 1
    </P>
    <H1 style=
    "font-family: Arial; color: green; font-weight: bold">
      Section 2
    </H1>
    <P style="font-family: Courier; color: red">
      contents of section 2
    </P>
    <H1 style=
    "font-family: Arial; color: green; font-weight: bold">
      Section 3
    </H1>

    <P style="font-family: Courier; color: red">
      contents of section 3
    </P>
  </BODY>
</HTML>

Here we see we have used Inline CSS as shown in previous chapters to control several aspects of the font for both the headings and paragraphs in the form. However, you should also be able to see that the formatting commands to change the font size and colour are repeated over and over again.

This is increasing the size of the web page dramatically, especially as you can see that not much content exists on the final page. We can move from Inline Style Attributes of tags to a more productive form of CSS – the STYLE tag.

TIME TO PRACTICE

Try the example above – experiment with different formatting commands.

Internal Stylesheets: The Style Tag

Take a careful look at the code below. What differences can you see between the example above and the one below? 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <HTML>
   <HEAD>
      <TITLE>CSS 1</TITLE>
      <STYLE type="text/css">
        h1 {font-family: Arial; color: green; font-weight: bold}
        p  {font-family: Courier; color: red}
      </STYLE>
   </HEAD>
   <BODY>
    <H1>Section 1</H1>
    <P>contents of section 1</P>
    <H1>Section 2</H1>
    <P>contents of section 2</P>
    <H1>Section 3</H1>
    <P>contents of section 3</P>
   </BODY>
</HTML>

Can you see that all the formatting commands have been removed from each individual tag, and are in the <HEAD> section of the web page? Can you see how much re-typing of the same formatting commands has been saved doing it this way?

Not only does it save retyping, but it cuts down the number of mistakes made in retyping. Remember, syntax rules are strict and the web page will not render as you expect it to if even the smallest mistake is present.

This method means that we only need to define the styles once at the top of the page, then every tag of the same type is rendered with the same formatting commands.

BUT, if we have many pages, we need to include this section at the top of every page, and if a change is required to all the pages, we need to update every page.

So, we can remove the style sheet entirely from the web page, and hold it as a separate document.

External Style Sheets: The seperate CSS file

Create the following, and save it as MyStyle.css in a folder of your choosing. Create the following EXACTLY AS IT IS, NO NEED TO INCLUDE THE STANDARD WEB PAGE STRUCTURE IN CSS FILES. 

 h1 {font-family: Arial; color: green; font-weight: bold}
 p {font-family: Courier; color: red}

Now create a webpage and save it in the same folder as your MyStyle.css file – doesn't matter what it's name is. 

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <HTML>
   <HEAD>
      <TITLE>CSS 1</TITLE>
      <LINK REL="stylesheet" HREF="MyStyle.css" type="text/css">
   </HEAD>
   <BODY>
     <H1>Section 1</H1>
     <P>contents of section 1</P>
     <H1>Section 2</H1>
     <P>contents of section 2</P>
     <H1>Section 3</H1>
     <P>contents of section 3</P>
   </BODY>
 </HTML>

Pay close attention to the <LINK> tag – notice how you specify where the external cascading style sheet file is. Any other web pages you make can include this exact same <LINK> tag and be formatted exactly the same as each other. Any change to the entire site can be made in the CSS file and all pages will be updated.

TIME TO PRACTICE

Try the example above – experiment with different formatting commands.

More CSS

There are hundreds of formatting and other non-formatting commands that can be done in Cascading Style Sheets. You can find thousands of references to them on the Internet.

Matthew's Rule 12 – Use CSS effectively

If you need to use CSS commands in just one tag, use the style attribute of the tag. If you need to use the same styling in all occurrences of one tag, use the <STYLE> tag within the HEAD section to format all occurrences of the same tag in the same way. If you need to control style across many pages, use an external style sheet. Follow these rules for assessments or your grades may be reduced.

Finished Already?

Some further examples of simple CSS usage can be found at 09 - More Advanced CSS Examples

Some final words on HTML 4.01 wiki

Retrieved from "https://mi-linux.wlv.ac.uk/wiki/index.php?title=CSS:Basics&oldid=2262"