Difference between revisions of "CSS:Essentials"

From mi-linux
Jump to navigationJump to search
m
Line 37: Line 37:
 
Let's look at a class example, modifying the HTML and CSS from the example above.
 
Let's look at a class example, modifying the HTML and CSS from the example above.
  
 +
''HTML Document''
 +
<nowiki><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 +
<HTML>
 +
  <HEAD>
 +
    <TITLE>CSS 3</TITLE>
 +
    <LINK rel="stylesheet" href="style2.css" type="text/css">
 +
  </HEAD>
 +
  <BODY>
 +
    <H1 class="people">Students</H1>
 +
    <P class="people">some important information about students</P>
 +
 +
    <H1 class="people">Staff</H1>
 +
    <P class="people">some important information about staff</P>
 +
 +
    <H1 class="default">Buildings</H1>
 +
    <P class="default">some important information about buildings</P>
 +
   
 +
    <H1 class="default">Rooms</H1>
 +
    <P class="default">some important information about rooms</P>
 +
  </BODY>
 +
</HTML></nowiki>
 +
 +
''CSS Document (save as "style2.css")''
 +
<nowiki>.people {font-family: Arial; color: green; font-weight: bold}
 +
.default {font-family: Courier; color: red}</nowiki>
 +
 +
*'''IMPORTANT''': Notice the full-stop (.) in front of the words "people" and "default" in the css
 +
 +
Any non-reserved word (words that are used in HTML like head, body, etc.) can be used to define a class - notice, importantly, that we can group DIFFERENT  elements together using CLASS - headings, table cells, paragraphs, and so on.
  
 
==ID==
 
==ID==
 
ID is used to specify a single occurrence of a given element, so that CSS affects only one instance of a particular element.
 
ID is used to specify a single occurrence of a given element, so that CSS affects only one instance of a particular element.
 +
 +
Let's modify the example again:
  
 
''HTML Document''
 
''HTML Document''
Line 49: Line 80:
 
   </HEAD>
 
   </HEAD>
 
   <BODY>
 
   <BODY>
−
     <H1 class="people">Students</H1>
+
     <H1 id="topheading">Students</H1>
 
     <P class="people">some important information about students</P>
 
     <P class="people">some important information about students</P>
  
Line 58: Line 89:
 
     <P class="default">some important information about buildings</P>
 
     <P class="default">some important information about buildings</P>
 
      
 
      
−
     <H1 class="default">Rooms</H1>
+
     <H1 class="lastheading">Rooms</H1>
 
     <P class="default">some important information about rooms</P>
 
     <P class="default">some important information about rooms</P>
 
   </BODY>
 
   </BODY>
Line 65: Line 96:
 
''CSS Document (save as "style2.css")''
 
''CSS Document (save as "style2.css")''
 
  <nowiki>.people {font-family: Arial; color: green; font-weight: bold}
 
  <nowiki>.people {font-family: Arial; color: green; font-weight: bold}
−
.default {font-family: Courier; color: red}</nowiki>
+
.default {font-family: Courier; color: red}
 +
#topheading {font-family: Courier; color: blue}
 +
#lastheading {font-family: Courier; color: orange}
 +
</nowiki>

Revision as of 13:01, 5 September 2007

Selectors

Selectors are the way in which we identify which HTML elements are to be affected by our CSS. If we write some CSS that we want to affect all <H1> elements, we say that H1 is the selector. This, again, is best explained by example.

FROM HERE ON, ALL CSS IS EXTERNAL - where any CSS examples are shown, write an external CSS sheet and the HTML as separate documents.

HTML Document 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
     <TITLE>CSS 2</TITLE>
     <LINK rel="stylesheet" href="style1.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>

CSS Document (save as "style1.css") 

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

You can see from the example above, that all heading 1's are affected by the h1 selector in the CSS, and all paragraphs are affected by the p selector.

What if we don't want to change every heading, just some of them?

CLASS and ID

Class and Id are two methods by which we can affect change to a subset of an element (i.e. for some paragraphs, but not all paragraphs). In the HTML, we can identify which paragraphs we want to change, by giving them either ID's or CLASS's

Class

Class (actually, it's "pseudo-class" in the W3C specification) is a way of grouping together similar elements together.

Let's look at a class example, modifying the HTML and CSS from the example above.

HTML Document 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
     <TITLE>CSS 3</TITLE>
     <LINK rel="stylesheet" href="style2.css" type="text/css">
  </HEAD>
  <BODY>
     <H1 class="people">Students</H1>
     <P class="people">some important information about students</P>

     <H1 class="people">Staff</H1>
     <P class="people">some important information about staff</P>

     <H1 class="default">Buildings</H1>
     <P class="default">some important information about buildings</P>
     
     <H1 class="default">Rooms</H1>
     <P class="default">some important information about rooms</P>
  </BODY>
</HTML>

CSS Document (save as "style2.css") 

.people {font-family: Arial; color: green; font-weight: bold}
.default {font-family: Courier; color: red}
  • IMPORTANT: Notice the full-stop (.) in front of the words "people" and "default" in the css

Any non-reserved word (words that are used in HTML like head, body, etc.) can be used to define a class - notice, importantly, that we can group DIFFERENT elements together using CLASS - headings, table cells, paragraphs, and so on.

ID

ID is used to specify a single occurrence of a given element, so that CSS affects only one instance of a particular element.

Let's modify the example again:

HTML Document 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
  <HEAD>
     <TITLE>CSS 3</TITLE>
     <LINK rel="stylesheet" href="style2.css" type="text/css">
  </HEAD>
  <BODY>
     <H1 id="topheading">Students</H1>
     <P class="people">some important information about students</P>

     <H1 class="people">Staff</H1>
     <P class="people">some important information about staff</P>

     <H1 class="default">Buildings</H1>
     <P class="default">some important information about buildings</P>
     
     <H1 class="lastheading">Rooms</H1>
     <P class="default">some important information about rooms</P>
  </BODY>
</HTML>

CSS Document (save as "style2.css") 

.people {font-family: Arial; color: green; font-weight: bold}
.default {font-family: Courier; color: red}
#topheading {font-family: Courier; color: blue}
#lastheading {font-family: Courier; color: orange}
Retrieved from "https://mi-linux.wlv.ac.uk/wiki/index.php?title=CSS:Essentials&oldid=2272"