Weave & Connect

Posts

Showing posts with the label CSS

CSS Font Variant

Next we have font variant. The font variant does two things mainly like. It changes the smaller case letters to upper case. It adjusts the upper case letter in the previous case to adjust the size of all the letters. Here is a showcase of font variant property in CSS. 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title>CSS Styling</title> 6: </head> 7: <body> 8: 9: Red 10: 11: 12: Blue 13: 14: 15: Green 16: 17: <style> 18: p.red 19: { 20: color:red; 21: font-size:20px; 22: font-weight:normal; 23: font-fam...

CSS Font Family

We observe many different font types in word editors, email texts, web pages etc. We can achieve the different font types using the font-family attribute in CSS. Font-Family The font-family names can be classified into two types: Generic family Font family 1. Generic family The generic family is the default fonts installed in the machine. Why use generic? They can be used as backup, if the font used by one is not installed in a particular machine. 2. Font Family These font family is all the rest of the fonts which can be used to design the font types in a webpage. Here is a sample program showcasing the font-family attribute. 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title>CSS Styling...

CSS Font Weight

In the earlier post, we looked at the font-style attribute. It gives some styles like italic,normal,oblique. But what about the bold. The bold style is defined under the font-weight attribute. The font weight attribute can be defined in many different ways, let us have a look at some basic ways like normal,bold,bolder,lighter. 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title>CSS Styling</title> 6: </head> 7: <body> 8: 9: Red 10: 11: 12: Blue 13: 14: 15: Green 16: 17: <style> 18: p.red 19: { 20: color:red; 21: ...

CSS Font Styles

Next let us have a look at font styles. All of us know everybody has different styles of writing, some writing slanting whereas some straight aligned. Similarly in CSS and XHTML one can write in normal, italic, oblique styles of writing. Here is a sample showcasing the font-style attribute in CSS. 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title>CSS Styling</title> 6: </head> 7: <body> 8: 9: Red 10: 11: 12: Blue 13: 14: 15: Green 16: 17: <style> 18: p.red 19: { 20: color:red; 21: font-size:20px; 22: font-s...

CSS Colors and Font Sizes

Let us take small steps and then create complex pages. The font sizes can be altered using the font-size attribute. The font-size attribute can be defined in various forms. The simplest is using pixels in short px. Here is an example showcasing the font-size using px. 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title>CSS Styling</title> 6: </head> 7: <body> 8: 9: Red 10: 11: 12: Blue 13: 14: 15: Green 16: 17: <style> 18: p.red 19: { 20: color:red; 21: font-size:20px; 22: } 23: p.blue 24: { 25: color:...

CSS Simple Program -Color with class

The program earlier had only one color even though there was all three defined. It can be fixed using the class concept. If you would like to color different set of similar tags with different properties. If classes are not used all the properties of the latest declaration of properties are assigned to all the tags. Here is an example showcasing the class and CSS . 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title>CSS Styling</title> 6: </head> 7: <body> 8: 9: Red 10: 11: 12: Blue 13: 14: 15: Green 16: 17: <style> 18: ...

CSS Simple program-Color

Designing the webpage for different styles of colors is done using CSS(Cascading Style Sheet) It is just like push of button the things are automated by a process. In the program below we observe that the color are not properly colored why does that happen and how can it be fixed will be looked up in the next post 1: <?xml version = "1.0" encoding="utf-8"?> 2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 3: <html xmlns = "http://www.w3.org/1999/xhtml"> 4: <head> 5: <title>CSS Styling</title> 6: </head> 7: <body> 8: 9: Red 10: 11: 12: Blue 13: 14: 15: Green 16: 17: <style> 18: p 19: { 20: color:red; 21: } 22: p 23: { 24: color:blue; 25: } 26: p 27: { 28: color:green; ...