Download to read offline
Uploaded byLukas Oppermann
Creative Web 2 - CSS
This document provides information on various web development topics such as linking files, paths, CSS, JavaScript, and patterns. It discusses absolute vs relative paths and examples of each. CSS topics covered include linking external style sheets, CSS selectors like ID, class, and element selectors, and CSS specificity. JavaScript topics include linking JavaScript files and writing JavaScript code. Patterns discussed include building navigations from lists. Assignments are provided to create HTML pages with navigation and styling, link a JavaScript file with an alert, read about JSON, and learn about handlebars.js templating.
More Related Content
Creative Web 2 - CSS
- 1.
- 2. Linking to filescan be done using a relativ path or and absolute path
- 3. An absolute pathis… a path which starts from the domain
- 4. Examples of absolutepaths! " http://domain.com/img/image.png" " btk-fh.de/css/style.css
- 5. A relative pathis… a path relative from the current file
- 6.
- 7. Linking from…" index.html tobase.css in folder css
- 8.
- 9. Linking from…" index.html toimg.png in folder imgs
- 10.
- 11.
- 12. Cascading Style Sheetsare…" a language to define the style of HTML elements
- 13. Advantages of css… separatingdesign (css) from logic ! and structure (html). This makes ! the design easily reusable and ! maintainable."
- 14. Linking external stylesheets! " <linkrel="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."
- 15. In a cssfile you define a css rule! " selector{! ! attribute: value;! }
- 16. A selector tellscss which element to apply the styles to.
- 17. #unique ID-selectors startwith 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
- 18. .reuse class-selectors startwith 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
- 19. div element-selectors namethe 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
- 20.
- 21. When multiple cssrules apply to an element and change the same property e.g. color the weight of the selectors defines which one will win.
- 22. 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
- 23. .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.
- 24. .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.
- 25. CSS Selectors areread from ! right to left
- 26. Find all li-elements Findall 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;! }!
- 27. Optimize css bybeing specific on the right of selector." " You could add a class .navi to those li- elements and change the css to .navi{! ! color: red;! }!
- 28.
- 29. Linking a javascriptfiles! " <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>
- 30. Javascript Inside the jsfile 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.
- 31.
- 32. Navigations are buildfrom lists
- 33. Typically a navigationis 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>
- 34. Navigations are buildfrom lists
- 35. Typically a navigationis 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>
- 36. Assignments 1. Write 3html pages with a navi <ul> linking them together." • 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
- 37. Assignments 2. Create andlink 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
- 38.