welcome Anonymous
This is the left dummy section that maintains the three grid system.
Coding...
  • Topics
  • HTML Intro
    •
  • HTML Elements
    •
  • HTML Attributes
    •
  • HTML Headings
    •
  • HTML Marquee
    •
  • HTML Paragraphs
    •
  • HTML Span/Div
    •
  • HTML Style
    •
  • HTML Comments
    •
  • HTML Links
    •
  • HTML Tables
    •
  • HTML List
    •
  • HTML Iframe
    •
  • HTML Images
    •
  • HTML Video
    •
  • HTML Audio
    •
  • HTML Form
    •
  • HTML Inputs
    •
  • HTML Textarea
    •
  • HTML Button
    •
  • HTML Select
    •
  • HTML Javascript
    •
  • css intro
  • css syntax
  • CSS Backgrounds
  • CSS Margins
  • CSS Paddings
  • CSS Borders
  • CSS Text
  • CSS font
  • CSS display
  • CSS Position
  • CSS Colors
  • Sage.js Intro
  • Hiding elements
  • Showing elements
  • Togging elements
  • Getting input/textarea values
  • Setting input/textarea values
  • Getting HTML content
  • Setting HTML content
  • Toggling HTML content
  • Appending HTML content
  • Prepending HTML content
  • Getting attribute value
  • Setting attribute value
  • Event handling using when()
  • Selecting elements using document.querySelector()
  • Getting CSS using getStyle()
  • Setting CSS with setStyle()
  • Adding a class with addClass()
  • Removing a class with removeClass()
  • Toggling a class with toggleClass()
  • Slide show with slideShow()
  • Loading data with loadData()
  • Sending data with sendData()
  • File previewing with filePreview()
  • Getting location with myLocation()
  • Getting location by ip adress with locationByIp()
  • Copying text with copyText()
  • Making a clock with clock()
  • Making a count down with countDown()
  • Calling a function after sometime using after()
  • Calling a function every after sometime using every()
  • Stoping the executing function using stop()
  • Dragging & Dropping elements with dragDrop()
  • Creating a file with createFile()
  • Randomising numbers with random()
  • Creating a single page app (SPA) with createSPA()

CSS INTRO

CSS stands for Cascading Style Sheet which is the language used to style the website and make it standout!. Before you continue with this css tutorial you need to have some knowlege about HTML.

Including CSS In the Webpage:
CSS can be included in the html webpages in three ways and these are: Internal, external and Inline styling.
Internal Style- This is where all the css codes are written within the webpage usually in the <head> section of the page. All the css codes are written between the style <style> opening tag and </style> closing tag. Through out this tutorial we will use the internal css styling.

Example: This example demostrates how internal CSS is used to apply styles to the elements in the webpage.
<style>
body{color:blue;}
</style>
<body>
a blue color is applied to the texts
</body>
a blue color is applied to the texts

External Style: This is where all the css codes are written in the separate file that has an extention of '.css'. Here all the css codes are written without the style <style> tags. External css files are then included/referenced in the webpage using the <link> element that has two required attributes called the href that holds the css filename and its location and the rel that stands for 'relationship'. The <link> element must be placed in the <head> section of the page.
Example:
<head>
<link href="cssfile.css" ref="stylesheet">
</head>

Inline Style- This where all the css codes are written in the html elements using the style attribute.
Example:
<p style="color:green;"> text changes to green in paragraph </p>
text changes to blue in paragraph
This example applies a green color to the texts in the current paragraph only. Inline style only affects the element it is applied in.
Now that you know how to include CSS scripts in the webpage, Lets break it down now!.

CSS SYNTAX

<style>
selector{ property:value}
</style>
CSS syntax has the selector , property and value. property and value are wrapped in the opening and closing curly brackets"{ }".
selector is used to select an element which needs to be styled.An element can be selected using its id, class or name.
An id is the unique identifier of an element and it's used to style a specific element and it can not be used on more than one element. an "Id" is always prefixed with an hashtag("#").
example
<style>
#id-name{color :red;}
</style>
<p id="id-name">
Id is used to style me up! with the red color
</p>
Id is used to style me up! with the red color
Example explained:
First the paragraph was created with an id attribute that has a name called "id-name". Then the id name was used to select the paragraph element.Color was it's property with the value of red. So the id name acted as the element selector

