Key concepts in CSS ✍️

-

In this article we will understand how to apply these styles on the website:

  • CSS comments 
  • CSS colours
  • Font family, font style, font varient, font size
  • Manipulating Text using CSS and many more;

CSS comments 

Many a times you may need to put additional comments in your style sheet blocks. So, it is very easy to comment any part in style sheet. You simply put your comments inside /*this is a comment in style sheet*/.
You can use /*......*/ to comment multi-line blocks in similar way you do in C and C++ programming languages.

Example 

/*This is an external style sheet file*/
h1, h2, h3 {
color: red
font-weight:normal;
letter-spacing: 16 px;
margin-bottom: 64 px;
}
/* end of style rules. */

CSS colours - RGB Values:

  • In CSS, a color can be specified as an RGB value, using this formula:
  • rgb (red, green, blue)
  • Each parameter (red, green, blue) defines the intensity of the color between 0 and 255.
  • For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.
  • To display the color black, all color parameters must be set to 0, like this: rgb(0, 0, 0).

For example;


Output is:

Setting Fonts using CSS:

This will teach you how to set fonts of a content available in an HTML element. You can set following font properties of an element:

Set the font-family;

Following is the example which demonstrates how to set the font family of an element.

For example:-

<p style="font-family:georgia, garamond, serif;">
This text is rendered in either georgia, garamond, or the default serif font depending on which font you have at your system.
</P>

Set the font-style;

Following is the example demonstrates how to set the font-style of an element. Possible values are normal, italic and oblique.

For example:-

<P style="font-style:italic;">
This text will be rendered in italic style
</P>

Set the font-variant;

Following is the example which demonstrates how to set the font-variant of an element.

For example:-

<p style="font-variant: small-caps;">
 Honesty is the best policy!!
</p>

Output is:-

Set the font-size;

Following is the example which demonstrates how to set the font-size of an element . The font-size property is used to size of fonts. Possible values could be xx-small, small, medium, large, x-large, xx-large, smaller, larger, size in pixels or in %.

For example:-

<p style="font-size:20px;">
This font size is 20 pixels
</p>

<p style="font-size:large;">
This font size is large 
</p>

<p style="font-size:small;">
This font size is small
</p>

Output is:

Manipulating Text using CSS:

This tutorial will teach you how to manipulate text using CSS properties. You can set following text properties of an element :
  • The color property is used to set the color of a text.
  • The direction property is used to set the text direction 
  • The letter-spacing property is used to add or subtract space between the letters that make up a word.
  • The word-spacing property is used to add or subtract space between the words of a sentence.
  • The text-align property is used to underline, overline, and strikethrough text.
  • The text transform property is used to capitalize text or convert text to uppercase or lowercase letters.
  • The line-height property is used to specify the space between lines.

Set the Text color:

Following is the example which demonstrates how to set the text color. 

For example:-

<p style="color:blue;">
 Hello World!!!
</p>

Output is:

Set the Text direction:

Following is the example of which demonstrates how to set the direction of a text. Possible values are ltr or rtl.

For example:-

<p style="direction:rtl;">
Honesty is the best policy 
</p>

Output is:

Set the Letter spacing:

The letter-spacing property is used to specify the space between the character in a text.

For example:-

<p style="letter-spacing:3px;">
Honesty is the best policy 
</p>

<p style="letter-spacing:2px;">
Honesty is the best policy 
</p>

Output is:


Set the word-spacing :

The word-spacing property is used to specify the space between the words in a text.

For example:-

<p style="word-spacing:3px;">
Honesty is the best policy 
</p>

<p style="word-spacing:-2px;">
Honesty is the best policy 
</p>

Output is:


Set the Text alignment:

Following is the example which demonstrates how to align a text.

For example:-

<p style="text-align:right;">
  Hello World!!
</p>

<p style="text-align:right;">
  Hello World!
</p>

<p style="text-align:right;">
  Hello World!
</p>

Output is:


Set the Text transform:

The text-transform property is used to specify uppercase, capitalize and lowercase letters in a text.

For example:-

<p style="text-transform: capitalize;">
  education is best !!
</p>

<p style="text-transform: uppercase;">
  education is best !!
</p>

<p style="text-transform: lowercase;">
  education is best !!
</p>

Output is :



Set the Line-height:

The line hight property is used to specify the space between lines.

For example:-

<P style="line-height:0.7;">
Education is best!!
</p>

<P style="line-height:10.7;">
Hello World!!
</p>

Output is:



Comments

Post a Comment

Popular posts from this blog

WEBSITE DEVELOPMENT USING HTML AND CSS

-
What is website ? A website is a collection of publicly accessible, interlinked web pages that share a single domain name . Websites, can be created and maintained by an individual, group, business or organisation to serve a variety of purpose. Websites come ina nearly endless variety, including educational sites , news sites , forums , social media sites , e-commerce sites , and so on.  The page within a website are usually a mix of text and other media. That said, there are no rules dictating the form of  a website. Examples of website are: Bing.com    wikipedia.org ,    google.com , amazon.com   etc. Languages used for website development ; The most common programming languages used to develop website are : HTML (Hyper Text Markup Language) JavaScript   CSS (Cascading Style Sheets) PHP: Hypertext Preprocessor Note:- Some of these can be used as an extension of the existing languages but some can be used entirely separate from the other language...
Read more

Introduction to CSS ✍️

-
Image
  Basics About CSS ✍️ Cascading style sheets (CSS) describe how documents are presented on screens, in print, or perhaps how they are pronounced. Cascading style sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags . Using CSS, you can specify s number of style properties for a given HTML element . Each property has a name and a value, separated by a colon (:).  Each property declaration is separated by a semi-colon (;). Advantages of CSS : CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many web pages as you want. Superior styles to HTML - CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes. SEO Benefits - Faster loading times and mobile-friendliness, both facilitated by CSS, are important factors for search engine rankings , which can hel...
Read more

Advanced properties of CSS

-
Image
  In this article you will see how you can display your content better on your website with the help of using Css's properties like, text-shadow and box-shadow. #Whenever you want to apply Text-Shadow on your website in html with using CSS values .  Firstly ,  you should know that t ext -shadow accept four values like ; text-shadow:h-shadow v-shadow blur- radius  color ; h-shadow :- It is  horizontal offset of the shadows , in this positive values move the shadow to the right and the negative values move the shadow to the left. v-shadow :- It is vertical offset of the shadows , in this positive values move the shadow down and the nagative values move the shadow up. blur-radius :- The blur radius works optionally in the text-shadow . A large value makes the shadow more dispersed. Color :- This provides colour to the text-shadow. Example :- Here is how you would use the CSS text -shadow property in a HTML file to add a simple shadow to an <h1> element :...
Read more