online help: programming

Showing posts with label programming. Show all posts

Saturday 2 November 2019

Linking Documents in HTML | How to link document using HTML - OnlineHelp

Linking Document in HTML:

Let's discuss the Linking documents in HTML.

A linking documents in HTML is a unidirectional pointer from a source document that contains a link to the same destination. Links help the user to navigate across pages as well as within a page.

The text or an image that provides such a link is called hypertext or hyperlink.
<a href="name of the file to link i.e bookmark" target="location"> title of the link</a>

A hyperlink can be created by using an <a> anchor tag, which stands for anchor and has the following attributes:

href: It stands for hypertext reference which points the link to the bookmark/file from your PC. it contains the name of the bookmark or file to be opened which is specified within double-quotes.

You can use href to point to a URL and allow the reader to view the page from the beginning, or, you can use href to point to a specific area of that page, indicated by a name of the bookmark, so, that the user goes straight to that section of the document.

Target: it is used to define where the linked document will be opened which is also specified within double-quotes.

Title: It holds the text that will be displayed as a hyperlink.

Formatting the link:

Links can be formatted. To format the links,<body>tag contains attributes that specify the color for the hyperlink text depending upon the visiting status.

The following attributes of the <body> tag are used to provide color for the link.

LINK - Contains the link color which is specified in the <body> tag that has not yet been visited.

VLINK - Specifies the visited link color.

ALINK - Specifies the active link color.

Sample program for linking documents:

When we open "hyper.html" it will show the link "click here", and when we click it automatically opens the "link.html" file.

Program:link.html

<html>

<head>

<title>hyperlink example</title>

</head>

<body>

This is Open Source Software

</body>

</html>

Linking Documents in HTML | How to link document using HTML - OnlineHelp

Tuesday 29 October 2019

CSS text properties | text attribute in CSS - Online Help

Let's discuss what CSS text properties?

We are going to see one of the style sheet properties called "Text Property".It's consists of Eight different Text properties. So, guys, let's see all text properties in detail with their example.

CSS text properties:

The text displayed on the web page is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties and the paragraph is also indented, aligned, and the space between characters is specified. So some of the text formatting properties are as follow:

- Text decoration

- Text transform

-Text-direction

- Line spacing

- Word spacing

-Text alignment

-Line-height

1.Text decoration:

Now, what is text-decoration? The text-decoration property is used to set or remove decorations from the text. so the possible value for this property is none, overline,line-through, underline and blink. Sample program for text-decoration:

<html>

<head>

<title>CSS text properties</title>

<style type="text/css">

h2.one{text-decoration:line-through;}

h2.two{text-decoration:overline;}

h2.three{text-decoration:underline;}

</style>

</head>

<body>

<h2 class="one">Online Help</h1><p>[This is line through]</p><br>

<h2 class="two">welcome to my blog</h1><p>[This is over line]</p><br>

<h2 class="three">online help</h1><p>[This is underline]</p><br>

</body>

</html>

READ: How to add background image in HTML

2.Text Transform:

The text-transform property is used to specify either uppercase or lowercase letters in a text. So that we are able to specify our text easily. This property can be used to turn everything into uppercase or lowercase letters or capitalize the first letter of each word.

Example:

p{text-transform:uppercase;}
h1{text-transform:lowercase;}
td{text-transform:capitalize;}

3.Text-Indent:

The text-indent property is used to specify the indentation of the first line of a text within an element. so the value for this property is in terms of px,pc, in, mm.

Example:

p{text-indent : 50px;}

READ: CSS font properties

4.Text Direction:

The direction property specifies the direction in which the text should flow. Then, the possible values are ltr(left to right), rtl(right to left)

Example:

p{direction : rtl;}

5.Letter-Spacing:

The letter-spacing property increases or decreases the space between characters in a text within the element. The value for this property is in terms of px,pc, in, mm.

Example:

p{letter-spacing : 2px;}
h2{letter-spacing: 1px;}

6.Word-Spacing:

here, we are discussing word spacing.

The word-spacing property is used to increases or decreases the white space between words. So that we can specify the value for this property in terms of px,pc, in, mm.

Example:

p{word-spacing: 30px;}

7.Text Alignment:

