Difference between revisions of "CSS:Basics"

From mi-linux
Jump to navigationJump to search
 
(20 intermediate revisions by 4 users not shown)
Line 1: Line 1:
 +
[[Main Page]] >> [[4CC002|Website fundamentals]] >> [[4CC002Workbook|Workbook]] >> [[CSS]] >> CSS: Basics
 +
 +
[[Category:CSS]]
 
==Which CSS?==
 
==Which CSS?==
  
Line 8: Line 11:
  
 
Create the following example:
 
Create the following example:
−
  <nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+
  <nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
−
"http://www.w3.org/TR/html4/strict.dtd">
 
 
<HTML>
 
<HTML>
 
   <HEAD>
 
   <HEAD>
Line 41: Line 43:
 
     </P>
 
     </P>
 
   </BODY>
 
   </BODY>
−
</HTML>
+
</HTML></nowiki>
  
−
</nowiki>
+
Here we see we have used '''Inline CSS''' as shown in previous chapters of the [[HTML]] Workbook, 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.
+
This is increasing the size of the web page dramatically, and thus increasing download times and bandwidth usage.
  
−
This is increasing the size of the web page dramatically, especially as you can see that not much content exists on the final page.
+
*'''TIME TO PRACTICE'''
−
We can move from Inline Style Attributes of tags to a more productive form of CSS – the STYLE tag.
+
** Try the example above - experiment with different formatting commands.
  
−
===<font color=red>TIME TO PRACTICE</font>===
+
==Internal Stylesheets: The Style Tag==
 +
When using increasing amounts of CSS, instead of using the '''Inline''' version, a more productive approach is to use the '''Internal''' version of CSS.
  
−
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?
 
Take a careful look at the code below.  What differences can you see between the example above and the one below?
  
−
  <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" "http://www.w3.org/TR/html4/strict.dtd">
−
<HTML>
+
<HTML>
 
   <HEAD>
 
   <HEAD>
 
       <TITLE>CSS 1</TITLE>
 
       <TITLE>CSS 1</TITLE>
 
       <STYLE type="text/css">
 
       <STYLE type="text/css">
−
         h1 {font-family: Arial; color: green; font-weight: bold}
+
         h1 {font-family: Arial; color: green; font-weight: bold;}
−
         p  {font-family: Courier; color: red}
+
         p  {font-family: Courier; color: red;}
 
       </STYLE>
 
       </STYLE>
 
   </HEAD>
 
   </HEAD>
Line 76: Line 76:
 
</HTML></nowiki>
 
</HTML></nowiki>
  
−
Can you see that all the formatting commands have been removed from each individual tag, and are in the <nowiki><HEAD></nowiki> section of the web page? Can you see how much re-typing of the same formatting commands has been saved doing it this way?
+
Can you see that all the formatting commands have been removed from each individual tag, and are in the <nowiki><HEAD></nowiki> 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.
 
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.
Line 84: Line 86:
 
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.
 
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.
+
*'''TIME TO PRACTICE'''
 +
** Create the example above and experiment with various CSS settings
 +
 
 +
== External Style Sheets: The seperate CSS file ==
 +
 
 +
It is possible to remove the style sheet entirely from the web page, and hold it as a separate document. This is very productive when we have several pages of a webpage that we want to apply a common style to. It also means that we reach the overall goal of separating the content of the information from it's presentation.
 +
 
 +
Create the following, and save it as "MyStyle.css" in a directory of your choosing. Create the following '''EXACTLY AS IT IS, NO NEED TO INCLUDE THE STANDARD WEB PAGE STRUCTURE IN CSS FILES.'''
 +
<pre>h1 {font-family: Arial; color: green; font-weight: bold} p {font-family: Courier; color: red}</pre>
 +
Now create a webpage and save it in the same folder as your MyStyle.css file – doesn't matter what it's name is.
 +
<pre>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
 +
&lt;HTML&gt;
 +
&lt;HEAD&gt;
 +
&lt;TITLE&gt;CSS 1&lt;/TITLE&gt;
 +
&lt;LINK rel="stylesheet" href="MyStyle.css" type="text/css"&gt;
 +
&lt;/HEAD&gt;
 +
&lt;BODY&gt;
 +
&lt;H1&gt;Section 1&lt;/H1&gt;
 +
&lt;P&gt;contents of section 1&lt;/P&gt;
 +
&lt;H1&gt;Section 2&lt;/H1&gt;
 +
&lt;P&gt;contents of section 2&lt;/P&gt;
 +
&lt;H1&gt;Section 3&lt;/H1&gt;
 +
&lt;P&gt;contents of section 3&lt;/P&gt;
 +
&lt;/BODY&gt;
 +
&lt;/HTML&gt;</pre>
 +
Pay close attention to the <nowiki>&amp;amp;amp;amp;amp;amp;amp;amp;lt;LINK&amp;amp;amp;amp;amp;amp;amp;amp;gt;</nowiki> tag – notice how you specify where the external cascading style sheet file is. Any other web pages you make can include this exact same <nowiki>&amp;amp;amp;amp;amp;amp;amp;amp;lt;LINK&amp;amp;amp;amp;amp;amp;amp;amp;gt;</nowiki> 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.
  
