Difference between revisions of "Courses/Design & Technique-Essential Web Design/03"
| Line 1: | Line 1: | ||
<slidy theme="a"/> | <slidy theme="a"/> | ||
=Styling your page with CSS= | ==Encoding== | ||
Represent more than [https://en.wikipedia.org/wiki/ASCII ASCII] characters by telling to the browser your page uses [https://en.wikipedia.org/wiki/UTF-8 UTF-8] | |||
encoding scheme. | |||
UTF-8 can represent any character in the [http://unicode-table.com/en/ Unicode table] | |||
<source lang="html4strict"> | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="UTF-8" /> | |||
</head> | |||
</html> | |||
<body></body> | |||
</html> | |||
</source> | |||
==Styling your page with CSS== | |||
==CSS - Cascading Style Sheets == | ==CSS - Cascading Style Sheets == | ||
Revision as of 06:25, 22 September 2015
<slidy theme="a"/>
Encoding
Represent more than ASCII characters by telling to the browser your page uses UTF-8 encoding scheme.
UTF-8 can represent any character in the Unicode table
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
</head>
</html>
<body></body>
</html>
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
- CSS code goes inside the style tags
<style> ... </style> - 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 is made of several rules.
Each rule follows the syntax:
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 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: .
<div class="text">Aa</p>
<span class="text">Bbbbb</p>
<p class="text">Ccccccccccc</p>
css class selector(for a group of elements)
if I write the rule:
.text { background: blue;
font-size:30pt;
color: white; }
no matter what elements do have the class text, they will all be encompassed by this rule.
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
For each of them, normally a rule is written.
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
(leaving for next class) CSS property position chooses alternative forms to for position elements.
The most common are
- relative
- absolute
- fixed
https://developer.mozilla.org/en-US/docs/Web/CSS/position
position property
- relative
- absolute
- fixed
https://developer.mozilla.org/en-US/docs/Web/CSS/position
centering elements
http://www.w3.org/Style/Examples/007/center.en.html
Online Resources
- 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 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
homework
Cadaver exquisite
- copy one of the minimal paints or narratives from one of your colleagues to your computer of usb-stick
- using CSS and HTML transform it into is opposite ( you choose what opposite means to you in this situation)
- save this transformed work and bring it to the class
Next week
Will be dedicated to CSS for typography; And web-fonts;
