Saturday, 3 July 2021

*Episode 14.2* HTML (Style Sheets)

 



Main Properties of Style Sheets

font-size: size :-


       This property changes the absolute relative size of the font. For absolute values, points (pt), centimetres (cm), millimetres (mm), pixels (px), or picas (pc) may be used. For relative values, use a percentage in relation to the base font (%) or one of the following preset sizes: XX-small, X-small, Small, Medium, Large, X-large and XX-large. For example:


 BODY {font-size: 10 pt}

 H1 {font-size: 150%}


    Below are more examples:


 <html>

 <head>

 <title>ss07A - font size</title>

 <style type="text/css">

 <!--

 body {"font-size: 20pt"}

 H1 {"font-size:200%"}

 H2 {"font-size:170%"}

 H3 {"font-size:150%"}

 DT {"font-size:80%"}

 Dd {"font-size:60%"}

 -->

 </style>

 </head>

 <body bgcolor="#FFFFFF">

 <h1>Normal text h1</h1>

 <h2>Normal text h2</h2>

 <h3>Normal text h3</h3>

 <d1>

 <br>Normal text

 <dt>Normal text 80%

 <dd>Normal text 60%

 <dt>Normal text 80%

 <dd>Normal text 60%

 </d1>

 </body>

 </html>


    Here is the executed program using internet explorer 3. This option does not work the same way on version 4.




font-weight: weight :-


       This property selects the weight of the font. It works depending on the type of font used. In most cases, only the Medium and Bold values work. Extra-Light, Light, Demi-light, Medium, Demi-bold, Bold and Extra-bold or values from 100 to 900 (only whole hundreds) may be specified.


font-style: style :-


      This property selects the style of the font. It may be Italic or Normal. 

       For example:


 <html>

 <head>

 <title>ss07b - style</title>

 <style type="text/css">

 <!--

 H1, H2 {font-style: "italic"}

 -->

 </style>

 

 </head>

 <body bgcolor="#FFFFFF">

 <h1>Header generated by H1</h1>

 <h2>Header generated by H2</h2>

 <h3>Header generated by H3</h3>


 </body>

 </html>


    Here is the executed program in both Navigator and Internet Explorer:




color: color name | rrggbb :-


        This property selects the HTML command colour. It may be a name or the RGB value. The colour names allowed are:

 black   silver   gray   white 
 maroon   red  purple   fuchsia 
 green  lime  olive   yellow
 navy  blue  teal  aqua


        In the next example, the colours of the text and the header are changed.


 <html>

 <head>

 <title>ss07c - colors</title>

 <style type="text/css">

 <!--

 body{color:white; background:red}

 H1{font-style:italic; color:lime}

 H2{font-style:italic; color:blue}

 -->

 </style>

 

 </head>

 <body bgcolor="#FFFFFF">

 <h1>Header generated by H1</h1>

 normal text

 <h2>Header generated by H2</h2>

 normal text

 <h3>Header generated by H3</h3>

 normal text

 </body>

 </html>


    Below is the executed program on Internet Explorer and Netscape Navigator 4:




         The level 3 header and normal text colour is white, inherited from the <BODY> style. The other two headers have their own colours. Note that the background colour was specified with the BACKGROUND attribute and not with the COLOR attribute.


font-family: list of options :-


       This property chooses the font family to be used for the text marked by the element. A single font-family may be specified, or a list of options separated by commas. In the event the first option is not available, the second is used, and so on. If no font is found, the current font is used.

       Here is an example:


 <html>

 <head>

 <title>ss07d - font family</title>

 <style type="text/css">

 <!--

 BODY {font-family: Bauhaus Md BT, Script, WeddingText BT, serif}

 H1{font-family: WeddingText BT, Script, fantasy}

 H2{font-family: times, sans-serif}


 -->

 </style>

 

 </head>

 <body bgcolor="#FFFFFF">

 <h1>Header generated by H1</h1>

 normal text

 <h2>Header generated by H2</h2>

 normal text

 <h3>Header generated by H3</h3>

 normal text

 </body>

 </html>


     See the executed program in both Netscape and Internet Explorer:




