Null/CSS: Difference between revisions

From XPUB & Lens-Based wiki
No edit summary
Line 40: Line 40:
==typography==
==typography==
* native fonts
* native fonts
* font-size: pt, em, px
* font-size: pt, em
* font-weight
* font-style
* font-family
* embedding fonts
* embedding fonts


Line 57: Line 60:
http://www.w3.org/TR/CSS2/
http://www.w3.org/TR/CSS2/


https://developer.mozilla.org/en-US/docs/Web/CSS
=example=
<source lang="html4">
<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>My beautiful page</title>
      <!--html comment -->
    <style>
    /* css comment */
    body {
background-color: #33d5ad;
color: rgb(0,0,0);
font-family:serif;
font-size: 14pt;
font-weight: normal;  
font-family: 'Ubuntu Mono Bold';
    }
   
    div#yellow {
display:show;
position:fixed;
background: yellow;
width:50%;  
margin-left: 200px;
margin-top: 0px;
padding:0px;
font-size:1em;
font-family: 'Ubuntu Mono Bold';
border: solid 15px black ;
    }
    span#test{
font-size: 0.6em;
vertical-align:super;
    }
    a {
color: black;
text-decoration:none;
background: none;  
    }
    a:hover{
text-decoration:underline;
background: yellow;
font-family:monospace;
    }
   
    h1 {
color: pink;
font-size: 2em;
    }
    h1.title, h2.title {
background: blue;
color: yellow;
    }
    p{
color:red;
    }
   
    p:first-line{
color:black;
font-weight:bold;
    }
    div#empty{
background:black;
width:200px;
height:200px;
    }
    </style>


https://developer.mozilla.org/en-US/docs/Web/CSS
  </head>
 
  <body>
    <div id="yellow">
    <p>This will be my text.
    <a href="http://en.wikipedia.org/wiki/Bear" >
      <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Ursus_arctos_-_Norway.jpg/300px-Ursus_arctos_-_Norway.jpg" alt="A Bear" width="100px"  />
    </a> And other sentence</br>This is the <span id="test">second</span> paragraph</p>
    <hr />
    </div>
 
    <div id="empty">
    </div>
 
    <h1 class="title">My title</h1>
    <h2 class="title">My sub title</h2>
    <h1 class="title">My title</h1>
    <h1><span>My não  is Basilicum</span></h1>
    <br />
    <a href="http://en.wikipediax.org" target="_top" title="dont bother me" >http://en.wikipediax.org</a>
    <br/>
    <a href="http://en.wikipedia.org" target="_top" title="dont bother me" >http://en.wikipedia.org</a>
    <br/>
  <a class="title" href="./01intro.html" target="_blank" title="the same page">self</a>
  <br />
  <a class="title" href="../02/garage.html">My garage</a>
    <h2></h2>
    <h1 class="title">&#1740;</h1>
    <h2 class="title">My sub title</h2>
    <h1 class="title">My title</h1>
    <h1><span>My não  is Basilicum</span></h1>
    <h1 class="title">My title</h1>
    <h2 class="title">My sub title</h2>
    <h1 class="title">My title</h1>
    <h1><span>My não  is Basilicum</span></h1>
  </body>
</html>
</source>

Revision as of 17:40, 6 November 2014

css declation

  • style in a html document
  • css rule
    • css block
      • declaration

=css_syntax_-_ruleset.png

css rule


=css_syntax_-_block.png

css block


=css_syntax_-_declaration.png

css declaration


=css_syntax_-_declarations_block.png

css declaration


Images from https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax

selector rules

  • id
  • class
  • several selectors for 1 rule

http://www.w3.org/TR/CSS2/selector.html

positioning

typography

  • native fonts
  • font-size: pt, em
  • font-weight
  • font-style
  • font-family
  • embedding fonts

pseudo-class

  • a :visited :hover
  • :first :first-line :not

https://developer.mozilla.org/en-US/docs/Web/CSS/:first

https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line

resources

https://developer.mozilla.org/en-US/Learn/CSS/Basic_text_styling_in_CSS

https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax

http://www.w3.org/TR/CSS2/

https://developer.mozilla.org/en-US/docs/Web/CSS

example

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8"/>
    <title>My beautiful page</title>
      <!--html comment -->
    <style>

    /* css comment */
    body { 
	background-color: #33d5ad;
	color: rgb(0,0,0);
	font-family:serif;
	font-size: 14pt;
	font-weight: normal;	  
	font-family: 'Ubuntu Mono Bold';
    }
    
    div#yellow {
	display:show;
	position:fixed;
	background: yellow;
	width:50%;	  
	margin-left: 200px;
	margin-top: 0px;
	padding:0px;
	font-size:1em;
	font-family: 'Ubuntu Mono Bold';
	border: solid 15px black ;
    }

    span#test{
	font-size: 0.6em;
	vertical-align:super;
    }


    a {
	color: black;
	text-decoration:none;
	background: none;	  
    }

    a:hover{
	text-decoration:underline;
	background: yellow;
	font-family:monospace;
    }
    
    h1 {
	color: pink;
	font-size: 2em;
    }

    h1.title, h2.title {
	background: blue;
	color: yellow;
    }

    p{
	color:red;
    }
    
    p:first-line{
	color:black;
	font-weight:bold;
    }

    div#empty{
	background:black;
	width:200px;
	height:200px;
    }
    </style>

  </head>

  <body>
    <div id="yellow">
    <p>This will be my text.
    <a href="http://en.wikipedia.org/wiki/Bear" >
       <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/a/ae/Ursus_arctos_-_Norway.jpg/300px-Ursus_arctos_-_Norway.jpg" alt="A Bear" width="100px"  />
    </a> And other sentence</br>This is the <span id="test">second</span> paragraph</p>
    <hr />
    </div>

    <div id="empty">
    </div>

    <h1 class="title">My title</h1>
    <h2 class="title">My sub title</h2>
    <h1 class="title">My title</h1>
    <h1><span>My não  is Basilicum</span></h1>
    <br />
    <a href="http://en.wikipediax.org" target="_top" title="dont bother me" >http://en.wikipediax.org</a>
    <br/>
    <a href="http://en.wikipedia.org" target="_top" title="dont bother me" >http://en.wikipedia.org</a>
    <br/>
   <a class="title" href="./01intro.html" target="_blank" title="the same page">self</a>
   <br />
   <a class="title" href="../02/garage.html">My garage</a>
    <h2></h2>
    <h1 class="title">&#1740;</h1>
    <h2 class="title">My sub title</h2>
    <h1 class="title">My title</h1>
    <h1><span>My não  is Basilicum</span></h1>
    <h1 class="title">My title</h1>
    <h2 class="title">My sub title</h2>
    <h1 class="title">My title</h1>
    <h1><span>My não  is Basilicum</span></h1>
  </body>
</html>
Retrieved from "https://pzwiki.wdka.nl/mw-mediadesign/index.php?title=Null/CSS&oldid=69320"