CMPT 165: More CSS Basics

Size: px

Start display at page:

Download "CMPT 165: More CSS Basics"

Earl Stone
5 years ago
Views:

1 CMPT 165: More CSS Basics Tamara Smyth, School of Computing Science, Simon Fraser University October 14,

2 The Favorites Icon The favorites icon (favicon) is the small icon you see in the address bar or tab of the browser. it is a square image (16X16 pixels) or (32X32 pixels) associated with a web page. See and to generate your icon. To configure a favicon, use the <link> element in the <head> section to link icon to a webpage. <link rel="icon" href="favicon.ico" type="image/x-icon"> Notice, the file name should have.ico extension. To be compatible with Internet Explorer, you ll need to code a second link: <link rel= shortcut icon href= favicon.ico type= image/x-icon > CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 2

3 Configuring List Items Use the list-style-type property to configure the marker for both unordered and ordered lists. Default list-style-type for <ul> is disc and for <ol> is decimal. Some other common property values include: none, disc, circle, square, decimal, upper-alpha, lower-alpha, lower-roman, upper-roman. Example: to get rid of the bullets altogether, change the list-style-type property to none: ol { list-style-type: none; } You may also specify an image as the list-item marker in a list: ul { list-style-image: url(spiderweb.png); } You can change the spacing between bullet points by styling the <li>...</li> tags. li { margin-bottom: 10px; } CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 3

Fonts: sans-serif In typography, a sans-serif typeface is one that does not have the small projecting features called serifs at the end of strokes ( sans is French for without ).

4 Fonts: sans-serif In typography, a sans-serif typeface is one that does not have the small projecting features called serifs at the end of strokes ( sans is French for without ). Figure 1: Conventional wisdom holds that serifs help guide the eye along the lines in large blocks of text. Sans-serifs have become the de facto standard for on-screen body text especially online, because low resolutions can make serifs disappear (or appear too large). CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 4

5 CSS: Fonts You can change the font and size of the text using the properties:font-family and font-size. For example: h1 { font-family: sans-serif; font-size: 125%; } p {font-family: Arial;} To view a particular font, it must be installed on your computer or a default will be displayed. It is therefore common practice to provide a list of fonts, specifying the fonts to try, and the order in which they should be tried. p {font-family: Arial, Helvetica, sans-serif;} Some common lists used by professional designers include: Times New Roman, Times, serif Courier New, Courier, monospace Tahoma, Lucida Grande, Arial, sans-serif Marker Felt, Comic Sans MS, fantasy CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 5

