JMD2144 – Lesson 5 Web Design & New Media

‘Div’ide and conquer One of the most versatile structure tags available is the.. tag Short for ision, it allows you to divide your page into containers (that is, different pieces) It will come in handy when we learn CSS

Try this Build a skeleton html Run it and what do you see? Add another ‘box’ of yellow color under the green

Link it The smart use of will eventually allow you to create visual HTML objects like sidebars, menus, and more! Just like images, you can make clickable by wrapping them in.. tags

“span”tastic! While allows you to divide your webpage up into pieces you can style individually, allows you to control styling for smaller parts of your page, such as text If you want the first word of your paragraph to be red, you wrap each word in.. tags and make them red using CSS!

An example of span This text is black, except this is green and this is red !

is the man! is the man! These tags can be a little tricky, so let’s go through one more time Color is just one attribute you can selectively change with tags; you can also change font size, font family, and any other style attribute you can think of! My favorite font is > Impact !

Observe this code My Photo Page

Explanation In the code, there is stylesheet.css, an external file This file include a lot of ‘codes’ to beautify or format the look of the webpage

Cell by cell If you need to create a photo page of yours, maybe you will need nine cells (3x3) – 3 rows by 3 columns My Photo … Add 2 more rows, each rows with three columns

Nine pictures are worth 9,000 words Find nine pictures ◦ It can be saved from an internet or image links or your own stock In each cell, put it an image Create a link to each image

Seeing is believing Everything written in HTML “as it is” results in pretty ugly The stylesheet.css tab contains all the CSS styling information: where HTML elements should go, what color they should be, how big they should be, and more

If you’re on the internet, go to elearning and download web05.html file Run the file and observe the outlook In the coding, remove the tags (the comments) Run it again What is your comment?

What is CSS? Stands for Cascading Style Sheets A language used to describe the appearance and formatting of your HTML A style sheet is a file that describes how an HTML file should look like The style sheets are cascading because the sheets can apply formatting when more than one style applies It means that, if you say all paragraphs should have blue font, and only one paragraph should have red font, it can be done

Where can you write CSS? CSS within HTML can be written three ways: ◦ embedded ◦ internal ◦ external embedded is when the CSS is written line by line internal is having the.. tag within the tag which has all the CSS codes in it external is having all the CSS code outside of the HTML file and having it called from inside the tag When you write external CSS file, you need to save it as.css

Why separate form from function? Two main reasons for separating your form/formatting (CSS) from your functional content/structure (HTML) ◦ You can apply the same formatting to several HTML elements without rewriting code (e.g. style=“color:red;” over and over ◦ You can apply similar appearance and formatting to several HTML pages from a single CSS file

You don’t believe me? Download “web05_css1.html” and “stylesheet.css” from elearning Run web05_css1.html Open up stylesheet.css so that you can modify the code ◦ add font-family:cursive; in the span element Run web05_css1.html again What difference do you observe?

Syntax to write CSS HTML element (Selector) { property: value; } E.g. p { color: blue; font-family: Arial; font-size: 20px; } In this case, all paragraphs in your HTML file will be Arial, 20px size and in blue color

Embedded CSS p { color:purple; {

So you have all three types in HTML The priority is given to internal (inline) styling Next will be embedded Finally, the external CSS will be taken into account

External CSS: how to call it in your HTML file Put a tag between the tags In the tab, a type attribute should be always be equal to “text/css” A rel attribute should always be equal to “stylesheet” A href attribute should point to the web address of your CSS file

One selector, many properties Another cool advantage of CSS is that you can set many properties for one selector If you want to set a paragraph’s font, font color, and font size, you can simply write p { font-family: Arial; color: green; font-size: 20px; }

Try for size Create a CSS to make paragraph font color as green, font as Garamond and font size to 24 pixel

Many selectors, many properties Create a CSS external file with these properties, save it as stylesheet.css ◦ Make all the h3 headings red ◦ Set all the paragraphs to the Courier font family ◦ The second paragraph contains text between.. tags. Set the background color of that to yellow The HTML file can be downloaded from elearning website (web_css02.html)

Why is the semicolon important? It is important to remember to put a semicolon (;) at the end of each line The semicolon tells CSS that one property-value pair is over and it’s time to move on to the next one Without semicolons, it’ll become confused and your page won’t look right Also, don’t forget: all property-value pairs for selector are surrounded by curly braces ( { } )

What is wrong with this CSS syntax? h3 { font-family: Verdana color: blue ) p [ font-family: Garamond font-size: 16px {

Comments While it is important to get all your syntax down correctly, it is also a good idea to write comments as you go along Good comments will help remind you why you did something a certain way (or will help someone else out if they are reading your code) HTML comments look like this: ◦ A comment in CSS looks like this: ◦ /* a comment in CSS */

Make changes to this code Result Change me to Verdana. Change me to Courier. Make me purple!

Instructions Add a to stylesheet.css between your.. tags Change the header’s font-family to Verdana Change the header’s font-family to Courier Make the paragraph text color to purple Add a comment to the CSS to comment on anything you like