| Introduction |
|
| Introduction to CSS |
|
| Cascading Style Sheets (CSS) is a stylesheet language used to describe the presentation of a document written in a markup language such as HTML, XML, XHTML ect . Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML(markup) document, includingSVG and XUL. World Wide Web Consortium (W3C) maintain the CSS specifications. |
|
| CSS has various levels and profiles. There are multiple levels of CSS, denoted as CSS1, CSS2, and CSS3 is builds upon the last, typically adding new features to existing one. Profiles are typically a subset of one or more levels of CSS built for a particular device or user interface. Currently there are profiles for mobile devices, printers, and television sets. Profiles should not be confused with media types which were added in CSS2. |
|
| What are style sheets? |
| A style sheet is a set of commands, each one of these instructions tells a browser how to draw a particular element on a page. When you are working with CSS, it is very important to grasp this idea of HTML elements. Well-formed HTML documents are a collection of elements arranged in a kind of suppression hierarchy. |
|
|
|
The HTML containment hierarchy
|
|
| Imagining for a moment that the document we want to style is as simple as the one in the image given above, you can use a style sheet to specify the different elements on the page, and then say what styles should be applied to them. Inheritance becomes much easier to understand, once you see the document as a hierarchy like this a very important aspect of CSS. If you apply style to an element which contains other elements then this will be inherited by the elements inside. You might think of them as parent elements and child elements. Child elements are contained by parent elements and inherit all their properties. So taking the example above, if you apply style to the parent, <span> element, the child, <p> (paragraph), will also get this style. But its early days, so don't worry if this doesn't make a lot of sense; you'll see it more clearly when we start putting it into practice. |
|
| We refer the instructions in a style sheet as statements. There are a few different types of statement, but the one you'll use most is referred to as a rule. |
|
| Rules have two parts: |
| selector |
| declaration |
|
| The selector informs a browser which elements in a page will be affected by the formatting rule. There are different types of selector. |
|
| The declaration tells the browser which set of properties to apply or what we want to do or how something should look. There are many different properties. |
|
| Throughout these lessons we'll be investigating some of the different types of selector you can use in style sheets, and various properties that can be applied to elements on a page. |
|
| All these statements are contained in a Cascading Style Sheet. This is nothing more than a text file, with the suffix .css added to the name, something like core-style.css. |
|
| Rules have a very simple form: the selector, followed by the set of properties, which are surrounded by curly braces that is { and }. |
|
span {font-size: 1em}
|
|
|
| selects any <span> elements, and makes their font 1em. You don't have to worry too much about the details of this syntax if you use a CSS Editor which makes sure it all comes out just right. |
|
|
|
|
|
|
| Introduction |
|
| Difference between CSS and HTML |
|
| HTML is used to structure content. CSS is used for formatting structured content. |
|
| Okay, it sounds a bit technical and confusing. But please continue reading. It will all make sense to you soon. |
|
| Back in the good old days Tim Berners Lee invented the World Wide Web (WWW), the language HTML was only used to add structure to text. An author could mark his text by stating "this is a headline" or "this is a paragraph" using HTML tags(elements) such as <h1> and <p>. |
|
| Designers started looking for possibilities to add layout to online documents, as the Web gained popularity. To meet this demand, the browser producers invented new HTML tags such as for example <font> which differed from the original HTML tags by defining layout - and not makeup or structure. |
|
| This also led to a situation where original structure tags such as <table> were increasingly being misused to layout pages instead of adding structure to text. Many new layout tags such as <blink> were only supported by one type of browser. "You need browser X to view this page" became a common disclaimer on web sites. |
|
| To providing web designers with refined layout opportunities supported by all browsers,CSS was invented. site maintenance is made lot easier, by providing separation of the presentation style of documents from the content of documents. |
|
|
| Which benefits will CSS give us? |
|
| CSS was a revolution in the world of web design. The concrete benefits of CSS include: |
- control layout of many documents from one single style sheet;
|
- more precise control of layout;
|
- apply different layout to different media-types (screen, print, etc.);
|
- numerous advanced and sophisticated techniques.
|
|
|
| What can we do with CSS? |
|
CSS is a style language that defines layout of HTML documents. For example, CSS covers fonts, colours, margins, lines, height, width, background images,advanced positions and many other things. Just wait and see! What CSS can do for you?
HTML can be (mis-)used to add layout to websites. But CSS offers more options and is more accurate and sophisticated. CSS is supported by all browsers today. |
|
| After only a few lessons of this tutorial you will be able to make your own style sheets using CSS to give your website a new great look. |
|
|
|
|
|
| Getting Started with CSS |
|
| Basic CSS Syntax |
|
| The basic CSS syntax is made up of following 3 parts: selector {property: value} |
|
| The selector is typically an HTML tag or element such as <p>, <table>, <h1>,<div> etc . |
|
| The following is a CSS code example of an internal style sheet. The selector (the<p> tag in this example) is made bold. |
|
| Many of the properties used in Cascading Style Sheets (CSS) are similar to those of HTML. Thus, if you are used to use HTML for layout, you will most likely identify many of the codes. Let us look at a example. |
|
| Let's say we want a nice green color as the background of a webpage: |
|
| Using HTML we could have done it like this: |
<body bgcolor="#0000FF">
|
|
| With CSS the same result can be achieved like this: |
| body {background-color: #0000FF;} |
|
| As you will note, the codes are more or less identical for HTML and CSS. The above example also shows you the fundamental CSS model: |
|
|
|
|
| But where do you put the CSS code? This is exactly what we will go over now. |
|
|
| Applying CSS to an HTML document |
|
| There are three ways, you can apply CSS to an HTML document. These methods are all outlined below. We recommend that you focus on the third method i.e. external. |
|
| In-line (the attribute style) |
|
| One way to apply CSS to HTML is by using the HTML attribute style. Building on the above example with the green background color, it can be applied like this: |
|
<html>
<head>
<title>Example<title>
</head>
<body style="background-color: #0000FF;">
<p>This is a red page</p>
</body>
</html> |
|
|
| Internal (the tag style) |
|
| Another way is to include the CSS codes using the HTML tag <style>. For example like this: |
|
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<style>
body {
background-color:'#FFCCDD';
}
</style>
</HEAD>
<BODY>
</BODY>
</HTML> |
| Click here to view the output. |
|
|
| External (link to a style sheet) |
| The recommended method is to link to a so-called external style sheet(saved as a .css file) . Throughout this course we will use this method in all our examples. |
|
| An external style sheet is simply a text file with the extension .css. Like any other file, you can place the style sheet on your web server or hard disk. |
|
| For example, let's say that your style sheet is named style.css. The trick is to create a link from the HTML document (say "abc.php") to the style sheet (style.css). Such link can be created with one line of HTML code, using <link> element : |
<link rel="stylesheet" type="text/css" href=" style.css" />
|
|
| Notice how the path to our style sheet is indicated using the attribute href. |
| The line of code must be inserted in the header section (between the <head> and</head> tags) of the HTML code . Like this: |
|
<html>
<head>
<title>My document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
... |
|
This link tells the browser that it should use the layout from the CSS file when displaying the HTML file.
One CSS file can be used to control the layout of many HTML documents.In other words, t he really smart thing is that several HTML documents can be linked to the same style sheet. |
|
|
|
|
| This technique can save you a lot of work. If you, for example, would like to change thetext color of a website with 500 pages, a style sheet can save you from having to manually change all 500 HTML documents. Using CSS, the change can be made in a few seconds just by changing one code in the central style sheet. |
|
|
|
|
|
| Getting Started with CSS |
|
| CSS Comments |
|
| We can insert comments in our CSS much like we can with HTML code. And just as in HTML, the comment will be ignored by the web browser. A CSS comment begins with "/*", and ends with "*/", like the following example. |
|
/* This is a CSS comment */
p
{
font-size: 120%;
/* This is another CSS comment */
color: black;
}
|
|
|
|
|
| Getting Started with CSS |
|
| CSS Identifier |
|
| CSS identifier also known as CSS selectors. Selectors are used to access the CSS styles. They can be very useful sometimes you want to apply a special style to a particular element or a particular group of elements. |
|
| There are three kinds of selectors in CSS: |
- Element or Tag Selector
- Class Selector
- ID selector
|
|
| Element Selector |
| The general syntax for an HTML selector is: |
HTMLSelector {Property:Value;}
|
|
| For example: |
<HTML>
<HEAD>
<style type="text/css">
B{
font-family:arial;
font-size:14px;
color:blue
}
</style>
</HEAD>
<BODY>
<b>This is a customized headline style bold</b>
</BODY>
</HTML>
|
|
| Click here to open a window that shows the result of the above example. |
|
|
| CLASS Selectors |
| HTML selectors are used when you want to redefine the general look for an entireHTML tag. |
|
| The general syntax for a Class selector is: |
| .ClassSelector {Property:Value;} |
|
| For example: |
<HTML>
<HEAD>
<style type="text/css">
.headline {font-family:arial; font-size:14px; color:red}
</style>
</HEAD>
<BODY>
<b class="headline">This is a bold tag carrying the headline class</b>
<br>
<i class="headline">This is an italics tag carrying the headline class</i>
</BODY>
</HTML> |
|
| Click here to open the output window. |
|
| Class selectors are used when you want to define a style that does not redefine anHTML tag entirely. |
|
| When referring to a Class selector you simply add the class to an HTML tag like in the above example (class="headline"). |
|
| SPAN and DIV as carriers |
|
| Two tags are particularly useful in combination with class selectors: <SPAN> and<DIV>. |
|
| Both are "dummy" tags that don't do anything in themselves. Therefore, they are excellent for carrying CSS styles. |
|
| <SPAN> is an "inline-tag" in HTML, meaning that no line breaks are inserted before or after the use of it. |
|
| <DIV> is a "block tag", meaning that line breaks are automatically inserted to distance the block from the surrounding content (like <P> or <TABLE> tags). |
|
| <DIV> has a particular importance for layers. Since layers are separate blocks of information. <DIV> is an obvious choice when defining layers on your pages. |
|
|
| ID selector |
In addition to grouping elements, you might need to identify one unique element. This is done by using the attribute id.
Each id has to be unique. There can not be two elements in the same document with the same id, which is special about the attribute id. In other cases, you should use the class attribute instead. Now, let us take a look at an example of a possible usage of id: |
|
| The general syntax for an ID selector is: |
| #IDSelector {Property:Value;} |
|
| For example: |
<HTML>
<HEAD>
<style type="text/css">
#layer1
{
position:absolute;
left:100;
top:100;
z-Index:1;
background-color:cyan
}
#layer2 {
position:absolute;
left:140;
top:130;
z-Index:0;
background-color:pink
}
</style>
</HEAD>
<BODY>
<div ID="layer1">
THIS IS LAYER 1<br>POSITIONED AT 100,100
</div>
<div ID="layer2">
THIS IS LAYER 2<br>POSITIONED AT 140,130
</div>
</BODY>
</HTML> |
|
| Click here to view the output of the above HTML. |
|
| ID selectors are used when you want to define a style relating to an object with aunique ID. |
|
| This selector is most widely used with layers (as in the above example), sincelayers are always defined with a unique ID. |
|
|
|
|
|
| Getting Started with CSS |
|
|
| Colors and Backgrounds |
|
| CSS background properties allow you to specify things such as: |
- The background color of a web page(s), table(s), paragraph(s), etc
- The background image for a web page(s), table(s), paragraph(s), etc
- The position of the background image.
- It allows an image to scroll with a web page, or to fix the position on the screen.
- It allows you to control whether the image repeats itself or not.
- It allows you to control how image will repeat itself.
|
|
|
| Setting Background Colors |
|
| The background color property allows you to set the background color of an HTML element. |
| The following CSS code example shows how to set the background property of a paragraph in an internal style sheet. |
|
<html>
<head>
<style type="text/css">
p
{
background-color: cyan
}
</style>
</head>
<body>
<p>
This paragraph will have a cyan background
</p>
</body>
</html> |
|
| Click here to view the web page the above code produces. |
|
<html>
<head>
<style type="text/css">
body
{
background-color: cyan
}
</style>
</head>
<body>
<p>
This web page will have a cyan background
</p>
</body>
</html> |
|
| Click here to view the web page the above code produces. |
|
|
| Setting an Image as a Background |
|
| With the help of following CSS code, we will show you how to insert an image as a background. Scroll up and down the web page and notice how the image scrolls with the web page. By default, the page background image will scroll with the page. |
|
<html>
<head>
<style type="text/css">
{
background-image: url('image.gif')
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> |
|
| Click here to view the web page the above code produces. |
|
| Creating a Fixed Background Image |
|
| A fixed background image can be created using the background-attachment: fixed property. The property allows the image to stay in the same place on the screen while the web page scrolls. |
|
<html>
<head>
<style type="text/css">
{
background-image: url(‘img.gif');
background-attachment: fixed
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> |
|
| Click here to view the web page the above code produces. |
|
| Controlling the Background Tiling Effect |
|
| The tiling effect of the background image can be controled with the use of thebackground-attachment: fixed property. The following CSS examples show you how to control the various tiling effects with the respective background repeat properties. |
|
| The CSS code {background-repeat: repeat} will tile the image both horizontally and vertically. This is the default setting. |
|
<html>
<head>
<style type="text/css">
{
background-image: url('image.jpg');
background-repeat: repeat
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> |
|
| Click on CSS Example to view what this code produces. |
|
| You can tile the image in the horizontal direction only if you like. |
|
<html>
<head>
<style type="text/css">
{
background-image: url('image.jpg');
background-repeat: repeat-x
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> |
|
| Click on CSS Example to view what this code produces. |
|
| You can tile an image in the vertical direction only. |
|
<html>
<head>
<style type="text/css">
{
background-image: url('image.jpg');
background-repeat: repeat-y
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> |
|
| Click on CSS Example to view what this code produces. |
|
| You can have a background image appear only once. |
|
<html>
<head>
<style type="text/css">
{
background-image: url('image.jpg');
background-repeat: no-repeat
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> |
|
| Click on CSS Example to view what this code produces. |
|
|
| Positioning a Background Image |
|
| CSS allows you to control precisely where you will place a background image (background positioning) within an HTML element by using the background-position property. |
|
| The CSS code background-position: x% y% (position from left and toprespectively ) allows you to place the background image x% (x percentage) across the web page and y% (y percentage) down the web page. Giving it values of "0 0" will place the background image in the top left hand corner. |
|
<html>
<head>
<style type="text/css">
{
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: 50% 50%
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> |
|
| Click on CSS Example to view what this code produces. |
|
The CSS code
{background-position: x y}
allows you to place a background image x units across the web page and y unitsdown the web page. Where "x" and "y" represent any unit you specify. |
<html>
<head>
<style type="text/css">
{
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: 50px 200px
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> |
|
| Click on CSS Example to view what this code produces. |
|
| CSS allows you to easily position a background image using various combinations of the following words: top left, top center, top right, center left, center center,center right, bottom left, bottom center and bottom right. |
|
<html>
<head>
<style type="text/css">
{
background-image: url('image.jpg');
background-repeat: no-repeat;
background-position: bottom right
}
</style>
</head>
<body>
<p>
a CSS example of a background image
</p>
</body>
</html> |
|
| Click here to view the web page the above code produces. |
|
|
|
|
|
| Getting Started with CSS |
|
|
| Cascading |
|
|
| What is Cascading? |
| Cascading is like a waterfall. You start at the top. As you go down, there are different levels. |
|
| There are 3 "levels" of CSS commands: |
- On the same page within an HTML tag as a property.
- On the same page in the <HEAD> ... </HEAD> area.
- On a separate page.
|
|
| Choosing the one or combination of all is your choice. Everybody has an option on how they want to set up their page or site. |
|
| The CASCADING part of CSS determines the importance of a command tag. If you have a tag for the same property on all 3 levels, but each one has a different value assigned to it, the CSS will take and use the most important out of them. Level 1 willover-ride Level 2 which will over-ride Level 3. |
|
|
| External |
|
| Having written all CSS commands on a separate page is best suited for a multiple page site owner. Multiple pages are able to utilize the same commands in a single area. These pages are called "linked" or external CSS. For time, it saves from typing in all the commands on each individual page. For space, it takes less space since more than one page is using the same page reference. For editing, one change on the master CSS page will affect all pages connected to it, instantly. For maintenance, such sites are easy to modify and maintain since when we edit the master CSS, the effects are shown on all related pages. |
|
| CSS pages have a file extension of .css which is allowed on most, if not all, main homepage servers. Create and save the document in text-only format then give the document the .css extension. |
|
| An external page is usually used for a "general"or "common" style layout. Setting the background color or image, setting the text colors, etc. |
|
| To link to the external style sheet, a LINK must be placed in the HEAD area of the page code. That is anywhere after the <HEAD> tag and before the </HEAD> tag. |
|
| <link rel="stylesheet" type="text/css" href="FileName.css"> |
|
| LINK | There is a separate page of command tags linked to use on this page. |
| REL | The linked page is a STYLESHEET. |
| TYPE | The linked page is text format containing CSS commands. |
| HREF | The filename (and location or sub-directoriesif necessary) of the linked page. |
|
|
| External CSS pages do not use any foundation tags. Just the actual CSS commands are listed. |
|
|
| Embedded |
|
| The HEAD area, is also used to store CSS commands. These are called embedded CSS. Embedded commands are more specific to the page. Any embedded CSS command will over-ride an external CSS command of the same tag. |
|
| Embedded CSS codes are placed within the HEAD area of the page code. That is anywhere after the <HEAD> tag and before the </HEAD> tag. NOT in the HEAD tagitself. |
|
<style type="text/css">
<!--
... style sheet codes here ...
-->
</style> |
|
|
| Most examples shown in the following CSS tutorial pages will be using the EMBEDDED style. |
|
|
| Inline |
|
| Inline CSS are the most dominant type of CSS commands. They will over-ride any others before them. Style commands are actually placed within any regular HTML tagin the BODY area. |
<tag style=" CSS code ">
... text or object ...
</tag> |
|
|
|
|
|
| Formating HTML with CSS |
|
|
| CSS Text |
|
| Key issue for any web designers are: formatting and adding style to text . Now you will be introduced to the amazing opportunities CSS gives you to add layout to text. The following properties will be described in this section: |
- text-indent
- text-align
- text-decoration
- letter-spacing
- text-transform
|
|
|
| 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 110px is applied to all text paragraphs marked with <p>: |
|
p
{
text-indent: 110px;
} |
|
| Click on example to view the page produced by above code. |
|
|
| Text alignment [text-align] |
|
| The CSS property text-align corresponds to the attribute align used in old versions ofHTML. Text can be aligned either 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 for example newspapers and magazines. |
|
p
{
text-align: justify;
} |
|
| Click on example to view the page produced by above code. |
|
|
| Text decoration [text-decoration] |
|
|
| With the help of property text-decoration it is possible to add different "effects" or"decorations" 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. |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CSS Text example</TITLE>
<style>
body
{
background-image: url('img.gif');
background-repeat: no-repeat;
background-position: bottom left
}
h1
{
text-decoration: underline;
}
h2
{
text-decoration: overline;
}
h3
{
text-decoration: line-through;
}
</style>
</HEAD>
<BODY>
<P>
a CSS Text example [text-decoration]
</p>
<h1>Text Decoration underline</h1>
<h2>Text Decoration overline</h2>
<h3>Text Decoration line-through </h3>
</BODY>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
|
| Letter space [letter-spacing] |
|
| The property letter-spacing can be used to specifiy spacing between text characters . 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. |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CSS Text example</TITLE>
<style>
body
{
background-image: url('img.gif');
background-repeat: no-repeat;
background-position: bottom left
}
h1
{
letter-spacing: 6px;
}
p
{
letter-spacing: 3px;
}
</style>
</HEAD>
<BODY>
<h1>CSS Text example</h1>
<P>
a CSS Text example [letter-spacing]
</p>
</BODY>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
|
| Text transformation [text-transform] |
|
| The capitalization of a text can be controled by using the text-transform property. 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: "Aman tiwari" will be "Aman Tiwari". |
|
| uppercase |
| Converts all letters to uppercase. For example: "Ravish tiwari" will be "RAVISH TIWARI". |
|
| lowercase |
| Converts all letters to lowercase. For example: "VISHWAJIT TIWARI" will be"vishwajit tiwari". |
|
| 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 capitalized and headlines to be presented in uppercase letters. |
|
| Try to take a look at the HTML code for this example and you will see that the text actually is in lowercase. |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CSS Text example</TITLE>
<style>
body
{
background-image: url('img.gif');
background-repeat: no-repeat;
background-position: bottom left
}
h1
{
text-transform: uppercase;
}
p
{
text-transform: capitalize;
}
</style>
</HEAD>
<BODY>
<h1>CSS Text example</h1>
<P>
a CSS Text example [text-transform]
</p>
</BODY>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
|
| Text Properties |
|
| Property | Values | NS | IE | Example |
| line-height | normal
number
length
percentage | 4W
4+
4+
4+ | 4+
4P
4+
4P | line-height:normal
line-height:1.5
line-height:21px
line-height:110% |
text-decoration
| none
underline
overline
line-through
blink | 4+
4+
4+
4+ | 4M
4+
4W
4+ | text-decoration:none
text-decoration:underline
text-decoration:overline
text-decoration:line-through
text-decoration:blink |
| text-transform | none
capitalize
uppercase
lowercase | 4+
4+
4+
4+ | 4W
4W
4W
4W | text-transform:none
text-transform:capitalize
text-transform:uppercase
text-transform:lowercase |
| text-align | left
right
center
justify | 4+
4+
4+
4+ | 4+
4+
4+
4W | text-align:left
text-align:right
text-align:center
text-align:justify |
| text-indent | length
percentage | 4+
4+ | 4+
4+ | text-indent:21px;
text-indent:11% |
| white-space | normal
pre | 4+
4+ | | white-space:normal
white-space:pre |
|
|
|
|
|
|
| Formating HTML with CSS |
|
|
| CSS Font |
|
| So, why should we specify font of pages using CSS? |
|
| CSS saves time and makes your life easier. One of the major advantages of using CSS to specify fonts is that at any given time, you can change font on an entire website in just a few minutes. Just change the master css and changes will be reflected in all linked pages instantly. We will also look at how to work around the issue that specific fontschosen for a website can only be seen if the font is installed on the PC used to access the website. |
|
| The following CSS properties will be described: |
- font-family
- font-style
- font-variant
- font-weight
- font-size
- font
|
|
|
| Font family [font-family] |
|
| With the help of property font-family we can 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: |
|
|
|
|
| Whenever you list fonts for your web site, you naturally start with the most favorite font followed by some alternative fonts. It is recommended to complete the list with a generic font family. That way at least the page will be shown using a font of the same family if none of the specified fonts are available. |
|
| An example of a prioritized list of fonts could look like this: |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CSS Font example</TITLE>
<style>
body
{
background-image: url('img.gif');
background-repeat: no-repeat;
background-position: bottom left
}
h1
{
font-family: arial, verdana, sans-serif;
}
h2
{
font-family: "Times New Roman", serif;
}
</style>
</HEAD>
<BODY>
<h1>CSS Font example</h1>
<h2>
a CSS font example [font-family]
</h2>
</BODY>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
|
| Headlines marked with <h1> will be displayed using the font "Arial". If this font is not installed on the user's computer, "Verdana" will be used instead. If both these fonts are unavailable, a font from the sans-serif family will be used to show the headlines. |
|
| Notice how the font name "Times New Roman" contains spaces and therefore is listed using quotation marks. |
|
|
| Font style [font-style] |
|
| The property font-style defines the chosen font either in normal, italic or oblique. In the example below, all headlines marked with <h2> will be shown in italics. |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CSS Font example</TITLE>
<style>
body
{
background-image: url('img.gif');
background-repeat: no-repeat;
background-position: bottom left
}
h1
{
font-family: arial, verdana, sans-serif;
}
h2
{
font-family: "Times New Roman", serif;
font-style: italic;
}
</style>
</HEAD>
<BODY>
<h1>CSS Font example</h1>
<h2>
a CSS font example [font-style]
</h2>
</BODY>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
|
| Font variant [font-variant] |
|
| The property font-variant is used to choose between normal or small-caps variants of a font. A small-caps font is a font that uses smaller sized capitalized letters (upper case) instead of lower case letters. Confused? Take a look at these examples: |
|
|
|
|
| If font-variant is set to small-caps and no small-caps font is available the browser will most likely show the text in uppercase instead. |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CSS Font example</TITLE>
<style>
body
{
background-image: url('img.gif');
background-repeat: no-repeat;
background-position: bottom left
}
h1
{
font-variant: small-caps;
}
h2
{
font-variant: normal;
}
</style>
</HEAD>
<BODY>
<h1>CSS Font Style example</h1>
<h2>
a CSS font example [font-style]
</h2>
</BODY>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
|
| Font weight [font-weight] |
|
| The property font-weight describes how "heavy" or bold a font should be presented. A font can either be normal or bold. Some browsers even support the use of numbers between 100-900 (in hundreds) to describe the weight of a font. |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CSS Font example</TITLE>
<style>
body
{
background-image: url('img.gif');
background-repeat: no-repeat;
background-position: bottom left
}
h1
{
font-variant: small-caps;
}
h2
{
font-variant: normal;
}
p {font-family: arial, verdana, sans-serif; font-weight: bold;}
</style>
</HEAD>
<BODY>
<h1>CSS Font Style example</h1>
<h2>
a CSS font example [font-weight]
</h2>
<p> Font Weight example</p>
</BODY>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
|
| Font size [font-size] |
|
| The size of a font is set by the property font-size. |
| There are many different units (e.g. pixels and percentages) to choose from to describe font sizes. In this tutorial we will focus on the most common and appropriate units. Examples include: |
|
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;} |
|
| Click on example to view the page produced by above code. |
|
| There is one key difference between the four units above. The units 'px' and 'pt' make the font size absolute, while '%' and 'em' allow the user to adjust the font size as he/she see fit.To make your website accessible for everybody, you should use adjustable units such as '%' or 'em'. Many users are disabled, elderly or simply suffer from poor vision or a monitor of bad quality. |
| Below you can see an illustration of how to adjust the text size in Mozilla Firefox andInternet Explorer. Try it yourself - neat feature, don't you think? |
|
|
|
|
|
| Compiling [font] |
|
| Using the font short hand property it is possible to cover all the different font properties in one single property. |
|
| For example, imagine these four lines of code used to describe font-properties for <p>: |
p
{
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
} |
|
| Using the short hand property, the code can be simplified: |
p
{
font: italic bold 30px arial, sans-serif;
} |
|
| The order of values for font is |
| font-style | font-variant | font-weight | font-size | font-family |
|
|
|
|
|
| Formating HTML with CSS |
|
|
| CSS Links |
|
With CSS you can add effects to hyperlinks. If you do not use CSS, the only alternative way to add effects to hyperlinks would be to use JavaScript.
A hyperlink has four states that it can be in. CSS allows you to customize each state that it is in. It is also necessary to write the code in the order in which they appear for the link(s) to work properly. |
|
a:link {color: #000000}
defines an unvisited link
a:visited {color: #000000}
defines a visited link
a:hover {color: #000000}
defines a mouse over link
a:active {color: #000000}
defines a selected link |
|
| Some things to note and remember: |
| a:hover has to come after a:link and a:visited in the CSS definition in order to work as it should |
|
| a:active has to come after a:hover in the CSS definition in order to work as it should. |
|
|
| Pseudo-class names are case-insensitive. |
|
| Adding Colors to Links |
| The following CSS code example shows how to add different colors to a hyperlink. |
|
<html>
<head>
<style type="text/css">
a:link {color: #FF0000}
a:visited {color: purple}
a:hover {color: blue}
a:active {color: #000000}
</style>
</head>
<body>
<p>
<a href="examplelink.php">This is a link</a>
</p>
</body>
</html> |
|
| Click on example to view the page produced by above code. |
|
|
| Remove underline of links |
|
| A frequently asked question is how to remove the underlining of links? |
| People are used to blue underlined links on web pages and know that they can click on them. So, you should consider carefully whether it is necessary to remove the underlining as it might decrease usability of your website significantly. Even my granny 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. |
|
| That said, it is very simple to remove the underlining of links. To determine whether text is underlined or not, the property text-decoration can be used . 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 fourpseudo-classes. |
|
<html>
<head>
<title>CSS Link Example</title>
<style type="text/css">
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
}
</style>
</head>
<body>
<p>
<a href="#">This is a link</a>
</p>
</body>
</html> |
|
| Click on example to view the page produced by above code. |
|
|
| UPPERCASE and lowercase |
|
| Property text-transform, which can switch between upper- and lowercase letters. This can also be used to create an effect for links: |
|
<html>
<head>
<title>CSS Link Example</title>
<style type="text/css">
a:link {
color: blue;
text-decoration:none;
}
a:visited {
color: purple;
text-decoration:none;
}
a:active {
background-color: yellow;
text-decoration:none;
}
a:hover {
color:red;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
background-color:pink
}
</style>
</head>
<body>
<p>
<a href="#">This is a link 1</a> <br />
<a href="#">This is a link 1</a> <br />
<a href="#">This is a link 1</a> <br />
<a href="#">This is a link 1</a> <br />
</p>
</body>
</html> |
|
| Click on example to view the page produced by above code. |
|
| The two examples gives you an idea about the almost endless possibilities for combining different properties. You can create your own effects - give it a try! |
|
|
|
|
|
| Formating HTML with CSS |
|
|
| CSS Padding |
|
| Padding can also be understood as "filling". It's like internal spacing. This makes sense as padding does not affect the distance of the element to other elements but only defines the inner distance between the border and the content of the element. |
|
| All the padding (left, right, bottom, left) can be combined using this single tag. |
| Usage: |
padding: 20px;
padding: 10px 20px 30px 10px;
padding: 10px 20px;
padding: 20px 10px 30px; |
|
|
| Definition: |
| The padding can be set using the tag "padding". |
| It takes the following values: |
| a)20px : This will set a padding of 20px on the four sides (top, right, bottom, left). |
|
| b)10px 20px 30px 10px: This format will set the padding in the order oftop,right,bottom,left. |
|
| c)10px 20px : This format will set the padding for top and right. Bottom will take the top padding value (10px) and left will take right paddings value(20px). |
|
| d)20px 10px 30px: This format will set the padding for top and right and bottom. left will take the right paddings value. |
|
| The values can be in percentage or points or pixels. |
| By defining padding for the headlines, you change how much filling there will be around the text in each headline: |
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CSS Padding example</TITLE>
<style>
h1
{
background: pink;
padding: 20px 20px 20px 80px;
}
h2
{
background: cyan;
padding-left:120px;
}
</style>
</HEAD>
<BODY>
<h1>CSS Font Size example</h1>
<h2>
a CSS Padding example
</h2>
<p>CSS padding example</p>
</BODY>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
| Example 1: |
<div align=right style="padding: 22px;">
Here we have set a padding of 22 pixels.
You can see that this paragraph has paddings on all the four sides.
</div> |
|
| Example 2: |
<div style="padding: 10px 50px 30px 5px;">
Here we have set a padding with four values.
You can see that this paragraph has padding of 10px on top, 50px on right, 30px on bottom and 5px on left.
</div> |
|
| Example 3: |
<div style="padding: 22px 30px;">
Here we have set a padding with two values.
You can see that this paragraph has paddings on 22px on top and bottom and 30px on left and right.
</div> |
|
| Example 4: |
<div style="padding: 10px 50px 40px;">
Here we have set a padding with three values.
You can see that this paragraph has paddings of 10px on top, 50px on right , 40px on bottom. left padding took values from its right counter part as 50px.
</div> |
|
| Property | Description | Values | IE | F | N |
| padding | A shorthand property for setting all of the padding properties in one declaration | padding-top
padding-right
padding-bottom
padding-left | 4 | 1 | 4 |
| padding-bottom | Sets the bottom padding of an element | length
% | 4 | 1 | 4 |
| padding-left | Sets the left padding of an element | length
% | 4 | 1 | 4 |
| padding-right | Sets the right padding of an element | length
% | 4 | 1 | 4 |
| padding-top | Sets the top padding of an element | length
% | 4 | 1 | 4 |
|
|
|
|
|
|
| Formating HTML with CSS |
|
|
| Margins |
|
| The CSS margin properties define the space around elements. It’s opposite to padding. Negative values can also be used to overlap content. A shorthand margin property can be used to change all of the margins at once. The top, right, bottom, and left margin can be changed independently using separate properties. |
|
| Note: |
| Netscape and IE give the body tag a default margin of 8px. On the otherhand Operadoes not give any such margin! Instead, Opera applies a default padding of 8px, so if one wants to adjust the margin for an entire page and have it display correctly inOpera, the body padding must be set as well! |
|
| 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: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>CSS Padding example</TITLE>
<style>
body
{
margin-top: 120px;
margin-right: 30px;
margin-bottom: 100px;
margin-left: 80px;
}
</style>
</HEAD>
<BODY>
<h2>CSS Margin example</h2>
</BODY>
</HTML> |
|
| Click on example to view the page produced by above code. |
|
| Or you could choose a more elegant compilation: |
body
{
margin: 100px 40px 10px 70px;
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
0 comments: