Web Cartography
CSS
Learn the basics of CSS.
Goals
Do not use diacritics,spaces or capital
letters in filenames and file paths.
Indent your code.
Use syntax highlighting.
Have a look at Emmet (https://emmet.io).
Learn to reference file paths.
Tips
Cascading Style Sheets
W3C Standard (rules to adhere to)
Tells browsers how to render HTML elements
Consists of declarations
CSS
Link to HTML via <style>
https://gist.github.com/zimmicz/caad30e7afe
b9a3ec03a42a92da16df0
Link to HTML via <link>
https://gist.github.com/zimmicz/1c33dbc999
852ddd27afcb5310873451
CSS
body {
color: blue;
}
div p {
Font-family: Arial, sans-serif;
}
Selectors
.note {
background-color: rgb(200,100,50);
}
a.menu {
display: block;
}
Selectors
#main {
width: 600px;
border: 1px solid blue;
}
div#aside {
float: left;
}
Selectors
Structures example
https://codepen.io/anon/pen/wKWKrb?editors=1100#0
Attributes example
https://codepen.io/anon/pen/ZbObvO?editors=1100#0
Positioning example
https://codepen.io/anon/pen/rOLOJj?editors=1100#0
CSS
https://jigsaw.w3.org/css-validator/
CSS validation
Use valid CSS to make your web page look
awesome.
Due: next week (won’t be scored yet though)
Tasks
Colors at https://coolors.co or http://colourlovers.com
Fonts at https://fonts.google.com
CSS Basics at http://jakpsatweb.cz
Bootstrap at http://getbootstrap.com
Cascading 101 at
https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_
to_CSS/Cascade_and_inheritance
normalize.css
https://necolas.github.io/normalize.css/
CSS grid
https://css-tricks.com/snippets/css/complete-guide-grid/
Tips
anytime, anywhere, anyhow
zimmicz@gmail.com
357484@mail.muni.cz
@zimmicz
Feel free to ask