Difference between revisions of "CSS:Essentials"

From mi-linux
Jump to navigationJump to search
m
 
(8 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
[[Main Page]] >> [[4CC002|Website fundamentals]] >> [[4CC002Workbook|Workbook]] >> [[CSS]] >> CSS: Essentials
 +
 +
[[Category:CSS]]
 
=Selectors=
 
=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 <nowiki><H1></nowiki> elements, we say that H1 is the selector.  This, again, is best explained by example.
 
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 <nowiki><H1></nowiki> elements, we say that H1 is the selector.  This, again, is best explained by example.
Line 63: Line 66:
 
.default {font-family: Courier; color: red}</nowiki>
 
.default {font-family: Courier; color: red}</nowiki>
  
−
*'''IMPORTANT''': Notice the full-stop (.) in front of the words "people" and "default" in the css
+
*'''IMPORTANT'''
 +
**Notice the words "class=..." in the HTML elements
 +
**Notice the full-stop (.) in front of the words "people" and "default" in the css - identifying that it is a class of elements to be affected
  
 
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.
 
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.
Line 77: Line 82:
 
   <HEAD>
 
   <HEAD>
 
     <TITLE>CSS 3</TITLE>
 
     <TITLE>CSS 3</TITLE>
−
     <LINK rel="stylesheet" href="style2.css" type="text/css">
+
     <LINK rel="stylesheet" href="style3.css" type="text/css">
 
   </HEAD>
 
   </HEAD>
 
   <BODY>
 
   <BODY>
Line 89: Line 94:
 
     <P class="default">some important information about buildings</P>
 
     <P class="default">some important information about buildings</P>
 
      
 
      
−
     <H1 class="lastheading">Rooms</H1>
+
     <H1 id="lastheading">Rooms</H1>
 
     <P class="default">some important information about rooms</P>
 
     <P class="default">some important information about rooms</P>
 
   </BODY>
 
   </BODY>
 
</HTML></nowiki>
 
</HTML></nowiki>
  
−
''CSS Document (save as "style2.css")''
+
''CSS Document (save as "style3.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}
 
.default {font-family: Courier; color: red}
Line 100: Line 105:
 
#lastheading {font-family: Courier; color: orange}
 
#lastheading {font-family: Courier; color: orange}
 
</nowiki>
 
</nowiki>
 +
 +
*'''IMPORTANT'''
 +
**Notice the hash symbol (#) in front of the words "topheading" and "lastheading" - the hash symbol defines that it is a single instance to be changed
 +
**Notice the words "id=..." in the HTML elements
 +
 +
=Ready to move on?=
 +
Let's move onto [[CSS:BoxModel|CSS:The Box Model]]
 +
 +
=Related Pages=
 +
<categorytree mode=pages>CSS</categorytree>

Latest revision as of 15:02, 12 July 2011

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

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 words "class=..." in the HTML elements
    • Notice the full-stop (.) in front of the words "people" and "default" in the css - identifying that it is a class of elements to be affected

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="style3.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 id="lastheading">Rooms</H1>
     <P class="default">some important information about rooms</P>
  </BODY>
</HTML>

CSS Document (save as "style3.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}
  • IMPORTANT
    • Notice the hash symbol (#) in front of the words "topheading" and "lastheading" - the hash symbol defines that it is a single instance to be changed
    • Notice the words "id=..." in the HTML elements

Ready to move on?

Let's move onto CSS:The Box Model

Related Pages

<categorytree mode=pages>CSS</categorytree>

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