The text-align property is used to set the horizontal alignment of a text. because of this text alignment, Text can be centered, or aligned to the left or right, or justified. When text-align is set to "justify", each line is stretched so that every line has equal width, ad the left and right margins are straight.

Example:

h1{text-align:center;}
p{text-align:right;}
td{text-align:justify;}

8.Line-height:

The line-height property is used to specify the gap between lines in the text. So that the lines should be separated equally. This can be done by specifying the line height in terms of px,pc, in, mm, and percentages.

Example:

p.small{line-height:90%;}
p.big{line-height:200%;}

I hope you guys understand what is CSS text properties. If you have any doubts or something incorrect or you wanna give more information about this topic then please comment below.

READ: CSS list properties

Friday 25 October 2019

Deadlock | what is deadlock |deadlock in java - Online Help

Let's discuss the important topic of java multithreading is a deadlock

Now, what is deadlock? A deadlock is a special type of error that you need to avoid( that relates specifically to multitasking), which occurs when two threads have a circular dependency on a pair of synchronized objects.

For Example,

suppose one thread enters object X and another thread enters the object Y. If the thread in X tries to call any synchronized method on Y, It will be blocked. however, if the thread in Y, in turn, tries to call any synchronized method on X, the thread waits forever, because to access X it would have to release its own lock on Y so that the first thread could complete.

Read: What is thread and life cycle of a thread

It may involve more than two threads and two synchronized objects.

Deadlock situations can arise that involve more than two threads. Assume that thread1 wait for a lock held by thread2.Thread2 waits for a lock held by thread3. Thread3 waits for a lock held by thread1.

Sample program for deadLock is:

class x

