fullstack_webdev

Code and notes from Full stack web developer path, LinkedIn Learning.

View on GitHub

2. CSS Essential Training

0. Introduction

CSS is a fundamental part of web design, because it controls how your web pages look. Without it, websites would only be able to display text on white backgrounds. We use CSS to take our plain HTML websites to next level in terms of aesthetics and user experience.

In this course we cover all the foundations of CSS, we will cover how CSS is structured to frequently used CSS styles and the various ways CSS let’s you layout a page.

You needn’t know a lot, basic understanding of HTML, comfortable using a text editor is all that’s needed.

All the exercises of this course can be found on CSS Essential Training Collection page. 🔗 Here

1. Introduction

HTML and CSS

HTML defines the structure of content on webpage, and adds semantic meaning to the content. CSS controls the appearence of the HTML elements and separates the presentation from the content.

Browser Developer Tools

Every browser these days includes browser developer tools that you can access by pressing F12, Right Click > Inspect etc. and this can be used to inspect HTML, CSS and JS on any webpage.

Referencing CSS

Different ways in which we can add CSS to our webpage are: External, Inline and Internal.

  1. External: This method refers to using a separate CSS file and must be saved with CSS file extension. We can load external CSS file into the HTML with a link tag or @import method. <link rel="stylesheet" href="css/styles.css"> Link method is added to head with attributes rel and href. The attribute type="text/css" was required for older HTML versions, but is no longer required in HTML5.

Using an external stylesheet is recommended as it separates the CSS from the HTML making it easier to manage. An external stylesheet can be reused throughout a project by linking the same CSS file to any HTML file as required, and any changes made to this CSS file would reflect on all the HTMl pages consistently.

You can use more than one CSS file, but having too many CSS files defeats the purpose of having separate stylesheets if you are maintaining a bunch of different files. However for larger projects, having one giant CSS file can also become unruly, so sometimes breaking the CSS files into smaller files can make it easier to manage and do changes.

Another external method is that we just add @import rule, which imports one or more stylesheets into HTML files or into another CSS file. This method can be used to import all the smaller CSS files into a single CSS file which is then loaded into the HTML document.

/* styles.css  */
@import url("/styles/layout.css") @import url("/styles/typography.css") /*  */
  @import url("/styles/buttons.css");

<!-- index.html -->
<head>
  <style>
    @import url("css/styles.css");
  </style>
</head>

This method isn’t used these days as @import doesn’t allow for parallel downloads and meaning the page must download an entire stylesheet before it loads rest of the page. More on this, from a blog by Steve Souders from 2009 that’s still relevant. Here

Import method however is used with CSS preprocessors such as SASS and or LESS or when CSS files are compiled into one file.

link method is used and recommended if you are directly working with CSS on your project.

Inline Method: uses a style attribute which is added to the opening HTML tag, and we add CSS rules as value which applies style directly to the HTML element. The inline method should be used only when necessary as it is hard to manage and you have to edit it individually. Multiple styles must be added to the same style attribute and more you add, the harder it is to read. Also, CSS added by any other method is overwritten if you have inline CSS defined for an element, creating more potential for conflict with other CSS style rules.

Internal Method: This is the third option, and in this method in the head of the html page, we create style element and we enter CSS rules for each element just as we would’ve for external CSS file. This method if more flexible than inline method because instead of adding styles to each individual element, CSS selectors are used to apply a style to all the matched elements. More about selectors later on. While internal CSS works better than inline CSS, it is still inefficient, as you cannot import it, and CSS rules need to be copied to each HTML page manually, something you needn’t do in external CSS as importing does the job. Internal method is best for short blocks of CSS that are page specific.

Project Overview and Setup

Code/css_portfolio will be what we will work on in this course, and we will make it better as we learn things and progress through the course.

For placeholder text you can visit Meet the Ipsums.

Optimizing Images and Retina Displays

When using images within you websites, there are many ways to optimize for performance and search engine optimization. More on this at shopify blog.

Choosing the right dimension of the image is very crucial. For instance if you use an image taken from phone, it will have a resolution of 4000x3000 pixels which would be really slow to load on any device irrespective of connection speed. For css_portfolio project, thumbnails will be only 300 pixels wide, so instead of loading a large image and resizing it using CSS, that would be an unnecessary load on the webpage. Especially for mobile phones, which may have restrictions on data or internet speeds. But instead of cropping the images to 300 pixels, we actually want it to be 600 pixels, reason for this is due to Apple’s Retina display.

This is a trademark term coined by Apple which is used to describe their high pixel density screens. Not long after retina displays were introduced other manufacturers have their own versions of this technology. While retina is an apple specific term it’s little easier to say that high pixel density screen. Pixel density refers to how many pixels are there within a space. Usually Pixel Density is measured by pixels per inch (PPI) or dots per inch (DPI).

Retina displays have double the number of PPI/DPI and can fit two pixels within the same width and height of a non retina display. The more pixels there are within the same area, the smaller the pixels are which is how text and images appear smoother, cleaner and shows more detail. A simple way to support retina in non retina screens is to use the image twice the size. Say your thumbnail image area is 300 pixels wide, so if we use an image file that is 600 pixels wide, then resize it to 300 pixels with CSS, we are adding double the amount of pixels within the same dimension, just like Retina displays.

