Jump to content

Web Science/Part1: Foundations of the web/Web content/Cascading Style Sheets

Add links
From Wikiversity

Cascading Style Sheets

Learning goals

  1. be able to name at least 2 important point why to use style sheets
  2. know how the cascading process works
  3. know the basic syntax of cascading stylesheets

Video

Script

style.css

[edit | edit source]
body {
	font-family: 'Open-Sans', sans-serif; 
	background: #0099D8; 
	color:white;
}

ol {
	border: 1px solid white; 
	border-radius:6px;
}

li {
	border-bottom: 1px solid white;
	margin: 20px 20px 30px;
	padding-bottom:20px;
}

h3 {
	color:orange;
	margin:0;
	padding:0;
}

strong {
	color:orange;
}

playlist.hmtl

[edit | edit source]
<!doctype html>
<html lang="en">
<head>
<title>Rens Pickhardt's playlist example</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
	<h1>
		This is <em>Rene Pickhardt</em>'s playlist.
	</h1>
	<ol>
 		<li>
 	 		<em>2013-11-02 01:54 CET</em>
 	 		<h3 ">Lords of the boards</h3>
 			 on <em>Proud like a God</em> by <strong>Guano Apes</strong>
 		</li>
 		<li>
			<em>2013-11-02 01:57 CET</em>
			<h3>Toxicity</h3>
			on <em>Toxicity</em>
			by <strong>System of A Down</strong>
		</li>
 		<li>
			<em>2013-11-02 02:01 CET</em>
			<h3>B.Y.O.B</h3>
			on <em>Mezmerize</em>
			by the artist <strong>System of A Down</strong>
		</li>
	</ol>
</body>
</html>

Quiz

These challenges are here to help you flex your CSS skills, and see where you need to practise more!

If you're new to CSS, have a read through the first page of Wise Women's Getting Started with Cascading Style Sheets, which introduces CSS along with some everyday examples.

CSS Challenge 1 – Fonts and Colours

[edit | edit source]
Challenge 1
This first challenge only involves changing your fonts and colours - no layout or other more advanced CSS here! Copy-n-paste the HTML to get started, and click on the image to see what your page should look like!

Hints:

  • You'll need to link your HTML to a new stylesheet.
  • You can use the following fonts list for help: http://www.w3.org/Style/Examples/007/fonts
  • Don't worry if your text doesn't wrap at the same word -- it will depend on the size of your browser window.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>CSS Challenge 1</title>
  </head>
  <body>
   <h1>Shakespeare's Sonnet #18</h1>
    <p>
       This is one of the most famous of the sonnets. It is referenced
       in the film Dead Poets Society and gave names to the band The
       Darling Buds and the book and television series The Darling Buds
       of May. Read it and weep!
    </p>
    <ul>
      <li>Shall I compare thee to a summer's day?</li>
      <li>Thou art more lovely and more temperate:</li>
      <li>Rough winds do shake the darling buds of May,</li>
      <li>And summer's lease hath all too short a date:</li>
      <li>Sometime too hot the eye of heaven shines,</li>
      <li>And often is his gold complexion dimm'd,</li>
      <li>And every fair from fair sometime declines,</li>
      <li>By chance, or nature's changing course untrimm'd:</li>
      <li>But thy eternal summer shall not fade,</li>
      <li>Nor lose possession of that fair thou ow'st,</li>
      <li>Nor shall death brag thou wander'st in his shade,</li>
      <li>When in eternal lines to time thou grow'st,</li>
      <li>So long as men can breathe, or eyes can see,</li>
      <li>So long lives this, and this gives life to thee.</li>
    </ul>
      
    <p class="copyright">See the 
    <a href="http://en.wikipedia.org/wiki/Shakespeare%27s_Sonnets">
    Shakespeare's sonnets</a> Wikipedia article for more information
    </p>
  </body>
</html>

CSS Challenge 2 – Shakespeare's Sonnet

[edit | edit source]
Challenge 2
This second challenge will help you to re-cap your CSS text formatting skills, as well as start using margins and padding. Copy-n-paste the HTML to get started, and click on the image to see what your page should look like!
Challenge 2-A
You can also try to get your page to look like the page from the image on the right (challenge 2-A), which uses a few more advanced (though not too hard) CSS techniques.

If you can improve on the design (shouldn't be too hard!) without increasing the difficulty of this challenge, great! I'll happily replace the image!

Hints:

  • The thumbnails are not very representative, but this challenge requires you to create a fixed-width layout that is centred in the browser window. Click on an image for a closer view.
  • Hint 2: to get the wrap division to stay centred, you'll need to set the left and right margins to a_t_ (you've got to fill in the blanks).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>CSS Challenge 2</title>
  </head>
  <body>
    <div id="wrap">
      <h1>Shakespeare's Sonnet #18</h1>
      <p>
         This is one of the most famous of the sonnets. It is referenced
         in the film Dead Poets Society and gave names to the band The
         Darling Buds and the book and television series The Darling Buds
         of May. Read it and weep!
      </p>
      <ul>
        <li>Shall I compare thee to a summer's day?</li>
        <li>Thou art more lovely and more temperate:</li>
        <li>Rough winds do shake the darling buds of May,</li>
        <li>And summer's lease hath all too short a date:</li>
        <li>Sometime too hot the eye of heaven shines,</li>
        <li>And often is his gold complexion dimm'd,</li>
        <li>And every fair from fair sometime declines,</li>
        <li>By chance, or nature's changing course untrimm'd:</li>
        <li>But thy eternal summer shall not fade,</li>
        <li>Nor lose possession of that fair thou ow'st,</li>
        <li>Nor shall death brag thou wander'st in his shade,</li>
        <li>When in eternal lines to time thou grow'st,</li>
        <li>So long as men can breathe, or eyes can see,</li>
        <li>So long lives this, and this gives life to thee.</li>
      </ul>
      
      <p class="copyright">See the 
      <a href="http://en.wikipedia.org/wiki/Shakespeare%27s_Sonnets">
      Shakespeare's sonnets</a> Wikipedia article for more information
      </p>
    </div>
  </body>
