Week3Tutorial.docx - University of Canberra Faculty of Science and Technology Web Design and Programming(7175 6691 Week 3 Tutorial CSS and CSS3 Tasks

Week3Tutorial.docx - University of Canberra Faculty of...

This preview shows page 1 - 4 out of 14 pages.

University of Canberra Faculty of Science and Technology Web Design and Programming (7175 & 6691) Week 3 Tutorial CSS and CSS3 Tasks Add a new web page CSS3.html to the WDPTutorials folder created in Week 2 Tutorial. Use the newly added web page to learn how CSS and CSS3 describe the style of an HTML document. After completing this tutorial, you can apply the following to the web project for Assignment 1 o CSS and CSS3 to display HTML5 elements on a web page o Parallax scrolling, mouse hover, and bootstrap carousel sliding effects to a web page CSS Review CSS stands for Cascading Style Sheets . CSS defines how to display HTML elements Three ways of inserting a style sheet: inline style , internal style sheet , and external style sheet . External style sheet is recommended. You only need to edit one single style sheet file to change the appearance and layout of all the pages in a Web site. Example : ( ) < !DOCTYPE html > < html > < head > < link rel ="stylesheet" type ="text/css" href ="mystyle.css"> external style sheet < style > body { background-color : linen ; internal style sheet } </ style > </ head > < body style =" background-color : lightcyan"> inline styles < h1 > Multiple Styles Will Cascade into One </ h1 > < p > In this example, the background color is set inline, in an internal stylesheet, and in an external stylesheet. </ p > < p > Try experimenting by removing styles to see how the cascading stylesheets work (try removing the inline first, then the internal, then the external) </ p > </ body > </ html > Multiple styles will cascade into one Cascading order : Browser default External style sheet Internal style sheet Inline style. Page 1 of 14
Image of page 1
Inline style has the highest priority . CSS selectors Allow you to select and manipulate HTML elements. Are used to select HTML elements based on their id, classes, types, attributes, values of attributes and much more. HTML < !DOCTYPE html > < html > < head > < meta charset= "UTF-8" > < title > WDP < /title > < /head > < body > Element selector Element selector < p > HTML < /p > ID selector < p id="par" > HTML5 < /p > Class selector < div class="center" > CSS < /div > < p class="center" > CSS3 < /p > Class selector < div > JavaScript < /div > Grouping selector < /body > < /html > RESULT CSS body { background-color: #d0e4fe; font-family: "Arial"; font-size: 20px; } p { color: blue; } #par { font-size: 30px; } .center { text-align: center; color: rgb(255,0,0); } div, p { background-color: yellow; } Page 2 of 14
Image of page 2
CSS3 Review CSS3 is the latest standard for CSS. CSS3 is completely backwards-compatible with earlier versions of CSS. CSS3 has been split into modules. Some of the most important CSS3 modules are: Selectors Box Model Backgrounds and Borders User Interface Image Values and Replaced Content Text Effects 2D/3D Transformations Animations Multiple Column Layout CSS3 Recommendation : The CSS3 specification is still under development by W3C. However, many of the new CSS3 properties have been implemented in modern browsers.
Image of page 3
Image of page 4

You've reached the end of your free preview.

Want to read all 14 pages?

  • Three '17

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes
A+ icon
Ask Expert Tutors