Help:Wiki University Wikitext--Inline Styling
- Nesting Lists
- Broken Links
- Image Embedding
- Image Tooltips & Borders
- Image Links
- Images & Text; Embedding PDF
- Snipping Tool & Paint
- Inline Styling
- Changing Fonts
- Font Colors
- Font Bold-Italics
- Div Tag - Intro
- Width and Height
- Alignment - Horizontal
- Breadcrumb Trails
Inline styling[edit | edit source]
- 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.
Applying CSS coding[edit | edit source]
- To apply CSS to Wikitext, we use "inline styling" coding.
Examples of Inline styling[edit | edit source]
- Here is an example of an inline style applied to some Lorum ipsum text.
- This example is for changing the size of the font using our paragraph 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.
- The opening paragraph tag <p
- Space after the <p.
- Next the word style.
- Followed by an equal sign =.
- Then a quotation mark ".
- The item to be changed or property: in this case font-size.
- A colon : .
- The change we want to make to the property or what value we want to give to the property. In this case we want to increase the size of the font to 20 pixels.
- Add another quotation mark " followed by an angle bracket >.
- This coding will increase the size of the font from the default 14 pixels to 20 pixels.
- Again, to change the size of the font, you need to place this CSS coding within the opening <p> tag as shown in the sample below.
|Be sure all these symbols and parts of the coding are present. Your code will not execute even if one itty bitty, little symbol is missing. There is no forgiveness in this life or the next for a computer! They do not read minds and only process what you enter. Leaving out a colon, a quotation mark, etc will cause the browser to give you who knows what.|
Attributes[edit | edit source]
- 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:
eyecolor:blue or hair:none or height:six feet If any of these three attributes were put in a <human> tag, the coding would look like this:
- <human style="eyecolor:blue">
- <human style="hair:none">
- <human style="height:six feet">
We will be referring to the combination of property and value as attributes from now on.
- 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.
Try these out[edit | edit source]
- Just in case you are wondering there is no tag labeled "human"