CSS

From FreekiWiki
Jump to navigation Jump to search
deletion

This page has been migrated to a document on Free Geek's Google Drive.

Information remaining behind may no longer be relevant.

MIGRATOR:

When you have tagged this page as migrated,
please add a link to the new document on Google Drive.

(Link to new page immediately below.)


Link

CSS, or Cascading Style Sheets, is a language created to provide style and formatting for HTML elements.

How to include CSS in your HTML document

There are three different ways that CSS can be added into an HTML document;

<link> tag

The <link> tag must be placed within the <head> of a document.

<html>
   <head>
      <link href="myfile.css" rel="stylesheet" type="text/css" media="screen" />
   </head>
   <body>
   </body>
</html>

<style> tag

The <style> tag is used to make CSS declarations directly in the HTML file's <head> tag.

<html>
   <head>
      <style type="text/css">
         div#example {
            color: black;
            height: 50px;
            width: 50px;
         }
      </style>
   </head>
   <body>
   </body>
</html>


style attribute

Most HTML elements can have a style attribute added to them, so CSS may be applied directly to specific elements.

<html>
   <head>
   </head>
   <body>
      <div style="color:black; height:50px; width:50px;">
      </div>
   </body>
</html>


How to select an HTML element

by tag

The following will set the text color in all <div> tags to black.

div {
   color: black;
}

The following will affect all HTML tags.

* {
   color: black; 
}

by ID

The pound (or hash) sign is used to indicate an specific elements' ID. There should be only one ID per HTML document.

div#example {
   color: black;
}

by Class

A period (or dot) is used to affect a class (or group) of HTML elements.

div.group {
   color: black;
}

Descendants

This will affect all <p> tags, which are descendants of <div> tags. Other <p> tags will not be affected.

div p {
   color: black;
}

We can specify only immediate descendants (children) using the greater than (>) sign.

div > p {
   color: black;
}

How to style the chosen element

text

box

flow

See Also