text-decoration: attributes :-


       This property changes text attributes such as underline and strike-through. The options are None, Underline, and Line Through.

        Example:


 <html>

 <head>

 <title>ss07e - text decoration</title>

 <style type="text/css">

 <!--

 EM {text-decoration: line-through}

 B {text-decoration: underline}

 BODY {text-decoration: none}

 -->

 </style>

 

 </head>

 <body bgcolor="#FFFFFF">

 <b>text enclosed by B command</b><br>

 <em>Text enclosed by EM command<br></em>

 normal text receiving body formatting

 </body>

 </html>


   See the executed command:




line-height: height :-


     This property defines the height of the line (the space between the bases of each text line). You can use absolute values in points, centimetres, or inches, or a relative value as a percentage. 

      For example:


 body {line-height: 150%}


SS06K.HTM Program:-


  <html>

 <head>

 <style type="text/css">

 <!--

 BODY {background: white}

 <p {line-height:9pt}>

 -->

 </style>

 </head>

 <body>

 This text serves to show some of the formatting characteristics made possible by the stylesheets. Some of these features will make your pages well differentiated from the other through the use of differentiated letter fonts and sizes<p>

 This text serves to show some of the formatting characteristics made possible by the stylesheets. Some of these features will make your pages well differentiated from the other through the use of differentiated letter fonts and sizes<p>

 This text serves to show some of the formatting characteristics made possible by the stylesheets. Some of these features will make your pages well differentiated from the other through the use of differentiated letter fonts and sizes</p>

 This text serves to show some of the formatting characteristics made possible by the stylesheets. Some of these features will make your pages well differentiated from the other through the use of differentiated letter fonts and sizes<p>

 </body>

 </html>


    See the executed program and the different behaviour of the browsers:




       The style only went into effect when the first <P> command was found. It is only disable if a </P> command is found.


background: color_name | rrggbb | url (image URL) :-


      This property defines the background colour or image. It may be used with any element such as <BODY>,<TABLE>, or <P>. In the case of colours, the RGB code or the colour name may be specified.

       See the next example:


<html>

 <head>

 <title>ss06h.htm - background - color</title>

 <style type="text/css">

 <!--

 BODY {background: white}

 P {background: yellow}

 table {background:00ffff}

 -->

 </style>

 </head>

 <body>

 <p>

 This text serves to show some of the formatting characteristics made possible by the stylesheets. Some of these features will make your pages well differentiated from the other through the use of differentiated letter fonts and sizes<p>


 <table border>

 <td>

 <p style=" margin-left: 1cm; margin-right: 1cm; color: #FF0000">

 This text serves to show some of the formatting characteristics made possible by the stylesheets. Some of these features will make your pages well differentiated from the other through the use of differentiated letter fonts and sizes<p>

 </td>

 </table><br>


 This text serves to show some of the formatting characteristics made possible by the stylesheets. Some of these features will make your pages well differentiated from the other through the use of differentiated letter fonts and sizes<p>

 </body>

 </html>


   The background colour of the commands is changed. (See the figure below.) The body is white, the paragraphs have a yellow background, and the table has a cyan background.


    

        The BACKGROUND attribute is especially useful to manipulate background images, which may be placed practically anywhere in the window. The syntax to specify the URL is:


 BODY {background: url (image.gif) modifiers}


       In place of image.gif, the complete URL of the image should be specified. The image modifier are related to its position. The allowed values are:


Repeat-- The standard. The whole image will be repeated continuously to fill in the window area.

No-Repeat-- Only one occurrence of the image is displayed in the top left corner of the window.


Fixed-- The image does not scroll when the window is scrolled. This option keeps the image permanently in the window.


Scroll-- The standard. The image follows the scrolling of the text.

Position-- This value defines the initial position of the image in relation to the window. The value may be specified in percentage or size. The standard value is 0%, 0%. A specified value of 80%, 0% will display the image at 80% of the distance to the left margin and at 0% to the top margin. You can also use the keywords Top, Centre, Bottom, Left, or Right, or any combination of them. 

 BODY {background: url (jouster.gif) 80%,0%}

          If only one percentage is specified, it will be used for both values.
          Below are some of the many combination possible:















margin-left: value :-

     This property is specifies the distance of the left text margin in relation to the window border. The value may be specified in points (pt), inches (in), centimetres (cm), of pixels (px).

