03 Tutorial XHTML CSS - Ivailo Chakarov- Resources · Using and Applying CSS to XHTML The purpose of this tutorial is to build upon the introduction to XHTML 1.0 ... Tutorial 03 XHTML
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Web Design and Development – Tutorial 03 XHTML & CSS
Just as the class selector allows you to be flexible in regards to elements, the id selector is too.
#copyright { color:Silver; font-weight:bold;}
The CSS snippet directly above allows you to apply the rule to any element that has an id
attribute with value ‘copyright’.
Exercise 1 – Using Selectors
Download the file: http://www.fcet.staffs.ac.uk/tja1/wdd/tutorial/xhtml_base.html and save it to your personal storage. Create a style sheet and link it to the document. Examine the mark-up and discover the class attributes and id attributes. Create rules in your style sheet to add presentation to the XHTML. The CSS rules should: - Apply a default font-family to all elements of ‘arial’. - Apply a default colour to all elements of Navy. - Prologue heading should look different than a regular heading - Information class should have a silver background-color and black text. - Footer should be in smaller, bold text. - Any other style elements you feel enhance the document Save and test your file with the updates made. An example of the styled document may look like the screen shot in Figure 4.
Web Design and Development – Tutorial 03 XHTML & CSS
During your personal study time, use online resources and/or the books included in the references section to learn more about CSS properties that can alter the content of XHTML elements. Experiment with font-family, font-weight, text-decoration, text-transform and text-align properties. A good web site to start: http://www.w3schools.com/css/
The Box Model & Measurement
You now have a grasp of CSS and the properties used to affect the presentation of mark-up
elements. To extend your understanding of CSS, it is necessary to understand the ‘box model’.
Everything in CSS is treated like a box.
Each box has the following properties:
• Border – Separates the edge of one box from all others, exists even if made invisible
• Margin – the margin is the distance between the edge of a box and any box next to it
• Padding – padding the space between the border and what is inside the box
Figure 5 shows the following properties in diagram form.
This is a paragraph in mark-up. The solid black line that separates margin and
padding is known as ‘Border’. Padding is the space between border and content.
Margin is the space between the border and other mark-up elements.
Margin
PaddingBorder
Figure 5 Margin, padding and border - the box model
Exercise 3 – Box Model Demonstration
Download http://www.fcet.staffs.ac.uk/tja1/wdd/tutorial/xhtml_box.html and save it in your personal storage area. Create and link a style sheet for this document with the rules supplied in Figure 6 (Page 9).
Web Design and Development – Tutorial 03 XHTML & CSS
Look at the page (Example in Figure 7on page 9) and see if you can determine what elements are considered ‘block’ elements and which should be considered ‘inline’ elements.
h1, p { border:solid 2px Black; padding:5px; margin:4px; font-family:Verdana; } strong, em { border:solid 2px #999999; padding:2px; margin:23px; }
Figure 6 Box Model Demonstration CSS rules
Figure 7 Box Model Demonstration Example
Inline and Block-Level Elements
Elements in HTML are either block-level elements or inline elements. Both can be formatted in
the same way and both follow the box model. Their major difference is in their default behaviour
when rendered in a browser. Examine the document from Exercise 3. <h1> and <p> are block
level elements and they start on a new line and take up the entire of the page width. Inline
elements are those contained within the block level elements, such as <em> and <strong>. They
do not force a new line and flow with the content of a block-level element.
Web Design and Development – Tutorial 03 XHTML & CSS
According to XHTML 1.0 specifications, the <body> element can only contain block-level
elements. Block-level elements can contain inline elements and other block-level elements where
structure allows, such as the <ul> containing <li> elements, both of which are block-level.
You can alter the default display type by using the CSS property ‘display’. If you wished to
make hyperlinks display as block-level elements:
a { display: block; }
Likewise, if you wished for each <li> to display inline:
li { display: inline; }
Exercise 4 – Altering Block-Level Elements
Create an XHTML strict 1.0 page and include the code sample from Figure 8 in the <body> element of the page. Create and link a style sheet to alter the appearance of the unordered list to a horizontal ‘inline’ list of hyperlinks. This exercise should be completed without having to alter the XHTML mark-up. An example of the solution is shown in Figure 9.
According to Duckett (2005), relative units and percentages can be very useful, but they also
pose problems for two reasons:
• Their size can vary depending on the kind of media on which the document is shown
• Users can increase and decrease the size of fonts on a web browser, which can affect some
of the units of length
Relative units are pixel (px), em (em), ex (ex) and percentage (%). A pixel is the smallest basic unit
of measurement in computing displays. Many web designers use the pixel measurements for fine
grain control over the layout of a page on screen. An Em (em) refers to the reference element
(Duckett 2005) which is either the element itself or its parent. The em measurement is originally
thought to be derived from the width of a lowercase ‘m’ but it is now generally considered to be
the height of the font. An ex is similar to the em except it is derived from a lowercase ‘x’.
Percentages provide a value in relation to another value. The percentage is calculated by the
reference element, either the element itself or its container. For example, if the <body> element
was set to a font size of 1em and the paragraphs were set to 150%, the calculated size of the
paragraph would be 1.5em. Changing the <body> element base font size would increase the
paragraph.
Exercise 5 – Using Measurements
Create an XHTML of your own or use the sample file available at: http://www.fcet.staffs.ac.uk/tja1/wdd/tutorial/xhtml_measurement.html to experiment with applying measurement units with CSS rules. You are free to enhance the document however you see fit. Try to experiment with relative units and consider how inheritance in CSS affects the visual result. Discuss with your tutor any issue that does not make sense.
The <div> and <span> Elements
The <div> and <span> elements are arguably two of the most useful elements available to a web
developer for assisting with CSS formatting even though, by default, they do not actually ‘do’
Web Design and Development – Tutorial 03 XHTML & CSS
Table 2 Box model dimension properties (Ducket 2005)
Property Description
Height Sets the height of a box
Width Sets the width of a box
Line-height Sets the height of a line of text (leading)
Max-height Sets a maximum height that a box can be
Min-height Sets a minimum height that a box can be
Max-width Sets the maximum width that a box can be
Min-width Sets the minimum width that a box can be
It should be noted that only height, width and line-height are currently supported in Microsoft®
Internet Explorer® 6.x.
Exercise 6 – Styling using <div> and <span>
Download the sample document: http://www.fcet.staffs.ac.uk/tja1/wdd/tutorial/xhtml_div.html and save it to your personal storage area. Examine the mark-up and locate the elements and make note of their classes. Style the XHTML document so that it looks like or similar to the screen shot shown in Figure 10.
Figure 10 Exercise 10 sample results
Web Design and Development – Tutorial 03 XHTML & CSS