User:Batsondl/Sandbox 18





<< Previous Chapter Next Chapter >>

Span element

 * Span is a tag used to group elements or attributes for styling purposes.
 * Place the < span tag in front of the style code, such as font, and end it was a closing > . Use  tag at the end of the phrase to limit the style code.

Inline styling
YOUR TEXT
 * By itself, the only ability that Wikitext has is to place black text on a white background as you see on this page.
 * To give any character to the text or any object on a page requires additional coding.
 * The coding we will use is called "Cascading Style Sheets" or "CSS".  Those of you who have any experience in website creation will be familiar with CSS.
 * To apply CSS to Wikitext, we use "inline style" coding in the following format:

Attributes
eyecolor: blue or hair:  none or height:  six feet If any of these three attributes were put in a tag, the coding would look like this:
 * The combination of property - value is referred to as an attribute.
 * Let's use more familiar terms to perhaps make the concept of attributes with their properties and values more clear.
 * To describe a person we might state their physical attributes in the property: value form:


 * 
 * 
 * 
 * NOTICE: If a property has more than one word the words are separated by a dash. For example font size should be font-size.
 * We will be introducing more attributes throughout these lessons.
 * You can find a list of attributes from  W3schools.com 
 * Quick NOTE; there are no limits to the number of attributes you can add.

Example of Inline styling
 Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 * Here is an example for changing the size of the font using our span tags.
 * Lets look closely at the inline style code and break it down into pieces. It is not as intimidating as it might appear at first glance.
 * 1) The opening span tag .
 * 10) Close inline styling for the text by adding a  after the text you want changed.
 * This coding will increase the size of the font from the default 14 pixels to 20 pixels.
 * NOTE: to change the size of the font, you need to place this CSS coding within the opening tag as shown in the example above.

Try these out
 Exercises
 * Copy the Lorem ipsum sentence on the right into your sandbox, then change the size of the font to 20 pixels: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 * Copy the Lorem ipsum sentence on the right into your sandbox, then change the size of the font to 48 pixels: Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Check your answers

 Quick Quiz
 * How many attributes can you put in the span tag?
 * A. No more than 5
 * B. No more than 8
 * C. No more than 20
 * D. None of the above


 * What symbol do you use to separate a property from a value?
 * A. Colon
 * B. Semi-colon
 * C. Comma
 * D. All of the above

Check your answers

<< Previous Chapter Next Chapter >>