creative web 2 - css
TRANSCRIPT
Creative Web 2.
Linking to files can be done using a relativ path or and absolute path
An absolute path is…a path which starts from the domain
Examples of absolute paths!"
http://domain.com/img/image.png""
btk-fh.de/css/style.css
A relative path is…a path relative from the current file
root
site
imgs
css
← index.html (current file)
Linking from…"index.html to base.css in folder css
root
site
imgs
css
index.html
base.css/css/base.css
Linking from…"index.html to img.png in folder imgs
root
site
imgs
css
index.html
img.png
../imgs/img.png!(../ moves one directory up)
CSS
Cascading Style Sheets are…"a language to define the style of HTML elements
Advantages of css…separating design (css) from logic !and structure (html). This makes !the design easily reusable and !maintainable."
Linking external stylesheets!"
<link rel="stylesheet" href="./libs/css/base.css" type="text/css" media="screen" charset="utf-8" />""
href is the relative or absolute path to the file.""
media is the media the stylesheet is used for, "mainly screen and print."
In a css file you define a css rule!"
selector{!! attribute: value;!}
A selector tells css which element to apply the styles to.
#unique ID-selectors start with a # and select the element with the id unique.""
e.g. <div id=“unique”>…""
IDs can only be used once per html-page.""
IDs consist of letters A-Z, numbers and underscore _ NO spaces, or other special characters.
ID Selector
.reuse class-selectors start with a . and select all elements with the class reuse.""
e.g. <div class=“reuse”>…""
Classes can be used multiple times per html-page.""
Classes consist of letters A-Z, numbers and minus - NO spaces, or other special characters
Class Selector
div element-selectors name the tag name and select all elements of the type div.""
e.g. <div>…""
Element-selectors should be used with caution because they are not very specific.
Element Selector
Selector weight (importance)
When multiple css rules apply to an element and change the same property e.g. color the weight of the selectors defines which one will win.
div{!! color: red;!}!".reuse{!! color: blue;!}!"#unique{!! color: purple;!}
<div id=“unique” class=“reuse”>Text</div>"
A class has more weight than an element-selector
An id has more weight than a class-selector
.font-red{!! color: red;!}!".reuse{!! color: blue;!}
<div class=“reuse font-red”>Text</div>"
Both class-selector have the same weight, the last selector in the css file wins.
.font-red.reuse{!! color: red;!}!".reuse{!! color: blue;!}
<div class=“reuse font-red”>Text</div>"
Two class-selector have more weight, than one selector, so two classes win.
CSS Selectors are read from !right to left
Find all li-elements
Find all of those li-elements inside an element with a class reuse
Find all of those li-elements inside an element with a class reuse which are inside the element with the id unique
#unique .reuse li{!! color: red;!}!
Optimize css by being specific on the right of selector.""
You could add a class .navi to those li-elements and change the css to
.navi{!! color: red;!}!
Javascript
Linking a javascript files!"
<script type="text/javascript" src=“./libs/js/javascript.js“></script>""
src is the relative or absolute path to the file.""
Javascript files should always be linked just "before the closing tag of the body </body>
Javascript
Inside the js file you can write javascript without "declaring any head, etc. e.g.""
alert(‘treeeees!’);""
This is a function and will create a popup with "the text treeeees! Which tells you that you "linked the file correctly.
Patterns
Navigations are build from lists
Typically a navigation is a list of links
<ul>!! <li><a href=“index.html”>home</a></li>! !! <li><a href=“about.html”>about</a>!! ! <ul class=“sub-menu”>!! ! ! <li><a href=“me.html”>me/a></li>!! ! ! <li><a href=“cv.html”>CV</a></li>!! </li>!</ul>
Navigations are build from lists
Typically a navigation is a list of links
<ul>!! <li><a href=“index.html”>home</a></li>! !! <li><a href=“about.html”>about</a>!! ! <ul class=“sub-menu”>!! ! ! <li><a href=“me.html”>me/a></li>!! ! ! <li><a href=“cv.html”>CV</a></li>!! </li>!</ul>
Assignments
1. Write 3 html pages with a navi <ul> linking themtogether."• Use the same stylesheet for all three files"• Add content and style it using css"• try at lest 5 css3 properties like gradient,
border-radius, transform, etc."• try to reuse css styles by using multiple classes
per element when it makes sense
Assignments
2. Create and link a javascript file with the alert inside," so that you see the alert message when you open the html file in your browser""3. Read this article to get an idea what JSON is http://de.wikipedia.org/wiki/JavaScript_Object_Notation""4. If you know JS already read up on handlebars.js