margin-right: value :-

     This property is specifies the distance of the right text margin in relation to the window border. The value may be specified in points (pt), inches (in), centimetres (cm), of pixels (px).

margin-top: value :-

     This property is specifies the distance of the top text margin in relation to the window border. The value may be specified in points (pt), inches (in), centimetres (cm), of pixels (px).

margin-indent: value :-

     This property is specifies the distance of the first line of the paragraph in relation to the left text margin. The value may be specified in points (pt), inches (in), centimetres (cm), of pixels (px).

      The values of the margin or indent may be negative in order to move the text in the opposite direction. Below is an example of the use of the margin and indentation commands.

SS05.HTM File:-

 <html>

 <head>

 </head>

 <body bgcolor="#FFFFFF">

 <p>This text serves to show some of the formatting characteristics made possible by the stylesheets. Some of these features will make your pages well differentiated from the other through the use of differentiated letter fonts and sizes<p>


 <p style=" margin-left: 2cm; margin-right: 2cm">

 This text serves to show some of the formatting characteristics made possible by the stylesheets. Some of these features will make your pages well differentiated from the other through the use of differentiated letter fonts and sizes

 

 <p style=" margin-left: 2cm; margin-right: 2cm; text-indent: 1cm; color: #FF0000">

 This text serves to show some of the formatting characteristics made possible by the stylesheets. Some of these features will make your pages well differentiated from the other through the use of differentiated letter fonts and sizes

 </body>

 </html>


    Below is the executed program:




Summary of the Main Properties:-


AttributeDescription Values allowed Examples
 font-size  Adjust the size of the font  points (pt)
 inches (in)
 Centimetres (cm)
 pixels (px)

  {font-size: 12pt}
 font-family  Selects the type of the font A Font name (according to Windows)  {font-family: courier}
 {font-family: arial}
 font-weight  Adjust the thickness of the font  extra-light
 light
 demi-light
 Medium
demi-bold bold
 extra-bold		  {font-weight: bold}
 {font-weight: light}
 font-style  Applies italic effect  normal/italic  {font-style: italic}
 line-height  Specifies the distance between the lines  points (pt)
 inches (in)
 centimetres (cm)
 pixels (px)
 percentage (%)		  {line-height: 24pt}
 color  Specifies the color of the text  Name or color code  {color: blue}
 text-decoration  Applies effects in the text  None
 Underline
 Italic
 Line-through		  {text-decoration: underline}
 margin-left  Adjusts the distance to the left margin  points (pt)
 inches (in)
 centimetres (cm)
 pixels (px)		  {margin-left: 1 in}
 margin-right  Adjusts the distance to the right border of the page  points (pt)
 inches (in)
 centimetres (cm)
 pixels (px)		  {margin-right: 1 in}
 margin-top  Adjusts the distance to the top border of the page  points (pt)
 inches (in)
 centimetres (cm)
 pixels (px)		  {margin-top: -20px}
 text-align  Specifies the text alignment  Left/center/right  {text-align: right}
 text-indent  Specifies the distance between the text and the left margin  points (pt)
 inches (in)
 centimetres (cm)
 pixels (px)		  {text-indent: 0.5in}
 background  Specifies a background image or color  URL or color code  {background: #33CC00}


Miscellaneous


     For commands that change state, as in the case of the links generated by the <A> command, it is possible to attribute different properties to each state. 

      See the next example:


 A:link {color: red}

 A:active {color: blue}

 A:visited {color: magenta}


      These definitions can also be used for a figure used as a link. In this case, the IMG parameter should be added:


 A:link {color: red; border: 2pt}

 A:active {color: blue; border: 2pt}

 A:visited {color: magenta; border: 2pt}


👈Episode 14.1.                                                                                      Episode 15👉

Share This Post

PRINT THIS POST
By SOURABH KUMAR at
Labels: , ,

No comments:

Post a Comment

If you have any doubts. Please let me know.

Subscribe to: Post Comments (Atom)

Featured post

*Episode 1* MCQ for Govt. Job/ Private Job/ MNCs

  Topic:- One Word Substitution 1) Especially skilled in storytelling  Answer:- Raconteur 2) Fear of loneliness Answer:- Eremophobia  3) Usa...