Chapter 4 CSS basics

Size: px

Start display at page:

Download "Chapter 4 CSS basics"

Judith Stephens
5 years ago
Views:

1 Sungkyunkwan University Chapter 4 CSS basics Prepared by J. Lee and H. Choo Web Programming Copyright Networking Laboratory 1/48 Copyright Networking Laboratory

2 Chapter 4 Outline 4.1 Introduction 4.2 CSS Insertion 4.3 CSS Selectors 4.4 Font Style 4.5 Text Style Web Programming Networking Laboratory 2/48

3 4.1 Introduction We will give the following three practice problems about CSS basics Exercise 1: Selectors Create the HTML document using various selectors Exercise 2: Internal Style Sheet Create the coffee shop website (internal.html) that meets requirements Exercise 3: External Style Sheet Change the coffee shop website (internal.html) to the html document (external.html) using an external style sheet (external.css) Web Programming Networking Laboratory 3/48

4 4.1 Introduction What is CSS? CSS: Cascading Style Sheets Describes the appearance and layout of a web page Composed of CSS rules, which define sets of styles If you do not have CSS, you have a very plain web page After deleting the style of document Web Programming Networking Laboratory 4/48

5 4.2 CSS Insertion We can add CSS code in any combination of three different ways Inline Style Sheet Internal Style Sheet External Style Sheet Web Programming Networking Laboratory 5/48

6 4.2 CSS Insertion Inline Style Sheet An inline style sheet is a style for each HTML element If there are two or more declarations, be sure to write; at the end ex1.html <!DOCTYPE html> <html> <head> </head> <body> <h1>this is a headline.</h1> <p style="color: blue">this is fist paragraph.</p> <p>this is second paragraph.</p> </body> </html> attribute property Web Programming Networking Laboratory 6/48

7 4.2 CSS Insertion Internal Style Sheet An internal style sheet defines CSS in HTML CSS is in <style> </style> inside a <head> element of the html ex1.html <!DOCTYPE html> <html> <head> <style> p {color: blue;} </style> </head> <body> <h1>this is a headline.</h1> <p style="color: blue"> This is fist paragraph.</p> <p> This is second paragraph.</p> </body> </html> Web Programming Networking Laboratory 7/48

4.2 CSS Insertion Inline Style Sheet & Internal Style Sheet Go to the link https://envoy.com/ index.html <!DOCTYPE html> <html> <head> <style>.hide { display: none; }.

8 4.2 CSS Insertion Inline Style Sheet & Internal Style Sheet Go to the link index.html <!DOCTYPE html> <html> <head> <style>.hide { display: none; }.input-bfs { max-width: 665px; width: 100%; } </style> </head> <body class= flex flex-column mx-auto style= min-height: 100vh; max-width: 1440px; box-shadow: px #e9e9ea; > </body> </html> Web Programming Networking Laboratory 8/48

9 4.2 CSS Insertion External Style Sheet (1/3) The style definitions are normally saved in external.css files ex1.html We create a new file (.css) and write our style declarations into this file We add a <link> element into HTML file, after the opening <head> tag <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> </body> </html> mystyle.css p {color: blue;} Web Programming Networking Laboratory 9/48

10 4.2 CSS Insertion External Style Sheet (2/3) Go to the link index.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href=" /> envoy.css.btn-primary { color: #FFFFFF; background-color: #EF3934; // border-radius: 6px; box-shadow: px 0 rgba(239, 57, 52, 0.2); } Web Programming Networking Laboratory 10/48

11 4.2 CSS Insertion External Style Sheet (3/3) The real power of using an external style sheet is that multiple web pages on our site can link to the same style sheet By editing the external style sheet, we can make site-wide changes (even to hundreds of pages) instantly Changing an external style sheet affects all HTML documents Web Programming Networking Laboratory 11/48

12 4.2 CSS Insertion Multi Style Sheet Which styles will be used if the external, internal, and inline styles are different for one element? All style sheets are merged into one virtual style by the following rules: High priority 1 Web browser default value 2 External style sheet 3 Internal style sheet stored in head section 4 Inline style sheet It is convenient to define commonly used styles in the style of the <body> Web Programming Networking Laboratory 12/48

13 4.3 CSS Selectors CSS Syntax (1/2) A CSS syntax is made up of three parts: selector : specifies the HTML element you want to style property: the name of the CSS style value: the value for the CSS style Saved in a filename.css file Web Programming Networking Laboratory 13/48

14 4.3 CSS Selectors CSS Syntax (2/2) Web Programming Networking Laboratory 14/48

