IDM 221. Web Design I. IDM 221: Web Authoring I 1

Size: px

Start display at page:

Download "IDM 221. Web Design I. IDM 221: Web Authoring I 1"

Chad Fleming
5 years ago
Views:

1 IDM 221 Web Design I IDM 221: Web Authoring I 1

2 Week 4 IDM 221: Web Authoring I 2

3 Presenta(on IDM 221: Web Authoring I 3 Up until this point everything we've focused on has been related to content, and structure. This has been intentional, because without content we have no project. Without structure we have no way of presenting our content. These concepts are critical and must be addressed before we can work on presenting our content. You know enough of the fundamentals to now begin working on content, structure and presentation.

4 CSS Syntax /********************************* * Description: Primary style sheet * Author: Phil Sinatra *********************************/ body { background-color: #facd8a; } /* Adjust the styles for headings */ h1 { color: # ; } h2 { font-style: italic; border-bottom: 2px solid #fff; /* Add line below h2 */ } IDM 221: Web Authoring I 4

5 Rule Sets /* selector */ h1 { } IDM 221: Web Authoring I 5 A CSS file consists of rule sets. A rule set consists of a selector followed by a set of braces.

6 Rule Sets /* selector */ h1 { /* property: value */ color: navy; /* declaration */ } IDM 221: Web Authoring I 6 Within the braces are one ore more declarations, and each declaration consists of a property and a value. Note that the property is followed by a colon and the value is followed by a semicolon. The selector in this example is h1 so the rules apply to all h1 elements. Then, the rule set consists of a single property named color that is set to the color navy. The result is that the content of all h1 elements will be displayed in navy blue.

7 Rule Sets h2 { border-bottom: 2px solid #fff; font-style: italic; } ul { list-style-type: square; } IDM 221: Web Authoring I 7 Here are some other rule sets. Rule sets can include a single or multiple declarations.

8 Rule Sets h2 { border-bottom: 2px solid #fff; /* Add line below h2 headings */ font-style: italic; } ul { list-style-type: square; /* Change bullets to squares */ } IDM 221: Web Authoring I 8 You can also code comments that describe or explain what the CSS code is doing. For each comment you start with /* and end with */, and everything between those characters is ignored. You can also use comments to comment out portions of code that you want disabled, which is useful when you're testing your CSS code just like when you're testing your HTML code.

9 How to code basic selectors IDM 221: Web Authoring I 9

10 <body> <h1 class="base_color">student materials</h1> <p>here are the downloads:</p> <ul id="links"> <li><a href="exercises.html">exercises</a></li> </ul> <p id="copyright" class="base_color"> 2016</p> </body> IDM 221: Web Authoring I 10

11 Universal Selector /* All elements */ * { margin:.5em 1em; } IDM 221: Web Authoring I 11 The first rule set uses the universal selector so it applies to all HTML elements. You won't necessarily need to use the universal selector often, but it is available if needed.

12 Type Selectors body { font-family: Arial, sans-serif; font-size: 100%; padding: 1em; width: 300px; } h1 { font-size: 180%; } IDM 221: Web Authoring I 12 The selector of a rule set identifies the HTML element or elements that the rules should be applied to. This example shows how to use three of the most basic selectors for CSS rule sets. The first type of selector identifies HTML elements like body, h1 or p. The selectors in this example apply to the body and h1 elements. These selectors are called type selectors.

13 <body> <h1 class="base_color">student materials</h1> <p>here are the downloads:</p> <ul id="links"> <li><a href="exercises.html">exercises</a></li> </ul> <p id="copyright" class="base_color"> 2016</p> </body> IDM 221: Web Authoring I 13

14 ID Selectors #copyright { font-size: 75%; text-align: right; } IDM 221: Web Authoring I 14 The second type selector starts with a pound sign (#) and applies to the single HTML element that's identified by the id attribute. In this example #copyright applies to the HTML element that has an id attribute with the value of copyright.

15 <body> <h1 class="base_color">student materials</h1> <p>here are the downloads:</p> <ul id="links"> <li><a href="exercises.html">exercises</a></li> </ul> <p id="copyright" class="base_color"> 2016</p> </body> IDM 221: Web Authoring I 15

16 Class Selectors.base_color { color: blue; } IDM 221: Web Authoring I 16 The third type of selector starts with a period (.) and applies to all of the HTML elements that are identified by the class attribute with the named value. In this example.base_color applies to all the elements with class attributes that have a value of base_color. This includes the h1 element and the last p element.

17 body { font-family: Arial, sans-serif; font-size: 100%; padding: 1em; width: 300px; } h1 { font-size: 180%; } #copyright { font-size: 75%; text-align: right; }.base_color { color: blue; } IDM 221: Web Authoring I 17 To code a selector for an HTML element, you simply name the element. This is referred to as a type selector. If an element is coded with an id attribute, you can code a selector for that id by coding a pound sign followed by the id value, as in #copyright. If an element is coded with a class attribute, you can code a selector for that class by coding a period followed by the class name, as in.base_color.

18 Provide styles IDM 221: Web Authoring I 18 Before you code the CSS for a web page, you need to know how to provide the CSS file for a web page. There are three ways to provide CSS styles for a web page.

19 External Styles <link rel="stylesheet" href="/css/master.css" media="screen" charset="utf-8"> IDM 221: Web Authoring I 19 First, you can code a link element that refers to an external style sheet. That's a separate file that contains the CSS for the page. This separates the content from the formatting and makes it easy to use the same sytles for more than one page. The attributes for a link element that links to an external file are the rel (relationship) attribute with a value of "stylesheet", and the href attribute which locates the file. There are additional attributes that can be applied such as media, title, charset etc.

20 Embedded Styles <head> <style> body { font-family: Arial, sans-serif; } h1 { font-size: 130%; } </style> </head> <body> IDM 221: Web Authoring I 20 Second, you can embed a CSS style sheet in the HTML for a page. This is referred to as an embedded style sheet. When you embed a style sheet, the CSS rule sets are coded in a style element in the head section of the HTML.

21 Inline Styles <h1 style="font-size: 250%; color: red;"> Town Hall </h1> IDM 221: Web Authoring I 21 Third, you can use inline styles within an HTML document. When you use an inline style, you code a style attribute for the HTML element with a value that contains all the CSS rules that apply to the element. This type of formatting means the content and formatting are tightly linked and can quickly get out of control.

22 Cascading Style Sheet IDM 221: Web Authoring I 22 The term Cascading Style Sheet refers to the face that more than one style sheet can be applied to a single web page. If two or more rules for the same property are applied to the same element, the cascade order and other rules determine which rule takes precedence.

IDM 221: Web Authoring I 23 This is sometimes a difficult concept to master, and can be the cause of a lot of headaches, especially if your code is not well organized.

23 IDM 221: Web Authoring I 23 This is sometimes a difficult concept to master, and can be the cause of a lot of headaches, especially if your code is not well organized. If you find yourself repeating the same code multiple times in your stylesheet, you need to optimize your approach. If you make changes to a property in your stylesheet and are not seeing those changes reflected in the browser, you have to organize your code better.

24 The cascade order!important rules in a user style sheet!important rules in a web page normal rules in a web page normal rules in a user style sheet default rules in the web browser IDM 221: Web Authoring I 24

25 .highlight { font-weight: bold!important; } IDM 221: Web Authoring I 25 How to identify a rule as important.

26 Mul$ple rules at same cascade level.highlight { /* rules here */ } /* More specific selector */ p.highlight { /* rules here */ } IDM 221: Web Authoring I 26 The rule with the highest specificity is used.

27 p.highlight { color: red; } p.highlight { color: blue; } /*.highlight text will be blue */ IDM 221: Web Authoring I 27 If the specificity is the same, the rule set specified last is used.

28 Determining selector specificity id is the most specific class or pseudo-class is less specific element or pseudo-element is least specific IDM 221: Web Authoring I 28

29 Measurements IDM 221: Web Authoring I 29

30 Measurements Symbol Name Type Descrip1on px pixels absolute a single dot on a monitor pt points absolute 1/72 of an inch em ems rela9ve 1em = current font size % percent rela9ve rela9ve to current size vw viewport width rela9ve rela9ve to viewport vh viewport height rela9ve rela9ve to viewport IDM 221: Web Authoring I 30 You use the units of measure to specify a variety of CSS properties, including font-size, line-height, width, height, margin and padding. These are the four units of measure that are commonly used with CSS: pixels, points, ems and percent. The first two are absolute units, the second two are relative units. When you use relative units of measure like ems or percent, the measurement will change if the user changes the browser's font size. Example: You set the size of a font to 80 percent of the browser's default font size, that element will change if the user changes the font size in the browser. Because this lets the users adjust the font sizes to their own preferences, it is often recommended to use relative measurements for font sizes.

31 Measurements Symbol Name Type Descrip1on px pixels absolute a single dot on a monitor pt points absolute 1/72 of an inch em ems rela9ve 1em = current font size % percent rela9ve rela9ve to current size vw viewport width rela9ve rela9ve to viewport vh viewport height rela9ve rela9ve to viewport IDM 221: Web Authoring I 31 When you use absolute units of measurement the measurement won't change even if the user changes the font size in the browser. Example: set the width of an element in pixels and the font size in points, the width and font size won't change. When you use pixels though, the size will change if the screen resolution changes. Screen resolution determines the number of pixels that are displayed on the monitor. Pixels on a monitor with a screen resolution of 1280 x 1024 are closer together than the pixels on a monitor with a screen resolution of 1152 x 864. That means a measurement of 10 pixels will be smaller on the screen with the higher resolution. A point is 1/72 of an inch no matter what the screen resolution is.

32 body { font-size: 100%; margin-left: 2em; margin-right: 2em; } header { padding-bottom:.75em; border-bottom: 3px solid black; margin-bottom: 0; } h1 { font-size: 200%; margin-bottom: 0; } IDM 221: Web Authoring I 32

33 Color IDM 221: Web Authoring I 33 There are a number of ways to specify color. We will look at the most common three.

34 Color Specs & Names CSS3 Color spec Color Names p { color: silver; } IDM 221: Web Authoring I 34 The easiest way is to specify a color name.

35 RGB Colors p { color: rgb(100%, 40%, 20%); color: rgb(255, 102, 51); } IDM 221: Web Authoring I 35 Another way to specify a color is to use an RGB value. One way to do that is to specify the percent of red, green and blue that make up the color. You can also use any values from 0 through 255 instead of percents (0 is equivalent to 0% and 255 is equivalent to 100%, this gives you more precision over the resulting colors).

36 Hexcodes p { color: #ffffff; /* white */ color: #000000; /* black */ color: #ff0000; /* red */ } IDM 221: Web Authoring I 36 The third way to specify a color is to use the hexadecimal values for red, green and blue. When you use this technique the value must be preceded by the pound sign (#).

37 Specifying color body { background-color: #ffffcc; /* light yellow */ color: black; } p { background-color: #ff0000; /* red */ /* `color` will be inherited as `black` */ } IDM 221: Web Authoring I 37 The color property determines the foreground color (the color of the text). The background-color property determines the background color. The color property for an element is inherited by any child elements. For example: if you set the color for the body to black, that color will be inherited by all of the elements in the body of the document. However, you can override an inherited property by coding a rule set with a different value for that property.

38 Accessibility guideline IDM 221: Web Authoring I 38 Remember the visually-impaired. Dark text on a light background is easier to read, and black type on a white background is easiest to read.

39 CSS3 rgba(red%, green%, blue%, opacity-value) hsl(hue-degrees, saturation%, lightness%) hsla(hue-degrees, saturation%, lightness%, opacity-value) IDM 221: Web Authoring I 39 To provide even more color options, CSS3 lets you code color specifications in three more ways. First, you can use RGBA values. This works like RGB values, but with a fourth parameter that provides an opacity value. Set the value to 0, the color is fully transparent, set the value to 1 and the color is fully opaque. The other two methods focus on hue, saturation and lightness.

40 Coding Selectors <main> <h1>main Heading</h1> <p class="blue">hello world!</p> <p class="blue">what's up?</p> </main> <footer> <p id="copyright" class="blue right"> 2016</p> </footer> IDM 221: Web Authoring I 40 Once you understand how to code selectors, you will be able to apply CSS formatting to any element in a web page.

41 <main> <h1>main Heading</h1> <p class="blue">hello world!</p> <p class="blue">what's up?</p> </main> <footer> <p id="copyright" class="blue right"> 2016</p> </footer> IDM 221: Web Authoring I 41 Let's take a look at our HTML again. Note the element with the id attribute.

42 /* One element by ID */ #copyright { font-size: 80%; } IDM 221: Web Authoring I 42 We can target that single element using an ID selector. Here we're applying a smaller font size to that one paragraph element.

43 <main> <h1>main Heading</h1> <p class="blue">hello world!</p> <p class="blue">what's up?</p> </main> <footer> <p id="copyright" class="blue right"> 2016</p> </footer> IDM 221: Web Authoring I 43 One more time let's review the HTML

44 .blue { color: blue; }.right { text-align: right; } IDM 221: Web Authoring I 44 The two rule sets in this group select HTML elements by class. To do that, the selector is a period (.) followed by the class name. As a result, the first rule set selects all elements that have been assigned to the "blue" class. The second rule set selects any elements that have been assigned to the "right" class. One of the key points here is that a class attribute can have the same value for more than one element on a page. If you code a selector for that class, it will be used to format all the elements in that class. Since the id for an element must be unique, an id selector can only be used to format a single element.

45 Rela%onal selectors IDM 221: Web Authoring I 45 As we discuss relational selectors, keep in mind that terms like parent, child, sibling, and descendent are used in the same way that they are in a family tree. Child elements are at the first level below a parent. Sibling elements are at the same level. Descendent elements can be one or more levels below a parent element.

46 <main> <h1>heading One</h1> <ul class="speakers"> <li>jan: <a href="#">david B.</a></li> <li>feb: <a href="#">robert F.</a></li> </ul> <h2>heading Two</h2> <p>welcome all speakers.</p> <p>a limited number of tickets remain.</p> </main> IDM 221: Web Authoring I 46 That means a descendant selector selects all the elements that are contained within another element. For instance, all of the elements in the HTML example are descendants of the main element. The li elements are also descendants of the ul element. The a elements are descendants of the li elements.

47 /* Descendant */ main li { font-size: 90%; } ul a { color: green; } IDM 221: Web Authoring I 47 To code a descendant selector, you code a selector for the parent element, followed by a space and a selector for the descendant element. The first selector selects all the li elements within the main element. The second selects all the a elements that are descendants of the ul element.

48 <main> <h1>heading One</h1> <ul class="speakers"> <li>jan: <a href="#">david B.</a></li> <li>feb: <a href="#">robert F.</a></li> </ul> <h2>heading Two</h2> <p>welcome all speakers.</p> <p>a limited number of tickets remain.</p> </main> IDM 221: Web Authoring I 48 The next example shows how to use an adjacent sibling selector to select an element that's coded at the same level as another element and is also coded right next to it. For instance, the h1, h2 and p elements in the HTML are all siblings, and the h1 and ul elements are adjacent siblings. In contrast, the h1 element and the p elements aren't adjacent siblings, but the h2 element and the first p element are adjacent siblings.

49 /* Adjacent sibling */ h2+p { margin-top:.5rem; } IDM 221: Web Authoring I 49 To code an adjacent sibling selector, you code a selector for the first element, followed by a plus sign and a selector for the sibling element. This example will select an p elements that are adjacent to h2 elements.

50 /* Child */ main>p { font-size: 80%; } li>a { color: green; } IDM 221: Web Authoring I 50 If you want to select elements only when they're child elements of a parent element, you can code a child selector. To do that, separate the parent and the child selector with a greater than sign (>). The first child selector selects the p elements that are children of the main element, and the second selector selects the a elements that are children of the li elements. NOTE: Think of what the words "child" and "descendant" mean. ^ - My daughter is both my child and my descendant ^ - My granddaughter is not my child, but she is my descendant

51 p ~ span { color: red; } <span>this is not red.</span> <p>here is a paragraph.</p> <code>here is some code.</code>  <span>and here is a span.</span> IDM 221: Web Authoring I 51 Unlike the adjacent sibling selector, a general sibling selector selects any sibling element whether or not the elements are adjacent. To code this type of selector, you separate the selector for the first element and the selector for the sibling element by a tilde (~). This example selects all the span elements that follow a p element. MDN

52 Combina(on selectors IDM 221: Web Authoring I 52

53 /* Selector for a class within an element */ ul.speakers { list-style-type: square; } IDM 221: Web Authoring I 53 To select an element type by class name, you code the element name, followed by a period and the class name. This example selects ul elements that have a class of "speakers".

54 /* Multiple selectors*/ h1, h2, h3 { color: blue; } p, ul.speakers li { font-family: "Times New Roman", serif; } IDM 221: Web Authoring I 54 You can also code multiple selectors for the same rule set. To do that, you separate the selectors with commas.

55 Pseudo-class / Pseudo-element Selectors IDM 221: Web Authoring I 55

56 Common CSS pseudo-classes pseudo-class name :link :visited :active :hover :focus Descrip1on A link that hasn't been visited. A link that has been visited. The ac3ve link (mouse bu8on down) An element with mouse hovering An element that has focus (forms) IDM 221: Web Authoring I 56 These classes represent conditions that apply to the elements on a page. You can use the :link pseudo-class to refer to a link that hasn't been visited, the :hover pseudo-class to refer to the element that has the mouse hovering over it.

57 Common CSS3 pseudo-classes pseudo-class name Descrip1on :first-child The first child of an element :last-child The last child of an element :only-child The only child of an element IDM 221: Web Authoring I 57 You can also use CSS3 pseudo-classes to refer to specific relationships.

58 Common CSS3 pseudo-elements pseudo-class name Descrip1on ::first-letter The first le*er of an element ::first-line The first line of an element IDM 221: Web Authoring I 58 You can use CSS3 pseudo-elements to select portions of text.

59 <main> <p>welcome to Town Hall.</p> <p>we have great speakers.</p> <ul> <li><a href="#">jeff T.</a></li> <li><a href="#">andrew S.</a></li> <li><a href="#">amy C.</a></li> </ul> </main> IDM 221: Web Authoring I 59

60 a:link { color: green; } a:hover, a:focus { color: pink; } main p:first-child { font-weight: bold; } main p:first-child::first-letter { font-size: 150%; } IDM 221: Web Authoring I 60

61 Exercise! h"p://digm.drexel.edu/crs/idm221/exercises/selectors IDM 221: Web Authoring I 61

62 Browser Default Styles IDM 221: Web Authoring I 62 A problem web developers face today when it comes to CSS is that the five modern browsers render some elements of a web page differently. Let's look at some examples.

63 IDM 221: Web Authoring I 63

64 IDM 221: Web Authoring I 64

65 IDM 221: Web Authoring I 65

66 Normalize.css IDM 221: Web Authoring I 66 To standardize how elements like this are displayed, you can use the normalize.css style sheet. This can save you a lot of time dealing with small rendering issues near the end of a project. The normalize style sheet also sets the margins for the body of the document to zero. That means there's no space between the body and the edge of the browser window. This is important because different browsers provide different margins for the body. It also defaults the font family to sansserif, which we'll learn more about later. For reasons like these, many web developers use the normalize style sheet for all their projects.

67 How to github.com/normalize IDM 221: Web Authoring I 67 Save a copy of the normalize.css file to your website and then code a link to the file in the head of each html page. Note: this link should be before the link to your personal style sheet(s).

68 Example Time IDM 221: Web Authoring I 68

69 IDM 221: Web Authoring I 69

70 IDM 221: Web Authoring I 70

71 IDM 221: Web Authoring I 71

72 IDM 221: Web Authoring I 72

73 IDM 221: Web Authoring I 73

74 IDM 221: Web Authoring I 74

75 IDM 221: Web Authoring I 75

76 Let's Build It IDM 221: Web Authoring I 76

77 Developer Tools IDM 221: Web Authoring I 77 If you have problems with style sheets while you're building a web page, you can use the developer tools for your browser to find out what's happening. (demo Chrome dev tools)

78 CSS Valida)on Service IDM 221: Web Authoring I 78

79 For Next Week... IDM 221: Web Authoring I 79

CSS. https://developer.mozilla.org/en-us/docs/web/css

CSS. https://developer.mozilla.org/en-us/docs/web/css CSS https://developer.mozilla.org/en-us/docs/web/css http://www.w3schools.com/css/default.asp Cascading Style Sheets Specifying visual style and layout for an HTML document HTML elements inherit CSS properties