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

From Publication Station
 
(25 intermediate revisions by 3 users not shown)
Line 1: Line 1:
<slidy theme="a"/>


=Styling your page with CSS=
=Styling your Web page with CSS=


==CSS - Cascading Style Sheets ==  
==CSS - Cascading Style Sheets ==
HTML is not meant to style (inline syling: <code>style="color:..."<code>) is old fashion and discouraged.
HTML is not meant to style (inline syling eg: <pre><h1 style="color:red;background:black></pre> is old fashion and discouraged).


'''CSS is the preferred to way to style.'''
'''CSS is the preferred to way to style.'''
* HTML tell the browser what content it should display
* HTML tell the browser what content it should display
* CSS tells the browser '''how to display''' that content.
* CSS tells the browser '''how to display''' that content.


==css in your html page==
==CSS inside an HTML page==
* <code><style> CCS code goes inside the style tags </style></code>  
* CSS code goes '''inside the style tags''' <code><style> ... </style></code>
* inside the head of the html page.
*  <code><style> ... </style></code> tags are '''placed inside the head''' of the HTML page.


<source lang="html4strict">
<source lang="html4strict">
Line 20: Line 17:
<html>
<html>
  <head>
  <head>
  <style>
    <style>
    <!-- you css style-sheet will go in here -->
 
     body{
     body{
      background: #FF19DC;
            background: #FF19DC;
      color: black;
    color: black;
      font-family: mono;
    font-family: mono;
      }
        }
 
   </style>
   </style>
</head>
  </head>
</html>
  </html>
<body></body>
  <body></body>
</html>
  </html>
</source>
</source>


== anatomy of a css rule ==
== anatomy of a css rule ==
Each CSS style sheet is made of several rules.
Each CSS style sheet (all the styles of a page) is made of several rules.


Each '''rule''' follows the syntax:  
Each '''rule''' follows the syntax:


[[File:Basic-Anatomy-of-a-CSS-Rule1.png|600px|]]
[[File:Basic-Anatomy-of-a-CSS-Rule1.png|600px|]]


<small>Source: http://dabrook.org/resources/posters/</small>
<small>Source: http://dabrook.org/resources/posters/</small>


==Example of a CSS rule==
==Example of a CSS rule==
* element (what element(s) is being styled)
* '''element''': what element(s) is being styled e.g. ''div''
* property (what property of that element is being styled): value pair (how is it being styled)
* '''property''': what property of that element is being styled e.g. ''color''
* '''value''': how the property is styled e.g. ''white''


<source lang="css">
<source lang="css">
Line 55: Line 54:
       height: 250px;
       height: 250px;
       font-size:30pt;
       font-size:30pt;
  }
        }
</source>
</source>
Here we are styling all the div elements in the html page.
Here we are styling all the div elements in the html page.


==css properties==


CSS Property reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
==CSS Properties==
 
'''CSS Property reference''' https://developer.mozilla.org/en-US/docs/Web/CSS/Reference