15 4.3 CSS Selectors CSS selectors are used to "find" (or select) HTML elements There are about 6 things that are used the most Type selector Universal selector Pseudo-class Attribute selector ID selector Class selector Web Programming Networking Laboratory 15/48

4.3 CSS Selectors Type Selector Type Selector selects elements based on the HTML element name mystyle.css h1{color: blue;} ex2.html Select all h1 elements <!

16 4.3 CSS Selectors Type Selector Type Selector selects elements based on the HTML element name mystyle.css h1{color: blue;} ex2.html Select all h1 elements <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>this is a headline.</h1> <p>this is fist paragraph.</p> <p>this is second paragraph.</p> </body> </html> Web Programming Networking Laboratory 16/48

17 4.3 CSS Selectors Universal Selector Universal selector selects all elements in the page mystyle.css *{color: blue;} ex2.html Select all elements <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>this is a headline.</h1> <p>this is fist paragraph.</p> <p>this is second paragraph.</p> </body> </html> Web Programming Networking Laboratory 17/48

18 4.3 CSS Selectors Pseudo-element The pseudo-element is used to style specified parts of an element ::first-line : add a special style to the first line of a text ::first-letter : add a special style to the first letter of a text mystyle.css selector::pseudo-element{ property: value; } h1::first-line{color: green;} p::first-letter{color: blue;} Web Programming Networking Laboratory 18/48

4.3 CSS Selectors Pseudo-class The pseudo-class will only define a particular state of that selector :link : apply to link before it s visited :visited : apply to link after it s visited :hover :

19 4.3 CSS Selectors Pseudo-class The pseudo-class will only define a particular state of that selector :link : apply to link before it s visited :visited : apply to link after it s visited :hover : apply to link while mouse pointer is over it :active : apply while left mouse button is held down on link mystyle.css selector:pseudo-calss{ property: value; } h1:hover{color: green;} p::first-letter{color: blue;} Web Programming Networking Laboratory 19/48

20 Sample web page (1/2) Go to the link Web Programming Networking Laboratory 20/48

21 Sample web page (2/2) style.css index.html Web Programming Networking Laboratory 21/48

22 4.3 CSS Selectors Attribute Selector (1/2) The attribute selector selects an element with a specific attribute mystyle.css [type]{color: blue;} ex2.html Select element with a specified attribute <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1>this is a headline.</h1> <p>this is fist paragraph.</p> <p>this is second paragraph.</p> <input type="date" name="date"> </body> </html> Web Programming Networking Laboratory 22/48

23 4.3 CSS Selectors Attribute Selector (2/2) The attribute selector selects an element with a specific attribute [attr = val]: element with a specified attribute and value [attr = val]: element with a specified attribute starting with the specified value [attr ~ = val]: element with an attribute value containing a specified word [attr ^ = val]: element whose attribute value begins with a specified value (The value does not have to be a whole word) [attr $ = val]: element whose attribute value ends with a specified value [attr * = val]: element whose attribute value contains a specified value Web Programming Networking Laboratory 23/48

24 4.3 CSS Selectors ID Selector ID selector uses the id attribute to select a specific HTML element mystyle.css #basic{color: blue;} ex3.html Select the element whose id is basic <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> Specify the id of the <h1> element as basic" <body> <h1 id="basic">css Basics</h1> <h2>css Insertions</h2> <h3>css Selectors</h3> </body> </html> Web Programming Networking Laboratory 24/48

4.3 CSS Selectors Class Selector Class selector selects elements with a specific class attribute mystyle.css.basic{color: blue;} ex3.html Select the element whose class is basic <!

25 4.3 CSS Selectors Class Selector Class selector selects elements with a specific class attribute mystyle.css.basic{color: blue;} ex3.html Select the element whose class is basic <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> Specify the class of the <h1>, <h2> element as basic" <body> <h1 class="basic">css Basics</h1> <h2 class="basic">css Insertions</h2> <h3>css Selectors</h3> </body> </html> Web Programming Networking Laboratory 25/48

26 4.3 CSS Selectors Descendant Selector These combine selectors to select specific elements selector1 selector2 : descendant relationship mystyle.css div p{color: blue;} ex4.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <div><p>descendant relationship</p> <span><p>child relationship</p></span> </div> </body> </html> Web Programming Networking Laboratory 26/48

4.3 CSS Selectors Child Selector These combine selectors to select specific elements selector1 > selector2 : child relationship mystyle.css div > p{color: blue;} ex4.html <!

