CSS for style
Css file structure
Use
Selectors
Properties
Fonts
Colors
Box model
Examples of use:
layout
menu
Css file structure
Use
Selectors
Properties
Fonts
Colors
Box model
Examples of use:
layout
menu
File structure
a {
background-color: orange;
border: 2px solid magenta;
}
Use in html file
<link href="file.css" type="text/css" rel="stylesheet"/>
<style>
@import url("file.css");
</style>
<style>
Css instructions
</style>
Inline:
<div style="background-color: red; color: blue;" >
Selectors
Tags: <P> --> p { ...
ID: id=".." --> #
class class=".." --> .
Descendent: p a
Attribute: [name="resource]
Properties
Fonts
Colors
Box model
Layout
Typography and color:
- fonts: http://www.typetester.org/
- colors: http://colorschemedesigner.com/
Use
View Source
Developer tools
Elements
Styles
Pop up: Inspect Element
Box model
from http://www.hicksdesign.co.uk/boxmodel/
Tutorials:
- http://www.w3schools.com/css/
- http://www.csszengarden.com/
- http://www.librosweb.es/css/
- http://www.howtocreate.co.uk/tutorials/css/introduction
Editors:
Layout:
Positioning:
- http://www.howtocreate.co.uk/tutorials/positionExample.php
- Ejemplo con float: http://www.w3schools.com/css/tryit.asp?filename=trycss_float6
- Display and visibility: http://www.w3schools.com/css/css_display_visibility.asp
- Positioning: http://www.w3schools.com/css/css_positioning.asp
- Float: http://www.w3schools.com/css/css_float.asp
Examples of menus:
- http://www.w3schools.com/css/tryit.asp?filename=trycss_float5
- http://css.maxdesign.com.au/
- http://css.maxdesign.com.au/listamatic2/index.htm
- http://www.librosweb.es/css/capitulo9.html
Themes with Bootstrap
W3.CSS framework
Use a spacebar or arrow keys to navigate