class is an element selector used to apply styles on multiple elements with the same class name.Class selector is always prefixed with the period(".") or a dot. The class work just like an id but the only difference is that a "class" can be used on multiple elements having same name while an "id" is only used on one element only.
<style>
.class-name{color :orange; }
</style>
<p class="class-name">
A class is used to style me up! with a orange color
</p>
Class is used to style me up! with an orange color

Example Explained
First the paragraph was created with a class attribute that has a name "class-name".Then the class name was used to select the paragraph element.color was it's property with the value of green.The same class name can be used in multiple elements to apply the same style.

Element name: is also as a selector without the less than "<" and greater than ">" symbols.This is very useful if you want to apply some styles to certain elements such as paragraphs.
<style>
p{color :purple;}
</style>
<p>
Element name is used to style me up! with a red color
</p>
Element name is used to style me up! with a purple color
Example explained
First the paragraph was created without a class and id attributes .Then the element name (paragraph)"<p>" was used to select the paragraph.color was it's property with the value of red.This style is applied to all the paragraphs in the webpage.

CSS BACKROUNDS

Webpages can have a number of background styles using CSS.These background styles includes, color, images and others.
BACKGROUND-COLOR
Different kinds of colors can be set to the background of the webpage.This is achieved through the use of elements, class and ids.
Example
This example shows how to set the background color of the whole webpage using the <body> element.
<style>
body{background-color:blue;}
</style>
<body>
All the content in the body element will have blue color
</body>

All the content in the body element will have a blue color

This shows that CSS selects whole web content using the <body> element and assigns it with the desired background-color which is blue in our example.As you have seen, the whole page has the background color of blue, However, you can apply the background to the specific parts of the web page using the previous explained id and class attributes.
Example:
This example shows how a <div> block element can be used to style just part of the webpage content using either an id or class names.
<style>
#style-1{background-color:black;}
.style-2{background-color:green;}
<style>
<div style ="height:20%;" id="style-1"> i have a black background color </div>

<div style ="height:20%;" class="style-2"> i have a green background color </div>

i have a black background color
i have a green background color


BACKGROUND-IMAGE
The background image can be set in the webpage through the use of css property background-image:url(). The image filename is placed in the url() parenthesis
Example
This example shows how to set the background image of the whole webpage.
<style>
body{background-image:url('image-filename');}
</style>
 we have set the background image using any photo of our choice
BACKGROUND-REPEAT

By default an image will repeat itself until it fits the whole page however this can be manipulated using the "background-repeat" property with the value of "no-repeat" that stops the repeatition of the image
NO-REPEAT
Example:
This example shows how a background-repeat property can be used to stop the image from repeating itself.

<style>
body{background-image:url('image-filename');
background-repeat:no-repeat; }
</style>
 The image now can not repeat itself

You can also use the same "background-repeat" to repeat the image in either y or x direction using the values "repeat-x" or "repeat-y"
REPEAT-X
Example:
This example shows how an image can be repeated in the horizontal direction using the repeat-x value.Please note that an image by default is repeated horizontally, so you will not see any difference

<style>
body{background-image:url('image-filename');
background-repeat:repeat-x; }
</style>
 The image has been repeated horizontally

REPEAT-Y
Example:
The example below shows how an image can be repeated in the vertical direction using the repeat-y value.

<style>
body{background-image:url('image-filename');
background-repeat:repeat-y; }
</style>
The image has been repeated vertically

BACKGROUND-POSITION
A background image can be positioned using the" background-position" property.An image can be positioned at the right, left, center, top or bottom side of the web page.An image should not be repeated if it has to be positioned.
Example:
This example shows how a background-position can be used to position an image to the right side of the webpage.

<style>
body{background-image:url('image-filename');
background-repeat:no-repeat;
background-position:right; }
</style>
 The image has been positioned to the right side of the webpage
BACKGROUND-ATTACHEMENT
background-attachement is the css property used to make a background image either move with the content during the scrolling of the page or be static(fixed) to its positon.This property accepts either of the two values which is scroll or fixed.
FIXED BACKGROUND IMAGE
Example:
This example shows how background-image can stay fixed to its position(not moving).Try to scroll your page and you will find that the image does not move.

<style>
body{background-image:url('image-filename');
background-repeat:no-repeat;
background-attachement:fixed; }
</style>

The image is fixed to its position


SCROLLABLE BACKGROUND IMAGE
Example:
This example shows how a background image can move with the content as the user scrolls the page.Try to scroll your page and you will find that the image moves with the content.

