Welcome Please sit on alternating rows. powered by lucid & no.dots.nl/student

Size: px

Start display at page:

Download "Welcome Please sit on alternating rows. powered by lucid & no.dots.nl/student"

Gabriella Stevenson
6 years ago
Views:

1 Welcome Please sit on alternating rows powered by lucid & no.dots.nl/student

2 HTML && CSS Workshop Day Day two, November January 276 powered by lucid & no.dots.nl/student

3 About the Workshop Day two: CSS 101

4 About the Workshop Day two: CSS 101 Recap final assignment An introduction to CSS Syntax Linking HTML and CSS Classes & ID s Basic CSS Properties Boxmodel & Spacing Basic CSS Properties

5 Recap of the Final Assignment Share your experiences

6 Introduction to CSS Syntax The grammar of CSS

7 Introduction to CSS Syntax HTML is markup, CSS is used to style websites. It s an abbreviation of Cascading StyleSheets

8 Introduction to CSS Syntax To understand CSS, we need to take a look at some HTML

9 Introduction to CSS Syntax To understand CSS, we need to take a look at some HTML Cascading implies that style rules are passed on to the children of the parent element. Cascading also means that properties can be overwritten by a more specific selector.

10 Introduction to CSS Syntax The CSS Syntax is very simple: Selector are used to target HTML elements. You can do this by: Directly targeting the HTML-element or more specific Or more specific, with ID s and classes

11 Introduction to CSS Syntax Some examples of targeting with CSS

12 Introduction to CSS Syntax Some examples of targeting with CSS

13 Introduction to CSS Syntax Some examples of targeting with CSS

14 Introduction to CSS Syntax Another, more specific way of targeting an element parent element { your css } And you can target more than one element at a time, as well element1, element2, element3 { your css }

15 Introduction to CSS Syntax A quick recap of the last pages: Selectors Are used to declare which part of the markup a style applies to Properties The property is the style attribute you want to change Values Each property has a value

16 Linking HTML & CSS Combining yesterday and today

17 Linking HTML & CSS There are three ways of applying your CSS to your HTML. There s an external stylesheet <link rel= stylesheet type= text/css href= filename.css /> There s an internal stylesheet <style> your css </style> There s inline styles <tagname style= your css ></tagname>

18 On the workshop website, download the HTML files. These should look a little like your homework files. To all pages, you need to add an external stylesheet. Save this stylesheet as style.css. To this stylesheet, add the following code: body { background: red; } Assignment 1: Linking a stylesheet If the background of all pages is red, you can remove the code again.

19 Classes & ID s The real link to your HTML

