HOME
          About US
          Contact Us

CSS Pseudo Code

14.3 CSS Pseudo Code : (Page 5/5)


(Cotinued from previous page)

v) After Pseudo Element: This is used to insert some content after the actual content of an element.

If we want that '***' should appear after the 'h1' tag
Command: h1:after { content:'***'; }
If you write following in HTML
Command: (in HTML file): <h1>Our Heading</h1>

Output: Our Heading ***

NOTE : You may even insert some image before and after an element. E.g.
h1:before { content:url(logo.gif); }



vi) First Child Pseudo Class: This definition finds and applies on the first appearance on an element of another element.
E.g. If we want that the first 'p' element should be written in blue color

Command: Write in Style Sheet p:first-child { color:blue;}
Write in HTML file Command: (in HTML file): <p>Your Text 1 </p> <p> Your Text 2 </p>

Output: Your Text 1 Your Text 2

Note: In fact for first-child' command to work a <!DOCTYPE> must be declared in HTML file (in our 'index.html' and 'sample.html' we have already declared this).

14.4- Block Elements: A block element is an element that takes up the full width available, and has a line break before and after it. The following are Block element:

<h1>
<p>
<div>
<li>
14.5 - Inline Elements: An inline element only takes up as much width as necessary, and does not force line breaks. The following are inlie element:

<span>
<a>
CSS Pseudo Code © funandhobby.com (CSS Pseudo Code)