w3mentor
Learning web technologies simplified!
 
Home / CSS / Archive by category 'CSS Basics'

CSS Basics

Options for text-decoration in CSS

The different options for text-decoration property in CSS are

  • none
  • underline
  • overline
  • line-through
  • blink

We can use a combination of these options in our CSS as shown below:

a:link, a:visited {
  text-decoration: underline overline;
}

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;
}

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 printing and typesetting industry.

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
{
    font-size: 200%; font-weight: bold;
}

other pseudo elements are :before and :after.
Pseudo-classes enable the formatting of items that are not in the document tree. They include :first-child, :link, :visited, :hover, :active, :focus, and :lang(n)

Attribute selectors in CSS

Attribute selectors are used to select elements based on their attributes or attribute value.

Example to select any image on an HTML page that is called “big.gif” (attribute selector) :

img[src="big.gif"]
{
    border: 1px solid #000;
}

Adjacent sibling selectors in CSS

Adjacent sibling selectors will select the sibling immediately following an element. For example, you might want to target an

element, but only

elements that immediately follow an

element.

Example CSS using the Adjacent Sibling Selector:

h2 + h3
{
    margin: -1em;
}

Child selectors in CSS

Child selectors are used to select an element that is a direct child of another element (parent). Child selectors will not select all descendants, only direct children.

Example CSS using the Child Selector

div > em
{
     color: blue;
}

Universal Selectors in CSS

Universal selectors are used to select any element.

Example : set the margins and padding on every element to 0 using universal selectors

*
{
     margin: 0;
     padding: 0;
}

Example: Universal Selector Within the paragraph element.

p *
{
     color: red;
}

Classes vs IDs in CSS

Classes can be used as many times as needed within a document. IDs can be applied only once within a document. If you need to use the same selector more than once, classes are a better choice.

However, IDs have more weight than classes. If a class selector and ID selector apply the same property to one element, the ID selector’s value would be chosen. For example, h2#intro { color: red; } will override H2.intro { color: blue; }.

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> - A tag to insert an image into the current line.
<STRONG> - A tag to make the text stronger.
<EM> - A tag to emphasize the text
<INPUT> - A tag to allow user entering input data to a form.
<SPAN> - A container to group inline elements into a unit.
<A> - A tag to create a hyper link.
<BR> - A tag to break the current line.

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. Each cell is identical to <P>
<FORM> - An input form. Identical to <P> except that it has no margins.
<DIV> - A container to group elements into a block element.
<H1/H2/H3...> - A title line. Identical to <P> except that it has different margins and font size
 <HR> - A horizontal ruler.

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.

<html><head>
<title>CSS Included</title>
<style type="text/css">
  BODY {background-color: black}
  P {font-family: arial; font-size: 12pt; color: yellow}
  STRONG {font-weight: bold}
  EM {font-style: italic}
</style>
</head><body>
<p>Welcome to <strong>w3mentor.com</strong>. 
You should see this text in <em>yellow</em> 
on black background.</p>
</body></html>

The CSS above shows you how to define most of the font properties on P tags and let STRONG and EM to inherit them. The font family, size and color in STRONG and EM are inherited from P.

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 {margin: 4px}
p.highlite {padding: 4px}

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 been visited before.
    A:active – A hyper link that is currently under the mouse pointer.

Example Pseudo Classes:

/* show un-visited links in blue */
A:link {color: blue}
 
/* show visited links in yellow */
A:visited {color: yellow}
 
/* change background color gray when mouse over links */
A:active {background-color: gray}

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 id=hot> tags inside <table>
  and <pre id="hot"> tags */
TABLE P.highlite#hot, PRE#hot {background-color: red}

Group Selectors in CSS

A group selector selects multiple HTML tags at once. Group selectors are specified with multiple tags separated with a comma like (tag, tag, tag).

Example of group selector:

/* set background color to gray for all instances  of three tags: <UL>, <OL>, and <DL> */
UL, OL, DL {background-color: gray}

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 normal paragraphs...</p>

ID Selectors in CSS

A ID selector selects all HTML tags that matches the id name defined in the tag attribute of id=”id_name”. ID selectors are specified with a leading hash like (#id_name).

Example code:

/* set text to red to all tags with id="hot" */
#hot {color: red}

You can see the application of the above style when you use the following html.

<p>Normal paragraph...</p>
<p id="hot">Special paragraph...</p>
<p>Normal pre-formatted text...</p>
<p id="hot">Special pre-formatted text...</p>

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 when you use the following html.

<p>Normal paragraph...</p>
<p class="quote">Special paragraph...</p>
<p>Normal pre-formatted text...</p>
<p class="quote">Special pre-formatted text...</p>

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 can be linked as

<html><head>
<title>CSS Linked</title>
<link rel=stylesheet type="text/css" href="w3mentor.css"/>
</head><body>
<p>Welcome to w3mentor.com. 
You should see this text in yellow on black background.</p>
</body></html>

Latest Tutorials & Code Snippets

Reference Guides