Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

Tuesday, 8 February 2022

Difference between C and C++ | C and C++ difference - The Program Blog

Hello readers in this post you guys will be going to see the difference between C and C++, and what are the similarity is there in C and C++. So guys let's see both differences and similarities available between C and C++.

difference between c and c++

Some differences between C and C++ is as follows:

-C is a procedure/function-oriented language and C++ language is driven by a procedure/object.

-Data is not protected in C, whereas data is secured in C++. The data hiding concept is absent in C.

-C uses a top-down approach while C++uses a bottom-up approach. The program is prepared step by step in c, and in C++ base, elements are prepared first.

-In C we cannot give the same name to two functions in a program, whereas due to the function overloading feature, the above concept is possible in C++. One can initialize a number of functions with the same name, but with different arguments. The polymorphism feature is built in C++, which supports this concept.

-C uses printf() and scanf() functions to write and read the data respectively, while C++ uses cout and cin objects for output and input operations, respectively. Further,the cout uses <<(insertion operator) and cin uses >> (extraction operator).

-C uses stdio.h file for input and output functions, whereas C++ uses iostream.h for these functions.

-Constructor and destructor are absent in C and the same are provided in C++.

-Inline functions are supported by C++, and the same is absent in C. Inline functions can be used as micros. They are stated by the word 'inline'.

I hope you guys get cleared what is the difference between C and C++. If you have any queries or any doubts regarding this then please do comment in the comment section below.


Recommended post:

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>

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:

1. Pointing the link to the file from PC:

Program:hyper.html

<html>

<head>

<title>hyperlink example</title>

</head>

<body>

<a href="link.html">CLICK HERE</a>

</body>

</html>

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>

2. Pointing the link to the bookmark/website:

<html>

<head>

<title>hyperlink example</title>

</head>

<h1>Some of my favorite web sites</h1>

<body bgcolor="violet">

<ul>

<li><a href="www.google.com">google</a>

<li><a href="www.yahoo.com">yahoo</a>

<li><a href="www.bing.com">bing</a>

<li><a href="www.oracle.com">oracle</a>

<li><a href="www.w3schools.com">web design</a>

</ul>

</body>

</html>

The output is:


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


Friday, 26 July 2019

HTML Tags | What is HTML Tags? | How we can use HTML Tags? - Online Help

So, guys what is HTML Tags? Let's discuss HTML Tags.HTML Markup tags are usually called HTML Tags.HTML Tags are keywords surrounded by angle brackets<>.For example <html>.It is normally comes in pairs like<b> and </b>.The first tag in a pair is the start tag, the second tag is the end tag.it is also called as opening and closing tags.

Tags are used to represent various elements of a web page like header, footer, title, images, etc. Tags are of two types:
  • paired tags
  • singular tags

Paired tags:

Paired Tags are also called as container tag.it always comes in the pair. Paired tags which have both opening and closing i.e.<tag> and </tag>.These tags activate an effect and have a companion tag to close or discontinue the effect. For example,

<B> tag starts a bold effect for the text and its companion tag ends the bold effect.



Singular tags:

singular tags are also called empty tags. these tags contain only opening tag and it doesn't have the ending tag i.e <tag>. For example,

<HR> tag which is used to draw horizontal rule across the width of the document, and <BR> tags which are used to break the line of the document.so, These are the empty tags.


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>


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>

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;}

Saturday, 27 October 2018

What is Font Property in CSS | CSS Style Sheet Font Properties - Online Help

We are going to see one of the style sheet properties called "Font property".Font property in CSS consists of six different font properties. It is possible to combine all property and make one declaration by using the "font" keyword. So, guys, let's see all font properties in detail with their example.

Font properties in CSS:


What is Font Property in CSS | CSS Style Sheet Font Properties - Online Help

Font property in CSS
consists of six different properties, it allows us to control the appearance of a text in our document. CSS font properties define the font family, boldness, size, and the style of a text. Some of the font properties are as follows:
1.font-family

2.font-size

3.font-weight

4.font-style

5.font-stretch

6.font variant

1.Font family:

The font-family property is used to specify a list of font names. The browser uses the first font in the list that is supported. In CSS, there two types of font family name:

Generic family

Font family

Serif
Times new roman
Georgia
Sans-serif
Arial
verdana
Monospace
Courier
new Lucida console
Example:

