Training & Development Presentation and Layout G9 – Unit 2 Training & Development

Learning outcomes After completing this unit, you will be able to: explain how CSS code is used to target HTML tags, text and other elements in a HTML page. use CSS to detail the layout and presentation of mobile applications. design, develop and evaluate a mobile application. Fast walkthrough: CSS is a language that allows you to make designs that are well organized and beautiful. HTML describes the content of web pages. CSS describes how that content should look. CSS provides a way to control the layout and presentation of an app. It is used to change the elements properties, including colour, font, size and placement. You will use CSS to make your app look great!

Key terms CSS Cascading style sheets (CSS) is code that enables you to change the look and layout of HTML pages. font the style of the text that you use on a computer border around the edges of an element padding the space between the content and the border of an element margin the space from the edge to the next object Important Vocab

CSS HTML HTML + CSS CSS stands for Cascading Style Sheets. CSS is a language which helps change the way an app looks. In the picture below, the app on the left has no CSS while the app on the right has CSS. The app with CSS looks much better! CSS provides a way to control the layout and presentation of an app. It is used to change the elements properties, including colour, font, size and placement. HTML HTML + CSS

CSS in Apps Do you know that your daily life apps use CSS ? You studied CSS before. Discuss in groups what you remember. Write down some of the main points from your discussion.

Classes html file css file There are different ways to use CSS. For your app, you will focus on External Style Sheets. In this way, CSS is written within a separate file, using a text editor. External Style sheets are efficient because the layout and presentation of an entire mobile app can be changed by changing just one document. Your HTML document was saved with a .html extension, but your CSS document will be saved with a .css extension. The rel attribute tells the browser that this is a stylesheet. The href attribute tells the browser where the external file is. This is very similar to when you tell a HTML file where an image is saved. To apply styles from a CSS document to a HTML document, you need to link them together. This is done using link tags (<link></link>). Link tags are put inside the head tags.

How CSS is written To make a class, you need to do a few things: Put a dot . before the name. Class names should be unique. Put the styling instructions inside curly brackets, {} What you will be styling (colour) is immediately followed by a colon : Add a value (green). Each style must end with a semicolon ; CCQ Activity Make a CSS class that will change an elements colour to blue. There are lots of ways to target the elements you want to style with CSS. Classes are one of those ways.

Adding Class to Element To add a class to an element, use the class attribute with the class name, inside quotes, as the value. The properties that is define in the class will be applied to the element. Different elements can use the same class. This makes adding the same styles to lots of elements easy!

Lab Activity Walk the teachers through this lab activity on their laptop.

Lab Activity Walk the teachers through this lab activity on their laptop.

CSS styling There are some colour values that can be written out in CSS, like green or red. For other less common colours, you will need to include the colour’s 6-digit hexadecimal number instead. Below are some examples of hexadecimal colour codes.

Text colour Background colour You have already learned how to set the colour of text. The CSS code is color. To change the background colour, the CSS code is background-color. Put a colour name or a hexadecimal colour code as the value.

Font style Font is the size and style of text. To change the font size of text, the CSS code is font-size. The value that this code takes is a number with px appended to it. Choose a small number for small text or a high number for big text. CCQ Activity Create a class that sets the font size of an element to 16px.

Font style Font is the size and style of text. To change the font size of text, the CSS code is font-size. The value that this code takes is a number with px appended to it. Choose a small number for small text or a high number for big text.

Text alignment The text align property is used to set the position of text. Text can be aligned to the centre, left or right

Activity Add two classes to a Heading element An element can have multiple classes. Class names must be separated by white space characters.

Multiple properties in one class Multiple classes Multiple properties in one class An element can have multiple classes. Class names must be separated by white space characters.

CSS Box model Content – the text, image, or other media content in the element Padding – the space between the box’s content and its border Border – the line between the box’s padding and margin Margin – the space between the box and surrounding boxes All HTML elements can be considered boxes. The CSS box model is a box that wraps around every HTML element. It consists of: margins, borders, padding, and the content.   Content – the text, image, or other media content in the element Padding – the space between the box’s content and its border Border – the line between the box’s padding and margin Margin – the space between the box and surrounding boxes

Border Style Border Width You can add different types of borders to elements. Dotted, dashed and solid are some of the border types that you can use. The CSS code is border-style. The border-width property sets the width of an element's borders. Thin, medium and thick are some of the border widths that you can use.

Padding Padding adds extra space between the content and the border. The CSS code is padding. The amount of space depends on the value you set this property to. The padding value is set using a number with px appended to it

Margin Margin adds space around elements. The CSS code is margin. The amount of space depends on the value you set this property to. The margin value is set using a number with px after it.

Activity Create a class that sets the border style, border width, margin and padding of a class. An element can have multiple classes. Class names must be separated by white space characters.

G9 Advance & General - Project Task 2 In project task 2, you will use CSS to control the layout and presentation of your app! Create a CSS file and link it to the HTML file from project task 1. Add some classes to the CSS file and apply the classes to HTML element. Share the example solution (Both Advance and General task 2) once the teachers have finished. Students should be creative and have their own styling for their app.

Thank You