FETAC Certificate in Multimedia Production. IBaT College Swords. FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3

Transcription

1 IBaT College Swords FETAC Certificate in Multimedia Production Web Authoring Dreamweaver 3 Lecturer: Cara Martin M.Sc. Lecturer contact details: cmartin@ibat.ie IBaT 2009 Page 1

2 Cascading Style Sheets Module 7 Cascading Style Sheet...3 CSS Code...3 Embedding a style...4 Linking to a style sheet...7 Inline Styles...8 Using the three style methods together...9 Class Styles...9 ID Styles...10 IBaT 2009 Page 2

3 Introduction to Dreamweaver Module 7 Cascading Style Sheet Cascading Style Sheets are a very important part of Web Design. They were introduced around version 4+ of the browsers and are actually created using another language called Cascading Styles Sheet language or CSS for short. They are extremely important for easy maintenance of a website. In order to use style sheets properly we must first of all understand the theory behind how they work. Let s take a look at the code behind CSS. CSS Code Styles in CSS are constructed using a selector and a set of properties with values for each selector enclosed within brackets. Selectorname {property1:value1; property2:value2; property3:value3; Notice how we use a colon :" sign to assign the value of the property instead of an equals sign. Also we are using a semi-colon ; to separate each property. The selector name is a html tag that we want to assign a style to. For example if we wanted to change all the paragraphs (<p> tags) to blue text with size 12pt Arial font, then we would use the following: p {color:#0000ff; font-family:arial; font-size:12pt; There are basically 3 ways that we can include CSS code in our web pages: Embedding a style in a page Linking to a Style Sheet And using an inline style Let s take a look at each of these methods in detail. IBaT 2009 Page 3

4 Embedding a style To embed a style in a page we simply need to include the style in the header tag as follows: <head> <style type= text/css >  </style> </head> All the styles need to be enclosed within the opening and closing <style> tags. The property type= text/css tell the browser that we a re using a css style. The tags <-- and --> are known as comment tags in html. Usually they are used by programmers to put their own comments in the code that it wants to hide from the browser. However, in this case they are being used for a different purpose. When styles came out first the older browsers didn t understand the CSS code so they would have just ended up displaying it on the page. For this reason they developed the new browsers so that they would read comment tags inside of style tags. This means that when we use comment tags inside of style tags the older browsers which don t understand the style tags will simply ignore the CSS code but the newer browsers who do understand that code read and implement it. Let s look at an example of embedding some style on a page. Suppose we want to change all the text on the page to dark grey, size 10pt Verdana font. We also want the heading 1 s to be red and size 14pt, and the heading 2 g green size 12pt (both also Verdana). We would need to add styles for the body tag, the h1 tag and the h2 tag as follows: <style type= text/css > <!-- body {color:#333333; font-family:verdana; font-size:10pt; IBaT 2009 Page 4

5 h1 h2 {color:#ff0000; font-size:14pt; {color:#00ff00; font-size:12pt; --> </style> Let s go through how this works. The body tag basically allows us to set styles for the entire page. This means that all tags inside the body tag (with the exception of table tags) will pick up this style automatically. The heading s will be inside the body so they will pick up the same styles automatically. If we then use a style for a heading 1 which is red and size 14pt the size and color will be overwritten for heading 1 s but the font will still remain as Verdana. The h1 essentially inherits the font for the body tag. Supposing we have the following code in the body of our page: <body> <h1>ibat Institute of Business and Technology</h1> <h2>courses</h2> <ul> <li>business</li> <li>accounting</li> <li>law</li> <li>it</li> <li>therapeutics</li> </ul> <hr /> <h2>business</h2> <ul> <li>certificate in Business Studies FETAC</li> <li>higher Certificate in Business Studies HETAC</li> <li>bachelors Degree in Business Studies HETAC</li> </ul> </body> IBaT 2009 Page 5

6 This should display in the browser something like the following: As you can see all the text has become grey size 10pt Verdana font except for the heading 1 s which are red, Verdana, size 14pt font and the heading 2 s which are green, Verdana, size 12pt font. The only problem with using this method is that the styles will only be changed on this one page as they are only embedded in the head of this document. We could embed the same styles into the top of each page but the problem here is if we want to update the styles we would need to update it on every page. To overcome this problem we can use the second method Linking to a style sheet. IBaT 2009 Page 6

7 Linking to a style sheet With this method we basically make a new page with all the CSS styles on it and save it with a.css extension this is what we call a css stylesheet. For this example let s call it mystyles.css mystyles.css body {background-color:#333333; color:#ffffcc; font-family:verdana; font-size:10pt; h1 {color:#ffccff; font-size:14pt; h2 {color:#ccffcc; font-size:12pt; Notice the way do not need to include the opening and closing style tags or the comment tags Now we need to include a link tag in the <head> of our document which links to the style sheet: <head> <link type= text/css href= mystyles.css rel= stylesheet /> </head> The type attribute indicates to the browser that we are using a css style, the href attribute should be set to the relative path to the stylesheet and the rel attribute is telling the browser that we are linking relative to a stylesheet. Notice that there is no closing <link> tag so we need to close the tag off at the end with a forward slash. The major advantage to using this method is that we can include the same tag in the heads of as many web pages as we want to use the styles on. They if we IBaT 2009 Page 7

8 need to update the styles we simply need to update them in the one stylesheet and all of the pages will display the new styles. This is great for maintenance and is a technique used by all professional web designers. Inline Styles The third way that we can use a style is to use what is known as using an inline style. This is where we actually embed the style into the html tag itself. We can use this method to define a style for just one individual tag - this means that only this one tag will pick up the style. Essentially what we do is add an attribute style to the tag we which to change. Then we set the values of the tag to a list of properties and values just like the part of the style which in enclosed inside the curly brackets {. Here is an example which will change one paragraph in the page to bold red text. <p style= color:red;font-weight:bold; >This one will change</p> <p>this one won t change</p> IBaT 2009 Page 8

9 Using the three style methods together We can use all three methods together in practice. The style sheet will set the general styles for the entire website. The add few embedded styles can be used to change the styles just for that one page and an inline style can be used to change a style just for that on tag. Essentially the order of display preference is: inline first, followed by embedded next and lastly linked style. Any property of a style which is not overwritten can be inherited from the style above it so for instance. If we used an inline style to change the color of a particular paragraph to red, an embedded style to make all paragraphs it a size 10pt, blue and a style sheet to make the body tag Arial, That particular paragraph will be displayed as red text, size 10pt in Arial font. Class Styles We can also create styles which are not directly associated with any tag. For instance we may want to use a particular style to highlight words in sentences. In order to do this we would create what is called a class style. Class styles can be either defined in a style sheet or embedded in a page. As these styles are not directly associated with tags we need to give them names. To name a class style we need to put a dot in front of it s name when we are defining it. Supposing we wan to define a style called highlight:.highlight {color:red; font-weight:bold; IBaT 2009 Page 9

10 Now to use this class style anywhere on the page we simply do the following: <p class= highlight >This is now bold and red</p> What if we want to use the style around just one or two word in the middle of a paragraph? In this case what wee need to do is place an opening and closing <span> tag around the styles we want to change and add the class attribute to it as follows: <p>this is normal text but <span class= highlight >this is now bold and red</span> and this is back to normal again</p> ID Styles It is also possible to use what are known as ID styles. This is where we name an object by giving it an id tag and then define styles for tags inside that object. For instance we could do the following: <table id= mytable > <tr> <td> <p>it Courses</p> <ul> <li>diploma in Web Design</li> <li>diploma in DTP</li> <li>advanced Diploma in Web Design</li> </ul> </tr> </table> </td> <p>accountancy Courses</p> <ul> <li>acca</li> <li>iati</li> </ul> Now supposing we want to define a style for the <li> tags inside the table but not the one s outside the table. We would need to define an id style for <li> tags inside the object with the id mytable. IBaT 2009 Page 10

11 We could define this style as follows: #mytable li {color:red; Again this could be either defined in an embedded style or in a linked style sheet. IBaT 2009 Page 11