CSS - Presentation

Introduction

Ciprian Chichirita

Contents

CSS: intro
CSS: where can you write it
CSS: syntax
CSS: order
CSS: box model
CSS: flexbox
CSS: layouts
CSS: homework
CSS: resources

CSS: intro

Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML

The name cascading comes from the specified priority scheme to determine which style rule applies if more than one rule matches a particular element. This cascading priority scheme is predictable.

CSS has a simple syntax and uses a number of English keywords to specify the names of various style properties.

A style sheet consists of a list of rules. Each rule or rule-set consists of one or more selectors, and a declaration block.

http://acid3.acidtests.org/

CSS: where can you write it - .css file

										
																							<!DOCTYPE html>
												<html>
												<head>
													<meta charset="utf-8">
													<meta http-equiv="X-UA-Compatible" content="IE=edge">
													<title>css demo</title>
													<meta name="viewport" content="width=device-width, initial-scale=1">
													<!-- you can declare it here as link reference -->
													<link rel="stylesheet" type="text/css" media="screen" href="main.css">
												</head>
												<body>
												</body>
												</html>

CSS: where can you write it

html <head> declaration inside a <style> tag

										
																							<!DOCTYPE html>
												<html>
												<head>
													<meta charset="utf-8">
													<meta http-equiv="X-UA-Compatible" content="IE=edge">
													<title>css demo</title>
													<meta name="viewport" content="width=device-width, initial-scale=1">
													<!-- you can add CSS inside a style tag -->
													<style type="text/css">
														/* this is CSS comment */
														/* this is rule 1 */
														selector1 {
															/* here we add CSS properties */
														}
														/* this is rule 2 */
														selector2 {
															/* here we add CSS properties */
														}
													</style>
												</head>
												<body>
												</body>
												</html>

CSS: where can you write it

inline style using style html attribute

										
																							<!DOCTYPE html>
												<html>
												<head>
													<meta charset="utf-8">
													<meta http-equiv="X-UA-Compatible" content="IE=edge">
													<title>css demo</title>
													<meta name="viewport" content="width=device-width, initial-scale=1">
												</head>
												<body>
													<h1 style="/* CSS properties */">my first styled heading!</h1>
												</body>
												</html>

CSS: syntax

https://www.w3schools.com/cssref/css_selectors.asp

										
																							/* comment here */
												selector { property: value; /* more properties...*/ }

												/*
													<div id="unique-button" class="button button--success" data-attr="some data here">lorem ipsum</div>
												*/
												/* we can select this div to apply CSS properties by using: */
												div {} /* html tag selector */
												.button {} /* css class selector */
												.button.button-success {}
												[data-attr] {} /* attribute selector */
												[attr='value'] {} /* attribute that is eq to value */
												#unique-button {} /* id selector */

CSS: syntax

https://www.w3schools.com/cssref/css_selectors.asp

										
																							/* comment here */
												selector { property: value; /* more properties...*/ }

												/*
													<div id="unique-button" class="button button--success" data-attr="some data here"><p><a href="#">lorem ipsum</a></p></div>
												*/
												/* combinations */
												div .button {}
												div.button {}
												div, p {} /* Selects all <div> elements and all <p> elements */
												div p {} /* Selects all <p> elements inside <div> elements */
												div > p {} /* Selects all <p> elements where the parent is a <div> element */
												/* pseudo classes */
												a:hover {}
												a:visited {}
												a:focus {}
												div:first-child {}
												div:last-child {}
												p:nth-child(2) {} /* Selects every <p> element that is the second child of its parent */
												/* pseudo-elements */
												/* matches a virtual first child of the selected element */
												div::before {}
												/* matches a virtual last child of the selected element */
												div::after {}

CSS: syntax

