ISI Programming Course - 02 - CSS

ISI Programming Class CSS Jungwon Seo | University of Stavanger

Cascading Style Sheets

Wordpress • It’s really useful if you have an Wordpress
blog.

Things to talk about • How to google • Three
ways to apply CSS • Selectors • Responsive design - media query • CSS framework: Bootstrap, Materialize

How to Google • Don’t need to be good at
English. • Google will ﬁx your broken English.

Don’t try to memorize • https://www.w3schools.com/cssref/ • There are so
many. • You don’t have to memorize. • You just need to know what you want to show. • And google it

Sometimes they know what you don't know

Three ways to apply CSS • Inline • Internal •
External

Inline Style • We have used this way last time.
• This is convenient for some temporary changes. • If the style should aﬀect more than two elements, it is not recommended to use inline-style.

Internal Style • Writing styles in the <style> tag. •
This is really useful when you can’t attach additional css ﬁles. • e.g. html email

External Style • Make an additional file just for the
css. • Include the file(*.css) inside the <head> tag. • The most common way • You can add more than one file.

Selectors • Different background color for every other rows. •
Different color for the <p> which is located right after <h1>. • Different color when cursor is on the element. • First or last element, all elements, etc. • https://www.w3schools.com/cssref/css_selectors.asp

Family Relationship • Can you guess its look?

Class and Id • You can use the user-speciﬁed identify
for each element. • Class • When you want to make a style. • You can mix multiple classes. • Id • When you want to choose one element. • Id should be unique

Responsive Web Design • Mainly because of a smartphone. •
Making diﬀerent web sites for each device is not responsive web design. • It is an essential part in modern web design.

Media Query • The way that CSS diﬀerentiate the device
is the screen size.

CSS framework • It’s like using powerpoint template. • Predeﬁned,
better than mine but also editable. • It’s also important to be familiar with using frameworks. • It’s not recommended to mix diﬀerent frameworks.

Bootstrap • https://getbootstrap.com/ • Originally from Twitter. • The most
popular css framework.

Materialize • https://materializecss.com/ • Design itself(material design) is from Google.
• The developers are/were students.

Exercise-01 : inline, internal, external • Try with three diﬀerent
ways. • Path problem. Source Code Link

Exercise-02 : Family • meaning of these , > +
~ • ﬁrst, last, nth child, odd, even Source Code Link

Exercise-03 : id vs class • How to write in
CSS • Multiple classes Source Code Link

Exercise-04 : RWD, @media • How to use media query
in CSS Source Code Link

Exercise-05 : Bootstrap • Understanding Bootstrap Source Code Link

Exercise-06 : Materialize • Understanding Materialize Source Code Link

ISI Programming Course - 02 - CSS

ISI Programming Course - 02 - CSS

Jungwon Seo

More Decks by Jungwon Seo

Featured

Transcript

ISI Programming Class CSS Jungwon Seo | University of Stavanger

Cascading Style Sheets

Wordpress • It’s really useful if you have an Wordpress

Things to talk about • How to google • Three

How to Google • Don’t need to be good at

Don’t try to memorize • https://www.w3schools.com/cssref/ • There are so

Sometimes they know what you don't know

Three ways to apply CSS • Inline • Internal •

Inline Style • We have used this way last time.

Internal Style • Writing styles in the <style> tag. •

External Style • Make an additional ﬁle just for the

Selectors • Diﬀerent background color for every other rows. •

Family Relationship • Can you guess its look?

Class and Id • You can use the user-speciﬁed identify

Responsive Web Design • Mainly because of a smartphone. •

Media Query • The way that CSS diﬀerentiate the device

CSS framework • It’s like using powerpoint template. • Predeﬁned,

Bootstrap • https://getbootstrap.com/ • Originally from Twitter. • The most

Materialize • https://materializecss.com/ • Design itself(material design) is from Google.

Exercise-01 : inline, internal, external • Try with three diﬀerent

Exercise-02 : Family • meaning of these , > +

Exercise-03 : id vs class • How to write in

Exercise-04 : RWD, @media • How to use media query

Exercise-05 : Bootstrap • Understanding Bootstrap Source Code Link

Exercise-06 : Materialize • Understanding Materialize Source Code Link