Geektechlife's Posts
Nairaland Forum / Geektechlife's Profile / Geektechlife's Posts
 Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 10:59pm On Oct 14, 2020 |
Albertone: That's true. However, a quick solution is to use border property instead of text-decoration. Use border-top or border-bottom. It works. 1 Like |
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 12:01am On Oct 13, 2020 |
*CSS─ TABLES 4* *The table-layout Property* The table-layout property is supposed to help you control how a browser should render or lay out a table. This property can have one of the three values: fixed, auto, or inherit. The following example shows the difference between these properties. NOTE: This property is not supported by many browsers, so do not rely on this property. <!DOCTYPE html> <html> <head> <title>HTML CSS</title> <style type="text/css"> table.auto { table-layout: auto } table.fixed { table-layout: fixed } </style> </head> <body> <table class="auto" border="1"> <tr> <th></th> <th>Title one</th> <th>Title two</th> </tr> <tr> <th>Row Title</th> <td>value</td> <td>value</td> </tr> <tr> <th>Row Title</th> <td>value</td> <td></td> </tr> </table> <br/><br/> <table class="fixed" border="1"> <tr> <th></th> <th>Title one</th> <th>Title two</th> </tr> <tr> <th>Row Title</th> <td>value</td> <td>value</td> </tr> <tr> <th>Row Title</th> <td>value</td> <td></td> </tr> </table> </body> </html> Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 12:00am On Oct 13, 2020 |
Albertone: Ofcourse, please do. |
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 11:53pm On Oct 12, 2020 |
*CSS─ TABLES 4* *The table-layout Property* The table-layout property is supposed to help you control how a browser should render or lay out a table. This property can have one of the three values: fixed, auto, or inherit. The following example shows the difference between these properties. NOTE: This property is not supported by many browsers, so do not rely on this property. <!DOCTYPE html> <html> <head> <title>HTML CSS</title> <style type="text/css"> table.auto { table-layout: auto } table.fixed { table-layout: fixed } </style> </head> <body> <table class="auto" border="1"> <tr> <th></th> <th>Title one</th> <th>Title two</th> </tr> <tr> <th>Row Title</th> <td>value</td> <td>value</td> </tr> <tr> <th>Row Title</th> <td>value</td> <td></td> </tr> </table> <br/><br/> <table class="fixed" border="1"> <tr> <th></th> <th>Title one</th> <th>Title two</th> </tr> <tr> <th>Row Title</th> <td>value</td> <td>value</td> </tr> <tr> <th>Row Title</th> <td>value</td> <td></td> </tr> </table> </body> </html> Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 8:21pm On Oct 12, 2020 |
CSS─ TABLES 3* *The empty-cells Property* The empty-cells property indicates whether a cell without any content should have a border displayed. This property can have one of the three values - show, hide, or inherit. Here is the empty-cells property used to hide borders of empty cells in the <table> element. <!DOCTYPE html> <html> <head> <title>HTML CSS</title> <style type="text/css"> table.empty { width: 350px; border-collapse: separate; empty-cells: hide; } td.empty { padding: 5px; border-style: solid; border-width: 1px; border-color: #999999; } </style> </head> <body> <table class="empty"> <tr> <th></th> <th>Title one</th> <th>Title two</th> </tr> <tr> <th>Row Title</th> <td class="empty">value</td> <td class="empty">value</td> </tr> <tr> <th>Row Title</th> <td class="empty">value</td> <td class="empty"></td> </tr> </table> </body> </html> Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 8:20pm On Oct 12, 2020 |
CSS─ TABLES 3* *The empty-cells Property* The empty-cells property indicates whether a cell without any content should have a border displayed. This property can have one of the three values - show, hide, or inherit. Here is the empty-cells property used to hide borders of empty cells in the <table> element. <!DOCTYPE html> <html> <head> <title>HTML CSS</title> <style type="text/css"> table.empty { width: 350px; border-collapse: separate; empty-cells: hide; } td.empty { padding: 5px; border-style: solid; border-width: 1px; border-color: #999999; } </style> </head> <body> <table class="empty"> <tr> <th></th> <th>Title one</th> <th>Title two</th> </tr> <tr> <th>Row Title</th> <td class="empty">value</td> <td class="empty">value</td> </tr> <tr> <th>Row Title</th> <td class="empty">value</td> <td class="empty"></td> </tr> </table> </body> </html> Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 7:52pm On Oct 12, 2020 |
*CSS─ TABLES 2* *The border-spacing Property* The border-spacing property specifies the distance that separates the adjacent cells' borders. It can take either one or two values; these should be units of length. If you provide one value, it applies to both vertical and horizontal borders. Or you can specify two values, in which case, the first refers to the horizontal spacing and the second to the vertical spacing: NOTE: Unfortunately, this property does not work in Netscape 7 or IE 6. <style type="text/css"> /* If you provide one value */ table.example {border-spacing:10px;} /* This is how you can provide two values */ table.example {border-spacing:10px 15px;} </style> Now let's modify the previous example and see the effect: <!DOCTYPE html> <html> <head> <title>HTML CSS</title> <style type="text/css"> table.one { border-collapse: separate; width: 900px; border-spacing: 10px; } table.two { border-collapse: separate; width: 900px; border-spacing: 10px 50px; } caption { font-weight: bold; } </style> </head> <body> <table class="one" border="1"> <caption>Separate Border Example with border-spacing 100px all sides</caption> <tr> <td> Cell A Collapse Example</td> <td> Cell B Collapse Example</td> <td> Cell C Collapse Example</td> </tr> <tr> <td> Cell D Collapse Example</td> <td colspan="2"> Cell E Collapse Example</td> </tr> </table> <br /> <table class="two" border="1"> <caption>Separate Border Example with border-spacing with 10px top & bottom, 50px right & left</caption> <tr> <td> Cell A Collapse Example</td> <td> Cell B Collapse Example</td> <td> Cell C Collapse Example</td> </tr> <tr> <td> Cell D Collapse Example</td> <td colspan="2"> Cell E Collapse Example</td> </tr> </table> </body> </html> Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 7:50pm On Oct 12, 2020 |
*CSS─ TABLES 2* *The border-spacing Property* The border-spacing property specifies the distance that separates the adjacent cells' borders. It can take either one or two values; these should be units of length. If you provide one value, it applies to both vertical and horizontal borders. Or you can specify two values, in which case, the first refers to the horizontal spacing and the second to the vertical spacing: NOTE: Unfortunately, this property does not work in Netscape 7 or IE 6. <style type="text/css"> /* If you provide one value */ table.example {border-spacing:10px;} /* This is how you can provide two values */ table.example {border-spacing:10px 15px;} </style> Now let's modify the previous example and see the effect: <!DOCTYPE html> <html> <head> <title>HTML CSS</title> <style type="text/css"> table.one { border-collapse: separate; width: 900px; border-spacing: 10px; } table.two { border-collapse: separate; width: 900px; border-spacing: 10px 50px; } caption { font-weight: bold; } </style> </head> <body> <table class="one" border="1"> <caption>Separate Border Example with border-spacing 100px all sides</caption> <tr> <td> Cell A Collapse Example</td> <td> Cell B Collapse Example</td> <td> Cell C Collapse Example</td> </tr> <tr> <td> Cell D Collapse Example</td> <td colspan="2"> Cell E Collapse Example</td> </tr> </table> <br /> <table class="two" border="1"> <caption>Separate Border Example with border-spacing with 10px top & bottom, 50px right & left</caption> <tr> <td> Cell A Collapse Example</td> <td> Cell B Collapse Example</td> <td> Cell C Collapse Example</td> </tr> <tr> <td> Cell D Collapse Example</td> <td colspan="2"> Cell E Collapse Example</td> </tr> </table> </body> </html> Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 2:54pm On Oct 11, 2020 |
*CSS─ TABLES 1* This chapter of our lessons teaches you how to set different properties of an HTML table using CSS. You can set the following properties of a table: The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style. The border-spacing specifies the width that should appear between table cells. The caption-side captions are presented in the <caption> element. By default, these are rendered above the table in the document. You use the caption-side property to control the placement of the table caption. The empty-cells specifies whether the border should be shown if a cell is empty. The table-layout allows browsers to speed up the layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it. Now, we will see how to use these properties with examples. *The border-collapse Property* This property can have two values: collapse and separate. By default, it is set to separate. Try using both values for this example: <!DOCTYPE html> <html> <head> <title>HTML CSS</title> <style type="text/css"> table.one {border-collapse: collapse;} td.a { border-style: dotted; border-width: 3px; border-color: #000000; padding: 10px; } td.b {border-style: solid; border-width: 3px; border-color: #333333; padding: 10px; } </style> </head> <body> <table class="one"> <caption>Collapse Border Example</caption> <tr> <td class="a"> Cell A Collapse Example</td> <td class="a"> Cell B Collapse Example</td> </tr> <tr> <td class="b"> Cell C Collapse Example</td> <td class="a"> Cell D Collapse Example</td> </tr> </table> </body> </html> The first image uploaded below shows the result of using separate which is also the default, the second image shows the result of using collapse. Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 2:52pm On Oct 11, 2020 |
*CSS─ TABLES 1* This chapter of our lessons teaches you how to set different properties of an HTML table using CSS. You can set the following properties of a table: The border-collapse specifies whether the browser should control the appearance of the adjacent borders that touch each other or whether each cell should maintain its style. The border-spacing specifies the width that should appear between table cells. The caption-side captions are presented in the <caption> element. By default, these are rendered above the table in the document. You use the caption-side property to control the placement of the table caption. The empty-cells specifies whether the border should be shown if a cell is empty. The table-layout allows browsers to speed up the layout of a table by using the first width properties it comes across for the rest of a column rather than having to load the whole table before rendering it. Now, we will see how to use these properties with examples. *The border-collapse Property* This property can have two values: collapse and separate. By default, it is set to separate. Try using both values for this example: <!DOCTYPE html> <html> <head> <title>HTML CSS</title> <style type="text/css"> table.one {border-collapse: collapse;} td.a { border-style: dotted; border-width: 3px; border-color: #000000; padding: 10px; } td.b {border-style: solid; border-width: 3px; border-color: #333333; padding: 10px; } </style> </head> <body> <table class="one"> <caption>Collapse Border Example</caption> <tr> <td class="a"> Cell A Collapse Example</td> <td class="a"> Cell B Collapse Example</td> </tr> <tr> <td class="b"> Cell C Collapse Example</td> <td class="a"> Cell D Collapse Example</td> </tr> </table> </body> </html> The first image uploaded below shows the result of using separate which is also the default, the second image shows the result of using collapse. Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 2:07pm On Oct 11, 2020 |
*CSS─ LINKS* This chapter of our lessons teaches you how to set different properties of a hyper link using CSS. You can set the following properties of a hyperlink: The :link signifies unvisited hyperlinks. The :visited signifies visited hyperlinks. The :hover signifies an element that currently has the user's mouse pointer hovering over it. The :active signifies an element on which the user is currently clicking. Usually, all these properties are kept in the header part of the HTML document. Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Also, a:active MUST come after a:hover in the CSS definition as follows: <style type=”text/css”> a:link {color: #000000} a:visited {color: #006600} a:hover {color: #FF00CC} a:active {color: #FF00CC} </style> Now, we will see how to use these properties to give different effects to hyperlinks. *Set the Color of Links, Visited Links, Links On Mouse Over and Active Links* The following example demonstrates how to set the link color, color of the visited link, change the color of links when we bring a mouse pointer over that link and change the color of the active links. Possible values could be any color name in any valid format. Example: <!DOCTYPE html> <html> <head> <title>HTML CSS</title> <style type="text/css"> div {background-color: yellow; padding-left: 21%; font-size: 40px;} a:link {text-decoration: none; padding: 12px; color: #000000;} a:visited {color: #006600;} a:hover {color: #FF00CC; background-color: white;} a:active {color: #FF00CC;} </style> </head> <body> <div> <a href="index.html"> Home </a> <a href="messages.html"> Messages </a> <a href="contact.html"> Contact </a> </div> </body> </html> The html document above is a file named "index.html", which is the Home page as you can see in the home link of page. Aside it, are two other links to two different pages: one named "messages.html", the other "contact.html" for both Messages and Contact pages respectively. Each of these two pages will also have the same code as the one written above for the Home page and all located in the same folder in order for those links to work. They will all therefore produce the same result as seen in the image uploaded below. Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 2:05pm On Oct 11, 2020 |
*CSS─ LINKS* This chapter of our lessons teaches you how to set different properties of a hyper link using CSS. You can set the following properties of a hyperlink: The :link signifies unvisited hyperlinks. The :visited signifies visited hyperlinks. The :hover signifies an element that currently has the user's mouse pointer hovering over it. The :active signifies an element on which the user is currently clicking. Usually, all these properties are kept in the header part of the HTML document. Remember a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective. Also, a:active MUST come after a:hover in the CSS definition as follows: <style type=”text/css”> a:link {color: #000000} a:visited {color: #006600} a:hover {color: #FF00CC} a:active {color: #FF00CC} </style> Now, we will see how to use these properties to give different effects to hyperlinks. *Set the Color of Links, Visited Links, Links On Mouse Over and Active Links* The following example demonstrates how to set the link color, color of the visited link, change the color of links when we bring a mouse pointer over that link and change the color of the active links. Possible values could be any color name in any valid format. Example: <!DOCTYPE html> <html> <head> <title>HTML CSS</title> <style type="text/css"> div {background-color: yellow; padding-left: 21%; font-size: 40px;} a:link {text-decoration: none; padding: 12px; color: #000000;} a:visited {color: #006600;} a:hover {color: #FF00CC; background-color: white;} a:active {color: #FF00CC;} </style> </head> <body> <div> <a href="index.html"> Home </a> <a href="messages.html"> Messages </a> <a href="contact.html"> Contact </a> </div> </body> </html> The html document above is a file named "index.html", which is the Home page as you can see in the home link of page. Aside it, are two other links to two different pages: one named "messages.html", the other "contact.html" for both Messages and Contact pages respectively. Each of these two pages will also have the same code as the one written above for the Home page and all located in the same folder in order for those links to work. They will all therefore produce the same result as seen in the image uploaded below. Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 7:30pm On Oct 09, 2020 |
*CSS─ IMAGES* Images play an important role in any webpage. Though it is not recommended to include a lot of images, but it is still important to use good images wherever required. CSS plays a good role to control image display. You can set the following image properties using CSS. 1) The border property is used to set the width of an image border. This property can have a value in length or in %. A width of zero pixels means no border. 2) The height property is used to set the height of an image. It can have a value in length or in %. 3) The width property is used to set the width of an image. This property can have a value in length or in %. 4) The -moz-opacity property is used to set the opacity of an image. This property is used to create a transparent image in Mozilla. Internet Exporer uses filter:alpha(opacity=x) to create transparent images. In Mozilla (-moz-opacity:x), x can be a value from 0.0 - 1.0. A lower value makes the element more transparent (the same things goes for the CSS3-valid syntax opacity:x). In Internet Explorer (filter:alpha(opacity=x)), x can be a value from 0 - 100. A lower value makes the element more transparent. Newer browsers however allow 'opacity'. 5) The border-radius property can be used to set radius for the borders, to make round borders and circle images. To make circle images, set both the width and height to the same value, then border-radius to 50% or 50em. While giving value in %, it applies in respect of the box in which an image is available. Here is an example with the results shown in the uploaded image below: <!DOCTYPE html> <html> <head> <title>HTML CSS</title> </head> <body> <img style="border: 1px solid red; height: 500px; width: 500px; border-radius: 50%;" src="image.jpg"/> <img src="image.jpg" style="height: 500px; width: 500px; opacity: 0.4; filter: alpha(opacity=40);" /> </body> </html> Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 7:29pm On Oct 09, 2020 |
*CSS─ IMAGES* Images play an important role in any webpage. Though it is not recommended to include a lot of images, but it is still important to use good images wherever required. CSS plays a good role to control image display. You can set the following image properties using CSS. 1) The border property is used to set the width of an image border. This property can have a value in length or in %. A width of zero pixels means no border. 2) The height property is used to set the height of an image. It can have a value in length or in %. 3) The width property is used to set the width of an image. This property can have a value in length or in %. 4) The -moz-opacity property is used to set the opacity of an image. This property is used to create a transparent image in Mozilla. Internet Exporer uses filter:alpha(opacity=x) to create transparent images. In Mozilla (-moz-opacity:x), x can be a value from 0.0 - 1.0. A lower value makes the element more transparent (the same things goes for the CSS3-valid syntax opacity:x). In Internet Explorer (filter:alpha(opacity=x)), x can be a value from 0 - 100. A lower value makes the element more transparent. Newer browsers however allow 'opacity'. 5) The border-radius property can be used to set radius for the borders, to make round borders and circle images. To make circle images, set both the width and height to the same value, then border-radius to 50% or 50em. While giving value in %, it applies in respect of the box in which an image is available. Here is an example with the results shown in the uploaded image below: <!DOCTYPE html> <html> <head> <title>HTML CSS</title> </head> <body> <img style="border: 1px solid red; height: 500px; width: 500px; border-radius: 50%;" src="image.jpg"/> <img src="image.jpg" style="height: 500px; width: 500px; opacity: 0.4; filter: alpha(opacity=40);" /> </body> </html> Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 8:55am On Oct 09, 2020 |
*CSS─ TEXT* This chapter of our lessons teaches you how to manipulate text using CSS properties. You can set the following text properties of an element: The color property is used to set the color of a text. The direction property is used to set the text direction, possible values could be rtl (i.e. from right to left) or ltr (i.e. from left to right). The letter-spacing property is used to add or subtract space between the letters that make up a word. The word-spacing property is used to add or subtract space between the words of a sentence. The text-indent property is used to indent the text of a paragraph, specifies the indentation of the first line of a text. The text-align property is used to align the text of a document. The text-decoration property is used to underline, overline, and line-through text. The text-transform property is used to capitalize text or convert text touppercase or lowercase letters. The white-space property is used to control the flow and formatting of text, possible values could be normal, nowrap, pre, pre-line, pre-wrap, initial, inherit. The text-shadow property is used to set the text shadow around a text. The line-height property is used to specify the space between lines. *Set the Text Color, Text Cases and Text Shadow* The example below demonstrates how to set the text color, text case and shadow around a text. Possible value for text color could be any color name in any valid format.Possible values for text cases are none, capitalize, uppercase, lowercase. Setting text shadow may not be supported by all the browsers. *Set the Text Alignment and Decorating the Text* The example also shows how to align a text and decorate a text. Possible values for alignment are left, right, center, justify. Possible values for decoration are none,underline, overline, line-through, blink. <!DOCTYPE html> <html> <head> <title>HTML CSS</title> </head> <body> <p style="color: blue; word-spacing: 10px;">This text will have a blue colour and word-spacing.</p><br/> <p style="direction: rtl;">This text prints from right to left.</p><br/> <p style="letter-spacing: 12px; line-height: 2.5;">This text has letter-spacing and line-height of 2.5.</p><br/> <p style="text-align: right; text-transform: capitalize;">This text will be right aligned and capitalized.</p><br/> <p style="text-align: center; text-transform: uppercase;">This text will be center aligned and set to uppercase.</p><br/> <p style="text-align: left; text-decoration: overline;">This text will be left aligned and have an overline.</p><br/> <p style="text-decoration: underline; text-indent: 40px;">This text will be underlined and indented 40px.</p><br/> <p style="text-decoration: line-through; text-shadow: 3px 2px 2px red;">This text will be striked through and with a shadow.</p> </body> </html> Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 8:44am On Oct 09, 2020 |
*CSS─ TEXT* This chapter of our lessons teaches you how to manipulate text using CSS properties. You can set the following text properties of an element: The color property is used to set the color of a text. The direction property is used to set the text direction, possible values could be rtl (i.e. from right to left) or ltr (i.e. from left to right). The letter-spacing property is used to add or subtract space between the letters that make up a word. The word-spacing property is used to add or subtract space between the words of a sentence. The text-indent property is used to indent the text of a paragraph, specifies the indentation of the first line of a text. The text-align property is used to align the text of a document. The text-decoration property is used to underline, overline, and line-through text. The text-transform property is used to capitalize text or convert text touppercase or lowercase letters. The white-space property is used to control the flow and formatting of text, possible values could be normal, nowrap, pre, pre-line, pre-wrap, initial, inherit. The text-shadow property is used to set the text shadow around a text. The line-height property is used to specify the space between lines. *Set the Text Color, Text Cases and Text Shadow* The example below demonstrates how to set the text color, text case and shadow around a text. Possible value for text color could be any color name in any valid format.Possible values for text cases are none, capitalize, uppercase, lowercase. Setting text shadow may not be supported by all the browsers. *Set the Text Alignment and Decorating the Text* The example also shows how to align a text and decorate a text. Possible values for alignment are left, right, center, justify. Possible values for decoration are none,underline, overline, line-through, blink. <!DOCTYPE html> <html> <head> <title>HTML CSS</title> </head> <body> <p style="color: blue; word-spacing: 10px;">This text will have a blue colour and word-spacing.</p><br/> <p style="direction: rtl;">This text prints from right to left.</p><br/> <p style="letter-spacing: 12px; line-height: 2.5;">This text has letter-spacing and line-height of 2.5.</p><br/> <p style="text-align: right; text-transform: capitalize;">This text will be right aligned and capitalized.</p><br/> <p style="text-align: center; text-transform: uppercase;">This text will be center aligned and set to uppercase.</p><br/> <p style="text-align: left; text-decoration: overline;">This text will be left aligned and have an overline.</p><br/> <p style="text-decoration: underline; text-indent: 40px;">This text will be underlined and indented 40px.</p><br/> <p style="text-decoration: line-through; text-shadow: 3px 2px 2px red;">This text will be striked through and with a shadow.</p> </body> </html> Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 9:51pm On Oct 04, 2020 |
*CSS - COLOURS* CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e., its text) or for the background of the element. They can also be used to affect the color of borders and other decorative effects. You can specify your color values in various formats. The following image uploaded displays a table list of all the possible formats: 1) keywords or color names e.g black, purple. 2) HEX code e.g #000000, #ffaaff. 3) short HEX e.g #000, #faf. 4) RGB % e.g rgb(50%,50%,0%), rgb(0%,10%,80%). 5) RGB absolute e.g rgb(0,0,0), rgb(40,90,255). Study our lesson(s) on HTML - COLOURS to better refresh your memory. Thank you. Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 9:47pm On Oct 04, 2020 |
*CSS - COLOURS* CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e., its text) or for the background of the element. They can also be used to affect the color of borders and other decorative effects. You can specify your color values in various formats. The following image uploaded displays a table list of all the possible formats: 1) keywords or color names e.g black, purple. 2) HEX code e.g #000000, #ffaaff. 3) short HEX e.g #000, #faf. 4) RGB % e.g rgb(50%,50%,0%), rgb(0%,10%,80%). 5) RGB absolute e.g rgb(0,0,0), rgb(40,90,255). Study our lesson(s) on HTML - COLOURS to better refresh your memory. Thank you. Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 7:48am On Oct 03, 2020 |
*CSS MEASUREMENT UNITS* CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. You need these values while specifying various measurements in your style rules e.g. border: 1px solid red; width: 3cm; font-size:7em; margin: 3%; We have listed out all the CSS Measurement Units along with proper examples in the image uploaded below. Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 7:47am On Oct 03, 2020 |
*CSS MEASUREMENT UNITS* CSS supports a number of measurements including absolute units such as inches, centimeters, points, and so on, as well as relative measures such as percentages and em units. You need these values while specifying various measurements in your style rules e.g. border: 1px solid red; width: 3cm; font-size:7em; margin: 3%; We have listed out all the CSS Measurement Units along with proper examples in the image uploaded below. Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 7:39am On Oct 03, 2020 |
Sologzy: Message only, no calls please. +2348144157769 |
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 10:05pm On Oct 01, 2020 |
*HTML - STYLE SHEET (CSS Rules Overriding)* We have discussed four ways to include style sheet rules in an HTML document. Here is the rule to override any Style Sheet Rule. Any inline style sheet takes the highest priority. So, it will override any rule defined in <style>...</style> tags or the rules defined in any external style sheet file. Any rule defined in <style>...</style> tags will override the rules defined in any external style sheet file. Any rule defined in the external style sheet file takes the lowest priority, and the rules defined in this file will be applied only when the above two rules are not applicable. Example: Consider we define a style sheet file "mystyle.css" which has following rules. .row1{ color: red; } .thick{ font-size: 20px; } .row2{ color: green; } Now let's make use of the above external CSS file in our following HTML document which has both internal CSS and inline CSS. Example shown in first image uploaded below. Result is shown in the second image uploaded below. You can see that the values for the classes thick and row2 are different in our external style sheet from our internal style sheet, and the browser choose to follow the rules stated in the internal style sheet. Also where an inline CSS occurs stating the value of color property to be blue, the browser displays the text of that element in blue instead of the class row2 assigned to the same element which points the color property to purple. The page is read from top to bottom, right from left. It sees the external style sheet first, then the internal, before the inline; so the inline comes out on top after the internal. Note: External CSS comes in a separate CSS file linked to the actual HTML document. The difference between it and the internal CSS is simply creating a <style> element in the head section of the HTML document, preferably after the title element, and then placing the same thing you would write in your external style sheet in-between the open and close tags of the <style> element. An inline style sheet is simply using the style attribute inside an element to state the properties and their respective values. Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 9:34pm On Oct 01, 2020 |
*HTML - STYLE SHEET (CSS Rules Overriding)* We have discussed four ways to include style sheet rules in an HTML document. Here is the rule to override any Style Sheet Rule. Any inline style sheet takes the highest priority. So, it will override any rule defined in <style>...</style> tags or the rules defined in any external style sheet file. Any rule defined in <style>...</style> tags will override the rules defined in any external style sheet file. Any rule defined in the external style sheet file takes the lowest priority, and the rules defined in this file will be applied only when the above two rules are not applicable. Example: Consider we define a style sheet file "mystyle.css" which has following rules. .row1{ color: red; } .thick{ font-size: 20px; } .row2{ color: green; } Now let's make use of the above external CSS file in our following HTML document which has both internal CSS and inline CSS. Example shown in first image uploaded below. Result is shown in the second image uploaded below. You can see that the values for the classes thick and row2 are different in our external style sheet from our internal style sheet, and the browser choose to follow the rules stated in the internal style sheet. Also where an inline CSS occurs stating the value of color property to be blue, the browser displays the text of that element in blue instead of the class row2 assigned to the same element which points the color property to purple. The page is read from top to bottom, right from left. It sees the external style sheet first, then the internal, before the inline; so the inline comes out on top after the internal. Note: External CSS comes in a separate CSS file linked to the actual HTML document. The difference between it and the internal CSS is simply creating a <style> element in the head section of the HTML document, preferably after the title element, and then placing the same thing you would write in your external style sheet in-between the open and close tags of the <style> element. An inline style sheet is simply using the style attribute inside an element to state the properties and their respective values. Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 11:00am On Oct 01, 2020 |
*HTML - STYLE SHEET (external CSS)* *External Style Sheet* If you need to use your style sheet to various pages, then it’s always recommended to define a common style sheet in a separate file. A cascading style sheet file will have extension as .css and it will be included in HTML files using <link> tag. Example: Consider we define a style sheet file "mystyle.css" which has following rules. .red{ color: red; } .thick{ font-size: 20px; } .green{ color: green; } Here we defined three CSS rules which will be applicable to three different classes defined for the HTML tags. The above code will be written in the CSS style sheet "mystyle.css" as it is, nothing added, nothing less. I suggest you should not bother about how these rules are being defined because you will learn them while studying CSS. Now let's make use of the above external CSS file in our following HTML document: <!DOCTYPE html> <html> <head> <title>HTML External CSS</title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <p class="red">This is red</p> <p class="thick">This is thick</p> <p class="green">This is green</p> <p class="thick green">This is thick and green</p> </body> </html> Result is shown in the image uploaded below. *Imported CSS - @import Rule* @import is used to import an external stylesheet in a manner similar to the <link>element. Here is the generic syntax of @import rule. Example: Following is the example showing you how to import a style sheet file into an HTML document. <head> <@import “mystyle.css”; </head> This will yield same result as the <link> tag used above. Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 10:59am On Oct 01, 2020 |
*HTML - STYLE SHEET (external CSS)* *External Style Sheet* If you need to use your style sheet to various pages, then it’s always recommended to define a common style sheet in a separate file. A cascading style sheet file will have extension as .css and it will be included in HTML files using <link> tag. Example: Consider we define a style sheet file "mystyle.css" which has following rules. .red{ color: red; } .thick{ font-size: 20px; } .green{ color: green; } Here we defined three CSS rules which will be applicable to three different classes defined for the HTML tags. The above code will be written in the CSS style sheet "mystyle.css" as it is, nothing added, nothing less. I suggest you should not bother about how these rules are being defined because you will learn them while studying CSS. Now let's make use of the above external CSS file in our following HTML document: <!DOCTYPE html> <html> <head> <title>HTML External CSS</title> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head> <body> <p class="red">This is red</p> <p class="thick">This is thick</p> <p class="green">This is green</p> <p class="thick green">This is thick and green</p> </body> </html> Result is shown in the image uploaded below. *Imported CSS - @import Rule* @import is used to import an external stylesheet in a manner similar to the <link>element. Here is the generic syntax of @import rule. Example: Following is the example showing you how to import a style sheet file into an HTML document. <head> <@import “mystyle.css”; </head> This will yield same result as the <link> tag used above. Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 10:10am On Oct 01, 2020 |
*HTML - STYLE SHEET (internal CSS)* *Internal Style Sheet* If you want to apply Style Sheet rules to a single document only, then you can include those rules in header section of the HTML document using <style> tag. Rules defined in internal style sheet overrides the rules defined in an external CSS file. Example: Let's re-write above example once again, but here we will write style sheet rules in the same HTML document using <style> tag. <!DOCTYPE html> <html> <head> <title>HTML Internal CSS</title> <style type="text/css"> .red{ color: red; } .thick{ font-size: 20px; } .green{ color: green; } </style> </head> <body> <p class="red">This is red</p> <p class="thick">This is thick</p> <p class="thick red">This is thick and green</p> </body> </html> Results displayed in the image uploaded below. Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 10:09am On Oct 01, 2020 |
*HTML - STYLE SHEET (internal CSS)* *Internal Style Sheet* If you want to apply Style Sheet rules to a single document only, then you can include those rules in header section of the HTML document using <style> tag. Rules defined in internal style sheet overrides the rules defined in an external CSS file. Example: Let's re-write above example once again, but here we will write style sheet rules in the same HTML document using <style> tag. <!DOCTYPE html> <html> <head> <title>HTML Internal CSS</title> <style type="text/css"> .red{ color: red; } .thick{ font-size: 20px; } .green{ color: green; } </style> </head> <body> <p class="red">This is red</p> <p class="thick">This is thick</p> <p class="thick red">This is thick and green</p> </body> </html> Results displayed in the image uploaded below. Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 8:16pm On Sep 30, 2020 |
*HTML – STYLE SHEET (inline CSS)* Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the Web since the consortium was founded in 1994. Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags. Using CSS, you can specify a number of style properties for a given HTML element. Each property has a name and a value, separated by a colon ( : ). Each property declaration is separated by a semi-colon ( ; ). Example: First let's consider an example of HTML document which makes use of <font> tag and associated attributes to specify text color and font size. <p><font color="green" size="5">Hello, World!</font></p> We can re-write above example with the help of Style Sheet as follows: <p style="color:green;font-size:24px;">Hello, World!</p> You can use CSS in three ways in your HTML document: 1) Inline Style Sheet: Define style sheet rules directly along-with the HTML elements using style attribute. 2) Internal Style Sheet: Define style sheet rules in header section of the HTML document using <style> tag. 3) External Style Sheet: Define style sheet rules in a separate .css file and then include that file in your HTML document using HTML <link> tag. Let's see all the three cases one by one with the help of suitable examples. *Inline Style Sheet* You can apply style sheet rules directly to any HTML element using style attribute of the relevant tag. This should be done only when you are interested to make a particular change in any HTML element only. Rules defined inline with the element overrides the rules defined in an external CSS file as well as the rules defined in <style> element for internal CSS. That is to say whatever value given to an element property inline will override whatever value is given to that same element property in the internal or external CSS. Example: Let's re-write above example once again, but here we will write style sheet rules along with the HTML elements using style attribute of those elements. <!DOCTYPE html> <html> <head> <title>HTML Inline CSS</title> </head> <body> <p style="color: red;">This is red</p> <p style="font-size: 20px;">This is thick</p> <p style="font-style: italic;">This is green</p> <p style="color: green; font-size: 20px;">This is thick and green</p> </body> </html> Results displayed in the image uploaded below. Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 8:14pm On Sep 30, 2020 |
*HTML – STYLE SHEET (inline CSS)* Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the Web since the consortium was founded in 1994. Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags. Using CSS, you can specify a number of style properties for a given HTML element. Each property has a name and a value, separated by a colon ( : ). Each property declaration is separated by a semi-colon ( ; ). Example: First let's consider an example of HTML document which makes use of <font> tag and associated attributes to specify text color and font size. <p><font color="green" size="5">Hello, World!</font></p> We can re-write above example with the help of Style Sheet as follows: <p style="color:green;font-size:24px;">Hello, World!</p> You can use CSS in three ways in your HTML document: 1) Inline Style Sheet: Define style sheet rules directly along-with the HTML elements using style attribute. 2) Internal Style Sheet: Define style sheet rules in header section of the HTML document using <style> tag. 3) External Style Sheet: Define style sheet rules in a separate .css file and then include that file in your HTML document using HTML <link> tag. Let's see all the three cases one by one with the help of suitable examples. *Inline Style Sheet* You can apply style sheet rules directly to any HTML element using style attribute of the relevant tag. This should be done only when you are interested to make a particular change in any HTML element only. Rules defined inline with the element overrides the rules defined in an external CSS file as well as the rules defined in <style> element for internal CSS. That is to say whatever value given to an element property inline will override whatever value is given to that same element property in the internal or external CSS. Example: Let's re-write above example once again, but here we will write style sheet rules along with the HTML elements using style attribute of those elements. <!DOCTYPE html> <html> <head> <title>HTML Inline CSS</title> </head> <body> <p style="color: red;">This is red</p> <p style="font-size: 20px;">This is thick</p> <p style="font-style: italic;">This is green</p> <p style="color: green; font-size: 20px;">This is thick and green</p> </body> </html> Results displayed in the image uploaded below. Powered by Programmers Community... 2 Shares
|
| Webmasters / Re: I Want To Build Websites All By Myself. Can I? by geektechlife: 6:38pm On Sep 29, 2020 |
*HTML - LAYOUTS 3* *HTML Layouts - Using DIV, SPAN* The <div> element is a block level element used for grouping HTML elements. While the <div> tag is a block-level element, the HTML <span> element is used for grouping elements at an inline level. Although we can achieve pretty nice layouts with HTML tables, but tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data. Note: This example makes use of Cascading Style Sheet (CSS), so before understanding this example you need to have a better understanding on how CSS works. Example: Here we will try to achieve same result using <div> tag along with CSS, whatever you have achieved using <table> tag in previous example. <!DOCTYPE html> <html> <head> <title>HTML Layouts using DIV, SPAN</title> </head> <body> <div style="width:100%"> <div style="background-color: #b5dcb3; width: 100%"> <h1>This is Web Page Main title</h1> </div> <div style="background-color: #aaa; height: 200px; width: 100px; float: left;"> <div><b>Main Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style="background-color: #eee; height: 200px; width: 350px; float: left;"> <p>Technical and Managerial Tutorials</p> </div> <div style="background-color: #aaa; height: 200px; width: 100px; float: right;"> <div><b>Right Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style="background-color: #b5dcb3; clear: both"> <center> Copyright © 2007 Tutorialspoint.com </center> </div> </div> </body> </html> Note: You can create better layout using DIV, SPAN along with CSS. Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 6:37pm On Sep 29, 2020 |
*HTML - LAYOUTS 3* *HTML Layouts - Using DIV, SPAN* The <div> element is a block level element used for grouping HTML elements. While the <div> tag is a block-level element, the HTML <span> element is used for grouping elements at an inline level. Although we can achieve pretty nice layouts with HTML tables, but tables weren't really designed as a layout tool. Tables are more suited to presenting tabular data. Note: This example makes use of Cascading Style Sheet (CSS), so before understanding this example you need to have a better understanding on how CSS works. Example: Here we will try to achieve same result using <div> tag along with CSS, whatever you have achieved using <table> tag in previous example. <!DOCTYPE html> <html> <head> <title>HTML Layouts using DIV, SPAN</title> </head> <body> <div style="width:100%"> <div style="background-color: #b5dcb3; width: 100%"> <h1>This is Web Page Main title</h1> </div> <div style="background-color: #aaa; height: 200px; width: 100px; float: left;"> <div><b>Main Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style="background-color: #eee; height: 200px; width: 350px; float: left;"> <p>Technical and Managerial Tutorials</p> </div> <div style="background-color: #aaa; height: 200px; width: 100px; float: right;"> <div><b>Right Menu</b></div> HTML<br /> PHP<br /> PERL... </div> <div style="background-color: #b5dcb3; clear: both"> <center> Copyright © 2007 Tutorialspoint.com </center> </div> </div> </body> </html> Note: You can create better layout using DIV, SPAN along with CSS. Powered by Programmers Community... 2 Shares
|
| Programming / Re: I Want To Build Websites All By Myself by geektechlife: 12:10am On Sep 29, 2020 |
*HTML – LAYOUTS 2* *Multiple Columns Layout - Using Tables* You can design your webpage to put your web content in multiple pages. You can keep your content in middle column and you can use left column to use menu and right column can be used to put advertisement or some other stuff. Example: Here is an example to create three column layout. <!DOCTYPE html> <html> <head> <title>Three-Column HTML Layout</title> </head> <body> <table width="100%" border="0"> <tr valign="top"> <td bgcolor="#aaa" width="20%"> <b>Main Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> <td bgcolor="#b5dcb3" height="200" width="50%"> Technical and Managerial Tutorials </td> <td height="200" width="10%"> Aside content </td> <td bgcolor="#aaa" width="20%"> <b>Right Menu</b><br /> HTML<br /> PHP<br /> PERL... </td> </tr> <tr> <td colspan="4" bgcolor="#b5dcb3"> <center> Copyright © 2007 stackoverflow.com </center> </td> </tr> <table> </body> </html> Powered by Programmers Community... 2 Shares
|
(Go Up)
| Sections: politics (1) business autos (1) jobs (1) career education (1) romance computers phones travel sports fashion health religion celebs tv-movies music-radio literature webmasters programming techmarket Links: (1) (2) (3) (4) (5) (6) (7) (8) (9) (10) Nairaland - Copyright © 2005 - 2024 Oluwaseun Osewa. All rights reserved. See How To Advertise. 77 |