Skip to main content

First-line and First-letter Pseudo attribute in css

In css, give two most useful pseudo attribute that are:

1. First-line : it is effect in first line of given paragraph.
2. First-letter: it is effect in first letter of given paragraph.

For Example HTML File is :

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>krButani</title>
<style>
p.texts {
width:500px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
}
/* This is apply to first line */
p.texts:first-line {

Color:green;
font-size:24px;
}
/* This is a apply to first letter. */
p.texts:first-letter {

Color:red;
font-size:72px;

}
</style>
</head>

<body>
<p class="texts">
Premananda was a "vyakhyan-kar", a traveling storyteller,
who narrated his subject in song form and then perhaps elaborated on the lines in prose.
His style was so fluent that the long poems running into hundreds of lines were memorised by the people
and are still sung during the morning routines.
In this sense the oral tradition of the much more ancient Vedas was clearly continuing in India till late.
Premananda's famous poetry-stories deal with epic themes couched in stories of mythical kings, and the puranas.
He also wrote a drama based on Narasinh Mehta's life capturing his simplicity and his disregard for worldly divisions of caste and class.
</p>
</body>
</html>

Output is :
Post a Comment

Popular posts from this blog

My new Jquery Plugin name is krDailog

This is my new jquery plugin i hope this is use full to you if you require this plugin than contact me

 /*
    krDailog Version 1.0
    Author: krButani
    email: butanikartik1108@gmail.com
*/


Require to use this function
    - bootstrap.css new version
    - bootstrap.js new version
    - jquery.js new version
    - jquery-ui.js new version
    - glyphicons font by bootstrap

# you can use new version of all and also use min file also

# include file first this way

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/krDailog.css">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>
    <s…

Intent demo pass with text demo in Android

First Create Two acitvity layout file name firstscreen.xml second_screen.xml java filename FirstScreen.java SecondScreen.javafirstscreen.xml
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/firstscreen"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.example.krbutani.intentpasswithdatademo.Firstscreen">

<Button
android:text="Goto Second"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignPare…