Difference between revisions of "Courses/Design & Technique-Essential Web Design/03"
| Line 1: | Line 1: | ||
=Styling your page with CSS= | =Styling your page with CSS= | ||
==CSS== | |||
HTML is not meant to style (inline syling: <code>style="color:..."<code>) | |||
is old fashion and discouraged. | |||
Instead: | |||
* HTML tell the browser what content it should display | |||
* CSS tells the browser '''how to display''' that content. | |||
==css in your html page== | ==css in your html page== | ||
| Line 46: | Line 55: | ||
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 | ||
* 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 <code>style.css</code>'''. | |||
To do that we need link the HTML file to the CSS file. | |||
<source lang="html4strict"> | |||
<!DOCTYPE html> | |||
<html> | |||
<head> | |||
<link href="style.css" rel="stylesheet" /> | |||
</head> | |||
<body> | |||
.... | |||
</source> | |||
create section with: | |||
5. positioning, z-index, float, display | |||
==id and class attributes== | ==id and class attributes== | ||
| Line 111: | Line 152: | ||
* 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 | ||
==Next week== | |||
Will be dedicated to CSS for typography; And web-fonts; | |||
Revision as of 08:31, 21 September 2015
Styling your page with CSS
CSS
HTML is not meant to style (inline syling: style="color:...")
is old fashion and discouraged.
Instead:
- HTML tell the browser what content it should display
- CSS tells the browser how to display that content.
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
- 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
CSS Property reference https://developer.mozilla.org/en-US/docs/Web/CSS/Reference
- 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 style.css.
To do that we need link the HTML file to the CSS file.
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" />
</head>
<body>
....
create section with:
5. positioning, z-index, float, 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.
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;
position property
- relative
- absolute
- fixed
centering
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
Next week
Will be dedicated to CSS for typography; And web-fonts;
