Welcome! Please sit in alternating rows
Day TWO: CSS 101
What are we going to do? Today will be all about CSS: Day one: HTML 101 Introduction to websites HyperText Markup Language (HTML) Making our first few pages Day two: CSS 101 Introducing Cascading Style Sheets (CSS) Styling HTML elements Day three: Application & Integration Use knowledge from day 1 and 2 to make a functioning website
RECAP: FINAL Assignment Please share with us your experiences on the final assignment. Did you encounter problems, or came up with a kick-ass menu? Raise your hand!
Let s Start!
Introduction to CSS CSS is used to style web pages. CSS is an abbreviation of Cascading Style Sheets. Cascading implies that style rules are passed on to the children of the parent element If the font size of a certain DIV element is set to 12px, all the P elements inside the DIV will inherit the font size of 12px. However, cascading also implies that properties can be overwritten by a more specific selector (lower in the cascading hierarchy)
Introduction to CSS <body> <div class= content > <p>content goes here</p> </div> </body> selector { property: value; } Selectors are used to declare which part of the markup a style applies to Elements of a specific type, e.g. H2 headers Elements specified by attribute ID Class
Introduction to CSS <body> <div class= content > <p>content goes here</p> </div> </body> body { font-family: arial; font-size: 12px; }.content { position: relative; } p { } padding-bottom: 10%;
Introduction to CSS To recap what we have seen on the previous 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 Comments Used to explain your code. Comments are opened with /* and closed with */
introduction to css You can use a selector to directly target an HTML-element, like so: element { property: value; } You can also use more specific selectors, for example a parent-child relation, like so: parent child { property: value; } You can target more than one element by using a comma, like so: element1, element2, element3 { property: value; }
linking HTml and css There are three ways of inserting a style sheet: External style sheet (YAY) <link rel= stylesheet type= text/css href= filename.css > Internal style sheet (BOO) <head> <style> p {margin-left:20px;} </style> </head> Inline style (YAY... sort of) <p style= color:sienna;margin-left:20px; >This is a paragraph.</p>
Assignment 1: link stylesheet We ask you to link a given CSS file to all of the four given HTML pages using the technique we mentioned earlier. Download the relevant files from www.showkaas.nl
CSS: CLASSES AND ID s We can reference elements specified by two types of attributes. 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. Uses the HTML Class attribute, is defined with a. ID s Used to specify a style for a single, unique element Uses the ID attribute of the HTML element, is defined with a # NOTE: It is not allowed to use multiple ID s with the same name on a single page.
Basic CSS properties: background One property of CSS is the background. It s often applied to the body, but can be applied to other elements as well. The background property consists of four parts: 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
Basic CSS properties: background The background-image needs to be specified using an url value: body { background-image: url( filename.jpg ); } The linking to the file works the same as in HTML: folder/filename for a file in a folder in a lower level,../filename for a higher-level folder. The background-repeat property has 4 preset values, you need to use either of them: no-repeat For a non-repetitive background repeat-x For a background repeat along the x-axis repeat-y For a background repeat along the y-axis repeat For a background repeat in both directions
Basic CSS properties: background The background position is a little more complex. It has preset values, as well as custom values which can be combined as well. The preset values are as follows: left, center and right top, center and bottom for a position relative to the screen on the x-axis for a position relative to the screen on the y-axis The custom values can be percentual or pixel-based values. The distances are measured from the top-left of the element. background-position: Xpx Ypx; or background-position: X% Y%; As said, you can combine the values, for example, like so: background-position: center 50px;
Basic CSS properties: background The background-color needs to be specified using color values, like hexadecimal codes: body { background-color: #5275bb; } All four background-properties can also be summarised using shorthand CSS. Using just one property with multiple values, like so: body { background: url( filename.jpg ) center top repeat-x #5275bb; }
Assignment 2: USING BACKGROUNDS Using the given files on www.showkaas.nl, apply a background to some of the HTMLelements using CSS. Make sure you use the following properties at least once: background-color background-image background-position background-repeat HINT: Try to use shorthand CSS using the background property HINT: Try to make use of classes and ID s
basic CSS properties: Border Elements can be given a border by 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) NOTE: The border-style property is mandatory and always needs to be set.
basic CSS properties: Border Elements can be given a border by using the border property. border-style solid dotted dashed double NOTE: The border property can also be used as shorthand CSS border: 1px solid black;
Assignment 3: BORDER Using the files given on www.showkaas.nl, apply borders to some of the HTML-elements using CSS Make sure you use the following properties at least once: border-color border-style border-width HINT: Try to use shorthand CSS using the border property HINT: Try to make use of classes and ID s
Basic CSS properties: fonts There are a lot of properties that are associated with editing the appearance of text. The ones we re going to discuss are: font-family font-size color line-height text-decoration font-weight and font-style
Basic CSS properties: fonts The font-family tells the browser what font to use. p { font-family: arial, verdana, sans-serif; } As you can see, we ve used three values. This is a hierarchy of fonts, where every font lower in the hierarchy is a fallback. The last fallback should be either serif or sans-serif. Sans-Serif Font Serif Font NOTE: Not every font is installed on every computer. Use safe fonts!
Basic CSS properties: fonts The color of the text is defined by the color property. The size of the text is defined by the font-size property. The value of a font is defined in pixels, and is often inherited from a parent-element. The space between the lines of the text is defined by the line-height property. The value can be either absolute or relative. p { line-height: 18px; } or p { line-height: 1.5; } A line-height of 1.5 is relative to the font-size. This means a font-size of 12 pixels will generate a line-height of 1.5 * 12 = 18px.
Basic CSS properties: fonts The last property that can be used to style fonts is the text-decoration property. This 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 above the text none for normal text. This is default The font-weight property is used to change the font s thickness. p { font-weight: bold; } The font-style property is to give the text a certain style, such as italics. p { font-style: italics; }
Assignment 4: USING fonts Using the given files on www.showkaas.nl, change the fonts of the HTML-elements using CSS. Make sure you use the following properties at least once: font-family font-size color text-decoration line-height font-weight & font-style HINT: Try to make use of classes and ID s
basic CSS properties: dimensions The CSS dimension property is used to control the height and width of an element Set the width and height of a paragraph.content { height:100px; width:100px; } The dimensions can be set either with: pixels percentages auto
Assignment 5: dimensions Using the files given on www.showkaas.nl, add dimensions to the HTML-elements in CSS. The classes and some colour have already been applied to the divs. Make sure to play with both the width and height, and with different units such as percentages and pixels.
Basic CSS properties: spacing In CSS there s basically two ways to space an element: margins and paddings. To understand the difference, we must take a look at the box model: top margin border padding actual element right bottom
Basic CSS properties: spacing To conclude: a margin is spacing outside the element-border, while padding contributes to space inside the element-border. top margin border padding actual element right bottom
Basic CSS properties: spacing The values of margins and paddings work exactly the same, they can be either be defined in pixels or percentages. There s 4 different places where one can apply a margin or padding: margin-top padding-top margin-right padding-right margin-bottom padding-bottom margin-left padding-left These can be typed using shorthand CSS as well, following the ways of a clock starting at the top: margin: top right bottom left; There s one special value: auto. This automatically fills in and equally divides the amount of margin, often used to center an element by using margin left/right with auto as value.
Basic CSS properties: spacing The margins and paddings can be written using shorthand CSS as well: margin: 10px 5px 0px 15px; Outputs a margin-top of 10px, margin-right of 5px, margin-bottom of 0px and margin-left of 15px. Or even shorter: margin: 10px 5px 0px; Outputs a margin-top of 10px, margin-right of 5px, margin-bottom of 0px and margin-left of 5px. And even shorter: margin: 10px 5px; Outputs a margin-top of 10px, margin-right of 5px, margin-bottom of 10px and margin-left of 5px. And the shortest form: margin: 10px; Outputs a margin-top of 10px, margin-right of 10px, margin-bottom of 10px and margin-left of 10px.
Assignment 6: POSITIONING WITH spacing Play with margins and paddings using the given files on www.showkaas.nl, make sure you understand the box model correctly! Also, place the wrapper-div in the center using margins. HINT: Center the wrapper using automatic values HINT: Try using CSS shorthand
basic CSS properties: display The display property specifies if / how an element is displayed. Basically there are two types of elements: Block A block element is an element that takes up the full width available. The element also has a link break before and after it. <h1> <p> <div> Inline An inline element only takes up as much space as necessary. The element does not force line breaks. <span> <a>
basic CSS properties: display Changing an inline element to a block element, or vice versa, can be useful for making the page look a specific way, but still follow web standards. Display list items as inline elements li { display: inline; } Display span elements as block elements span { display: block; }
basic CSS properties: display The display property can also be used to not show an element at all. Using the value hidden the element will be hidden and not take up any space. The page will be displayed as if the element is not there. Hide an element p { display: none; } NOTE: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display:block is not allowed to have other block elements inside of it.
basic CSS properties: FLOAT Using the float property an element can be pushed to the left or right, allowing other elements to wrap around it. Float is very often used for images, but it is also useful when working with layouts. Elements are floated horizontally, this means that an alement can only be floated left or right, not up and down. A floated element will move as far to the left or right as it can. Most of the time this means all the way to the left or right of the containing element. The elements after the floating element will flow around it while the elements before the floating element will not be affected. If an image is floated to the right, a following text flows around it to the left.
basic CSS properties: FLOAT If you place several floating elements after each other, they will float next to each other if there is room. We can create a image gallary using the float proparty:.thumbnail { float: left; width: 110px; height: 90px; margin: 5px; }
basic CSS properties: FLOAT Floated elements lose their heigth. Therefore elements that follow the floated element will flow around that. This can be unintended, for example with text. In order to avoid this we use the clear property. Turning off Float.text_line { clear: both; }
Assignment 7: FLOAT AND DISPLAY Using the files given on www.showkaas.nl, position the image inside the paragraph tag right of the text. Also, make sure the red and blue 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 starts on a new line, using CSS only and no additional HTML.
THE FINAL ASSIGNMENT
THANKS! See you tomorrow morning in auditorium 3 at 9.00!
It s TIme for a break!