1 / 21

MMDE5011 WEEK 2: INTRODUCING CSS

MMDE5011 WEEK 2: INTRODUCING CSS. Week 1: Re-cap. Last week we were introduced to a basic definition of a website, followed by an introduction to HTML.

inga-dixon
Download Presentation

MMDE5011 WEEK 2: INTRODUCING CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. MMDE5011WEEK 2: INTRODUCING CSS

  2. Week 1: Re-cap • Last week we were introduced to a basic definition of a website, followed by an introduction to HTML. • We defined HTML as ‘code that displays text on electronic devices’, and then went on to examine the elements and tags that make up a basic HTML page. • This week we will introduce CSS, and begin to explore how it is used to add some visual style to HTML pages. • We will also run through a few important ideas that will help you understand how css works.

  3. What is CSS? • CSS stands for Cascading Style Sheets. • CSS allows you to attach style rules to your HTML elements such as <body>, <h1>, <p> or <a>. • These rules define the presentational aspects of your web pages – in other words, how your page looks. • One of important roles of CSS is the separation of content from presentation. • The main advantages of separating the content from it’s presentation are; increased accessibility, improved site performance and most importantly decreased production and maintenance work.

  4. Adding CSS There are three ways of inserting styles into your HTML document; Inline CSS, Internal CSS and External CSS. Inline CSS is added directly to every HTML element on a page, this of course becomes very inefficient. eg <body style=“width:1000px”> <h1 style=“font-size: 30px”>TEST PAGE</h1> <p style=“font-size: 14px”>This is a paragraph</p> </body> *It is important to note that if a document contains any inline styles they will override other styles from internal or external sources. Internal CSS is added to the head section of your HTML page: eg <head> <style> body{ width:100px;} h1 { font-size:30px;} p { font-size: 14px;} </style> </head>

  5. External CSS External CSS is the best and most efficient way to apply styles to a website, as it completely separates the presentation information into a separate document. This of course means you can use the same CSS file for multiple webpages. Pages using external css files link to the stylesheet with the <link> tag found inside the head section of a HTML page. eg <head> <link rel="stylesheet" type="text/css” href=”css/stylesheet.css"></head>

  6. The Directory Tree

  7. CSS Rules • External CSS files are made up of a collection of CSS rules. • A CSS rule has two main parts: a selector followed by one or more declarations. Eg • A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets

  8. CSS Rules • As we learnt last week with HTML, indenting your css will make your code far more readable. h1 { colour: blue; font-size:12px; }

  9. Exercise 1:HTML <!DOCTYPE html> <html> <head> <link href="css/stylesheet1.css" rel="stylesheet" type="text/css”> <meta charset='UTF-8'> <meta name='description' content='This is my MIDM web page'> <meta name='keywords' content='sydney university, masters, digital media'> <title>MIDM Web Page</title> </head> <body> <header> Interactive and Digital Media </header> <nav> <a href='#'>Home</a> | <a href='#'>About</a> | <a href='#'>Work</a> | <a href='#'>Contact</a> </nav> <section> <h1>Welcome to SCA</h1> <p>Welcome to the MIDM course.</p> </section> <aside> <p>News and Events</p> </aside> </body> </html>

  10. Exercise 1: CSS body { background-color: #cccccc; padding: 100px; color: #355465; font-size: 1em; } a { color: #612c2c; text-decoration: none; } a:hover { color: #b23c3c; }

  11. CSS Values - Color • When defining css values there are many different options that can be used, and attempting to rememer them can seem overwhelming! • But two handy concepts to remember are how to apply the size and color values. • When defining a the color of an element there are 16 color value keywords that can be used: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white and yellow. • You also have hexadecimal colours ranging from #000000 (black) to #ffffff (white). • In addition, RGB values may be expressed in percentage and decimal forms. • Using programs like Photoshop enables you to select your color values from your designs really easily. h1 { color: black; } h1 { color: #000000;} h1 { color: rgb(0,0,0);}

  12. CSS Values - Size • When declaring size values, you will primarily use percent (%), ems (em) or pixels (px) to express any size values. Pixels are an absolute value, therefore, if you declare something as 300px, it will be exactly 300px. • Percent and ems are relative values, meaning that the browser calculates the size of the element relative to its parent’s size value. • For example, if the font size is declared to be 20px in the body, and then 80% for paragraphs, paragraph fonts will display at 16 pixels. • 1em is equal to the current font size. 2em means 2 times the size of the current font. h1 {font-size: 20px;} h1 {font-size: 200%;} h1 {font-size: 2em;}

  13. The CSS Box Model • Another handy concept to grasp when working with CSS is that any element in your HTML file may be thought of as a box. • Each box has a number of properties that you can manipulate with your style sheet, such as margin, border and padding properties etc.

  14. EXERCISE 2: HTML <!DOCTYPE html> <html> <head> <link href="css/stylesheet2.css" rel="stylesheet" type="text/css”> <meta charset='UTF-8’> <meta name='description' content='This is my MIDM web page’> <meta name='keywords' content='sydney university, masters, digital media'> <title>MIDM Web Page</title> </head> <body> <header> <h1 id='page-head'>Interactive and Digital Media </h1> </header> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Work</a></li> <li><a href="#">Contact</a></li> </ul> </nav> <section> <h1>Welcome to SCA</h1> <p class='main-paragraph'>Welcome to the MIDM course.</p> <p> This is another paragraph</p> </section> <aside> <p>News and Events</p> </aside> </body> </html>

  15. EXERCISE 2: CSS body { background-color: #cccccc; padding: 100px; color: #355465; font-size: 1em; } a { color: #612c2c; text-decoration: none; } a:hover { color: #b23c3c; } .main-paragraph { font-weight: bold; } #page-head { font-size:30px; text-transform:uppercase; } navul { list-style: none; padding: 0px; margin:0px; } navul li { display:inline; padding: 20px; }

  16. CSS Selectors • The selector is the part of the style rule that tells the browser which element in your HTML mark-up it should be appling your style to. • CSS uses several different types of selectors that will enable you to specifically target elements within a HTML document. These include type selectors, class selectors, id selectors and descendant selectors.

  17. CSS Selectors The type selector is the most basic form of css selector. It simply uses an elements name to apply style declarations to all instances of the the selected element. eg P { margin: 1em; } The Class Selector usesthe “class” attribute added to any element in your HTML to target that instance of the element. In its simplest form, the mark-up would look like this. eg <p class=“main-paragraph”>This is the main paragraph</p> .main-paragraph { color: red; } Class selectors can be applied to multiple elements within your HTML

  18. CSS Selectors The ID selector is very similar to the class selector, with an important distinction; the rule can only be applied once as each id attribute in an HTML document must be unique. <div id=”contact"> This is some contact information </div> #contact { color: blue; } The descendant selector’s subject is the descendant of an element. In the following example, the selector targets the unordered list within the element with an id attribute value of navigation. <div id=”navigation"> <ul> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </div> #navigation ul { margin: 0; padding: 0; background-color: #069; color: #fff; }

  19. EXERCISE 3: HTML <!DOCTYPE HTML> <html> <head> <link rel="stylesheet" type="text/css" href="css/my-style.css"> <meta charset="UTF-8"> <meta name="description" content="This is the SCA web page for the MIDM course at Sydney UNI."> <meta name="keywords" content="sydney university, masters, digital media"> <title>Interactive and Digital Media</title> </head> <body> <header> <h1>Interactive and Digital Media</h1> </header> <nav> <ul> <li><a href="index.html">home</a></li> <li><a href="about.html">about</a></li> <li><a href="photos.html">photos</a></li> <li><a href="videos.html">videos</a></li> <li><a href="contact.html">contact</a></li> </ul> </nav> <section> <h1>Welcome to Interactive and Digital Media</h1> <img src="images/medals.jpg" alt="Medals" width="380" height="252”> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus, purus eu sagittis consequat, enim risus consequat purus, nec ullamcorper risus orci id nisl. Donec commodo laoreet sem at tincidunt. Vivamus urna odio, consectetur eu condimentum et, vestibulum porta ligula. Nunc luctus euismod sagi 0ttis. Sed tempus eros ut neque ullamcorper posuere. Cras vel cursus lorem. Vestibulum venenatis orci non enim molestie faucibus. Praesent tellus leo, pulvinar sed rutrum accumsan, fringilla eu sem. Integer placerat porta vehicula. Integer condimentum iaculis ipsum a porttitor.</p> </section> <aside> <h3>News and Events</h3> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin dapibus...</p> </aside> <footer> <p>info@hotmail.com</p> </footer> </body> </html>

  20. EXERCISE 3: CSS Part1 body{ background-color:#CCCCCC; margin:10px auto; font-family:Verdana, Geneva, sans-serif; width:600px; } a{ color:#666666; padding:10px; font-style:normal; text-decoration:none; } a:hover{ color:#333333; text-decoration:underline; } navul{ list-style:none; padding:0px; /*set margin top right bottom left*/ margin:0.5em 0 0.5em 0; font:large sans-serif; } nav li{ display:inline; } header{ background-color:#FF9900; margin:0; padding:20px; height:200px; width:100%; font-size:1.5em; }

  21. EXERCISE 3: CSS Part2 section{ background-color:#333333; color:#FFFFFF; margin:0; padding:20px; width:100%; } aside{ background-color:#FF9900; color:#FFFFFF; margin-top:10px; padding:20px; width:100%; } footer{ font-size:10px; } h1{ font-size: 2em; } h2{ font-size:1.7em; } h3{ font-size:1.2em; } img{ border:solid 10px #fff; margin:0 10px 10px 0; align: left; }

More Related