CSS exercise - Part 1

Size: px

Start display at page:

Download "CSS exercise - Part 1"

Lucas Dennis
5 years ago
Views:

ITIY3 Introduction to Web Publishing 1 CSS exercise - Part 1 Adding text styles to an HTML document To start the exercise open the exercise file in the editor (Notepad++ or other).

Styles may be added within a style element in the head part or via an external CSS file linked to the document. Let us choose the latter. Create a new file in the editor -> File / New.

1 ITIY3 Introduction to Web Publishing 1 CSS exercise - Part 1 Adding text styles to an HTML document To start the exercise open the exercise file in the editor (Notepad++ or other). Inspect the element structure of the document. It is a simple file with simple markup. Open the HTML file in the web browser (Npp -> Run / Launch in Chrome). Styles may be added within a style element in the head part or via an external CSS file linked to the document. Let us choose the latter. Create a new file in the editor -> File / New. There is a new tab created for the file in Notepad++. Save the file with the format ending.css (write it yourself at the end of the filename), e.g. -> ex-style.css Since this CSS file will be used for adding the styles to the document, you must link it to your HTML document. Switch back to the tab containing the HTML file and add the following link element after the page title in the head part. <link rel="stylesheet" href="ex-styles.css"> Save the HTML file and switch back to the style sheet in the other tab. <head> <meta charset="utf-8"> <title>page Title</title> <link rel="stylesheet" href="ex-styles.css"> </head> When you define styles for your document, it is simpler to start with simple rules that affect general layout. Since we are defining text styles here, they inherit from parent elements to child elements. Start with generic styles that you wish to use for most elements in the document, so start with an element low in the element hierarchy e.g. the body, which contains all visible content for the page. Styles for the body element font-family and font-size: body { font-family: Helvetica, Arial, sans-serif; /* very basic sans-serif font-stack */ font-size:.875em; /* 14/16=0.875 yields 14px of font size*/ The relative font size yields 14px size if the browser default 16px is unchanged, relative sizes allow the user to scale fonts easily in the browser settings if needed. Save the CSS file and check the opened HTML file in the web browser that the font changes are applied to the document. The changes to styles take effect for the document after you reload the page in the browser. ->

ITIY3 Introduction to Web Publishing 2 All elements of the document should use the added text styles. Set up next some element specific rules.

dark blue */ Both h1 and h2 headings have the same font styling. Their sizes could be subtly different from the default: h1 { font-size: 1.

4em; /* Resetting heading size with relative unit that scales if needed */ Change the paragraph next, changing the line height gives the text a lighter look, which makes it easier to read the text.

2 ITIY3 Introduction to Web Publishing 2 All elements of the document should use the added text styles. Set up next some element specific rules. Font-family and font-size for the headings of the document (2 levels): h1,h2 { font-family: "Trebuchet MS", Verdana, sans-serif; /* a bit different font-stack for the headings */ color: #044488; /* dark blue */ Both h1 and h2 headings have the same font styling. Their sizes could be subtly different from the default: h1 { font-size: 1.6em; /* Resetting heading size with relative unit that scales if needed */ h2 { font-size: 1.4em; /* Resetting heading size with relative unit that scales if needed */ Change the paragraph next, changing the line height gives the text a lighter look, which makes it easier to read the text. Scale the line-height property 30% larger than the default (1) with the scaling factor value 1.3 (a subtle change, just visible, add more if you wish to): p { line-height: 1.3; /* increasing line height +30% to lighten text -> 1.3 x the default */ Creating more specific rules Let us further enhance the document styles at more specific levels. Next, change the list layout (text color and bullet type). The styles for the ul element, are inherited to text in the li elements in the unordered list, but not in the other list (ol, an ordered list) at the bottom of the page. ul { list-style-type: square; /* bullet type disc (default) to square */ color: rgb(202, 0, 157);

ITIY3 Introduction to Web Publishing 3 At the middle of the page (line 25 in the HTML code) there is a group of elements defined with a generic div element.

Cras dapibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> </div> Adding text styles to the div element would inherit to its children.

3 ITIY3 Introduction to Web Publishing 3 At the middle of the page (line 25 in the HTML code) there is a group of elements defined with a generic div element. <div> <h2>h2 subheading</h2> <p>a group of elements</p> <p>integer tincidunt. <a href="#dummy">this is a hyperlink</a> in the text. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Cras dapibus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</p> </div> Adding text styles to the div element would inherit to its children. div { /* parent of a group of elements - middle of the page */ font-family: Georgia, Times, "Times New Roman", serif; /* a more different font for the group */ font-size: 1.1em; /* scaling text size 10% larger */ Despite the new font-family, the font of the h2 element does not change, only the text in the paragraphs. The reason for that is we have already changed the font for the h2. The previously defined h2 selector overrules the style inherited from the div element. The h2 in this element group is a child of the div and therefore at a higher hierarchical level, hence any selector selecting the h2 have more weight. Hence the font-family and font-size properties inherited from the parent div element are overruled. Check the Developer tools styles tab to see the specificity of the rules (CTRL + SHFT + I). See below the screenshot:

ITIY3 Introduction to Web Publishing 4 To set the font-family to match

a new class or a simpler solution with a descendant selector (no changes

4 ITIY3 Introduction to Web Publishing 4 To set the font-family to match the paragraph, we can add a stronger rule. This could be e.g. a new class or a simpler solution with a descendant selector (no changes needed to the HTML document, class needs the class attribute to be added to the element). div h2 { /* overrides font definition set for the h2 element if it is descendant of a div */ font-family: Georgia, Times, "Times New Roman", serif;

A class selector is more usable if the purpose is to reuse the same styles in different context and for different elements.

5 ITIY3 Introduction to Web Publishing 5 The descendant selector is however a less specific option than a class selector. The same context (parent/child) may be present elsewhere and perhaps some other style is required. A class selector is more usable if the purpose is to reuse the same styles in different context and for different elements. We could change some of the layout of some of the paragraphs that follow headings, but not for all paragraphs in the document. A class selector would be appropriate choice, element type selector fo the p element selects all paragraphs:.after-heading { font-weight: bold; color: #044488; Add the class attribute with the chosen value (selector name) to the HTML document, to the first paragraph after the first heading. <p class="after-heading">example document</p> The other paragraph is the first one within the div element. Of course, the class could be added any other element, not just p. <p class="after-heading">a group of elements</p> Create another class for a rule that will add an indent to selected elements:.indent-2 { text-indent: 2em; Add the class as above to a number of p elements, e.g. the first p element after the first h2 heading and the last 2 paragraphs after the last h1 heading. <p class="indent-2">lorem ipsum dolor </p>

ITIY3 Introduction to Web Publishing 6 Of course, other elements can be targeted and other classes with different styles can be created if needed.

If there are already styles added with, e.g. class selectors, to add a heavier weight the new rule could be defined as a unique element with the id attribute.

6 ITIY3 Introduction to Web Publishing 6 Of course, other elements can be targeted and other classes with different styles can be created if needed. For the sake of the exercise, change the h1 element at the top of the page. To select just one element you could use a class, a class can be added once too. If there are already styles added with, e.g. class selectors, to add a heavier weight the new rule could be defined as a unique element with the id attribute. The headings may already have a unique id if these are targeted with hyperlinks for in-document navigation. Add an id selector: #top { font-size: 2em; Also add the id attribute to the first h1 heading: <h1 id="top">h1 Heading text</h1>

Hyperlink styles: Adding link styles should be a carefully considered addition to document styles.

7 ITIY3 Introduction to Web Publishing 7 The font-size is hence redefined from the previous style added to all h1 elements (1.6em value is ignored). 2em here is 28px -> 2x the size of the inherited body text size, the h1 selector has less weight and thus overruled. Hyperlink styles: Adding link styles should be a carefully considered addition to document styles. For allowing fluent interaction with the hypertext structure of a web site, users should always detect hyperlinks with ease and get feedback on interactive actions. The default settings follow a certainly straightforward approach though designers often choose to alter this. The default underline is a good indicator and it is often a good choice to preserve it regardless of other alterations. You can also set some basic features for all links (the anchor element as selector) and define specific changes to link states (additional pseudo selectors). The exercise has a few links in different contexts. Differentiate links from the other paragraph content and the links in the lists -> descendant selector. p a { font-weight: bold; /* all links within paragraphs are set bold */

8 ITIY3 Introduction to Web Publishing 8 Other link settings for the different pseudo states could be also defined at a general level (used by all or most states) and additional element and state specific settings can be added. Here is an example that effect all a elements and all 4 pseudo states. There is a separate visited state for the a elements in ul elements a:link { color: #044488; a:visited { color: rgb(202, 0, 157); /* light purple as in the list items */ The visited state is actually the same color as the text was in the first list. To make the visited state stand out better in the ul list add a context specific additional rule: ul a:visited { color: rgb(0, 124, 255) /* switching visited color to differentiate link color from text color in the ul list */ The rest of the states: a:hover { text-decoration: none; /* underlining turned off for the hover state */ a:active { color: blue; text-decoration: underline; /* underlining turned on again for the active state */ Check the document styles and the final results from the example files in the folder.

Using Dreamweaver CS6

Using Dreamweaver CS6 6 So far we have used CSS to arrange the elements on our web page. We have also used CSS for some limited formatting. In this section we will take full advantage of using CSS to format our web site. Just