mmde5011 week 2: introducing css
DESCRIPTION
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. - PowerPoint PPT PresentationTRANSCRIPT
MMDE5011WEEK 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.
• 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.
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.
Adding CSSThere 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>
External CSSExternal 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>
The Directory Tree
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
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;
}
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>
Exercise 1: CSSbody {
background-color: #cccccc;padding: 100px;color: #355465;font-size: 1em;}
a { color: #612c2c;text-decoration: none;
}
a:hover {color: #b23c3c;
}
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);}
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;}
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.
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>
EXERCISE 2: CSSbody {
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;
}
nav ul {list-style: none;padding: 0px;margin:0px;
}
nav ul li {display:inline;padding: 20px;
}
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.
CSS SelectorsThe 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 uses the “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
CSS SelectorsThe 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;
}
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>[email protected]</p></footer>
</body></html>
EXERCISE 3: CSS Part1body{
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;
}
nav ul{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;
}
EXERCISE 3: CSS Part2section{
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;
}