p{font-family:"times new roman";Times;serif;}

2.Font style:

The font-style property is mostly used to specify italic text. This property has three values:
  • Normal: The text is shown normally
  • Italic: The text is shown in italics
  • Oblique: The text is "leaning" which is very similar to italic

Example:

p.normal{font-style:normal;}
p.italic{font-style:italic;}
p.oblique{font-style:oblique;}

3.Font size:

The font-size property enables us to specify a size for the font. We can specify a value for this property in several ways like:
  • Absolute size - The value for absolute size is xx-small,x-small,small,medium,large,x-large,xx-large.
  • Relative size - Smaller, larger.
  • Length - Length can be express in form of px,em,pt,in,cm,pc,mm.
  • Percentage - It is calculated as a proportion of elements that contain the text like 20%,10%.
Example:

H3{font-size:xx-large;}
H6{font-size:smaller;}
P{font-size: 12px;}
B{font-size:10%;}

4.Font weight:

The font weight property sets how thick or thin characters in text should be displayed.The possible value for font weight are normal,bold,bolder,lighter,100,200,300,400,500,600,700,800,900.

Example:

p{font-weight:normal;}
h2{font-weight:bold;}
h6{font-weight:100;}

5.Font stretch:

The font-stretch property allows us to make text wider or narrower that means the width of the actual letters in a font. It can take values like normal, wider, narrower, and expanded

6.Font variant:

The font-variant property specifies whether or not a text should be displayed in a small-caps font. In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letter appears in smaller font size than the original uppercase letters in the text.
There are two possible values for the font-variant property like normal and small-caps.

Example:

p.small{font-variant:small-caps}

All this font properties can declared in one declaration by using "font property" .This properties that can be set,are in order of-Font-style,font-variant,font-weight,font-size/line-height font-family".If one of the other values are missing,the default value will be inserted 0.

Example:

p.first{font: 15px arial,sans-serif}
p.second{font:italic bold 12px/30px georgia,serif;}

Example of font property in CSS

<html>

<head>

<title>font properties</title>

<style type="text/css">

p.one{font-family:'lucida calligraphy';font-weight:bold;font-size: 40pt;color:purple;}

h2.two{font-family:'cambria';color:blue;font-style:italic;}

p.three{font:small-caps italic bold 50pt 'times new roman'}

</style>

</head>

<body>

<p class="one">welcome to my blog</p>

<h2 class="two">welcome to my blog</h2>

<p class="three">welcome to my blog</p>

</body>

</html>

Friday, 26 October 2018

What is Style Sheet Property | Style Sheet Properties in CSS - Online Help

Style sheet property:

