Remove underline from hyperlinks in page using CSS

We can use the text-decoration property for the link to specify if we need an underline or not. If we set the text-decoration property to none, we can remove underlines from hyperlinks in our html page. a:link, a:visited { text-decoration: none; }
Continue reading…

Enjoyed this post? Share it!

 
 

Use CSS to highlight text on a page

We can use a span with a specific css class to apply the highlight color. Below, we use the “highlight” class to apply highlighting. HTML: Lorem Ipsum is simply <span class="highlight">dummy text of the printing</span> and typesetting industry. CSS Class: .highlight{ background-color: Yellow; color: #B22222; } Output: Lorem Ipsum is simply dummy text of the […]
Continue reading…

Enjoyed this post? Share it!

 
 

Psuedo-Element Selectors in CSS

Pseudo-elements enable you to style information that is not available in the document tree. For instance, using standard selectors, there is no way to style the first letter or first line of an element’s content. However, the content can be styled using pseudo-elements. Example CSS using the Psuedo-Element Selector: p:first-line { font-weight: bold; } p:first-letter […]
Continue reading…

Enjoyed this post? Share it!

 
 

HTML CSS Inline elements

An inline element is formatted as a rectangular block joining other inline elements horizontally to form a line of inline elements. Inline elements wrap to a newline if the width of the parent content box is reached. One or more lines of in-line elements become a block element. A few inline elements are: <IMG> – […]
Continue reading…

Enjoyed this post? Share it!

 
 

HTML CSS Block elements

A block element is formatted as a rectangular block occupying the entire width of the parent content box. A few block elements are: <P> – A paragraph of text and/or inline elements. <LI> – A list item. Identical to <P; except that it has list-item marker on the left. <TABLE> – A table of cells. […]
Continue reading…

Enjoyed this post? Share it!

 
 

Inheritance of CSS Styles

CSS Style property Inheritance allows a child HTML tag to inherit the same CSS style properties of the parent HTML tag, if that property is not defined on the child tag. This inheritance rule enables writing shorter stylesheets because many of style properties are defined on the parent tags and inherited by the child tags. […]
Continue reading…

Enjoyed this post? Share it!

 
 

Group CSS Definitions

When multiple CSS definitions have to be applied to the same HTML tag, all of the definitions can be written together delimited with semicolon (;). Example of CSS definition groups: p.highlite {background-color: #efefef; width: 502px; margin: 4px; padding: 4px} The above CSS is identical to the following CSS: p.highlite {background-color: #efefef} p.highlite {width: 502px} p.highlite […]
Continue reading…

Enjoyed this post? Share it!

 
 

Pseudo classes on hyperlink tags

Browsers use pseudo classes to differentiate between different statuses of a HTML tag. Psuedo classes are used as selectors in CSS definitions by using a leading colon like (:visited). There are 3 pseudo classes on the hyperlink tag: A:link – A hyper link that has not been visited. A:visited – A hyper link that has […]
Continue reading…

Enjoyed this post? Share it!

 
 

Mixed Selectors in CSS

A mixed selector uses a combination of all other selectors in CSS. Examples of mixed selectors: /* selects <p class="highlite"> tags */ P.highlite {font-style: italic}   /* selects <p class="highlite" id="hot"> tags */ P.highlite#hot {color: red}   /* selects <p class=highlite id=hot> tags inside <table> */ TABLE P.highlite#hot {background-color: red}   /* selects <pre class=highlite […]
Continue reading…

Enjoyed this post? Share it!

 
 

Contextual Selectors in CSS

A contextual selector selects a HTML tag that is nested inside another specified tag. Contextual selectors are specified with two tags separated with a space. Example code for contextual selectors: /* set paragraph inside a table to use arial font family */ FORM P {font-family: arial} <form action=hello.php> <p>Search</p> <input type=submit value=Search> </form>   <p>Other […]
Continue reading…

Enjoyed this post? Share it!

 
 

Class Selectors in CSS

A CSS class selector selects all HTML tags that matches the class name defined in the tag attribute of class=”class_name”. Class selectors are specified with a leading dot like (.class_name). Example code: /* set text to italic to all tags with class="quote" */ .quote {font-style: italic} You can see the application of the above style […]
Continue reading…

Enjoyed this post? Share it!

 
 

Include CSS definition from external files

A single CSS file can be shared across multiple HTML documents. The CSS definitions in an external file can be linked to those HTML documents using the LINK tag in the HEAD tag as: <HEAD> … <LINK REL=stylesheet TYPE="text/css" HREF="css_file_url"/> … </HEAD> Save the following as w3mentor.css. BODY {background-color: black} P {color: yellow} The file […]
Continue reading…

Enjoyed this post? Share it!