Properties of CSS ✍🏻

Css properties

 Setting fonts using CSS

 1. Font-family:-  The font-family property is used to change the face of a font.

Syntax:-

<p style="font family:elephant;">India is best.</p>

2. Font-style:-  The font-style property is used to make a font italic or oblique.

Syntax:-

<p style="font-style:italic;">honesty is the best policy</p>

Coding:-



Output is :-


3. Font-variant:-The font-variant property is used to create a small-caps effect.

Syntax:-

<p style="font-variant:small-caps;">

Science Education </p>

Coding:-



Output is :-



4. Font-weight:- The font-weight property is used to increase or decrease how to bold or light a font appears.

Syntax:-

<p style="font-weight:bold;">IICS education</p>

Coding:-



Output is:-



5. Font-size:-The font-size property is used to increase or decrease the size of a font.

Syntax:-

<p style="font-size:35px;">Science Education</p>

Coding :-



Output is :-

Note:- The font property is used as shorthand  to specify a number of other font properties.

Manipulating Text using CSS:-

 1.Text-align property:- The text-align property is used to align the text of a document.

Possible values are: left,right, center, justify.

Syntax:-

<p style="text-align:right;">

This will be right aligned.

</p>

<p style="text-align:center;">

This will be center aligned.

</p>

<p style="text-align:left;">

</p>

Coding :-



Output is:-



2.Text-decoration property:- The text-decoration property is used to underline,overline,and strike through text.

1. The value text-decoration:none; is often used to remove underlined from links;

Syntax:-

<p style="text-decoration: underline;"> This is underline text 

</p>

Coding is:-

<html>

<head>

</head>

<body>

<p style="text-decoration:underline;">

 This is underline text

</p>

<p style="text-decoration:overline;">

 This is underline text </p>

<p style="text-decoration:line-through;">

 This is underline text

 </p>

<p style="text-decoration:none;">

 This is underline text

</p> 

</body>

</html>


Output is:-



3. Text-transform property:-

The text-transform property is used to capitalize text or convert text to uppercase or lowercase letters.

Syntax:-

<p style="text-transform: uppercase;">India is best 

</p>

<p style="text-transform: lowercase;">Science Education 

</p>

<p style="text-transform: capitalize;">IICS INDIA 

</p>

Coding :-



Output is :-



 4.Direction property:- The direction property is used to set the text direction.

Syntax:-

<p style="direction:rtl;"> This text will be rendered from right to left.

</p>

Coding :-



Output is :-



5. Letter-spacing:- The letter-spacing property is used to add or subtract space between the letters that make up a word.

Syntax:-

<p style="letter-spacing:3px;">

Education is best </p>

<p style="letter-spacing:-2px;">

Education is best </p>


Coding :-



Output is:-




6.word-spacing:- The word-spacing property is used to add or subtract space between the words of a sentence.

Syntax:-

<p style="word-spacing:10px;">Hello world </p>

<p style="word-spacing:-5px;">Hello world </p>

Coding:-



Output is:-



7.Text-shadow:- The text-shadow property is used to set the text shadow around a text.

Syntax:-

<p style="text-shadow:5px 5px 6px green;">India is best country.

</p>

Coding:-

<html>

 <head>

<title>

</title>

</head>

<body>

<p style="text-shadow:5px 5px 6px green;">India is best country.</p>  

<p style="text-shadow:0px 0px 6px skyblue;">India is best country.</p>

<p style="text-shadow:-5px -5px 6px yellow;"> India is best country.</p> 

</body>

</html>


Output is:-



8.line-height:- The line-height property is used to specify the space between lines.

Syntax:-

<p style="line-height:0.8;">Hello India </p>

<p style="line-height:10.8;">Hello India </p>

Coding:-



Output is:-




Comments

Post a Comment

Popular posts from this blog

Css basic Properties ✍🏻

Image
Css Selectors - 1.  The Css id selector:- The id selector uses the id attribute of an HTML element to select a specific element. The id of an element is unique with in a page, so the id selector is used to select one unique element. To select an Element with a specify id, write a hash(#) ch aracter , followed by the id of the elements. Output is:- 2. The Css class Selector:- The Class Selector selects HTML elements with a specific class attribute. To select an element with a specify class, write a period(.) character , followed by the class name. Output is:- The Difference between Id and Class:-  The Difference between an id and a class is that an Id can be used to identify one element , whereas a class can be used to identify more than one .   ID's are unique:- Each element can have only one I'd. Each page can have only one element with that Id. Classes are Not unique:- You can use the same class on multiple elements. You can use multiple classes on the same element. CSS...
Read more

Basic Html Notes

  What is website ? A website is a collection of web pages   which contains the information about the particular organization or institution or any product.It contains the related content that is identified by a common domain name and published on any one web server . Few examples of such websites are bing.com , wikipedia.org , google.com , amazon.com etc. Note:-A website can be opened using the software known as Browser . Commonly used browsers are Google Chrome , internet explorer , Mozilla Firefox etc.  Language used for website development :- The most common programming language used to develop websites are: HTML ( HyperText Markup Language ), CSS ( Cascading Style Sheets ), JavaScript and 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 languages to create a dynamic or static website . Purpose:- Websites are developed for a particular purpose,such as com...
Read more

Advanced Html Notes

Comments in HTML:- The comment tag is used to insert a comment in the HTML source code. A comment can be placed anywhere in the document and the browser will ignore everything inside the brackets. <p>This html comment would<!-- This is a comment --> be displayed like this.</p> Note:- You don't see the text between the tags<--and-->.If you look at the source code,you would see the comment.To view the source code for this page,in your browser window, select View  and then select Source . HTML TEXT FORMATTING:- 1. <b> :- Defines  bold  text. 2.<Strong> :- Defines Important  text. 3. <i> :-   Defined Italic  text. 4. <em> :- Defined Emphasized  text. 5. <mark> :- Defined Marked text. 6. <small> :-  Defined Small  text. 7. <del> :- Defined deleted text. 8. <ins> :- Defined Inserted text. 9. <sub> :- Defined Subscript  text. 10. <sup> :- Defined Superscri...
Read more