Showing posts with label css. Show all posts
Showing posts with label css. 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:

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

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