Difference between revisions of "Courses/Design & Technique-Essential Web Design/03"

From Publication Station
Line 1: Line 1:
=Styling your page with CSS=
=Styling your page with CSS=
==css in your html page==
<code<style> CCS goes inside the style tags </style></code> in the head of the html page.
<source lang="html4strict">
<!DOCTYPE html>
<html>
<head>
  <style>
    <!-- you css style-sheet will go in here -->
    body{
      background: #FF19DC;
      color: black;
      font-family: mono;
      }
  </style>
</head>
</html>
<body></body>
</html>
</source>
== anatomy of a css style-sheet ==
[[File:Basic-Anatomy-of-a-CSS-Rule1.png]]
Source: http://dabrook.org/resources/posters/
* CSS rule:
** element  (what element(s) is being styled)
** property (what property from the element is being styled) - value pair (how is it being styled)
<source lang="css">
div {
      background: blue;
      color: white;
      width: 500px;
      height: 250px;
      font-size:30pt;
  }
</source>
Here we are styling the element(s) div in the html page.
==css properties==
style div
CSS Propertiy reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference


==id and class attributes==
==id and class attributes==
Line 17: Line 64:


Id can server as a anchor (link) point within each page.
Id can server as a anchor (link) point within each page.
==css id selector(for a specific element)==


==class==
==class==
Line 29: Line 78:
</source>
</source>


==css in your html page==
  ==css class selector(for a group of elements)==
<code<style></code> in your page
 
<source lang="html4strict">
<!DOCTYPE html>
<html>
  <head>
  <style>
    <!-- you css style-sheet will go in here -->
    body{
      background="pink";
      font-family: mono;
      }
  </style>
</head>
</html>
<body></body>
</html>
</source>
 
== anatomy of a css style-sheet ==
* css rule:
**
**
 
img
 
==css properties==
style div
 
CSS Propertiy reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
 
==css id selector(for a specific element)==
 
==css class selector(for a group of elements)==


==css for several elements (for a group of elements)==
==css for several elements (for a group of elements)==
Line 89: Line 104:


==centering==
==centering==
== Online Resources ==
* Lynda.com CSS-Selectors (Part 1) http://www.lynda.com/CSS-tutorials/CSS-Selectors/192036-2.html?org=hr.nl
* Lynda.com CSS Gradients (Part2,3) http://www.lynda.com/CSS-tutorials/Exploring-linear-syntax/115467/122823-4.html

Revision as of 08:01, 21 September 2015

Styling your page with CSS

css in your html page

<code<style> CCS goes inside the style tags </style> in the head of the html page. 

<!DOCTYPE html>
<html>
 <head>
   <style>
     <!-- you css style-sheet will go in here -->
     body{
       background: #FF19DC;
       color: black;
       font-family: mono;
      }
   </style>
</head>
</html>
<body></body>
</html>

anatomy of a css style-sheet

Basic-Anatomy-of-a-CSS-Rule1.png Source: http://dabrook.org/resources/posters/

  • CSS rule:
    • element (what element(s) is being styled)
    • property (what property from the element is being styled) - value pair (how is it being styled)
div {
      background: blue;
      color: white;
      width: 500px;
      height: 250px;
      font-size:30pt;
   }

Here we are styling the element(s) div in the html page.

css properties

style div

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


id and class attributes

Two of the most used attributes in HTML is id and class.

They are important to distinguish and group different elements. And become particularly important in CSS styling.

Note:

id

Ids cannot repeat in the same file. They are used to distinguish tags

The symbol for id is: # 

<div id="square" style="background:black; color:red; width:400px; height:100px"/>

Id can server as a anchor (link) point within each page. 

==css id selector(for a specific element)==

class

Classes can be used INFINITE TIMES in a file. They are used to group tags.

The symbol for class is: # 

<p class="text">A</p>                                                           
<p class="text">B</p>                                                           
<p class="text">C</p>

==css class selector(for a group of elements)==

css for several elements (for a group of elements)

styling links

css uses a pseudo-class for the different states of a link

a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked


display

  • display: none;
  • display: inline;
  • display: block;
  • display: inline-block;

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

position property

  • relative
  • absolute
  • fixed

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

centering

Online Resources

Retrieved from ‘https://ps.wdka.nl/wiki/index.php?title=Courses/Design_%26_Technique-Essential_Web_Design/03&oldid=1843’