Mastering CSS Notes

These are some notes I took when going through the Mastering CSS Course on Udemy. It’s an excellent course for anyone looking to learn the details of how CSS works, just make sure to wait to buy it until Udemy launches one of its flash sales (those sales happen frequently). These notes are really more for myself, and act more as a point of reference should I ever need to look something up, rather than a fully functioning article.

CSS Sample

selector {
  property: value;
}

Concepts

Accessibility Fix – Sometimes the display: none; property doesn’t work. Resource: https://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ Can be fixed by hiding offscreen with

.hide {
  position: absolute !important;
  top: -9999px !important;
  left: -9999px !important;
}

Animations (setup) – Animation names can’t have spaces or use reserved word ‘none’. Support is IE10+. Consider not using animations for core features of your site. Resource http://www.richfinelli.com/css-animations-arent-that-tough/

  1. Create animation name: -webkit-animation-name: slideDown;
  2. Set animation duration: -webkit-animation-duration: .25s;
  3. Set animation style (ease is popular): -webkit-animation-timing-function: ease;

Animations (keyframes) – Calls the animations and allows for additional stylings. Keyword ‘from’ covers stylings at the beginning of the animation, and ‘to’ covers stylings at the end of the animation. To and from can be substituted with number percentages that change the animation at various points along the animations duration.

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
    opacity: 0;
  }
  90% {
    -webkit-transform: translateY(10%);
  }
 100% {
    -webkit-transform: translateY(0%);
    opacity: 1;
  }
}

