Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (13)
Ähnlich wie Css present
Ähnlich wie Css present (20)
Css present
- 2. 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.
- 3. History of CCS: • 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.
- 4. Applying CCS to your Website
- 5. Internal • Embedded, or internal styles are used for the whole page. " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd "> <html> • This will make all of the paragraphs in the page red and all of the links blue.
- 6. 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" />
- 7. CSS Selectors, Properties, and Values
- 8. 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
- 9. 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. • red Is the same as rgb(255,0,0) Which is the same as rgb(100%,0%,0%) Which is the same as #ff0000 Which 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;}
- 10. • Font Family Text • 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.
- 12. The End. 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>.