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

From Publication Station
Line 92: Line 92:


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


The symbol for id is: <code>#</code>
Ids are used to '''distinguish''' tags
 
The symbol for id is: '''<code>#</code>'''
<source lang="html4strict">
<source lang="html4strict">
<div id="square" style="background:black; color:red; width:400px; height:100px"/>  
<p id="special">I am special paragraph</p>
<p>Just another paragraph.</p>
<p>More of the same.</p>
</source>
</source>


Id can server as a anchor (link) point within each page.
Note: Ids can server as a anchor (link) point within each page.
 
==css id selector(for a specific element)==
 
<code>#</code> is the symbol used to indicate an id.
 
if I write the rule:
<source lang="css">
p#special { transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);}
</source>


==css id selector(for a specific element)==
Only the paragraph with id="special" will be effected by the rule above.


==class==
==class==

Revision as of 17:56, 21 September 2015

Styling your page with CSS

CSS - Cascading Style Sheets

HTML is not meant to style (inline syling: style="color:...") 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 in your html page

  • <style> CCS code goes inside the style tags </style>
  • inside 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 rule

Each CSS style sheet 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)
  • property (what property of that 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 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 to style 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. <link href="style.css" rel="stylesheet" />

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

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.

Ids are used to distinguish tags

The symbol for id is: #

<p id="special">I am special paragraph</p>
<p>Just another paragraph.</p>
<p>More of the same.</p>

Note: Ids can server as a anchor (link) point within each page.

css id selector(for a specific element)

# is the symbol used to indicate an id.

if I write the rule:

p#special { transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0);}

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: #

<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

more CSS attributes

create section with: 
5. positioning, z-index, float, display

position property

  • relative
  • absolute
  • fixed

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

centering

Online Resources

Next week

Will be dedicated to CSS for typography; And web-fonts;