6 CSS: Font Color We have seen we can set the color of a font is done using the color property. The following four rules all do the same thing: p {color: red;} p {color: rgb(255, 0, 0);} p {color: rgb(100%, 0%, 0%);} p {color: #FF0000;} Q: Create a rule to invert the current color for instance, making the text white and the background green to strongly emphasize a paragraph. p.inverted {color: white; background-color: green;} The corresponding HTML would be: <p class="inverted">we cannot continue to flush <em>entire watermelons</em> down the toilet every day! There are starving kids in Ohio we could be ing them to.</p> CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 6

7 CSS: Font Size Font size is specified using the font-size property. p {font-size: 15pt;} There are many different ways of specifying size in CSS. pt is short for point, which is a standard measurement for fonts in traditional print media (i.e. books, newspapers, magazines). book text is typically has a size of 11pt or 12pt. points are less practical for web pages because they specify a fixed size, and may not look right on very small/large windows Keywords: xx-small, x-small, small, medium, large, x-large, xx-large. The default browser font is medium, and each of the other choices increases or decreases the font size by a factor of 1.2. Percentages: specify as a percent of the current font size. On an unstyled page, the default browser font has size 100%. CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 7

8 to make the font twice the size of what it would normally be: h2 {font-size: 200%;} em works the same as percentage to set the the <h2> font to be twice the size of its default: h2 {font-size: 2em;} the em unit name comes from traditional paper-based typography, where an em is defined to be the width of a capital M. this is not the meaning of an em in CSS, which uses it as an alternative to the percentage notation. px is the pixel unit. For example, if your font is set to be 36px high, it will take up 36 pixels on the web browser. CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 8

9 CSS: Italics and Bold To make text italicized or boldface, use the font-style and font-weight properties. For example, use the following rule to make an <h1> tag italic: h1 {font-style: italic;} Or, if you want to remove italics from the <em> tag, you can do this: em {font-style: normal;} For bolding and unbolding, you can use the rule em {font-weight: bold;} strong {font-weight: normal;} /* non-bold */ Notice the use of the CSS comment in /* this is a comment */. CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 9

10 Capitalization, All-caps, and Other Font Decorations Characters can be uppercase, lowercase, or small caps. You have some control of uppercase and lowercase using the text-transform property. Make all characters in <h1> tags uppercase: h1 {text-transform: uppercase;} Other property values are: lowercase and capitalize (a word s first character is uppercase, and the remaining characters are lowercase). If you don t want case to be changed, the use the none value: h1 {text-transform: none;} This is useful in cases where the text-transform property is inherited (more on this later) with a case-changing value that you don t want. If you want small-caps, use the font-variant property: h1, h2, h3 {font-variant: small-caps;} CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 10

11 Space Between Letters, Words, Lines, and Paragraphs Use letter-spacing and word-spacing properties to control space between letters and words, respectively. p {letter-spacing: 5px; word-spacing: 10px; } To change the space between lines, use the line-height property: p {line-height: 150%;} Note that a negative spacing decreases the space between elements: p {letter-spacing: -1px;} Finally, use the margin-top and margin-bottom properties to control the spacing between paragraphs: p { margin-top: 0; margin-bottom: 10px; } CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 11

12 Align and Indent The text-align property is used for aligning text: p {text-align: justify;} It s values are left, right, center, and justify (which produces lines of equal width like a newspaper). Caution: while centering headers can be effective, centering text in a paragraph can make it more difficult to read than text that is left-aligned. To indent the first line of a paragraph, use text-indent: p {text-indent: 7px;} CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 12

13 Width and Height The width property configures the width of an element s content. Example: body { width: 80%; } The displayed width includes the width of the element s content, padding, border, and margin. The min-width property sets the minimum width of an element s content in the browser viewport (space within the browser window) with a numeric value, or a percentage of the parent element. Scrollbars appear if the browser viewport is resized below the minimum width. The max-width property set the maximum width oa an element s content. The maximum widht value can reduce the possibility of having very long text across of the screen (of high resolution monitors). The height property configures the height of an element s content. CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 13

14 The Box Model Each element in a document is considered to be a rectangular box. At the center of the box is the content, then the padding, then the border, and then the margin. The content is the text/images and elements such as paragraphs, headings, lists, etc. The default padding is zero. When the background of an element is configured, the rule is applied to both content and padding. The default border is 0 (and does not display). CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 14

15 Margin and Padding The margin determines the spacing between adjacent elements. It is transparent and thus takes on the background configuration of the container element (such as <div> or <body>). We have already seen the margin-bottom property. We can also configure margin-top, margin-left and margin-right. Use the auto value to indicate that the browser should calculate the margin. Use the padding property to configure empty space between the content and the border. In addition, there is padding-bottom, padding-left, padding-right and padding-top. CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 15

16 Borders It is possible to configure the border around an element (which by default has a width set to 0) by using the border property. The short-hand notation for creating a border is to use the border property, followed by values for border-width, border-style, and border-color. To style strong text so that it appears in gold boxes: strong { border: 2px dotted #D4A017; } You can also stylize parts of the border using the following properties (as you would the border property: border-bottom, border-top, border-left, and border-right. Notice the lack of space between the left and right sides of the box. How can we add space? strong { border: 2px dotted #D4A017; padding-left: 5px; padding-right: 5px; } CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 16

17 You can create a border class as follows:.dashedborder { border-width: 3px; border-style: dashed; border-color: #D4A017; } CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 17

18 Some special features of CSS3 The following can be used if your browser supports CSS3. Create rounded corners on your boxes by using the border-radius property. Example: border-radius: 15 px; You can also create shadows on boxes using the box-shadow property which takes 4 values: 1. Numeric pixel value for the shadow s horizontal offset (positive values create a shadow on the right, negative values on the left) 2. Numeric pixel value for the shadow s vertical offset (positive values create a shadow below, negative values above) 3. Numeric pixel value for the blur radius (higher values configure more blus, 0 configures a sharp shadow). 4. valid color value You can create shadows on text with the text-shadow property, supplying 4 values as above. CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 18

19 The opacity property configures the transparency of the background color, with values going from 0 (completely transparent) to 1 (complete opaque). CSS3 supports new syntax for the color property that includes transparency, alpha. It is called RGBA. Hexadecimal colour values are not used. The R-G-B values are specified using a decimal between 0 and 255, and the alpha value is between 0 (transparent) and 1 (opaque). CSS3 provides a method to configure color as a gradient a smooth blending of shades from one color to another. This one is REALLY new and is currently unsupported by my browser! background-image: linear-gradient(#505090, #E2E2EF); Instead, for firefox, I can use the following proprietary property: background-image: -moz-linear-gradient(bottom, #505090, #E2E2EF); CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 19

20 Center the Page Content To center the entire content of a web page within the browser viewport, configure a div element that contains or wraps the entire page: <body> <div id="wrapper">...page content... </div> </body> Next, configure CSS style rules for the container: #wrapper { width: 700px; margin-left: auto; margin-right: auto; } This tells the browser to automatically divide the amount of space available between the left and right margin. You can use the shorthand notation margin: auto; to set all the margins to auto. CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 20

21 Normal Flow When browsers render code line by line in the order it appears in the.html file, this is call normal flow. Example: two elements one after another, or a nested element, is normal flow. Normal flow is the type of processing we ve seen so far. Later we ll see CSS positioning and flow to configure the flow, or placement, of elements on a web page. CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 21

22 Relative Positioning Instead of having the browser postion elements in the order in which they appear in the.html, you may want more control over the position of an element. Relative positioning is used to change the position of an element slightly, relative to where it would otherwise appear with normal flow. Configure relative positioning with the rule position: relative; along with one or more of the offset properties: left, right, top, bottom. #content { position: relative; left: 30px; } And the HTML code: <h1> Relative Positioning </h1> <div id="content"> <p>this paragraph uses relative positioning to be placed 30 pxs in from the left side. </p> </div> CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 22

23 Absolute Positioning Use Absolute positioning to specify the location of an element outside of noraml flow in its container element. #content { position: absolute; left: 200px; top: 100px; width: 300px; } The HTML: <h1> Absolute Positioning </h1> <div id="content"> <p> This paragraph is contained in a div configure to be 300 pixels wide and uses CSS absoluted positioning to be placed 200 pixels in from the left and 100 piexels down from the top of the browser window. </p> </div> CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 23

24 Float Use the float property to float the element to the right or left of a container (e.g. the browser viewport or the div element). float: right; float: left; Only block-level elements (divs, paragraphs, and images) can be configured to float. Use the clear property to clear a float. This is commonly done using a line break element <br>: <br class="clearleft"> To clear the left float, use the following CSS:.clearleft { clear: left; } The overflow property is often used to clear a float. It s real purpose however, is to configure how content should display if it is too large for the area allocated. Values for overflow: visible, hidden, auto, scroll. CMPT 165: Introduction to the Internet and the WWW: More CSS Basics 24

Adding CSS to your HTML

Adding CSS to your HTML Lecture 3 CGS 3066 Fall 2016 September 27, 2016 Making your document pretty CSS is used to add presentation to the HTML document. We have seen 3 ways of adding CSS. In this lecture,