</html>

CSS Challenge 3 – 2-column layout

[edit | edit source]
Challenge 3
This one will get you fiddling with margins and padding!

Hints:

  • You'll need to set a fixed width for your wrap, and then float the navigation div.
  • You may also want to fiddle with widths/margins of the navigation and content divisions!
  • For this and the next few challenges, you may want to first look through MaxDesign's Two columns with colour tutorial.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>CSS Challenge 3</title>
  </head>
  <body>
    <div id="wrap">
      <div id="nav">
        <h2>Sonnet Index</h2>
        <ul>
          <li><a href="#">Sonnet #1</a></li>
          <li><a href="#">Sonnet #6</a></li>
          <li><a href="#">Sonnet #11</a></li>
          <li><a href="#">Sonnet #15</a></li>
          <li><a href="#">Sonnet #18</a></li>
        </ul>
      </div>
      <div id="content">
        <h1>Shakespeare's Sonnet #18</h1>
        <p>This is one of the most famous of the sonnets. It is referenced
           in the film Dead Poets Society and gave names to the band The
           Darling Buds and the book and television series The Darling Buds
           of May. Read it and weep!</p>
        <ul>
          <li>Shall I compare thee to a summer's day?</li>
          <li>Thou art more lovely and more temperate:</li>
          <li>Rough winds do shake the darling buds of May,</li>
          <li>And summer's lease hath all too short a date:</li>
          <li>Sometime too hot the eye of heaven shines,</li>
          <li>And often is his gold complexion dimm'd,</li>
          <li>And every fair from fair sometime declines,</li>
          <li>By chance, or nature's changing course untrimm'd:</li>
          <li>But thy eternal summer shall not fade,</li>
          <li>Nor lose possession of that fair thou ow'st,</li>
          <li>Nor shall death brag thou wander'st in his shade,</li>
          <li>When in eternal lines to time thou grow'st,</li>
          <li>So long as men can breathe, or eyes can see,</li>
          <li>So long lives this, and this gives life to thee.</li>
        </ul>
        
        <p class="copyright">See the 
        <a href="http://en.wikipedia.org/wiki/Shakespeare%27s_Sonnets">
        Shakespeare's sonnets</a> Wikipedia article for more information
        </p>
      </div>
    </div>
  </body>
</html>
[edit | edit source]
Challenge 4
This time you've got an extra header and horizontal navigation to worry about!

Hints: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
  <head>
    <title>CSS Challenge 4</title>
  </head>
  <body>
    <div id="wrap">
      <div id="header">
        <h1>Shakespear.net</h1>
      </div>
      <div id="nav">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Writings</a></li>
          <li><a href="#">Sonnets</a></li>
          <li><a href="#">Life Story</a></li>
          <li><a href="#">About Shakespear.net</a></li>
        </ul>
      </div>
      <div id="sidebar">
        <h2>Sonnet Index</h2>
        <ul>
          <li><a href="#">Sonnet #1</a></li>
          <li><a href="#">Sonnet #6</a></li>
          <li><a href="#">Sonnet #11</a></li>
          <li><a href="#">Sonnet #15</a></li>
          <li><a href="#">Sonnet #18</a></li>
        </ul>
      </div>
      <div id="content">
        <h1>Shakespeare's Sonnet #18</h1>
        <p>This is one of the most famous of the sonnets. It is referenced
            in the film Dead Poets Society and gave names to the band The
            Darling Buds and the book and television series The Darling Buds
            of May. Read it and weep!</p>
        <ul>
          <li>Shall I compare thee to a summer's day?</li>
          <li>Thou art more lovely and more temperate:</li>
          <li>Rough winds do shake the darling buds of May,</li>
          <li>And summer's lease hath all too short a date:</li>
          <li>Sometime too hot the eye of heaven shines,</li>
          <li>And often is his gold complexion dimm'd,</li>
          <li>And every fair from fair sometime declines,</li>
          <li>By chance, or nature's changing course untrimm'd:</li>
          <li>But thy eternal summer shall not fade,</li>
          <li>Nor lose possession of that fair thou ow'st,</li>
          <li>Nor shall death brag thou wander'st in his shade,</li>
          <li>When in eternal lines to time thou grow'st,</li>
          <li>So long as men can breathe, or eyes can see,</li>
          <li>So long lives this, and this gives life to thee.</li>
        </ul>
      </div>
      <div id="footer">
        <p class="copyright">See the 
        <a href="http://en.wikipedia.org/wiki/Shakespeare%27s_Sonnets">
        Shakespeare's sonnets</a> Wikipedia article for more information
        </p>
      </div>
    </div>
  </body>
</html>

Further reading

CSS Tutorial http://www.w3schools.com/css/default.asp Also, it is interesting to use -> "Try it yourself" in the above mentioned page.

Discussion

Retrieved from "https://en.wikiversity.org/w/index.php?title=Web_Science/Part1:_Foundations_of_the_web/Web_content/Cascading_Style_Sheets&oldid=1271782"