let's discuss the style sheet property. CSS includes 60 different properties in seven categories: fonts, lists, alignment of the text, margin, colors, backgrounds, and borders. Property values can appear in a variety of forms.



  •  'property values' keyword are used when they are only a few possible values and they are predefined.
  • A number value can be either an integer or a sequence of digits with a decimal point and can be preceded by a sign(+ or -).
  • Length values are specified as numerical values that are followed immediately by a two-character abbreviation of a unit name.Therefore the possible unit name are px ,for pixels;in,for inches;cm,for centimeters,mm,for millimeter;pt,for points.
  • Percentage values are used to provide a measure that is relative to the previously used measure for a property value. Percentage values or numbers that are followed immediately by a percentage sign(%).Therefore percentage values can be signed. If preceded by a +, the percentage is added to the previous value; if negative, the percentage is subtracted.
  • There can be no space between the URL and the left parenthesis.
  • Color property values can be specified as a color name, as a 6-digit hexadecimal number, or in RGB form. The RGB form is just the word RGB followed by a parenthesized list of three numbers that specify the levels of red, green and blue respectively. The RGB values can be given either as a decimal between 0 and 255 or as percentages. The hexadecimal number must be preceded with pound signs(#) as in #43AF00.

This is the brief introduction of some style properties. Insha Allah, we will see all the properties in detail in my next posts.

Also read: Adding styles to HTML document

Wednesday, 24 October 2018

Adding styles to the html document | Types of CSS - Online Help

Adding style to HTML document:

Let's discuss adding styles to the document and what are all types of style sheets available in CSS.

ln order to add styles to the HTML document, we have to add CSS style sheets with it. Different types of styles can be added to the HTML document, depending upon which kind of style sheets we are attaching.

There are three types of style sheets in CSS and they are:

  • External Style Sheet
  • Embedded Style Sheet
  • Inline Style Sheet

External style sheet:


In the External stylesheet, Style information is written in the separate file and it is a reference from the HTML document. This type of style sheet is very useful when the same style is applied to a different document. As I already said that it is a reference from the HTML document, the external style sheet is linked by using the HTML <link> tag. The general form is
             
                               <link rel="stylesheet" type="text/css" href="mystyle.css>

This tag specifies that the style information to be used to display this document is stored in a file named "mystyle.css".It is inserted in the <head> section of an HTML document.


Sample program:


Main.html:

<html>
<head>
<title>sample of external style sheet</title>
<link rel="stylesheet" type="text/css" href="style1.css">
</head>
<body>
<h2>welcome to my online help blog</h2>
</body>
</html>

style1.css:

h2
{
font-family:'lucida handwriting';
font-size:50pt;
color:Red;
}


2.Embedded style sheet:

Embedded Style Sheet is also known as an internal style sheet or document level style sheet.it should be used when a single document has a unique style.In this method,style information is placed under the <style> tag in the <head> section of an HTML page.

Sample program:

<html>
<head>
<title>sample program for internal style sheet</title>
<style type="text/css">
h2
{
font-family:'lucida handwriting';
font-size:50pt;
color:Red;
}
</style>
</head>
<body>
<h2>welcome to my online help blog</h2>
</body>
</html>

3.Inline style sheet:

In the inline style sheet, Style information is in line using the style attribute. The style attribute may be applied to any BODY element including BODY itself. The attributes take as it values any number of CSS declarations, where each declaration is separated by a semicolon.

Sample program:
<html>
<head>
<title>sample program for inline style sheet</title>
</head>
<body>
<h1 style="font-family:'lucida handwriting';font-size:50pt;color:red;">welcome to my online help blog</h2>
</body>
</html>

Tuesday, 23 October 2018

Cascading style sheet basics | basics of style sheet - Online Help

cascading style sheet basics:

Let's discuss the cascading style sheet basics

We are going to discuss the basics of stylesheet .so, let's discuss the basics. To create a cascading style sheet, you have to use the syntax to define the parameters of a style by first specifying the HTML element that you want to assign a style to and then, inside of curly braces{}, you list the attributes NAME and VALUE pair or pairs.

 You have to separate each name and value with a colon like this: NAME: VALUE. Then you separate each NAME: VALUE; pair with a semicolon, even if there is only one pair, like this:

 {NAME: VALUE ;}
 {NAME: VALUE; NAME: VALUE; NAME: VALUE ;}

Here are three different examples of real NAME: VALUE; pair:
     
      1. {color: red ;}
      2. {text-align: left; float: right ;}
      3. {background-color: purple; margin: 10pt; border-style:ridge;}

           Putting all together, here is a simple style that causes all H2 element headings to be displayed with a font that is sized at 14 points and colored aqua:
                     
                           H2 {font-size: 14pt; color:aqua;}






Monday, 22 October 2018

General format of CSS | Syntax of CSS | Syntax and Golden rules of styles in CSS - OnlineHelp

The general format of CSS:

Let's discuss the general format of CSS.

The general format CSS contains two parts in style rule i.e. selector and property: value. The selector determines what HTML tag we are styling, and the declaration is made up of one or more property: value pairs, ending in a semi-colon and enclosed in curly brackets.

In this case, a property is a display feature such as color and value is what we want that property to look like.

 selector{property:value}
 selector{property:value;property:value;property:value;...........}

Where,

selector  : Normal HTML element/tag you wish to define. It is the link between the HTML document and the style sheet.

property: 
The attribute of the tag intended to change.

Example:
1.body{color:green}
In this color attribute of the body, the element is set to green.

2.body{font-family: Arial; color:green}


Read: What is the cascading style sheet

The golden rules for CSS:

 Here are 6 rules of style definitions:


  •  Every CSS definition has to have a selector and a declaration. The declaration follows the selector and uses curly braces.
  • The declaration consists of one or more properties separated with a semicolon.
  •  Every property has a name, colon, and value.
  • A property can have multiple values separated with a comma.
  • Along with value, can also be a unit of measure.No space is allowed between the value and the unit.
  • When writing CSS code, you can use white space as needed-new lines, spaces, whatever makes your code more readable.