Visionedix

Text transformation [text-transform] The   text-transform   property controls the capitalization of a text. You can choose to   capitalize , use   uppercase   or   lowercase   regardless of how the original text is looks in the HTML code. An example could be the word "headline" which can be presented to the user as "HEADLINE" or "Headline". There are four possible values for text-transform: capitalize Capitalizes the first letter of each word. For example: "john doe" will be "John Doe". uppercase Converts all letters to uppercase. For example: "john doe" will be "JOHN DOE". lowercase Converts all letters to lowercase. For example: "JOHN DOE" will be "john doe". none No transformations - the text is presented as it appears in the HTML code. As an example, we will use a list of names. The names are all marked with   <li>   (list-item). Let's say that we want names to be

Font family [font-family] The property   font-family   is used to set a prioritized list of fonts to be used to display a given element or web page. If the first font on the list is not installed on the computer used to access the site, the next font on the list will be tried until a suitable font is found. There are two types of names used to categorize fonts: family-names and generic families. The two terms are explained below. Family-name Examples of a family-name (often known as "font") can e.g. be "Arial", "Times New Roman" or "Tahoma". Generic family Generic families can best be described as groups of family-names with uniformed appearances. An example is sans-serif, which is a collection of fonts without "feet". The difference can also be illustrated like this: When you list fonts for your web site, you naturally start with the most preferred font followed by some alternative fonts. It is recommended to complete

Text decoration [text-decoration] The property   text-decoration   makes it is possible to add different "decorations" or "effects" to text. For example, you can underline the text, have a line through or above the text, etc. In the following example,   <h1>   are underlined headlines,   <h2> are headlines with a line above the text and   <h3>   are headlines with a line though the text. h1 { text-decoration: underline ; } h2 { text-decoration: overline ; } h3 { text-decoration: line-through ; }

Letter space [letter-spacing] The spacing between text characters can be specified using the property   letter-spacing . The value of the property is simply the desired width. For example, if you want a spacing of   3px   between the letters in a text paragraph   <p>   and   6px   between letters in headlines   <h1>   the code below could be used. h1 { letter-spacing: 6px; } p { letter-spacing: 3px; }

Text indention [text-indent] The property   text-indent   allows you to add an elegant touch to text paragraphs by applying an indent to the first line of the paragraph. In the example below a   30px   is applied to all text paragraphs marked with   <p> : p { text-indent: 30px; }

Text alignment [text-align] The CSS property   text-align   corresponds to the attribute align used in old versions of HTML. Text can either be aligned to the   left , to the   right   or   centred . In addition to this, the value   justify   will stretch each line so that both the right and left margins are straight. You know this layout from for example newspapers and magazines. In the example below the text in table headings   <th>   is aligned to the right while the table data   <td>   are centred. In addition, normal text paragraphs are justified: th { text-align: right; } td { text-align: center; } p { text-align: justify; }