27 4.3 CSS Selectors Child Selector These combine selectors to select specific elements selector1 > selector2 : child relationship mystyle.css div > p{color: blue;} ex4.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <div><p>descendant relationship</p> <span><p>child relationship</p></span> </div> </body> </html> Web Programming Networking Laboratory 27/48

4.3 CSS Selectors Adjacent Sibling Selector These combine selectors to select specific elements selector1 + selector2 : adjacent sibling relationship mystyle.css div + p{color: blue;} ex4.html <!

28 4.3 CSS Selectors Adjacent Sibling Selector These combine selectors to select specific elements selector1 + selector2 : adjacent sibling relationship mystyle.css div + p{color: blue;} ex4.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <div><p>descendant relationship</p> <span><p>child relationship</p></span> </div> <p>adjacent sibling relationship</p> </body> </html> Web Programming Networking Laboratory 28/48

4.3 CSS Selectors General Sibling Selector These combine selectors to select specific elements selector1 ~ selector2 : general sibling relationship mystyle.css div ~ p{color: blue;} ex4.html <!

29 4.3 CSS Selectors General Sibling Selector These combine selectors to select specific elements selector1 ~ selector2 : general sibling relationship mystyle.css div ~ p{color: blue;} ex4.html <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <div><p>descendant relationship</p> <span><p>child relationship</p></span> </div> <p>adjacent sibling relationship</p> <p>general sibling relationship</p> </body> </html> Web Programming Networking Laboratory 29/48

30 4.3 CSS Selectors Selector Group To group selectors, the selectors are separated by a comma This is called the selector group h1, h2, h3 { font-family: sans-serif; } Select the <h1>, <h2>, and <h3> elements Web Programming Networking Laboratory 30/48

31 4.4 Font Style The font property allows to specify the font type, color, size, etc font-size font-family font-style : font size setting : font family setting\ : font style setting font-weight : bold setting CSS usage on the web platform Web Programming Networking Laboratory 31/48

32 4.4 Font Style Font Size (1/2) The units of font that can be set are as follows: Absolute lengths pt - points px - pixels Relative lengths em - relative to the font-size of the element (scale factor) rem - relative to font-size of the root element (scale factor) Percent Absolute size keyword xx-small, x-small, small, medium (initial value), large, x-large, xx-large Relative size keyword smaller, larger This website enables you to easily convert pixels to ems: Web Programming Networking Laboratory 32/48

33 4.4 Font Style Font Size (2/2) The em and rem units are practical in creating perfectly scalable layout! <!DOCTYPE html> <html> <head> <style> #px{font-size:16px;} #rem{font-size:1em;} </style> </head> <body> <div id="px">px</div> <div id="rem">rem</div> </body> </html> Web Programming Networking Laboratory 33/48

34 4.4 Font Style Font Family (1/2) We can specify multiple fonts from highest to lowest priority If the first font is not found on the user's computer, the next is tried Generic font names: Most Favorite p { font-family: Garamond, "Times New Roman", serif;} sans-serif, serif, monospace Least Favorite Web Programming Networking Laboratory 34/48

4.4 Font Style Font Family (2/2) Go to the link http://www.hollys.co.kr/ common.