<style>
body{background-image:url('image-filename');
background-repeat:no-repeat;
background-attachement:scroll; }
</style>


The image can move during scrolling

CSS MARGIN

margin is the white space created outside the borders. Margins creates some whites spaces that pushes borders away from the web browser's default alignments.margin is measured in pixes(px).
Example:
This example shows a 30px margin that creates a space between a defined border and web browser's screen.In order for you to notice the effects of margin, we have created the border line around the element.you will learn more about borders later

<style>
body{ margin :30px;
border :2px solid black; }
</style>
<body>
margin has been applied to all the four sides of the page: left, right , top and bottom
</body>

margin has been applied to all the four sides of the page: left, right , top and bottom
SPECIFIED MARGIN:
NOTE that the above example applies the 30px margin to all the four sides of the page: left, right, bottom and top. However, you can apply margin to a specific side by using the margin-left, margin-right , margin-top and margin-bottom
Example:
This example shows how margin can be created to the left side of the web page. we use 30px
<style>
body{ margin-left :30px;
border :2px solid black; }
</style>
</style>
<body>
Margin has been applied to the left side only
</body>
Margin has been applied to the left side only

CSS BORDERS

border is the line drawn around the webpage.Borders in the webpage can be created using the three required properties: "border-width", "border-style" and "border-color"
Example:
This example shows how to create a black solid border line around the page(this is short hand).

<style>
body{ border : 5px solid black}
</style>

<body>
Am a solid black border line
</body>
Am a solid black border line
Example explained:
In the example above we used the short hand (short cut) of creating a border line with '5px' as the border-width , 'solid' as the border-style and 'black' as the border-color. Please note that when using the short hand, always follow the order as shown below else the border will not be applied. Always start with the border-width then border-style and lastly the border-color.
5px=== border-width
solid=== border-style
black=== border-color
If the short hand seems to be difficult, you can still create the border line using the specific property: border-width, border-style and border-color.When you use the property names, the order does not matter!!
Example:
This example shows how a dotted border line can be created by using its property names.
<style>
body{ border-color :red;
border-style :dotted;
border-width :5px; }
</style>
<body>
Am a dotted red border line
</body>
Am a dotted red border line
Example explained:
In the example above we separately used border property names:border-width ,border-style and border-color to create a dotted border line.Always start with the border-width then border-style and lastly the border-color.
3px=== border-width
dotted=== border-style: border-style can be "dotted", "solid" ,"groove" or "double" you can try them!
red=== border-color

CSS PADDING

padding is the white space between the border and the content.Padding is measured in pixes(px).
Example:
This example shows how a 40px padding can be applied to all sides of the page that creates a space between the border and the content.

<style>
body{ padding :40px;
border :2px solid black; }
</style>
<body>
padding has separated us from the border line <br> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</body> padding has separated us from the border line
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod .
SPECIFIED PADDING:
NOTE that the above example applies the 10px padding to the four sides of the page:left, right, bottom and top. However, you can apply padding to specific side by using the padding-left, padding-right , padding-top and padding-bottom Example:
This example shows how padding can be created to the left side of the web page. we use 30px

<style>
body{ padding-left :30px;
border :2px solid black; }
</style>
<body>
left padding has been applied .This only affects the left part of the page <br> ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</body>
left padding has been applied .This only affects the left part of the page
ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

CSS TEXTS

Texts are the fundamental elements of every document. Therefore CSS has the text properties that are used to manipulate the texts(fonts) in the webpage.This includes text decoration, text-alignments, text-transformations and more

TEXT DECORATION
text-decoration is the property used to underline the texts in the webpage.
Example:
This example underlines the all texts in the page
<style>
body{ text-decoration :underline; }
</style>
<body>
We have been underlined using the text decoration property
</body>
We have been underlined using the text decoration property

You can also remove the underlines from the texts by setting the text-decoration property to none.
Example:
This example removes all underlines from the texts
<style>
body{ text-decoration :none; }
</style>
<body>
Underlines have been removed from us!
</body>
Underlines have been removed from us!

TEXT ALLGNMENT
text-allgn is the property used to align texts to the left , center or right side of the page. By default texts are left alligned
Example:
This example aligns texts to the center the of the page
<style>
body{ text-align :center; }
</style>
<body>
We have been aligned to the center of the page
</body>
We have been aligned to the center of the page

The texts can also be aligned to the right side of the page by setting the text-align to right
Example:
This example aligns texts to the right side of the page
<style>
body{ text-align :right;}
</style>
<body> We have been aligned to the right
</body> We have been aligned to the right