Some properties.
Some properties.
Line 69: Line 70:
* [https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform], gradient, border-radius
* [https://developer.mozilla.org/en-US/docs/Web/CSS/transform transform], gradient, border-radius


'''Use some of these properties to style your page.'''
'''Use some of these properties, and others that you discover in your page.'''
 
 
-----


== a separate CSS file  ==
The CSS for a HTML page (or several pages) can stored outside that page, in '''css file.


To do that we need link the HTML file to the CSS file, using the tag link inside the html head. <code> <link href="style.css" rel="stylesheet" /> </code>
=Inspecting a page=
The browser (Chrome and Firefox) offer the possibility of inspecting a page with the option '''Inspect Element'''.  


<source lang="html4strict">
This possibility allows for prototyping (changing and seeing immediately the result ) a page's CSS and HTML.
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
</head>
<body>
....
</source>


==id and class attributes==
'''Keep in mind that this changes WILL NOT be saved.
Two of the most used attributes in HTML is id and class.  
To do so you need to copy them to the editor and save them.  
'''


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.'''


Ids are used to '''distinguish''' tags


The symbol for id is: '''<code>#</code>'''
=id and class attributes=
<source lang="html4strict">
Two of the most used attributes in HTML is id and class.
<p id="special">I am special paragraph</p>
<p>Just another paragraph.</p>
<p>More of the same.</p>
</source>


Note: Ids can server as a anchor (link) point within each page.
They are important to distinguish and group different elements. And become particularly important in CSS styling.


==css id selector(for a specific element)==
* '''id (#) is used to 'distinguish'' tags'''
* '''class (.)''' is used to ''group'' tags'''


<code>#</code> is the symbol used to indicate an id.
==id==
* '''id (#) is used to 'distinguish'' tags'''
* the same id cannot be repeated in the same file. Use only once.
* The symbol for id is: '''<code>#</code>'''


if I write the rule:
<source lang="css">
<source lang="css">
p#special { transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);}  
p { color: black;
    font-weight: bold;
  }
 
p#special{ color: red;
          font-weight: normal;
          transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
}
</source>
</source>


Only the paragraph with id="special" will be effected by the rule above.
==class==
'''Classes''' can be used INFINITE TIMES in a file. They are used to '''group''' tags.
The symbol for class is: <code>.</code>


<source lang="html4strict">
<source lang="html4strict">
<div class="text">Aa</p>                                                          
<p id="special">I am specific paragraph with id="special" </p>
<span class="text">Bbbbb</p>                                                          
<p>Just another paragraph under the tag p .</p>
<p class="text">Ccccccccccc</p>
<p>Another one of the same tag p, without id.</p>
</source>
</source>


==css class selector(for a group of elements)==
Only the paragraph with id="special" will be effected by the rule above <code>p#special</code>: red, normal weight, transform. The remaining paragraphs are only affect by the rule <code>p {...}</code>


if I write the rule:
==class==
<source lang="css">
* '''class (.)''' is used to ''group'' different tags''' - They become styled by same CSS rule
.text { background: blue;
* class can be used INFINITE TIMES in a file
        font-size:30pt;
* The symbol for class is: <code>.</code>
        color: white; }
</source>


no matter what elements do have the class text, they will all be encompassed by this rule.


<source lang="css">
p {
      color: black;
  }


==styling links==
.text{ color: black;
css uses a pseudo-class for the different states of a link
      font-weight: italic ;
      background: #003366;
      color: white;
}


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


For each of them, normally a rule is written.


<source lang="html4strict">
      <div class="text">This is a div tag</div>
      <span class="text">This is a span tag</span>
      <p class="text">and this is a p tag</p>
      <p>Notice how all the above tags with class="text" are styled the same way.</p>
      <p>These 2 last tags, on the other hand have NOT class="text", and therefore remain are not affected by the CSS rule</p>
      <p>Also notice how 3 different tags can look the same if they share the same class </p>
</source>


== display ==
* none - turns off the display of the element.
* inline - horizontal line of elements, but width and hide will be define by its content.
* block - vertical stack of elements.
* inline-block - horizontal line of elements, but they can have a width and height.


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


-----


==position==
= a separate CSS file  =
(leaving for next class)
The CSS for a HTML page (or several pages) can stored outside that page, in '''css file.
CSS property position chooses alternative forms to for position elements.


The most common are
To do that we need link the HTML file to the CSS file, using the tag link inside the html head.
* relative
* absolute
* fixed


https://developer.mozilla.org/en-US/docs/Web/CSS/position
<link href="style.css" rel="stylesheet" />


==position property==
<source lang="html4strict">
* relative
<!DOCTYPE html>
* absolute
<html>
* fixed
<head>
https://developer.mozilla.org/en-US/docs/Web/CSS/position
  <link href="style.css" rel="stylesheet" />
  </head>
  <body>
  ....
</source>
 


==centering elements==
http://www.w3.org/Style/Examples/007/center.en.html


== Online Resources ==
= Online Resources on CSS =
* CSS Property reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
* CSS Property reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
* Lynda.com CSS-Selectors (Part 1) http://www.lynda.com/CSS-tutorials/CSS-Selectors/192036-2.html?org=hr.nl
* 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
* Lynda.com CSS Gradients (Part2,3) http://www.lynda.com/CSS-tutorials/Exploring-linear-syntax/115467/122823-4.html
* http://www.w3.org/Style/Examples/007/center.en.html
* Centering elements with http://www.w3.org/Style/Examples/007/center.en.html


==Next week==
= Art works, making heavy use of CSS =
Will be dedicated to CSS for typography; And web-fonts;
Florian Cramer ''Local Impro Snodge '' http://cramer.pleintekst.nl/deplayer-impro-snodge/ - essencially gifs and CSS

Latest revision as of 11:34, 10 October 2018

Styling your Web page with CSS

CSS - Cascading Style Sheets

HTML is not meant to style (inline syling eg: 

<h1 style="color:red;background:black>

is old fashion and discouraged).

CSS is the preferred to way to style.

  • HTML tell the browser what content it should display
  • CSS tells the browser how to display that content.

CSS inside an HTML page

  • CSS code goes inside the style tags <style> ... </style>
  • <style> ... </style> tags are placed inside the head of the HTML page.
<!DOCTYPE html>
<html>
 <head>
    <style>

     body{
            background: #FF19DC;
	    color: black;
	    font-family: mono;
			        }

   </style>
   </head>
   </html>
   <body></body>
   </html>

anatomy of a css rule

Each CSS style sheet (all the styles of a page) is made of several rules.

Each rule follows the syntax:

Basic-Anatomy-of-a-CSS-Rule1.png

Source: http://dabrook.org/resources/posters/


Example of a CSS rule

  • element: what element(s) is being styled e.g. div
  • property: what property of that element is being styled e.g. color
  • value: how the property is styled e.g. white
div {
      background: blue;
      color: white;
      width: 500px;
      height: 250px;
      font-size:30pt;
	         }

Here we are styling all the div elements in the html page.


CSS Properties

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

Some properties.

  • color, background-color, width, height
  • border, box-shadow, list-style
  • margin, padding
  • transform, gradient, border-radius

Use some of these properties, and others that you discover in your page.



Inspecting a page

The browser (Chrome and Firefox) offer the possibility of inspecting a page with the option Inspect Element.

This possibility allows for prototyping (changing and seeing immediately the result ) a page's CSS and HTML.

Keep in mind that this changes WILL NOT be saved. To do so you need to copy them to the editor and save them.



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.

  • id (#) is used to 'distinguish tags
  • class (.) is used to group tags

id

  • id (#) is used to 'distinguish tags
  • the same id cannot be repeated in the same file. Use only once.
  • The symbol for id is: #
p { color: black;
    font-weight: bold;
   }

p#special{ color: red;
           font-weight: normal;
           transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);
	}



<p id="special">I am specific paragraph with id="special" </p>
<p>Just another paragraph under the tag p .</p>
<p>Another one of the same tag p, without id.</p>

Only the paragraph with id="special" will be effected by the rule above p#special: red, normal weight, transform. The remaining paragraphs are only affect by the rule p {...}

class

  • class (.) is used to group different tags - They become styled by same CSS rule
  • class can be used INFINITE TIMES in a file
  • The symbol for class is: .


p {
       color: black;
   }

.text{ color: black;
       font-weight: italic ;
       background: #003366;
       color: white;
		 }



       <div class="text">This is a div tag</div>
       <span class="text">This is a span tag</span>
       <p class="text">and this is a p tag</p>
       <p>Notice how all the above tags with class="text" are styled the same way.</p>
       <p>These 2 last tags, on the other hand have NOT class="text", and therefore remain are not affected by the CSS rule</p>
       <p>Also notice how 3 different tags can look the same if they share the same class </p>


a separate CSS file

The CSS for a HTML page (or several pages) can stored outside that page, in css file.

To do that we need link the HTML file to the CSS file, using the tag link inside the html head. 

<link href="style.css" rel="stylesheet" />

<!DOCTYPE html>
<html>
 <head>
  <link href="style.css" rel="stylesheet" />
  </head>
  <body>
  ....


Online Resources on CSS

Art works, making heavy use of CSS

Florian Cramer Local Impro Snodge http://cramer.pleintekst.nl/deplayer-impro-snodge/ - essencially gifs and CSS

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