Difference between revisions of "Courses/Design & Technique-Essential Web Design/03"
| Line 18: | Line 18: | ||
</html> | </html> | ||
</source> | </source> | ||
=A few more HTML tags= | |||
=== <nowiki><div></nowiki> div tag === | === <nowiki><div></nowiki> div tag === | ||
The div tag is essentially a container of other content. | The div tag is essentially a container of other content. | ||
| Line 48: | Line 46: | ||
=Styling your page with CSS= | |||
==CSS - Cascading Style Sheets == | ==CSS - Cascading Style Sheets == | ||
Revision as of 15:12, 6 September 2016
<slidy theme="a"/>
UTF-8 Encoding
Use 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>
<body>
<h1>OHH a 😹</h1>
</body>
</html>
A few more HTML tags
<div> div tag
The div tag is essentially a container of other content.
<div style="background:black; color:red; width:400px; height: 400px">
<h1>Beautiful page</h1>
<p>writing stuff
<i>inside</i>
</p>
</div>
Abstract Browsing is a Chrome extension by Rafaël Rozendaal that transforms web pages into colored divs.
span tag
<div style="background:black; color:red; width:400px; height: 400px">
<h1>Beautiful page</h1>
<p>writing stuff
<i>inside</i>
</p>
</div>
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 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:
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.
CSS position, display, float
@andre: study and explain CSS position
https://kilianvalkhof.com/2008/css-xhtml/understanding-css-positioning-part-1/ http://learn.shayhowe.com/html-css/positioning-content/
Position
- absolute
- relative
Display
@andre: SEE display property explain in http://dustwell.com/div-span-inline-block.html http://stackoverflow.com/questions/9189810/css-display-inline-vs-inline-block
- none / hidden - turns to none (hides) 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
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 tags
- 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>
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
Apply CSS to the content of your weblog
- Make each entry (past or future) in your weblog will be wrapped inside a div
- Give each entry div an unique id; and a common class. E.g
....*
- Style each entry differently
- ADD content
@Andre: clarify .
Next week
Will be dedicated to CSS for typography; And web-fonts;
BOOK SCAPES: http://www.julienlevesque.net/books-scapes/index2.html
a separate CSS file
Move this to next class
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>
....
