Online Taleem

All Education of Pakistani colleges, schools, universities, foreign study, scholarships, results, admissions and courses. Intermediate English Notes, Good-bye Mr. Chips, Online Taleem, Taleem Microsoft, Management Sciences, Computer Sciences Free tutorials, C++ Library, MS Access, Internet of Things, Rural Marketing, Angular2, Framework7, Firebase, Design Thinking, Internet Security, Excel Charts, Computer Security, Conversion Rate Optimization, Business Law, Laravel, SQL Server, Windows10

Showing posts with label CSS. Show all posts

Sunday, May 1, 2011

CSS Font - VII

CSS font properties enable you to change the look of your text. For example, you can assign a font family, apply bold or italic formatting, change the size and more.

CSS Font Family

<p style="font-family:georgia,garamond,serif;">This text is rendered in either georgia, garamond, or the default serif font (depending on which font the user's system has).</p>

This results in:

This text is rendered in either georgia, garamond, or the default serif font (depending on which font the user's system has).

CSS Font Size

Enables you to set the size of the text. For info on the possible values, see the CSS font-size page.

This text is using a font size of 20 pixels.

This results in:

This text is using a font size of 20 pixels.

CSS Font Size Adjust

This property enables you to adjust the x-height to make fonts more legible. For more info, see the font-size-adjust page.

This text is using a font-size-adjust value.

This results in:

This text is using a font-size-adjust value.

CSS Font Stretch

This property relies on the user's computer to have an expanded or condensed version of the font being used. For all possible values, see the font-stretch page.

<p style="font-stretch:ultra-expanded;">If your computer has an expanded version of the font being used, this text will be stretched.</p>

This results in:

If your computer has an expanded version of the font being used, this text will be stretched.

CSS Font Style

This text is in italics.

This results in:

This text is in italics.

CSS Font Variant

Enables you to set your text to use small caps.

This Text Is Using Small Caps.

This results in:

This Text Is Using Small Caps.

CSS Font Weight

Enables you to set your text to bold.

This text is bold.

This results in:

This text is bold.

CSS Font Property

The font property is a shorthand property that enables you to set all font properties in one go.

<p style="font:italic small-caps bold 20px georgia,garamond,serif;">The styles for this text has been specified with the 'font' shorthand property.</p>

This results in:

The styles for this text has been specified with the 'font' shorthand property.

CSS id - VI

IDs allow you to assign a unique identifier to an HTML element. This allows you to define a style that can only be used by the element you assign the ID to.

CSS ID Syntax

The syntax for declaring a CSS ID is the same as for classes - except that instead of using a dot, you use a hash (#).

#id-name { property:value; }

Again, similar to classes, if you want to use the same id name for multiple elements, but each with a different style, you can prefix the hash with the HTML element name.

html-element-name#id-name { property:value; }

CSS ID Example

<head>
<style type="text/css">
h1#css-section { color:#000099 }
p#css-section { color:#999999; }
</style>
</head>
<body>
<h1 id="css-section">CSS ID</h1>
<p id="css-section">CSS IDs can be very useful</p>
</body>

This results in:

CSS ID

CSS IDs can be very useful

IDs vs Classes

Given classes and IDs are very similar, you may be wondering which one to use. This depends on the situation.

When to use classes

You should use classes when your style needs to be applied multiple times on the same page. For example, you might have manyh1 elements that need the same style applied.

When to use IDs

You should use IDs if only one element on the page should have the style applied, and/or you need a unique identifier for that element. For example, you might assign an ID to a div tag which contains your left menu. The styles for this ID could contain the position, background-color, float properties, size etc. You probably wouldn't want any other element on the page to use this particular style.
Another useful thing about IDs is that you can use the Document Object Model (DOM) to refer to them. This enables you to use JavaScript/DHTML techniques to build a much more interactive web site.

CSS Class - V

A few lessons ago, we learned about selectors. You may recall that selectors are the things we apply a style against. In our examples, our selectors were all HTML elements. For example, we decided to make the h1 element blue.
Now, that works well if you want all headings to be blue. But what if you only want some of your headings to be blue? Perhaps you want the color of your headings to reflect the section of the site that you're in.
Sounds like you need to use classes!
In CSS, classes allow you to apply a style to a given class of an element. To do this, you link the element to the style by declaring a style for the class, then assigning that class to the element.

CSS Class Syntax

You declare a CSS class by using a dot (.) followed by the class name. You make up the class name yourself. After the class name you simply enter the properties/values that you want to assign to your class.

.class-name { property:value; }

If you want to use the same class name for multiple elements, but each with a different style, you can prefix the dot with the HTML element name.

html-element-name.class-name { property:value; }

CSS Class Example

<head>
<style type="text/css">
h1.css-section { color:#000099 }
p.css-section { color:#999999; }
</style>
</head>
<body>
<h1 class="css-section">CSS Class</h1>
<p class="css-section">CSS classes can be very useful</p>
</body>

This results in:

CSS Class

CSS classes can be very useful

Cascading Rules of Classes

If you have already applied a style to an element, the element will first use those styles, then the ones defined in the class.

Saturday, April 30, 2011

Implementing CSS - IV

There are 4 ways of implementing CSS: declare inline, embed into the head of your document, link to an external CSS file, importa CSS file.

Inline CSS

Style sheet information is applied to the current element. Instead of defining the style once, then applying the style against all instances of an element (say the tag), you only apply the style to the instance you want the style to apply to.
For example:


<P style="color:#ff9900">
  CSS tutorial.
</p>

Embedded CSS

You embed CSS information into an HTML document using the 'style' element. You do this by embedding the CSS information within <style>...</style> tags in the head of your document.
For example, place the following code between the <head>...</head> tags of your HTML document:


<style type="text/css" media=screen>
p {color:#ff9900;}
</style>

Now, whenever any of those elements are used within the body of the document, they will be formatted as instructed in the above style sheet.

External CSS

An external style sheet is a separate file where you can declare all the styles that you want to use throughout your website. You then link to the external style sheet from all your HTML pages. This means you only need to set the styles for each element once. If you want to update the style of your website, you only need to do it in one place.
For example:

Type the following into a plain text file, and save with a .css extension (i.e. external_style_sheet.css).
```
p {font-family: georgia, serif; font-size: x-small;}
h1 {color: #000099; }
```
Add the following between the <head>...</head> tags of all HTML documents that you want to reference the external style sheet.
```
<link rel="stylesheet" href="external_style_sheet.css" type="text/css">
```

Imported CSS

You can use the @import rule to import rules from other style sheets.
Add either of the following between the <head>...</head> tags of all HTML documents that you want to import a style sheet into.


@import "imported_style_sheet.css";
@import url("imported_style_sheet.css");

CSS Syntax - III

The CSS syntax consists of a set of rules. These rules have 3 parts: a selector, a property, and a value.
You don't need to remember this in order to code CSS. Once you start coding CSS, you'll do so without thinking "this is a selector" or "that is a property". This should begin to make sense once you study the examples on this page.
Syntax:

selector { property: value }

The selector is often the HTML element that you want to style. For example:

h1 { color: blue }

This code tells the browser to render all occurences of the HTML h1 element in blue.

Grouping Selectors

You can apply a style to many selectors if you like. Just separate the selectors with a comma.

h1,h2,h3,h4,h5,h6 { color: blue }

Applying Multiple Properties

To apply more than one property separate each declaration with a semi-colon.

h1 { color:blue; font-family:arial,helvetica,"sans serif" }

Readability

You can make your CSS code more readable by spreading your style declarations across multiple lines. You can also indent your code if you like. This doesn't affect how your code is rendered - it just makes it easier for you to read.

h1 {
 color:blue;
 font-family:arial,helvetica,"sans serif";
 font-size:150%;
}

OK, so you've now learned about the CSS syntax. But how do you incorporate this syntax into your website? The next lesson will show you how to incorporate CSS into your HTML documents.

CSS Advantages - II

HTML has its limitations when it comes to layout. Sure, you have 6 different levels of headings and 6 different sizes of fonts. You also have tables, and you have control over alignment etc. These are good enough to get a reasonable looking document that shows the true structure of information. However, it's a far cry from some of the excellent layout & design that we see in magazines and printed brochures etc.
CSS helps us achieve such layouts.
With CSS, you have much better control over the layout of your web pages. You can specify exactly how big a font will be, exactly where an element will be on a page, what the page will look like when printed, and much more.
CSS can also save you a lot of time, particularly when maintaining a large site. Also, the World Wide Web Consortium (W3C) recommends that web developers use CSS tags instead of HTML tags wherever possible. The W3C are gradually phasing out quite a few of these HTML tags.

Advantages of CSS

CSS saves time
When most of us first learn HTML, we get taught to set the font face, size, colour, style etc every time it occurs on a page. This means we find ourselves typing (or copying & pasting) the same thing over and over again. With CSS, you only have to specify these details once for any element. CSS will automatically apply the specified styles whenever that element occurs.
Pages load faster
Less code means faster download times.
Easy maintenance
To change the style of an element, you only have to make an edit in one place.
Superior styles to HTML
CSS has a much wider array of attributes than HTML.

Disadvantages of CSS

Browser compatibility
Browsers have varying levels of compliance with Style Sheets. This means that some Style Sheet features are supported and some aren't. To confuse things more, some browser manufacturers decide to come up with their own proprietary tags.Fortunately, browser compatibility is becoming less of an issue as the latest browser versions are much more standards-compliant than their earlier counterparts.

CSS Tutorial - I

Cascading Style Sheets (CSS) have been seriously underated. Maybe it's because web designers think it's harder than what it is. The truth is, CSS is incredibly easy!
With CSS, you can define all your common styles in an external Style Sheet. This way, if you want to change every occurence of a style throughout your site, you only need to update one place.
This tutorial will show you how to implement CSS into your website. This tutorial will also show you how to create an external style sheet and link to it from your HTML page.

About CSS

What does CSS stand for?

CSS stands for Cascading Style Sheets.

What is CSS?

CSS is a language that you can use to define styles against any HTML element. These styles are set using CSS properties.For example, you can set font properties (size, colors, style etc), background images, border styles, and much more.
Cascading Style Sheets, level 1 (CSS1) became a W3C Recommendation in December 1996. It describes the CSS language as well as a simple visual formatting model. CSS2, which became a W3C recommendation in May 1998, builds on CSS1 and adds support for media-specific style sheets (e.g. printers and aural devices), downloadable fonts, element positioning and tables.
As of this writing, CSS3 is currently under development.

Pages

Sunday, May 1, 2011

CSS Font Family

CSS Font Size

CSS Font Size Adjust

CSS Font Stretch

CSS Font Style

CSS Font Variant

CSS Font Weight

CSS Font Property

CSS ID Syntax

CSS ID Example

CSS ID

IDs vs Classes

When to use classes

When to use IDs

CSS Class Syntax

CSS Class Example

CSS Class

Cascading Rules of Classes

Saturday, April 30, 2011

Inline CSS

Embedded CSS

External CSS

Imported CSS

Grouping Selectors

Applying Multiple Properties

Readability

Advantages of CSS

Disadvantages of CSS

About CSS

What does CSS stand for?

What is CSS?