Difference between revisions of "CSS"

From FreekiWiki
Jump to navigation Jump to search
(intro paragraph)
 
(6 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
CSS, or '''C'''ascading '''S'''tyle '''S'''heets, are files, provided along with HTML, to style the webpage accordingly.
+
{{migrated}}
 +
[https://docs.google.com/document/d/14TU9nDwjzs5Q9a99kSkGMCBzxn98cyrwhW043Jfu3Js/edit?usp=sharing Link]
 +
 
 +
CSS, or '''C'''ascading '''S'''tyle '''S'''heets, is a language created to provide style and formatting for HTML elements.
  
 
__TOC__
 
__TOC__
  
 
==How to include CSS in your HTML document==
 
==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==
 
==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==
 
==How to style the chosen element==
 +
===text===
 +
===box===
 +
===flow===
  
 
==See Also==
 
==See Also==

Latest revision as of 10:42, 19 July 2014

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

Retrieved from "http://wiki.freegeek.org/index.php?title=CSS&oldid=70728"