Remove underline of links A frequently asked question is how to remove the underlining of links? You should consider carefully whether it is necessary to remove the underlining as it might decrease usability of your website  significantly.   People are used to blue underlined links on web pages and know that they can click on them. Even my mum knows that! If you change the underlining and color of links there is a good chance that users will get confused and therefore not get the full benefit of the content on your website. the property   text-decoration   can be used to determine whether text is underlined or not. To remove underlining, simply set the value of   text-decoration   to none. a { text-decoration:none; } Alternatively, you can set   text-decoration   along with other properties for all four pseudo-classes. a:link { color: blue; text-decoration:none; } a:visited { color: purple; text-decoration:none; } a:active { bac

UPPERCASE and lowercase the property   text-transform , which can switch between upper- and lowercase letters. This can also be used to create an effect for links: a:hover { text-transform: uppercase; font-weight:bold; color:blue; background-color:yellow; }

You can apply what you already learned in the previous lessons to links (i.e. change colors, fonts, underline, etc). The new thing is that CSS allows you to define these properties differently depending on whether the link is unvisited, visited, active, or whether the cursor is on the link. This makes it possible to add fancy and useful effects to your website. To control these effects you use so-called pseudo-classes. What is a pseudo-class? A pseudo-class allows you to take into account different conditions or events when defining a property for an HTML tag. Let's look at an example. As you know, links are specified in HTML with   <a>   tags. We can therefore use   a   as a selector in CSS: a { color: blue; } A link can have different states. For example, it can be visited or not visited. You can use pseudo-classes to assign different styles to visited and unvisited links. a:link { color: blue; } a:visited { color: red; } Use  

Sometimes you want to apply a special style to a particular element or a particular group of elements. In this lesson, we will take a closer look at how you can use   class   and   id   to specify properties for selected elements. How can you color one particular headline differently than the other headlines on your website? How can you group your links into different categories and give each category a special style? These are just examples of questions we will answer in this lesson. Grouping elements with class Let's say that we have two lists of links of different grapes used for white wine and red wine. The HTML code could look like this: <p>Grapes for white wine:</p> <ul> <li><a href="ri.htm">Riesling</a></li> <li><a href="ch.htm">Chardonnay</a></li> <li><a href="pb.htm">Pinot Blanc</a></li> </ul> <p>Grapes for red wine:</p&

The elements <span> and <div> are used to group and structure a document and will often be used together with the attributes class and id. In this lesson, we will take a closer look at the use of <span> and <div> as exactly these two HTML elements are of central importance with regards to CSS. Grouping with   <span> Grouping with   <div> Grouping with <span> The element   <span>   is what you could call a neutral element which does not add anything to the document itself. But with CSS,   <span>   can be used to add visual features to specific parts of text in your documents. An example of this could be this Benjamin Franklin quotation: <p>Early to bed and early to rise makes a man healthy, wealthy and wise.</p> Lets us say we want what Mr. Franklin sees as the benefits of not sleeping your day away emphasized in red. For that purpose, we can mark the benefits with   <span> . Each   span  

The box model in CSS describes the boxes which are being generated for HTML-elements. The box model also contains detailed options regarding adjusting margin, border, padding and content for each element. The diagram below shows how the box model is constructed: The box model in CSS   The illustration above might seem pretty theoretical to look at, so let's try to use the model in an actual case with a headline and some text. The HTML for our example is (from the Universal Declaration of Human Rights): <h1>Article 1:</h1> <p>All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood</p> Even though it may look a bit complicated, the illustration shows how each HTML-element is surrounded by boxes. Boxes which we can adjust using CSS.

Set the margin in an element An element has four sides: right, left, top and bottom. The   margin   is the distance from each side to the neighboring element (or the borders of the document). As the first example, we will look at how you define margins for the document itself i.e. for the element   <body> . The illustration below shows how we want the margins in our pages to be. The CSS code for this would look as follow: body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; } Or you could choose a more elegant compilation: body { margin: 100px 40px 10px 70px; } You can set the margins in the same way on almost every element. For example, we can choose to define margins for all of our text paragraphs marked with   <p> : body { margin: 100px 40px 10px 70px; } p { margin: 5px 50px 5px 50px; }   Set padding in an element Padding can also be understood as "filling". This

Borders can be used for many things, for example as a decorative element or to underline a separation of two things. CSS gives you endless options when using borders in your pages. border-width border-color border-style border The width of borders [border-width] The width of borders is defined by the property   border-width , which can obtain the values thin, medium, and thick, or a numeric value, indicated in pixels.  The color of borders [border-color]   The property border-color defines which color the border has. The values are the normal color-values for example "#123456", "rgb(123,123,123)" or "yellow" . Types of borders [border-style] There are different types of borders to choose from. Below are shown 8 different types of borders as Internet Explorer 5.5 interprets them. All examples are shown with the color "gold" and the thickness "thick" but can naturally be shown in other colors and thicknesses.