FLOATING TEXT
float is the property used to align texts either to the left or right side of the page. Unlike text-align which aligns texts to center, float only aligns texts either to the left or right side of the page and NOT to the center!
Example:
This example aligns texts to the right side of the page using float property
<style>
body{ float :right; }
</style>
<body>
texts floated to right
</body> texts floated to right

TEXT TRANSFORMATION
text-transform is the property used to change texts to the uppercase(capital letters) lowecase (small letters) or Captalise it. By default all the texts are lowercased (small letters)
Example:
This example changes texts to uppercase(capital letters)
<style>
body{ text-transform :uppercase; }
</style>
<body>
We have been changed to uppercase
</body>
Resuit>> We have been changed to uppercase

Setting the text-transform property to lowecase will change the texts to small letters.To see the effect, try to write texts in capital letters and then apply the following code in the example below:
Example:
This example changes uppercased texts to lowecase(small letters)
<style>
body{ text-transform :lowercase; }
</style>
<body>
WE HAVE BEEN CHANGED TO LOWERCASE
</body>
Resuit>> WE HAVE BEEN CHANGED TO LOWERCASE

You can also use the text-transform: to captalise each first letter in the sentence by setting it to captalize. Each word begins with capital letter in the sentence
Example:
This example captalises each first letter of the texts
<style>
body{ text-transform :captalise; }
</style>
<body>
we have been captalised
</body>
Resuit>>we have been captalised

CSS FONTS

font property defines the size ,weight, boldness, family and styles of texts.
FONT SIZE
font-size is the property used to either increase or decrease the size of the texts in the web page. font-size is measured either in px or ems.
Example:
This example increases the size of texts to 30px in the webpage
<style>
body{ font-size :25px; }
</style>
<body>
our size has been increased by 25px using the font-size property
</body>
our size has been increased by 25px using the font-size property

Remember that the default font size is 16px which is also equal to 1em.Therefore 2em is equal to 32px.lets try it in the example below:
<style>
body{ font-size :2em; }
</style>
<body>
our size has been increased by 2em (32px) using the font-size property
</body> our size has been increased by 2em (32px) using the font-size property


FONT FAMILY
font-family is the property used to set the font family to the texts. These families include serif, verdana, times new roman and more
Example:
This example has a font family of serif
<style>
body{ font-family :serif; }
</style>
<body>
We have "serif" font family
</body>
We have "serif" font family

FONT STYLE
font-style is the property used to italise texts(putting texts in italic) Example:
This example puts the texts in italic
<style>
body{ font-style :italic; }
</style>
<body>
We have been put in italic
</body>
We have been put in italic

FONT WEIGHT
font-weight is the property used to change texts into bold Example:
This example puts texts in bold
<style>
body{ font-weight :bold; }
</style>
<body>
We have been put in bold
</body>
We have been put in bold

CSS DISPLAY

display is the property used to put html elements in elther block inline display.Display property is also used to hide html contents when it is set to none
inline display is where all the selected the html elements such as texts, images are put in a single line (same line). inline display does not create any new line
Example:
This example puts all the html contents in a single line
<style>
body{ display :inline; }
</style>
<body>
All the contents will be on a single line
</body>
All the contents will be on a single line

block display is where all specified html elements such as texts, images start on different lines. Block display always creates new line
Example:
This example puts all the html elements in block display
<style>
body{ display :block; }
</style>
<body>
All the elements will be on a different lines
</body>
All the elements will be
on a different lines

display:none is used to hide all the selected elements in a web page. The display property is set to none(means displaying nothing)
Example:
This example hides all the content in the <body> element.you might get a blank page if all the contents are in the <body> element
<style>
body{ display :none; }
</style>
<body>
All the content will be hidden
</body> All the content in <body> element are hidden

CSS POSTION

POSTION is the property used to position html contents.By default all the html contents are static and can not be positioned at any point unless the CSS position property is used.Position takes about three values:fixed, relative and absolute.

position:fixed is used to make the html contents 'fixed' at a specified position using the top, left, bottom and right properties that take numerical values measured in px.
When an html content such as an image is fixed, it can not move when a user scrolls the page.
Example:
This example makes the image fixed at the top of the page using its id name. you can enter your image filename in the src attribute and the image will be displayed at the top the page
<style>
#fixed{ position :fixed; }
</style>
<body>
<img src="your-image-filename" width="50%" id="fixed">
</body>