−
==External Style Sheets: The seperate CSS file==
+
* '''TIME TO PRACTICE'''
 +
** Try the example above - experiment with different formatting commands.
  
−
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.'''
+
==== Including more than one css file in an HTML file ====
  
−
<nowiki> h1 {font-family: Arial; color: green; font-weight: bold}
+
What happens when we include more than one css file?<br>
−
p {font-family: Courier; color: red}</nowiki>
 
  
−
Now create a webpage and save it in the same folder as your MyStyle.css file – doesn't matter what it's name is.
+
Create a new css file named "MyStyleTwo.css" with the following:
 +
<pre>h1 {font-family: Arial; color: red; font-weight: bold; } p {font-family: Courier; color: red; }</pre>
 +
Link this file to your html page from the previous example using the &lt;link&gt; tags directly AFTER the previous &lt;link&gt; tag's.
  
−
<nowiki> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
+
Notice that in this new css stylesheet we have some properties that are the same as our original stylesheet?
−
<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></nowiki>
 
  
−
Pay close attention to the <nowiki><LINK></nowiki> tag – notice how you specify where the external cascading style sheet file is.  Any other web pages you make can include this exact same <nowiki><LINK></nowiki> 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.
+
What happens when we have these two similar styles on the same page?
  
−
===<font color=red>TIME TO PRACTICE</font>===
+
Notice that the second stylesheets styles take precedence over the previous style. This is how cascading stylesheets get their name: css. (Take a look here for a better explanation&nbsp; [[http://www.w3.org/TR/html40/present/styles.html#h-14.4 &nbsp;W3 Information on stylesheets]]) &nbsp;These techniques are particularly useful when creating separate styles for accessibility or other devices based of a similar layout.
  
−
Try the example above – experiment with different formatting commands.
+
There is a tool that can automatically abstract common styles out of stylesheets so you can make better use of the cascading features of css. &nbsp;[[http://Mi-linux.wlv.ac.uk/~1021372 &nbsp;CSS Cascading Tool]]
  
 
==More CSS==
 
==More CSS==
Line 121: Line 136:
 
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.
 
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===
+
===[[HTML Good Practice]] 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 <nowiki><STYLE></nowiki> 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.
 
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 <nowiki><STYLE></nowiki> 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?==
+
=Ready to move on?=
−
 
 
−
Some further examples of simple CSS usage can be found at
 
−
[[09 - More Advanced CSS Examples]]
 
  
−
Some [[final words on HTML 4.01 wiki]]
+
[[CSS:Essentials]] covers the essential concepts of selectors
 +
=Related Pages=
 +
<categorytree mode=pages>CSS</categorytree>

Latest revision as of 09:57, 17 October 2011

Main Page >> Website fundamentals >> Workbook >> CSS >> CSS: Basics

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 of the HTML Workbook, 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, and thus increasing download times and bandwidth usage.

  • TIME TO PRACTICE
    • Try the example above - experiment with different formatting commands.

Internal Stylesheets: The Style Tag

When using increasing amounts of CSS, instead of using the Inline version, a more productive approach is to use the Internal version of CSS.

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//EN" "http://www.w3.org/TR/html4/strict.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.

  • TIME TO PRACTICE
    • Create the example above and experiment with various CSS settings

External Style Sheets: The seperate CSS file

It is possible to remove the style sheet entirely from the web page, and hold it as a separate document. This is very productive when we have several pages of a webpage that we want to apply a common style to. It also means that we reach the overall goal of separating the content of the information from it's presentation.

Create the following, and save it as "MyStyle.css" in a directory 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//EN" "http://www.w3.org/TR/html4/strict.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 &amp;amp;amp;amp;amp;amp;amp;lt;LINK&amp;amp;amp;amp;amp;amp;amp;gt; tag – notice how you specify where the external cascading style sheet file is. Any other web pages you make can include this exact same &amp;amp;amp;amp;amp;amp;amp;lt;LINK&amp;amp;amp;amp;amp;amp;amp;gt; 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.

Including more than one css file in an HTML file

What happens when we include more than one css file?

Create a new css file named "MyStyleTwo.css" with the following: 

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

Link this file to your html page from the previous example using the <link> tags directly AFTER the previous <link> tag's.

Notice that in this new css stylesheet we have some properties that are the same as our original stylesheet?

What happens when we have these two similar styles on the same page?

Notice that the second stylesheets styles take precedence over the previous style. This is how cascading stylesheets get their name: css. (Take a look here for a better explanation  [ W3 Information on stylesheets])  These techniques are particularly useful when creating separate styles for accessibility or other devices based of a similar layout.

There is a tool that can automatically abstract common styles out of stylesheets so you can make better use of the cascading features of css.  [ CSS Cascading Tool]

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.

HTML Good Practice 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.

Ready to move on?

CSS:Essentials covers the essential concepts of selectors

Related Pages

<categorytree mode=pages>CSS</categorytree>

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