Animation (properties) – Repeated animations can take a parameter of infinite. Additional properties for Fill Mode are forwards and both.

  1. Delay Star (delays animation’s start) t: -webkit-animation-delay: 2s;
  2. Repeat Animation: -webkit-animation-iteration-count: 3;
  3. Fill Mode (what to do with animation before start and end): -webkit-animation-fill-mode: backwards;
    1. Backwards (with opacity: 0; makes shark disappear on page load and appear during animation.
    2. Forwards (can make animation end in different spot)
    3. Both (does both forwards and backwards)

Block Level Elements (includes h and p tags)

  1. The expand the full width of the page.
  2. They force a line break at the end (they stack on top of one another).
  3. display: block; converts any inline style to a block
  4. display: none; hides element completely

Box Model – Content is surrounded by Padding, which is surrounded by Border, which surrounded by Margin. Total width and height of an object is content (width or height) + Padding + Border + Height. If you want to start with width or height and subtract padding, border, and margin from those numbers, you need

box-sizing: border-box;

Box Shadow – Creates shadows. First two properties are for x and y (positive y’s start from the bottom, negatives the top). The third property is for the blur. The fourth values takes rgba color values, and rgba takes four values with the first three being color settings and the fourth being for alpha (or opacity).

box-shadow: 0 8px 15px rgba(0, 0, 0, .1);

Box Sizing Border Box – Useful for making responsive images. Can be universally applied to every element with the following:

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

Buttons – Don’t put positioning attributes in the actual button.

Child Combinator (>) – Selects only direct children of a parent. Useful for navbars. selects only li’s (in the menu) and not the li’s that will make up the drop downs.

.primary-nav > li {

}

Classes and id’s – Are selectors that are added to HTML elements, and  can be called and styled in CSS.

  1. Id’s are weighted heavier than classes
  2. Id’s should only be used once per page
  3. Use id’s as little as possible in favor of classes

Classes (Modular) – Classes containing a name that represents a single property: value; combination in CSS.

Classes (Pseudo) – Follow a class name with a colon and the way they’re going to impact the HTML ie. .button:hover

Column Layouts – Made using floats. Width of columns must add up to width of div wrapper.

CSS Reset – Gets a base layer ready for writing code. Eliminates browser styles. Resource http://meyerweb.com/eric/tools/css/reset/

CSS Preprocessors – Sass or Less, allows you to use variables, mixins, partials and includes other features that improve the writing of CSS.

Descendant Selectors – Allows you to call child tags of parent, stops you from creating classes and id’s for every element. The longer the descendant selector, the more weight it is going to carry.

.secondary-section h2 {
  font-style: normal;
  color: #0072ae;
  font-weight: bold;
}

Fonts (free) –  Doesn’t work with every browser, so need to find font service (or font kit) that use the four file types for all common browsers. Google web fonts https://fonts.google.com/ League of Moveable Types free fonts https://www.theleagueofmoveabletype.com/ 

Fonts (paid) – TypeKit (free if you’re subscribed to Adobe, and can be synched to Photoshop and Illustrator). Needs a localhost domain or regular domain to work. Source: https://typekit.com/

Font Face – Use @font-face property to define new fonts, see below, call the new font with font-family and use wherever.

@font-face {
  font-family: 'League Gothic';
  src: ('../League-Gothic-Regular.otf');
}

Font Icons – Should try to get all icon fonts into one file. Source: http://zurb.com/playground/foundation-icon-fonts-3

Floats –  Clear, is used on HTML elements that are floated on to remove the overlap. clear: none; is a default value. clear: both; is the most commonly used

  1. Traditionally allows text to be used around images.
  2. Elements underneath floats flow to the opposite side of the page unless they are cleared.
  3. Useful for making multi-column layouts.
  4. Floats cause div heights to collapse, making it unable to take certain CSS changes, this can be fixed with clear.

Float Clear Fixes

  1. Make an empty div after the wrapper div, give it a class, and call clear: both; on it. May take SEO hit.
  2. Add overflow: hidden; to the section class (parent that contains the wrapper within it), May inadvertently hide content that flows into it, like a dropdown.
  3. Add float: left; or float: right; will fix, but will also move your content to the left or right of the screen.
  4. See pseudo element clearfix below, add grouping class to parent element.
.grouping:before,
.grouping:after {
  content: " ";
  display: table; 
}
.grouping:after {
  clear: both; 
}

Gradients – Changes color shades. Complicated, use a gradient editor. Gradient Editor: http://www.colorzilla.com/gradient-editor/

Images for HiDPI (2x)- Retina size images are 2x, or two times the size of what you actually need. CSS is then used to constrain the size of the image. Add @2x to the end of an image file name. 2x can be tested on Chrome by zooming in to 200%. 2x images are close to four times the file size of a normal image. Only works on image tags.

<img src="images/sharknado@2x.jpg" alt="Sharknado movie">

Images for HiDPI (1.5x) – A compromise for retina images, so you don’t have to use JavaScript.

Images (Background) – Retina background images need media queries for device pixel ratio. See below

@media
only screen and (-webkit-min-device-pixel-ratio: 2), 
only screen and (min-resolution: 192dpi) {
  footer {
    background-image: url('../images/seaweed@2x.jpg');
  }
}

Images (Retina) – Use JavaScript to make sure Retina devices get 2x images, and other devices get 1x images. Source: http://imulus.github.io/retinajs/

Images (SVG – Scalable Vector Graphic) – Suited for line drawings and Adobe work, and background images. Is an alternative to retina. Can be added as image tags, background images, and inline. Inline SVG is faster, but takes 30 lines of code, replaces whole image tag, and doesn’t look good. SVG have small file sizes, not supported in IE8.

Inline Elements (includes a tags, spans, strongs, etc.)

  1. Doesn’t take up the full width of the page, only what’s needed.
  2. Doesn’t respond to width or top or bottom margins.
  3. display: inline; converts a block to an inline style.
  4. display: none; hides element completely.

Nav Dropdowns – Use ul inside of li and absolute positioning and display nones. Build to see the dropdown first, and then make it disappear. Z-Index can be used to place dropdown behind navbar menu.

Positioning – All elements by default have a position of static. Static elements adhere to the normal flow (they stack on top of one another).

  1. Absolute Position – Takes off static (puts element in its own position universe), gets rid of block qualities, and other elements aren’t effected by it. Offset properties for top, right, bottom, and left can now be used (offset properties function a lot like margin properties) but are based off the actual browser window. Absolute position is usually set on the child of a parent that has position relative. Will appear on top of other elements, can be stopped with z-index.
  2. Position Relative – Used on parent elements. Establishes itself as a coordinate system for children elements with position absolute. Keeps block element qualities.
  3. Position Fixed – Keeps element fixed on one part of browser screen, no matter where user scrolls to. It’s similar to absolute positioning. (May require additional margins to fix).

Pseudo Classes – Attached with a colon to the end of a class. Allow you to target elements based on their position in the HTML or other qualities, like state based pseudo classes (ie. :hover).

  1. first-child – Grabs only first child of element. Useful for nav lists (grab li not a), can break if there are html tags above li tags.
  2. last-child – Grabs only last child of an element.
  3. nth-child(1) – Grabs the child that’s passed in as a parameter, not 0 index. Can also take parameters of odd and even.
  4. nth-of-type(2) – Grabs the specific type that nth-of-type is attached to, and not additional children that might be under it.

Responsive Design – Makes sure website layout is compatible with different sized devices. Has three key components:

  1. Fluid Grids
    1. Fixed Width to Fluid
      1. Goals: Change all pixel widths and left right margins and paddings to percentages.
      2. Not all pixels will have to be changed to percentages, other options available.
    2. Pixel to Percentage Conversion
      1. target / context = result
      2. target = desired width of element, context = parent element (in margin and widths), context = element width (in padding), result is percentage that is plugged into CSS.
  2. Flexible Images
    1. Goals: Make image resize inside a fluid grid.
    2. Put images inside a container <figure>
    3. Make container fluid
    4. Assign max-width: 100%; to image
  3. Media Queries
    1. Goals: Fix issues with narrower widths.
    2. Begins with @media, takes media type (usually screen), takes size (max-width: 1023px means 1023px and smaller, min-width is the opposite).
    3. @media screen and (max-width: 1023px)
    4. 1024px is iPad in landscape
    5. 768px is iPad in portrait
    6. Best practice is mobile first (work off of min-width in media queries)
  4. Mobile Menus
    1. Goals: Hide the mobile menu in lieu of a menu icon
    2. Activate the menu with jQuery
  5. Add meta view port in head (see below) to make media queries and mobile code work.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">

Specificity Weight – Heavier equals more precedence taken. Try to use lighter-weighted styles.

  1. !important – 10000 points
  2. Inline Style – 1000 points
  3. Id – 100 points
  4. Class – 10 points
  5. Element – 1 point
  6. * – 0 points

Stylesheet Has Three Styles (external recommended)

  1. Inline (in the actual HTML)
  2. Embedded (in the HTML head)
  3. External (separate file)

Transforms (Scale) – New to CSS3, more support than transitions. Scale property transforms size of element, takes two parameters first is horizontal size, and second is vertical size. 1 = 100% Can be used to make the button popping out effect. Works

transform: scale(.9,.9)

Transform (Translate) – Moves a property to the top, left, right, or bottom. First value moves left/right, second top/bottom.

transform: translate(0, -5px);

Transform (Rotate) – Takes a property of rotate which has a single degree parameter. Often used in conjunction with overflow: hidden; on image container.

transform: rotate(15deg);

Transitions – New to CSS3, smooths out state changes, ie. timings of hover effects, etc. Transition is property that’s used, but special properties must be used for older browsers … they are.

  1.  -webkit-transition – safari, older chrome, works with newer firefox and opera
  2. -moz-transition – older firefox
  3. -o-transition – older opera
  4. -ms-transform – older explorer (for transforms only)

 

Random

Border radius short hand – ie. border-radius: 0 0 15px 15px; Starts at top left corner and goes clockwise.

Default browser font size is 16px.

.column:first-child – first child can be called on a CSS class. It will only target the first occurrence of the class column.

Float – Can also be used to fix gaps between images and their borders if the img is specifically targeted by the float.

Line Height – property is determined by multiplying value by font size. 16px font size with line-height of 2 is 32px.

Translate –  parameters have two values, the first is the x-coordinate, and the second is the y-coordinate.

Wrapper – a div that wraps around other divs so that you can center them.

Z-Index – keeps track of three dimensional depth, or what’s on top of what element. Can be used on position, opacity, and transform elements.

Additional Resources

Check if CSS is Browser Compatible http://caniuse.com/

CSS Tricks – https://css-tricks.com/

CSS Animations (Mozilla) – https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

Responsive Web Design and Fonts Books  – https://abookapart.com/

Scalable and Modular CSS Book https://smacss.com/

Shop Talk Show (CSS Podcast) – http://shoptalkshow.com/

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s