https://www.w3schools.com/cssref/css_selectors.asp

										
																							/* comment here */
												selector { property: value; /* more properties...*/ }
												/*
													<div id="unique-button" class="button button--success" data-attr="some data here"><p><a href="#">lorem ipsum</a></p></div>
												*/
												/* At appropriate places, an asterisk may be used as a wildcard to select every
												element */
												* { } /* all elements */
												.parent * { } /* all descendants */
												.parent > * { } /* all children */
												body {
													padding: 0 0 0; /* shorthand for padding-top|right|bottom|left */
													width: 50%; /* px|em|rem|vw|vh */
													color: #FF66EE; /* long hex format */
													background-image: url(data:image/png;base64,iVBORw0KGgoA...); /* base64 image */
													font-family: Arial;
												}
												@font-face {
													font-family: myFirstFont;
													src: url(sansation_light.woff);
												}

CSS: syntax

https://www.w3schools.com/cssref/css_selectors.asp

										
																							/* make the font bigger when shown on a screen at least 480px wide */
												@media screen and (min-width: 480px) {
													h1 {
														font-size: 3em;
														font-weight: normal;
													}
												}

CSS: syntax

https://www.w3schools.com/cssref/css_selectors.asp

										
																							.truncate { overflow: hidden; /* scroll|auto */ }

												.pos-rel {
													position: relative;
													top: 0;
													left: 0;
												}

												.pos-abs {
													position: absolute;
													top: 0;
													left: 0;
													right: 0;
													bottom: 0;
												}

												.d { display: inline; /* inline-block|block|flex|grid */ }
												.f { float: left: /* right */ }
												.c { clear: left; /* right|both */ }
												/* The line-height property specifies the height of a line. */
												.l-h { line-height: 1.2; }
												/* only works on positioned elements (position:absolute, position:relative, or position:fixed). */
												.z { z-index: 5; }

CSS: syntax

https://www.w3schools.com/csSref/css_functions.asp

										
																							.thing {
													width: 90%; /* fallback if needed */
													width: calc(100% - 3em);
												}
												#p1 {background-color:rgba(255,0,0,0.3);} /* red with opacity*/

CSS: syntax

https://www.w3schools.com/css/css3_transitions.asp

										
																							div {
													width: 100px;
													height: 100px;
													background: red;
													/* https://autoprefixer.github.io/ */
													-webkit-transition: width 2s; /* Safari */
													transition: width 2s;
												}

CSS: order

Order of CSS interpretation:

!important
css written inside style attribute
css import inside head tag (as link or as style)

CSS: box model

Margin - Clears an area outside the border. The margin is transparent
Border - A border that goes around the padding and content
Padding - Clears an area around the content. The padding is transparent
Content - The content of the box, where text and images appear

box model

									
																					div {
												margin: 1px 2px 1px 2px;
												border: 5px solid red;
												padding: 0;
												/* The box-sizing property defines how the width and height of an element are calculated */
												box-sizing: border-box; /* content-box  */
											}
											div::before {
												content: '...';
											}

CSS: flex

flexbox

CSS: layouts

types

Static layout
Fluid layout
Responsive layout
Fluid-responsive layout

CSS: layouts

implementation

CSS float property (old)
CSS flexbox (present)
CSS framework (e.g.: bootstrap)
CSS grid (new)
grid by example

CSS: homework

validate CSS using: https://jigsaw.w3.org/css-validator
normalize the css link
on our HTML site, add all CSS properties and animations
use the personal site you made using HTML and:
make it a fluid-responsive layout, MOBILE FIRST (use @media queries and your own grid system)
try and use:
flex, background gradients and colors that have opacity in them, borders, text-decorations, etc.
make it look like: https://getbootstrap.com/docs/4.0/getting-started/introduction/ but DO NOT USE BOOTSTRAP
for the navigation buttons, use https://fontawesome.com/ icons
the entire site should use a font from here: https://fonts.google.com/
when you hover the navigation buttons, make a transition (any transition should be enough)
use BEM naming convention

CSS: resources