20 Classes & ID s Classes: Used to specify a style for a group of elements. Most often used on several elements. This allows to set a particular style for many HTML elements with the same class. The classes are targeted using a dot in front of the classname (.classname ) ID s: Used to specify a style for a single, unique element The classes are targeted using a dot in front of the classname ( #idname ) Both ID s and Classes need to match the attribute values in HTML, respectively

21 Basic CSS Properties The things you ll need to style a website

22 Basic CSS Properties: Background The background-property is often applied to the body. The background-property is actually four different properties in one. You can use them seperately as well. background-image tells the browser where to find an image background-repeat tells the browser whether to repeat the background image background-position tells the position of the background to the browser background-color describes the background color of an element

23 Basic CSS Properties: Background The background-image property needs to be specified using an url value. The way you refer to the file is the same as in HTML background-image: url( path/filename.jpg ); The background-repeat property has 4 preset-values. You need to use just one. no-repeat repeat-x repeat-y repeat background-repeat: repeat-x;

24 Basic CSS Properties: Background The background-position property is a little more complex. It s got preset values as well as custom ones. They can be combined as well. Also, it needs two values, not one. The preset values are as follows: left, center and right for the x-axis. top, center and bottom for the y-axis. The custom values can be percentual or pixel-based values. The distance are measured from the top-left. background-position: Xpx Ypx; or background-position: X% Y%;

25 Basic CSS Properties: Background The background-color needs to be specified using colour-values. These can be hexadecimal colour-codes or red-green-blue values. background-color: #f129a0; All four background-properties can be combined into shorthand CSS. Using just one property with multiple values, like so: background: url( filename.jpg ) no-repeat top center #ffffff;

26 Assignment 2: Using backgrounds Using the files form previous assignment, give some background to the body element of your page using CSS. Make sure you use every background-property available, and in the end some shorthand-css if you want to.

27 Basic CSS Properties: Border Elements can be given a border using the border-property. The border property consists of three parts: border-style Describes the style of the border (solid, dotted, dashed, etc) border-width Describes the width of the border (either in pixels or thin, medium, thick) border-color Describes the colour of the border (RGB or HEX)

28 Basic CSS Properties: Border Elements can be given a border-style by using the border-style property. Use one of the following preset-values: solid dotted dashed double The border-properties can also be combined using shorthand-css: border: 1px solid black;

29 Basic CSS Properties: Fonts There are a lot of css-properties associated with fonts. The ones we re going to discuss: font-family font-size color line-height text-decoration font-weight & font-style

30 Basic CSS Properties: Fonts the font-family tells the browser which font to use p { font-family: verdana, arial, sans-serif; } As you can see, we ve used three comma-seperated values. This is a hierarchy of fonts, the last one is the fallback font. This fallback should always be serif or sans-serif. Remember to use safe fonts! Sans-serif Serif

31 Basic CSS Properties: Fonts The color of the text is simply defined by the color property. Using hexadecimal or RGB values. The size of a text is defined in font-size. Its values are in pixels. p { color: rgb(255, 0, 0); font-size: 25px; } The space between the lines, the leading, is defined by the line-height property. This value can either be absolute or relative to the font-size. p { line-height: 18px; } or p { line-height: 1.5; }

32 Basic CSS Properties: Fonts Another property that can be used to style fonts is the text-decoration property. The property has a few preset values: underline (for a line below the text) line-through (for a line through the text) overline (for a line on top of the text) none (for no line) The font-weight is used to change the font s thickness. p { font-weight: bold; } The font-style is used to give the text a certain style, such as italics p { font-style: italic; }

33 Using an HTML with a few different text-elements on it, change the fonts of these elements. Make sure you use each of the following properties at least once: - font-family - font-size - color - text-decoration - line-height - font-weight & font-style Assignment 3: Using Fonts PRO TIP: Try to make use of classes & ID s to target specific elements.

34 Basic CSS Properties: Dimensions We can give dimensions to an HTML-element using the width and height properties..content { width: 100px; height: 100px; } The value of these properties can be percentages or pixels.

35 Assignment 4: Creating dimensions On the workshop website, under assignment 4, you ll find an HTML-file for download. The classes and colors have already been assigned to the elements, now give some dimensions to these elements using CSS. Play with both width and height, and use both pixel and percentage values.

36 Boxmodel & Spacing The most important thing to understand in CSS: The Boxmodel.

37 Boxmodel & Spacing In CSS there s a few ways to space and position an element. Two of these are the margin and the padding. To understand the difference between those two, we need to understand the boxmodel.

38 Boxmodel & Spacing To conclude. A margin is the spacing outside the element-border, the padding inside. Everything inside the border (and the border itself) accounts for the width of an element.

39 Boxmodel & Spacing The values of margins and paddings work exactly the same. You can define them in either pixels or percentages. There s 4 different places where we can - seperately - apply paddings and margins: margin-top and padding-top margin-right and padding-right margin-bottom and padding bottom margin-left and padding left These can also be used in shorthand css, as follows: margin: top right bottom left; There s one special value: auto. This is often used to horizontally center an element.

40 Using the files provided on the workshop website, try to understand the boxmodel correctly: - See what margins, paddings and borders do to the position of an element. - Place the wrapper div in the center of the page PRO TIP: Center elements using automatic values. Assignment 5: Positioning & Spacing

41 Basic CSS Properties: Display The display property specifies if/how an element is displayed. Basically, there are two types of elements: Block-level elements. A block element is an element that takes up the full width available. The element also has a line break before and after it. p h1 div Inline-level elements An inline element only takes up as much space as necessary. It does not force line-breaks. span a

42 Basic CSS Properties: Display You can change the display-value of an element using CSS. This can be useful for making the page look a certain way, but still follow web-standards. Making a list-item (block-level) element display as inline-elements li { display: inline; } Making a span element display as a block-level element span { display: block; }

43 Basic CSS Properties: Display The display property can also be used to hide an element from the user. Using the value none, the element will be hidden and won t take up any space. p { display: none; } NOTE: Changing the display property in CSS only changes the way a browser renders the element. It does not change the element itself. It s still not allowed to put block-level elements inside of inline-level elements.

44 Basic CSS Properties: Float Using the float property, an element can be pushed to the left or the right. This allows other elements to flow around it, like water around a floating ship. Float is often used for images, but it s useful for layouts as well. Elements are floated horizontally, so only left and right. Not up. Not down. Also, it will move right or left as far as an element can. Most of the time, this is until the boundaries of the parent-element. The elements after the floating element will flow around the floated element. The elements before won t be affected.

45 Basic CSS Properties: Float Floated elements lose their height. This can be unintended. To undo this, we can use the clear property on the element after the floating element. p { clear: both; }

46 Assignment 6: Positioning and floating Using the files provided on the workshop website under assignment 6, position the image inside of the paragraph tag on the right of the text. Also, make sure the blue and red divs are positioned at the same height, one at the right and one at the left of the page. Besides that, make sure the anchor-tag starts on a new line using CSS-only. No line-breaks in HTML.

47 Assignment 7: Recreating an Image I have created a simple HTML-page without CSS. Also, I ve created a few reference-images. Download these files on the workshop website. Style the HTML in such way, using CSS, that it looks like the reference images.

48 The Final Assignment A larger one for you to do at home

49 Download the files provided on the workshop website. In all files, you will find an index.html file, a style.css file, two reference images and some other things. Using the skills learned today, write the CSS that s needed to make the index.html file look like the referenceimages. The first one is the easiest, the third one the hardest. Final assignment The solution is included in the file, but only try to use it if you really get stuck. If you re done, me your screenshots: daan@nodots.nl lei@codified.nl

50 See you tomorrow! See you tomorrow! At at 9.00AM AM, in Auditorium right here. 2 (right now). powered by lucid & no.dots.nl/student

Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100

Introduction to Multimedia. MMP100 Spring 2016 thiserichagan.com/mmp100 Introduction to Multimedia MMP100 Spring 2016 profehagan@gmail.com thiserichagan.com/mmp100 Troubleshooting Check your tags! Do you have a start AND end tags? Does everything match? Check your syntax!