{

y b;

synchronized void x1()

{

System.out.println("starting x1");

b.y2();

}

synchronized void x2()

{

System.out.println("starting x2");

}

class y

{

x a;

synchronized void y1()

{

system.out.println("starting y1");

a.x2();

}

synchronized void y2()

{

System.out.println("starting y2");

}

class threadX entends Thread

{

x a;

ThreadX(x a)

{

this.a=a;

}

public void run()

{

for(int i=0;i<100000;i++);

a.x1();

}

class threadY entends Thread

{

y b;

ThreadY(y b)

{

this.b=b;

}

public void run()

{

for(int i=0;i<10000;i++);

b.y1();

}

class deadlockdemo

{

public static void main(String args[])

{

x a=new x();

y b=new y();

a.b=b;

b.a=a;

ThreadX t1=new ThreadX(a);

ThreadY t2=new ThreadY(b);

t1.start();

t2.start();

try

{

t1.join();

t2.join();

}

catch(Exception e)

{

e.printStackTrace();

}

System.out.println("successfully");

}

Read: interthread communication in java

Explanation:

In the following program class x has two synchronized methods named x1() andx2(). The x1() method calls the y2() method of that object. similarly, class y has two synchronized methods named y1() and y2(). The y1() methods call the x2()method of that object.

Class ThreadX extends and executes a loop that invokes the x1() method of the x object class. Class ThreadY extends and executes a loop that invokes the y1() method of the y object class.

I hope you understand what is a deadlock? if you have any queries or you find something wrong or have more information then please do comment.

Sunday 11 November 2018

What is Identifier in Java | Java identifier - Online Help

Guys, in this post we are going to discuss what is an identifier in java and let's see what are all the rules included in java identifiers. Identifiers are names given to variables, class, methods, objects, and interface in a program. It's a user-defined name. Identifiers should follow the following rules:

Identifiers can have digits, alphabets, underscore and dollar sign characters.
The first character must be an alphabet.
They can be of any number of characters.
They are case sensitive.i.e. upper case and lower case letters are different.

Example,
SUM is different from the sum.

Some examples fo valid indentifiers are:

A2,SUM,sum,c18,Balance_amount

Some examples of invalid identifiers are:
while - It's not an identifier because it's a java keyword.
94 - It's not an identifier because of its begins with alphabets.
roll no - Its not an identifier because it doesn't include space.

Saturday 10 November 2018

keywords in java | what is java keyword - online help

Keywords in java:

Guyz in this post we are going to discuss keyword in java.so, what is java keywords? and let's see how many keywords are there in java? so let's get started,

Keywords also referred to as reserved words. It has a predefined specific meaning. The user has no right to change its meaning.

For example,

int height;

Here, int is a keyword.it indicates that the variable height is of the integer data type.

Keywords cannot be used as a variable or identifier as they are part of the programming language syntax.

READ: features of java programming

Keywords should be written in lower case. Around 60 words have been reserved as the keywords in java language. The following are reserved for java:

Abstract	Default	If	Package	This	Class
Float	Native	Int	Return	Interface	Short
Assert	Char	Final	Finally	Long	Static
Volatile	Throws	Throw	Instanceof	Null	Try
Void	Continue	Const	Catch	Do	Break
Import	Byte	Public	Case	For	While
Goto	Boolean	Implements	Private	Double	Protected
Else	Transient	Extends	New	Switch	Synchronized
Super	True	False	Enum	Strictfp	Transient

The keyword 'const and goto' is a reserved word but it is not used and has no functions.

Wednesday 7 November 2018

Features of Java Programming | Characteristic of Java Programming - Online Help

Features of Java Programming:

Let's discuss the features of java programming

The fundamental forces that necessitated the intention of java are portable and security, other factors also played an important role in molding the final form of the languages. The various features of Java programming are as follow:

1.simple

2.object-oriented

3.robust

4.secure

5.compiled and interpreted

6.portable

7.multithreaded

8.Architecture-neutral

9.High performance

10.Dynamic

11.Distributed

Simple:

Java was designed to be easy to learn and use effectively.Java is a simple object-oriented language. It is a small language, we can write software that can run on a small local computer. Programming in Java is easier than c++. Because Java does not support pointers, header files, and operator overloading, most of the java's syntax is adapted from c++. Programmers who are familiar with that language will have a much easier time for learning java program.

Object-oriented:

Java was not designed to be source-code compatible with any other language. This allowed java team the freedom to design with a blank slate. One outcome of this way is a clean, usable, pragmatic approach to objects.Java is a pure general purpose object-oriented language. At runtime, a program creates objects from classes, Programming(OOP) is a powerful way of organizing and developing software. The short description of OOP is that it organizes a program as a set of components called Objects. These objects exist independently of each other, and they have rules for communicating with other objects, and for telling those objects to do things.Java inherits its object-oriented concept from c++ and other languages as Smalltalk.

Robust:

The ability to create robust programs was given a high priority in the design of java. To gain reliability, java restricts you in a few key areas, to force you to find mistakes early in program development. At the same time, java frees you from having to worry about many of the most common causes of programming errors. because java interpreter checks all system access performed within a program, Java programs cannot crash the system. Instead, when a serious error is discovered, java programs creates an exception. This exception can be captured and managed by the program without any risk of bringing down the system.

Secure:

The single most important aspect of Java is Security. As you are likely aware, every time that you download a normal program, you are risking a viral infection. Prior to Java, most users did not download executable programs frequently and those who did scan them for viruses prior to execution. This type of program can gather private information, such as credit card numbers, bank account balances and passwords by searching the content of your computer's local file system.Java answers both of these concerns by providing a firewall between networked applications and your computer. It is highly secure. The java interpreter verifies the bytecode before executing it. If bytecode runs out to be invalid, it will not be executed at all.Java does not allow programmers to interact with the memory of the system. i.e. one cannot write a java code that accesses the memory of the system.

Compiled and interpreted:

Java is a compiled and interpreted language.Java enables the creation of cross-platform programs by compiling into an intermediate representation called Java bytecode. Before you can run a program written in the Java language, the program must be compiled by the java compiler and then interpreted. This is made possible by its Java virtual machine. The Java virtual machine converts the intermediate bytecode into machine code.

READ: Separators in java

Portable:

Java is portable language.java compiler generates a code called bytecode and this code can be used by any machine. The size of the basic data type in Java is compatible with all the system making the java program highly portable.

Multithreaded:

Java was designed to meet the real-world requirement of creating interactive networked programs. To accomplish this, Java supports multithreaded programming, which allows us to write programs that do many things simultaneously. Multithreading means handling several tasks simultaneously. Without multithreading, only one line of execution takes place at a time. In a multi-threaded environment, we need not wait for an application to finish one task before starting another.

Architectural Neutral:

As we now that java is not dependent on the architecture of a particular machine.Java program can be run on a variety of CPUs and operating systems.

High performance:

Since java interpreter uses bytecodes, the java source code is first compiled and then interpreted.so the java program is executed very fast.

Dynamic:

Java is a dynamic language.it is capable of linking libraries, functions, methods as well as objects link in a new class library, methods, and objects.

Distributed:

Java is designed for the distributed environment of the internet because it handles TCP/IP protocols. In fact, accessing a resource using a URL is not much different from accessing a file. The original version of Java(Oak) included features for intra-address-space messaging. This allowed objects on two different computers to execute procedures remotely.Java has recently reviewed these interfaces in a package called Remote Method Invocation(RMI). This feature brings an unparalleled level of abstraction to client/server programming.

Tuesday 6 November 2018

What is Java programming | Java programming history | Types of Java program | Introduction of Java - Online Help

History of Java Programming:

Java programming is a platform-independent and pure object-oriented multi-threaded programming language.Java was developed by James Gosling and Patrick Naughton of sun microsystem, the USA in 1991. It took 18 months to develop the first working version. This language was initially called 'Oak' and it was renamed as 'Java' in 1995. Many more people contributed to the design and evolution of the language. Bill Joy, Arthur Van Hoff, Jonathan Payne, frank vellin and Tim Lindholm were key contributors to the maturing of the original prototype.

it was designed to be small, simple, and portable across both platforms as well as the operating system at the source and binary level. Because of its simplicity and platform-independent, it had been developed with the main objective of making the programming for the internet faster and easier. This language has a great future due to its four distinct features, namely object-oriented, platform-independent, internet support and security. The java programs developed exclusively for the internet, which is well known as 'applet' can now be effortlessly distributed to many users over the internet.

READ: Features of java programming

Introduction of Java programming:

-Java is a pure general-purpose object-oriented language.

-It is a platform-independent language(which was not dependent on any particular hardware or operating system.

-Java is compiled and interpreted language.

-Its compiler translates a source program into an intermediate code called bytecode. This code could not be used by the computer. These intermediate codes are called the Java virtual machine.

-Java interpreter produces the machine-dependent code called machine code and could be run by the computer.

Types of Java Program:

Java program has two types. They are:

An application program(stand-alone application)
Applets program

Application program/Stand-alone application:

Stand-alone applications are those programs that can be developed and executed on a stand-alone local computer (which can be executed from command prompt). The stand-alone application can be executed without browsers. A java program is not embedded within HTML or any other language and can be used on its own. It is referred to as an Application program.

Applet Program:

Applet programs are small java program developed for internet applications. Applets are embedded in the HTML document. Applet programs can be run using the applet viewer or web browser. For example, when you use Java to enhance the www page, the java code is embedded within HTML code. It is called an applet.

Sunday 4 November 2018

Display and Box property in CSS | CSS display and box property - Online Help

Box and display property in CSS:

Guys in this post we are going to discuss the box and display property in CSS .so, let’s get started, First we are going to discuss box property in CSS. All HTML element is considered as boxes.because it wrapped around HTML element. It consists of margins, borders, padding, and the actual content.

Box property in CSS:

The box model allows us to place a border around elements and arrange them elements inside the border.

The parts of the box model are:

1.Margin: The margin is the distance between the edges of the box and the box next to it.

2.Border: A border that goes around the padding and content. The border is affected by the background color of the box.

3.Padding: This padding is the space between the content of the box and its border.

4.Content: The content of the box, where text and images appear.

1.Margin property:

The CSS margin properties define the space around elements. The margin does not have a background color and is completely transparent. The top, right, bottom and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all the margin at once. The value of this property is either a length in terms of px, pm, in or percentage.

In CSS, it is possible to specify different margins for different sides like,

margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

It is possible to specify all the margin properties in one property.This is called a shorthand property. The shorthand property for all the margin properties is “margin”.

Example:

<html>

<head>

<title>margin property</title>

<style type=”text/css”>

P.mar

{

margin-left:1cm;

margin-right:5cm;

margin-top:2cm;

margin-bottom:20px;

padding:1.5cm;

border-width:10px;

border:medium double rgb(250,0,255)

}

</style>

</head>

body>

<p class=”mar”>This is an example for CSS box model

</body>

</html>

READ: Color and Background property in CSS

2.Border property:

The CSS border properties allow us to specify the style and the color of an element’s border. There are three properties of a border.

1. border-style

2. border-color

3. border-width

Border-style property:

The border-style property allows us to specify the style of the border. The value
of the borders are as follows

Dotted
Defines a dotted border.

Dashed
Defines a dashed border.

Solid
Defines a solid border.

Double
Defines two borders. The width of the two borders is the same as the border-width value.

Groove
Defines a 3d groove border. The effect depends on the border-color value.

Ridge
Defines a 3d ridge border. The effect depends on the border-color value.

Inset
Defines a 3d inset border. The effect depends on the border-color value.

Outset

Defines a 3d outset border. The effect depends on the border-color value.

The border-style property set the border for each of the sides of the elements. The individual border

styles can be controlled with border-top-style, border-bottom-style, border-left-style, border-right-style.

In CSS it is possible to specify different borders for different sides.

Example:

P

{

border-top-style:dotted;

border-bottom-style:solid;

border-left-style:dotted;

border-right-style:solid;

}

Border-color property:

The border-color property is used to set the color of the border. The color can be set by two methods:

Name-specify a color name, like” red”

Hex-specify a hex value, like #FF0000”

As with border widths and styles, you can use a property for each border’s color by using border-top-color, border-bottom-color, border-right-color, border-left-color.

Example:

P{border-style:solid; border-color:red;}

In CSS it is possible to specify different colors for different borders.

Example:

P

{

border-top-color:red;

border-bottom-color:blue;

border-left-color:green;

border-right-color:violet;

}

Border width property:
The border-width property is used to set the width of the border. The width is set in pixels, are by using one of the three pre-defined values: thin, medium, or thick.Four properties set the width for the specific border:border-top-width, border-bottom-width, border-left-width, border-right-width.The width can be specified by using the keyword thin, medium, thick as values indicating the size of the border.

Example:

<html>

<head>

<title>border width example</title>

<style type=”text/css”>

table{

border-width:thick;

border-top-color:red;

border-left-color:orange;

border-right-color:violet;

border-bottom-color:green;

border-top-style:dashed;

border-bottom-style:double;

border-right-style:dotted;

}

</style>

<body>

<table border=”border”>

<caption>nature image</caption><tr><td>nature image</td><td>

<img src=”lotus.jpg” alt=”cant display”></td></tr>

</table>

</body>

</html>

READ: Font property in CSS

3.Padding property:

The CSS padding properties define the space between the element border and the element content. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all padding’s at once.

In CSS it is possible to specify different padding for different sides:

padding-top:25px;

padding-bottom:25px;

padding-left:50px;

padding-right:50px;

Padding shorthand property allows us to specify all the padding properties in one declaration. The shorthand property for all padding properties is “padding”.

Example:

<html>

<head>

<title>margin and padding example</title>

<style type=”text/CSS”>

P.one

{

margin:0.1in;

padding:0.5in;

background-color:#FF33FF;

border-style:dotted;

}

P.two

{

margin:0.5in;

padding:0.1in

background-color:#00FF33;

border-style:dashed;

}

P.three

{

margin:0.3in;

background-color:#FFFF00;

}

P.four

{

padding:0.3in;

background-color:#FF9900;

}

</style>

</head>

<body>

<p class=”one”>welcome to my online help blog<br>[Margin:0.1in;

Padding:0.5in]</p>

<p class=”two”>welcome to my online help blog<br>[Margin:0.5in;

Padding:0.1in]</p>

<p class=”three”>welcome to my online help blog<br>[Margin:0.3in;no padding;no border]</p>

<p class=”four”>welcome to my online help blog<br>[Padding:0.3in;no margin,no border]</p>

</body>

</html>

Display Property:

The display property supports a variety of values. The display property allows an element’s display type to be changed to one of four values: block, inline, list-item, and none. The none value causes an element not to display or use canvas space. For example, a display property value of compact is used to position enclosed text in the margin of the following block element.

<h2 style=”display:run-in;”>heading</h2>

A value of run-in also is supported for the display property. This should allow a block-level element such as heading to be run in or combined with the next block-level element.

Display block and inline:

CSS code:

a{display:block;}

p{display:inline;}

Example:

<html>

<head>

<title>display property</title>

<style type=”text/css”>

a{display:inline;}

p{display:block;}

p{display:marker;}

</style>

</head>

<body>

<a>This blocks are displayed as inline</a>

<p>hyperlinks are displayed as block</p>

</body>

</html>

Friday 2 November 2018

Color and Background property of CSS Style sheet properties | what is color and background property of css - Online Help

Color and background property in CSS:

CSS allows us to control the color and background of the web pages. For background and color, It contains six different properties and also we can make a single declaration of all properties by using shorthand property called"background".

The six-color and background properties are as follow:

- background-color

- background-image

- background-repeat

- background-attachment

- background-position

- background

Three levels of collections of color might be used by an HTML document. The smallest useful set of colors includes only those that have a standard name and are guaranteed to be correctly displayable by all browsers on all color monitors. This collection of 17 colors is called the named "color".

COLOR NAMES	HEXADECIMAL VALUES	COLOR NAMES	HEXADECIMAL VALUES
Aqua	00ffff	Olive	808000
Black	000000	Orange	ffa500
Blue	0000ff	Red	ff0000
Fuchsia	ff00ff	Purple	800080
Grey	808080	Silver	c0c0c0
Green	008000	Teal	008080
Lime	00ff00	White	ffffff
maroon	800000	Yellow	ffff00
Navy	000080

Color Property:

The color property is used to specify the foreground color of HTML elements.The general form is
selector{color:#color value/color name;}

Example
body{color:red;}
H1{color:#FFA500;}

Background property in CSS:

Background-color:

The background-color property sets the background color of an element. The general form is
selector{background-color:#color value/color name;}

Example
body{background-color:white;}
h1{background-color:#000080;}

The value transparent indicates that whatever is behind the element can be seen.

Also read: CSStext properties

Background-image:

The Background-image property sets the background image of an element.

The general form is:

selector{background-image:url /image filename;}

Example:
body{background-image:url("/image/monkey.gif")}
p{background-image:url("http://www.cclrc.com/pretty.png")}
h1{background-image:none}

Background-Repeat:

If we do not want our image to repeat all over the background of the box, we should use the background-repeat property, which has four helpful values:

VALUE	PURPOSE
repeat	This causes the image to repeat to cover the whole page.(it is default therefore rarely used)
repeat-x	The image will be repeated horizontally across the page(not down the whole page vertically)
repeat-y	The image will be repeated vertically down the page(not down the whole page vertically)
no-repeat	The image is displayed only once

The general form is

Selector{background-repeat:repeat type;}

where

repeat type-repeat,repeat-x,repeat-y,no-repeat

Example:
body{background-image:url(/image/flower.gif);}
body{background-repeat:repeat-x;}
In the above example, the flower will only be tiled horizontally.

Background-attachment:

When we specify a background image we can use the background-attachment property to specify whether the image is fixed in its position, or whether it moves as the user scrolls up and down the page.

The general form is,

selector{background-attachment:value;}

where

value-either scroll or fixed

Example

body{background-image:url("flower.jpg");}
body{background-attachment:fixed;}

Background-position:

The background-position property is used to set the initial position of the background image. This can be made to spread the entire element area by using the background-repeat property.

The initial position can be specified by using any one of the following:

By specifying the top left corner of the image by using pixels.
By specifying the percentage along horizontal and vertical dimensions.
By specifying the horizontal and vertical dimensions using keywords. The keywords are:

Horizontal dimension - left,center,and right.

Vertical dimension - top, center, and bottom.

The default dimension keyword is the center.

The general form is

selector{background-position:horizontal position/vertical position;}

Example:

body{background-position:20% 40%;}
body{background-position:center;}
body{background-position:left bottom;}

Background:

The background property allows us to specify several of the background properties at once. The values can be given in any order, and if we do not supply one of the values, the default value will be used.

The general form is:

selector{background:background-color background-image background-repeat background -position background-attachment;}

Example:

body{background:white url(http://www.clrc/xyz.gif);}
p{background:url(..../background/lion.png)#F0F000 fixed;}
h1{background:#0F0 url (grass.jpg)no-repeat bottom left;}
ul{background:white url(monkey.jpg) repeat scroll 0% 50%;}

Tuesday 30 October 2018

List property in CSS | CSS List property - Online Help

We are going to see one of the style sheet properties called "List Property". List property in CSS is consist of three different list properties. So, guys, let's see all list properties in detail with their example.CSS allows us to customize the lists that can be made with HTML.

The types of list property in CSS is as follows:

- List-style-type

- List-style-image

- List-style-position

List-style-type :

The list-style-type property allows you to control the shape or the style of the bullet point in the case of an unordered list and the style of numbering characters in the ordered list. The value of this property for the unordered list is:

VALUE	MARKER
None	None
Disc(default)	A filled-in circle
Circle	An empty circle
Square	A filled-in square

The values to this property of ordered list are:

VALUE	MEANING	EXAMPLE
Decimal	Number	1,2,3,4,5,…
Decimal-leading-zero	0 before the number	01,02,03,04,05,……….
Lower-alpha	Lowercase alphanumeric character	a,b,c,d,e,….
Upper-alpha	Uppercase alphanumeric character	A,B,C,D,E,………
Lower-roman	Lowercase roman numerals	I,ii,iii,iv,v,……
Upper-roman	Uppercase roman numerals	I,II,III,IV,V,….

The list-style-type property can either be used on the <ul> and <ol> elements in which case it applies to the entire list or on the individual <li> element.

Example:

<html>

<head>

<title>css list-style-type example</title>

<style type="text/css">

li.one{list-style-type:disc}

li.two{list-style-type:square}

li.three{list-style-type:circle}

</style>

</head>

<body>

<h3>type of list style sheet property</h3>

<ul>

<li class="one">list-style-type</li>

<li class="two">list-style-image</li>

<li class="three">list-style-position</li>

</ul>

</body>

</html>

List-style-image:

The list-style-image property allows us to specify an image so that we can use our own bullet style. For this property, we must supply the URL of the marker image as value. The general format is:

li{list-style-image:url("URL of image goes here");}

Example:

<html>

<head>

<title>list style image example</title>

<style type="text/css">

li.image{list-style-image:url(MSN.ico);font-size:25pt;}

</style>

</head>

<body>

<h2>Type of list style sheet property</h2>

<ul>

<li class="image">list-style-type</li>

<li class="image">list-style-image</li>

<li class="image">list-style-position</li>

</ul>

</body>

</html>

ALSO READ: Adding styles to HTML document

List-style-position:

The list-style-position property indicates whether the marker should appear inside or outside of the box containing the main points. There are two values for this property. They are two values for this property. They are:

VALUE	PURPOSE
Inside	The marker is inside the block of text(which is indented:
Outside	The marker set to the left of the block of text( this is the default value if this is not specified)

Example:

ul{list-style-position:outside;}

ol{list-style-position:inside;}

top navigation

Saturday 2 November 2019

Linking Document in HTML:

Formatting the link:

Sample program for linking documents:

1. Pointing the link to the file from PC:

2. Pointing the link to the bookmark/website:

Tuesday 29 October 2019

CSS text properties:

1.Text decoration:

2.Text Transform:

3.Text-Indent:

4.Text Direction:

5.Letter-Spacing:

(adsbygoogle = window.adsbygoogle || []).push({}); 6.Word-Spacing:

7.Text Alignment:

8.Line-height:

Friday 25 October 2019

Sample program for deadLock is:

Explanation:

Sunday 11 November 2018

Saturday 10 November 2018

Keywords in java:

Wednesday 7 November 2018

Features of Java Programming:

Simple:

Object-oriented:

Robust:

(adsbygoogle = window.adsbygoogle || []).push({}); Secure:

Compiled and interpreted:

Portable:

(adsbygoogle = window.adsbygoogle || []).push({}); Multithreaded:

Architectural Neutral:

High performance:

Dynamic:

Distributed:

Tuesday 6 November 2018

History of Java Programming:

Introduction of Java programming:

Types of Java Program:

Application program/Stand-alone application:

Applet Program:

Sunday 4 November 2018

Box and display property in CSS:

Box property in CSS:

1.Margin property:

2.Border property:

3.Padding property:

Display Property:

Friday 2 November 2018

Color and background property in CSS:

(adsbygoogle = window.adsbygoogle || []).push({}); Color Property:

Background property in CSS:

Background-color:

Background-image:

Background-Repeat:

Background-attachment:

Background-position:

Background:

Tuesday 30 October 2018

List-style-type :

List-style-image:

List-style-position:

Search This Blog

best selling on amazon

recent posts

Contact Form

Best selling on amazon

6.Word-Spacing:

Secure:

Multithreaded:

Color Property: