css present
DESCRIPTION
TRANSCRIPT
CCSCascading Style Sheets
What is CCS?
• Cascading Style Sheets is a mechanism for adding style (like fonts, colors, spacing) to online documents.
• It is a way to style HTML. Whereas the HTML is the content, the style sheet is the presentation of that document.
• Styles were added to HTML 4.0 to solve a problem
• External Style Sheets can save a lot of work, and they are stored in CCS files.
• HTML was intended to define the content of a document, like:
• <h1> This is a heading </h1>
• <p>This is a paragraph.</p>
• HTML was not designed to have tags to format a document. When tags like <font>, and color attributes were added to the HTML 3.2 specification, it caused many difficulties. Development of large web sites became a long and expensive process.
• To solve this problem, the World Wide Web Consortium (W3C) created CSS.
• In HTML 4.0, all formatting could be removed from the HTML document, and stored in a separate CSS file.
• All browsers now support CSS.
History of CCS:
Applying CCS to your Website
Internal • Embedded, or internal styles
are used for the whole page.
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {
color: red;
}
a {
color: blue;
}
</style>
• This will make all of the paragraphs in the page red and all of the links blue.
External• External styles are used
for the whole, multiple-page website.
• If you save a file are “web.css” then it can be linked to in the HTML like this:
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />
CSS Selectors, Properties, and Values
Selectors (and properties)
• HTML has tags, CSS has 'selectors'. Selectors are the styles in internal and external style sheets. HTML selectors, are simply the names of HTML tags and are used to change the style of a specific tag.
• For each selector there are 'properties' inside curly brackets, which simply take the form of words such as color, font-weight or background-color.
• A value is given to the property following a colon (NOT an 'equals' sign) and semi-colons separate the properties.
• body
• {font-size: 0.8em;
• color: navy;}
• This will apply the given values to the font-size and color properties to the body selector
Colors• CSS brings 16,777,216
colours to your disposal. They can take the form of a name, an rgb (red/green/blue) value or a hex code.
• redIs the same asrgb(255,0,0)Which is the same asrgb(100%,0%,0%)Which is the same as#ff0000Which is the same as#f00
• Colours can be applied by using color and background-color
• A blue background and yellow text could look like this:
• h1 {color: yellow;
• background-color: blue;}
• Font Family
• This is the font itself, such as Times New Roman, Arial, or Verdana.
• The font you specify must be on the user's computer
• : if the name of a font is more than one word, it should be put in quotation marks, such as font-family: "Times New Roman".
• Font Weight and Style
• This shows whether the text is bold or not. This usually works as font-weight: bold or font-weight: normal.
• Font Style states whether the text is italic or not. It can be font-style: italic or font-style: normal.
Text
http://www.youtube.com/watch?v=R_FOJrxb-vI
Video!
Bibliography:•"Cascading Style Sheets Home Page." Cascading Style Sheets. N.p.,
n.d. Web. 16 Oct. 2012. <http://www.w3.org/Style/CSS/Overview.en.html>.
•Griffiths, Patrick. "Applying CSS." HTML and CSS Tutorials, References, and Articles. HTML Dog, n.d. Web. 16 Oct. 2012. <http://www.htmldog.com/guides/cssbeginner/applyingcss/>.
•Griffiths, Patrick. "Colours." HTML and CSS Tutorials, References, and Articles. N.p., n.d. Web. 16 Oct. 2012.
<http://www.htmldog.com/guides/cssbeginner/colours/>.•Griffiths, Patrick. "CSS Selectors, Properties, and Values." HTML
and CSS Tutorials, References, and Articles. HTML Dog, n.d. Web. 16 Oct. 2012. <http://www.htmldog.com/guides/cssbeginner/selectors/>.•Griffiths, Patrick. "Text." HTML and CSS Tutorials, References, and
Articles. N.p., n.d. Web. 16 Oct. 2012. <http://www.htmldog.com/guides/cssbeginner/text/>.
•Websmarttv. "What Is CSS?" YouTube. YouTube, 27 Jan. 2010. Web. 16 Oct. 2012. <http://www.youtube.com/watch?v=R_FOJrxb-vI>.
The End.