position:absolute is used to position html content at any specified position using the top, left, bottom and right properties that take numerical values measured in px.
When an html content such as an image is absolutely postioned, it still moves when a user scrolls the page and it overlaps any content beneath it.
Example:
This example makes the image absolutely positioned at the top of the page using its id name. Make sure you put the correct image filename in the src attribute.
<style>
#absolute{ position :absolute; }
</style>
<body>
<img src="your-image-filename" width="50%" id="absolute">
</body>

position:relative is used to make the html contents relatively postioned to the entire html contents. Elements can still have specified postion using the top, left, bottom and right properties.
When an html content such as an image is relativey positioned, nothing changes to the page contents only that the postioned element can be located at any point in the page
Example:
This example makes the image relatively positioned to the elements using its id name
<style>
#fixed{ position :relative; }
</style>
<body>
<img src="your-image-filename" width="50%" id="relative">
</body>

CSS COLORS

COLOR is the CSS property used to set the color of the texts in the web page.Different colors can be set by simply using there name such as red, green or black. another way of setting the color is by the using the rgb(x,x,x) where r stands red, g stands for green and b stands for blue. Colors can also be set using the Hexadecimal numbers represented by #xxx

USING COLOR NAMES:
setting a color to the texts using its name is the easiest way to go as the beginner. Just use any valid name of the color such as blue, black, red, yellow etc.
Example:
This example will apply an orange color the texts in the webpage that are in the
<style>
body{ color :orange; }
</style>
<body>
We have an orange color
</body>
We have an orange color

USING THE RGB(X,X,X):
rgb(x,x,x) is another way of setting the text color in the webpage.
r=red
g=green
b=blue
x=numbers from 1-255
As shown above x represents three numbers one for red another for green and another blue. This most funny way of applying distinct colors to the texts as your job is just change the numbers in ranges of 1 to 255 and CSS will do the magic!! Example:
This example will generate a random text color using the rgb(x,x,x) method
<style>
body{ color :rgb(222,44,55); }
</style>
<body>
We have a nice random color
</body>
We have a nice random color

USING THE HEXADECIMAL:
Just like the rgb(x,x,x), a color can also be set using the hexdecimal that takes values where ranges for numerical value run form 0 to 9 and A TO F for alphabetical. This means that you can use any letter between A and F and number from 0 to 9
Hexadecimal are always prefixed with an hashtag(#) then followed by elther three or six values which are the combination of letters(a-f) and number(0-9):#42f54e
Example:
This example will also generate a random text color using the hexadecimal method #xxxxxx
<style>
body{ color :#7af4gg; }
</style>
<body>
We have a nice random color using hexadecimal
</body>
We have a nice random color using hexadecimal

English into Bemba dictionary App download (apk)
Learn the translation of the English words into a Zambian most popular local language bemba. This app works offline, comes with over 5,245 examples and quiz.
earn points , challenge friends, and make money as you interact with sageteche products
English into Bemba dictionary App downlo..
Sage AI is a state-of-the-art artificial intelligence language model that is designed to understand, interpret, and generate human language. With its advanced natural language processing capabilities, Sage AI can provide accurate and helpful responses to a wide range of questions and topics.
Sage AI is trained on massive amounts of text data, including books, articles, websites, and other sources of information. It uses a combination of machine learning algorithms and neural networks to analyze the structure and meaning of language, including grammar, syntax, and semantics. This allows Sage AI to understand the context and intent behind a question or statement, and provide a relevant and informative response.
When a user interacts with Sage AI, the conversation takes place in a conversational format, with the AI using a combination of pre-defined responses and machine learning to generate a response based on the input it receives. The AI can understand the user's question or statement, analyze its structure, and generate a response that is both accurate and engaging.
Sage AI can be used in a variety of applications, including customer service, chatbots, language translation, and content generation. For example, a customer service representative could use Sage AI to analyze a customer's complaint or question and provide a helpful and accurate response, or a language translator could use it to translate a document or conversation from one language to another.
Overall, Sage AI is a powerful tool for anyone who needs to interact with human language in a way that is efficient, accurate, and engaging. With its advanced natural language processing capabilities and machine learning algorithms, Sage AI can help businesses, organizations, and individuals communicate more effectively with their customers, colleagues, and partners.
Sage AI is a state-of-the-art artificial..
Ad
X
Here are ways of making money online