Chapter 4 CSS basics - SKKUmonet.skku.edu/wp-content/uploads/2018/08/Chapter-04.-CSS-basics.pdfWeb Programming Networking Laboratory 3/48 We will give the following three practice

Web Programming Networking Laboratory 1/48

Sungkyunkwan University

Copyright 2000-2012 Networking Laboratory Copyright 2000-2018 Networking Laboratory

Chapter 4

CSS basics

Prepared by J. Lee and H. Choo


Chapter 4 Outline

4.1 Introduction

4.2 CSS Insertion

4.3 CSS Selectors

4.4 Font Style

4.5 Text Style


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)

4.1 Introduction


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

4.1 Introduction What is CSS?

After deleting the style of document


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


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

<!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

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>

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> .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: 0 0 0 1px #e9e9ea;”> … </body> </html>

Go to the link https://envoy.com/

index.html

4.2 CSS Insertion Inline Style Sheet & Internal Style Sheet

https://envoy.com/

https://envoy.com/


<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> … </body> </html>

4.2 CSS Insertion External Style Sheet (1/3)

The style definitions are normally saved in external .css files

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

p {color: blue;}

mystyle.css

ex1.html


.btn-primary { color: #FFFFFF; background-color: #EF3934; // border-radius: 6px; box-shadow: 0 0 20px 0 rgba(239, 57, 52, 0.2); }

<!DOCTYPE html> <html> <head> … <link rel="stylesheet" href="https://unpkg.com/ [email protected]/css/envoy.css" /> …


Go to the link https://envoy.com/

index.html

envoy.css

https://envoy.com/

https://envoy.com/



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


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:

It is convenient to define commonly used styles in the style of the <body>

① Web browser default value

② External style sheet

③ Internal style sheet stored in head section

④ Inline style sheet

High

priority


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


4.3 CSS Selectors CSS Syntax (2/2)


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


4.3 CSS Selectors Type Selector

Type Selector selects elements based on the HTML element name

<!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>

ex2.html

Select all h1 elements

h1{color: blue;}

mystyle.css


<!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>

4.3 CSS Selectors Universal Selector

Universal selector selects all elements in the page

*{color: blue;}

mystyle.css

ex2.html

Select all elements


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

h1::first-line{color: green;} p::first-letter{color: blue;}

mystyle.css

selector::pseudo-element{

property: value;

}


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

selector:pseudo-calss{

property: value;

}

h1:hover{color: green;} p::first-letter{color: blue;}

mystyle.css


Sample web page (1/2)

Go to the link http://thrivesolo.com/

http://monet.skku.edu/~mc2017/


Sample web page (2/2)

index.html

style.css


4.3 CSS Selectors Attribute Selector (1/2)

The attribute selector selects an element with a specific 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>

ex2.html

[type]{color: blue;}

mystyle.css Select element with a specified attribute


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


4.3 CSS Selectors ID Selector

ID selector uses the id attribute to select a specific HTML element

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1 id="basic">CSS Basics</h1> <h2>CSS Insertions</h2> <h3>CSS Selectors</h3> </body> </html>

ex3.html

#basic{color: blue;}

mystyle.css

Specify the id of the <h1> element as “basic"

Select the element whose id is “basic”


4.3 CSS Selectors Class Selector

Class selector selects elements with a specific class attribute

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="mystyle.css"> </head> <body> <h1 class="basic">CSS Basics</h1> <h2 class="basic">CSS Insertions</h2> <h3>CSS Selectors</h3> </body> </html>

ex3.html

.basic{color: blue;}

mystyle.css

Specify the class of the <h1>, <h2> element as “basic"

Select the element whose class is “basic”


4.3 CSS Selectors Descendant Selector

These combine selectors to select specific elements

selector1 selector2 : descendant relationship

<!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>

ex4.html

div p{color: blue;}

mystyle.css


4.3 CSS Selectors Child Selector


selector1 > selector2 : child relationship

<!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>

ex4.html

div > p{color: blue;}

mystyle.css


4.3 CSS Selectors Adjacent Sibling Selector


selector1 + selector2 : adjacent sibling relationship

<!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>

ex4.html

div + p{color: blue;}

mystyle.css


4.3 CSS Selectors General Sibling Selector


selector1 ~ selector2 : general sibling relationship

<!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>

ex4.html

div ~ p{color: blue;}

mystyle.css


4.3 CSS Selectors Selector Group

To group selectors, the selectors are separated by a comma

This is called the selector group

Select the <h1>, <h2>, and <h3> elements

h1, h2, h3 { font-family: sans-serif; }


4.4 Font Style

The font property allows to specify the font type, color, size, etc

font-size : font size setting

font-family : font family setting\

font-style : font style setting

font-weight : bold setting

CSS usage on the web platform

► https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/

https://developer.microsoft.com/en-us/microsoft-edge/platform/usage/







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: http://pxtoem.com/

http://pxtoem.com/

http://pxtoem.com/

http://pxtoem.com/


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>


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:

► sans-serif, serif, monospace

► https://www.w3schools.com/css/css_font.asp

p { font-family: Garamond, "Times New Roman", serif;}

Least Favorite Most Favorite


4.4 Font Style Font Family (2/2)

Go to the link http://www.hollys.co.kr/

body{ font-family:나눔고딕, NanumGothic, ng, 돋움, arial, helvetica, sans-serif !important; font-size:12px; line-height:19px; color:#6f6f6f;}

common.css

http://www.hollys.co.kr/


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/

<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/css?family=Notable" rel="stylesheet"> </head> <body> <p style="font-family: 'Notable', sans-serif"> This is web font.</p> </body> </html>


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


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; font-size: 12pt; line-height: normal; font-family: “Helvetica”,sans-serif}

Initial values used if no value specified in font

property list (that is, potentially reset)


4.5 Text Style

color : color setting

direction : writing direction setting (Horizontal, Vertical)

letter-spacing : spacing between text setting

line-height : height of the text line setting

text-align : horizontal alignment setting

text-decoration : decoration setting

text-indent : indent setting

text-shadow : shadow effect setting

text-transform : case conversion setting

There are over 500 CSS properties! Here are a few:


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

4.5 Text Style Color (1/2)

<!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>

https://www.w3schools.com/colors/colors_names.asp

https://www.w3schools.com/colors/colors_names.asp


RGB

► A percent or an integer between 0 - 255

Hexadecimal code

► Red, Green , and Blue - each from 00 - FF

► #eeddff = #edf

4.5 Text Style Color (2/2)

color: #ff0000; (= #f00)

color: rgb(60%, 40%, 10%);

color: rgb(153, 102, 25);

red green blue


index.html

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/

<!DOCTYPE html> <html> <head>…</head> <body> … <h3 style="text-align: center">

Call for Papers </h3> …

.header ul.navigation li { height: 45px; display: block; text-align: right; padding: 0 49px 0 0; }

style.css




<a

style="color: inherit;

text-decoration:underline;"

...>

스페셜 기프트 안내

</a>

4.5 Text Style Text Decoration

The text-decoration can also be overline, line-through, or underline

Go to the link https://www.nike.com/kr/

index.html

https://www.nike.com/kr/

https://www.nike.com/kr/


The text-transform is used to specify lowercase or uppercase characters

4.5 Text Style Text Transform

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>


The text-shadow can set the shadow of the text

► 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

4.5 Text Style Text Shadow

h1 { text-shadow: 30px 10px 0px #aaa; } <h1>text shadow</h1>

text-shadow: xPosition yPosition blurSize color;


p.test { word-wrap: break-word; } <p class="test"> aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

The word-warp automatically truncates a word if it is too long to fit in the

domain and pass it to the next line

► 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

4.5 Text Style Word Wrapping

aaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaa

word-wrap : normal|break-word|initial|inherit;


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

4.5 Text Style Multi Column

column-span : none|all;

h3 { column-span: all; } <h3>This heading spans across all three columns</h3>


Sungkyunkwan University

Copyright 2000-2012 Networking Laboratory Copyright 2000-2018 Networking Laboratory

Thanks

Prepared by J. Lee and H. Choo

Documents

Chapter 4 CSS basics - SKKUmonet.skku.edu/wp-content/uploads/2018/08/Chapter-04.-CSS-basics.pdfWeb Programming Networking Laboratory 3/48 We will give the following three practice