For both retina and non-retina screens this image will now be displayed as 300px wide, but for retina displays additionally image will appear more crisp.

For css_portfolio project we use project thumbnails as 600px width, for Background images 1400px to 2000px width images should work without any issues. When you resize the width of an image, the height gets resized automatically as well.

Relative Paths

Building websites often includes linking different files together, such as embedding an image in the html, or referencing a CSS file etc. When linking files within the same project, use a relative path. The path is determined by where a file is located within the directory.

If file you are linking to is contained within a directory then folder name must also be included in the file path. We have included the vim_vs.png in our index.html and as we can see on index.html image displayed on webpage by default is same as image resolution. Now we use the css to resize the images.

We create a folder named css and inside it save our styles.css file.

Absolute Paths

Absolute Paths refers to a resource located on a server, so the entire URL, including HTTP and full domain name must be referenced. Used for linking to pages outside our website. Websites have subsections and other pages that we can also link to.

There are services created for the purpose of hosting web resources for people to use. One such service is picsum.

We will stick to absolute path for outside resources and relative paths for referencing files we have in our repo.

2. Core Concepts

CSS Specification and the W3C

The World Wide Web Consortium (W3C) is an international community consisting of member organizations, a full-time staff and the public. Together they develop web standards and guidelines, including the technical specifications for CSS.

To stay informed and updated on CSS specifications you can check the standards and drafts on the w3.org site here. All the past, current and working drafts are published on the W3C website. Status codes are included to indicate what phase the particular module is at. So anything that’s labeled recommendation is good to go. A superseded recommendation means that this specification has been replaced by a newer version. Features in draft stages are experimental and may not be supported by all the browsers.

You are not expected to remember all the CSS you include in your webpages,keeping a few go to resources for reference is recommended.

MDN CSS Docs

CSS Syntax and Terminology

img {
  /* Above img is a selector and selectors are used to determine which html element to apply the styles to */
  width: 300px; /* Declaration */
}
/* The entire snippet above is called a declaration block and may include one or more style rules wrapped in curly braces to contain the styles to the specific selector.*/

/* longhand */
padding-top: 10px;
padding-right: 5px;
padding-bottom: 10px;
padding-left: 5px;

/* shorthand syntax allows us to make multiple declarations using a single declaration statement.*/
padding: 10px 5px;

CSS Values and units

color: red;
color: rgb(255, 0, 0);
font-size: 10px;
font-size: 1rem;

/* Numerical values */
width: 80%;
height: 10em;
border-width: 5px;
animation-iteration-count: 5;

/* Dimensions and degrees */
font-weight: 400;
font-size: 1.25rem;
transform: rotate(360deg);
animation-duration: 750ms;

/* function values can have different units depending on the type of function */
transform: rotate(90deg);
width: calc(80%-20px);
background-image: url("myimage.png");

The color and functional values

Type and Universal Selectors

/* Apply the style to all h1 elements */

h1 {
  /* Styles to apply go here */
}

/* Universal selector using * to apply style to whole document */
* {
  border: 1px solid black;
}

/* select a paragraph and change the text color to blue */
p {
  color: blue;
}

/* select a link, nested in a list item and remove the underline */

li a {
  text-decoration: none;
}

Class and ID Selectors

<p class="fancy intro">Fancy Paragraph</p>
<p>Regular Paragraph</p>
<h1 class="fancy">Fancy Heading</h1>

<!-- id -->
<div id="container">
  <p>Paragraph in a header.</p>
</div>

<!-- In-page linking using href and ID -->
<a href="#example">Click here to visit example section </a>
<section id="example">This is link section</section>

/* class selector in css */
.fancy {
  font-style: italic;
}

.intro {
  font-weight: 400;
}

/* Style rules when both the classes are present do not use space */
.fancy.intro {
  /* style rules when fancy and intro classes are used together */
}

/* ID */

#container {
  text-align: center;
}

Descendant Selectors

<section>
  <p>...</p>
</section>

<!-- Two selectors used in css to select a element which is inside section and p element -->
<section>
  <p>
    <a href="#link">Link</a>
  </p>
</section>
<p>...</p>

<section>
  <h1>Heading</h1>
  <p>Paragraph with a <span>span</span>.</p>
</section>

/* selects only the paragraphs which are contained within a section */
section p {
  ...;
}

/* Selects only links, inside of paragraph inside a section */
section p a {
  ...;
}

.container h1 {
  style: value;
}

.container span {
  style: value;
}

Grouping Selectors

/* applied to all h1 elements */
h1 {
  style: value;
}

/* applies to any element with this class */
.class {
  style: value;
}

/* applies to both h1 and h2 elements */
h1,
h2 {
  style: value;
}

/* applies to all of these elements */
h1,
h2,
.class,
#id {
  style: value;
}

/* applies to h1 of section and h2 */
section h1,
h2 {
  style: value;
}

h1,
h2,
h3 {
  font-weight: normal;
}