35 4.4 Font Style Font Family (2/2) Go to the link common.css body{ font-family: 나눔고딕, NanumGothic, ng, 돋움, arial, helvetica, sans-serif!important; font-size:12px; line-height:19px; color:#6f6f6f;} Web Programming Networking Laboratory 35/48

4.4 Font Style Web Font Web font is a technique for storing fonts on a web server and then transferring them directly to a user's web browser when needed Go to the link https://fonts.google.com/ <!

36 4.4 Font Style Web Font Web font is a technique for storing fonts on a web server and then transferring them directly to a user's web browser when needed Go to the link <!DOCTYPE html> <html> <head> <link href=" rel="stylesheet"> </head> <body> <p style="font-family: 'Notable', sans-serif"> This is web font.</p> </body> </html> Web Programming Networking Laboratory 36/48

37 4.4 Font Style Font Style and Font Weight The font-style determines whether the font should be italicized text, and can be set to one of normal, italic, or oblique The font-weight determines whether the font is bold and can be set to bold or normal Web Programming Networking Laboratory 37/48

38 4.4 Font Style Font Shorthand The font shorthand technique can set various attributes of a font in one line {font: italic bold 12pt Helvetica,sans-serif} {font-style: italic; font-variant: normal; font-weight: bold; Initial values used if no value specified in font font-size: 12pt; property list (that is, potentially reset) line-height: normal; font-family: Helvetica,sans-serif} Web Programming Networking Laboratory 38/48

39 4.5 Text Style There are over 500 CSS properties! Here are a few: color direction letter-spacing line-height text-align text-decoration text-indent text-shadow text-transform : color setting : writing direction setting (Horizontal, Vertical) : spacing between text setting : height of the text line setting : horizontal alignment setting : decoration setting : indent setting : shadow effect setting : case conversion setting Web Programming Networking Laboratory 39/48

4.5 Text Style Color (1/2) Generally prefer more descriptive over less: Color name W3C has listed 16 color names that will validate https://www.w3schools.com/colors/colors_names.asp <!

40 4.5 Text Style Color (1/2) Generally prefer more descriptive over less: Color name W3C has listed 16 color names that will validate <!DOCTYPE html> <html> <head> </head> <body> <h1 style="color:tomato">tomato</h1> <h1 style="color:powderblue">powderblue</h1> <h1 style="color:mediumpurple">mediumpurple </h1> </body> </html> Web Programming Networking Laboratory 40/48

4.5 Text Style Color (2/2) RGB A percent or an integer between 0-255 Hexadecimal code Red, Green, and Blue - each from 00 - FF #eeddff =

41 4.5 Text Style Color (2/2) RGB A percent or an integer between Hexadecimal code Red, Green, and Blue - each from 00 - FF #eeddff = #edf color: rgb(60%, 40%, 10%); color: rgb(153, 102, 25); color: #ff0000; (= #f00) red green blue Web Programming Networking Laboratory 41/48

4.5 Text Style Text Alignment The text-align can be left, center, right, or justify Go to the link http://monet.skku.edu/~mc2017/ style.css.header ul.

42 4.5 Text Style Text Alignment The text-align can be left, center, right, or justify Go to the link style.css.header ul.navigation li { height: 45px; display: block; text-align: right; padding: 0 49px 0 0; } index.html <!DOCTYPE html> <html> <head> </head> <body> <h3 style="text-align: center"> Call for Papers </h3> Web Programming Networking Laboratory 42/48

4.5 Text Style Text Decoration The text-decoration can also be overline, line-through, or underline Go to the link https://www.nike.

43 4.5 Text Style Text Decoration The text-decoration can also be overline, line-through, or underline Go to the link index.html <a style="color: inherit; text-decoration:underline;"...> 스페셜기프트안내 </a> Web Programming Networking Laboratory 43/48

44 4.5 Text Style Text Transform The text-transform is used to specify lowercase or uppercase characters p.upper {text-transform : uppercase;} p.lower {text-transform : lowercase;} p.capit {text-transform : capitalize;} <p class="upper">text_transform is uppercase.</p> <p class="lower">text_transform is lowercase.</p> <p class="capit">text_transform is capitalize.</p> Web Programming Networking Laboratory 44/48

45 4.5 Text Style Text Shadow The text-shadow can set the shadow of the text text-shadow: xposition yposition blursize color; xposition is the horizontal position of the text shadow relative to the text yposition is the vertical position of the text shadow relative to the text BlurSize is the size of the shadows blur Color is the color value hex, rgb, rgba, or named color h1 { } text-shadow: 30px 10px 0px #aaa; <h1>text shadow</h1> Web Programming Networking Laboratory 45/48

46 4.5 Text Style Word Wrapping The word-warp automatically truncates a word if it is too long to fit in the domain and pass it to the next line word-wrap : normal break-word initial inherit; Normal: breaks words only at allowed break points break-word: allows unbreakable words to be broken initial: sets this property to its default value Inherit: inherits this property from its parent element p.test { } word-wrap: break-word; <p class="test"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p> aaaaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa Web Programming Networking Laboratory 46/48

4.5 Text Style Multi Column The multi columns are used to lay out text and use the following attributes column-count: the number of columns column-gap: the gap between the columns column-width: a

47 4.5 Text Style Multi Column The multi columns are used to lay out text and use the following attributes column-count: the number of columns column-gap: the gap between the columns column-width: a width for the columns column-rule: all the column-rule-* properties column-span: specifies how many columns should span across none: the element does not span across multiple columns all: the element should span across all columns h3 { column-span: all; } <h3>this heading spans across all three columns</h3> column-span : none all; Web Programming Networking Laboratory 47/48

48 Sungkyunkwan University Thanks Prepared by J. Lee and H. Choo Web Programming Copyright Copyright Networking Networking Laboratory 48/48

CSS: The Basics CISC 282 September 20, 2014

CSS: The Basics CISC 282 September 20, 2014 Style Sheets System for defining a document's style Used in many contexts Desktop publishing Markup languages Cascading Style Sheets (CSS) Style sheets for HTML