/* Combining Selectors: Use when both classes are included together */

.fancy.intro {
  style: value;
}

Inheritance and Specificity

body {
  /* All descendants within body element will have their color set to #222 */
  color: #222;
}

The cascade and importance

p {
  font-size: 12px;
}

/* This will take precedence */
p {
  color: black;
  padding: 20px;
  font-size: 12px;
  /* This declaration of 16px will take precedence. */
  font-size: 16px;
}


/* Being a class this will take precedence due to higher specificity value */
.example {
  font-size: 16px;
}
p{
  font-size: 12px;
}

<p class="example">Paragraph</p>

p {
  /* This style takes precedence even though .example has higher specificity */
  font-size: 12px !important;
}

.example {
  font-size: 16px;
}

/* If you want to override the important then use selector with higher specificity and important keyword */

.example {
  /* will override the 2 above. */
  font-size: 18px !important;
}

Project: Adding Colors

3. The Box Model

Intro to the Box Model

Inline, Block and Display

The box model and properties

The box properties syntax and usage

/* Block Element */
div {
  width: 100px;
  height: 100px;
}

/* Inline-element */
span {
  width: 100px;
  height: 100px;
  display: block;
  /* or */
  display: inline-block;
}

/* longhand */
padding-top: 2px;
padding-right: 2px;
padding-bottom: 2px;
padding-left: 2px;

/* shorthand  with 4 values in the order of as if you are making a square clockwise starting from 12 o'clock 🔝 ▶ ⤵ ⬅ */
padding: 2px 2px 2px 2px;

/* shorthand with 2 values means top & bottom, left and right */
padding: 2px; /* Same on all sides */
padding: 2px 10px; /* 2 px on top and bottom, 10px on left and right */
padding: 2px 10px 5px; /* 2 px on top, 10px on left and right, 5px on bottom bottom */

/* Mixing different types of length units */

padding: 10px 2%; /*top & bottom, right & left*/

/* If an element already has a default padding style, mostly defined in User Agent Stylesheet (UAS) in that case you can define padding to override that in your style.css by setting padding to 0 to remove the space*/

/* Some of the examples of overriding UAS */
padding: 0px;
padding: 0;
padding: 2px 0;

/* Can't have negative numbers so what we have below is invalid */
padding: 2; /*✅✅*/
padding: -10; /* ❌❌*/

/* longhand */
margin-top: 2px;
margin-right: 2px;
margin-bottom: 2px;
margin-left: 2px;

/* shorthand */
margin: 2px;

/* shorthand */
border: 2px solid red;

/* longhand */
border-width: 2px;
border-style: solid;
border-color: red;

Debugging the Box Model

Padding, Margin and Border

Margin and Negative Values

4. Typography

Typography for the web

Changing the font-family

Font-weight, font-style and Web Fonts with @font-face

@font-face {
  font-family: "My Font";
  src: url(path-to-font.woff) /*relative path*/
  src: url(http://example.com/fonts/font.woff) /*absolute path*/
}

Font-size Property

Font Shorthand

/* shorthand */
font: italic small-caps bold 24px/1.5 Helvetica, sans-serif;

/* longhand */
font-style: italic;
font-variant: small-caps;
font-weight: bold;
font-size: 24px;
line-height: 1.5;
font-family: Helvetica, sans-serif;

Text-decoration, text-align and line-height

/* shorthand */
text-decoration: underline red solid;

/* longhand */
text-decoration-line: underline;
text-decoration-color: red;
text-decoration-style: solid;

5. Layouts: Float and Position

Introduction to Float

Layouts and the box model

Position and z-index

6. Layouts: Flexbox and Grid

Introduction to Grid and Flexbox

Flexbox: Orientation and Ordering

/* Shorthand */
flex-flow: column wrap;
/* Longhand */
flex-direction: column;
flex-wrap: wrap;

Flex Sizing

Flexbox exercise

Introduction to CSS Grid, Implicit, Explicit grid

7. Advanced Selectors

Intro to Advanced Selectors

/* Descendant Selector */
parent child {
}
ancestor descendant {
}

/* child combinator */
parent > child {
}

Psuedo-Class Selectors

Fluid and Responsive Layout

Introduction to Responsive Design

Responsive Web Design Key Ingredients

  1. A fluid layout
  2. Flexible Images
  3. Media Queries

Images

<img src="image/project-courses.jpg" alt="course image" />

section {
  background-image: url(path/to/image);
}

Introduction to Media Queries

/* Query that checks if browser viewport is smaller than 1000px, then specific CSS is applied else CSS is ignored */
@media screen and (max-width: 1000px) {
  h1 {
    font-size: 16px;
  }
}
  1. all: Matches to all devices.
  2. print: Matches to printers and print-related displays, conditions when user wants to print by removing background to save ink and so on.
  3. speech: Matches to screen reading devices that read out a page, promoting better accessibility.
  4. screen: Matches all devices that aren’t categorized as print or speech.
@media (orientation: landscape) {
  ...;
}

@media screen and (orientation: landscape) {
  ...;
}

@media screen and (min-width: 30em) and (orientation: landscape) {
  ...;
}