Galvanize - Galvanize
- What is CSS and how do you target elements?
- How do you style text and how can you customize it?
- Define the box model.
- What is a CSS Framework and when to use them.
- How to create a responsive site with a grid
CSS stands for Cascading Style Sheets is a language that is used to style HTML. CSS was invented in the mid 90s and was born out of the failures of previous langauages. Since it's inception CSS has gone through 3 versions with current CSS 3 being iterated every couple of years with new features. There is a really great MDN Article on the State of CSS3 that dives into the current iterations and what each version updates.
CSS can be really challenging and can be frustrating for many developers. It requires patience and a lot of reloading and trying things to get it right.
In CSS you target HTML elements four different ways:
- HTML Tag - Applies to all html elements with the same tag
- By Class - Can add a class or an identifier to many html tags
- By a spceific ID - A unique identifier that you can add to only 1 tag
- Using Selectors by characteristics - Selecting elements by targeting elements based on specific characteristics like first, last, not, etc...
HTML Tags :
h1 {
/* SOME CSS */
}Class :
.someClass {
/* SOME CSS */
}IDs :
#uniqueID {
/* SOME CSS */
}Selector :
#someID > div:first-of-type {
/* SOME CSS */
}.styledText {
font-size: 16px; /*size in pixels */
font-family: "Times New Roman", Sans Serif; /*Second font is a fallback if it is not available in the browser. Can add as many fall back fonts as you like */
color: orange; /* can use the 140 colors available in css or use hex colors */
font-weight: 700; /*scale of 100-900 with 400 being standard and 700 being normal bold */
text-align: center; /* can do left or right. Can also verticle-align too */
shadow: 2px 2px red; /* the first 2px is used to shadow the text horizontally and the second is used to shadow vertically. Red specifies the color of the shadow */
text-decoration: underline;Google Fonts is a great way to import custom fonts into your website. When visiting Google Fonts a user can click on fonts they like. When they click on a font it gets added to an auto-generated link tag that they can add to their HTML document. Once done add the link to the document and you can start adding custom fonts to your site.
The box model is a CSS Theory that each HTML Element is wrapped in a "box" around itself. Each "box" consitst of 4 properties:
- The Content - What the actual content int he box. This can be a p tag with some text.
- The Padding - How far away from the outside edge of the box the content is.
- Border - The edge of the box.
- Margin - How far away the box is from other boxes
The padding, border, and margin can be adjusted and styled. Each of those can also be selected by top, right, bottom, or left for adjustment.
Margin and padding can be adjusted most commonly using pixels and percentages. Pixels are good for fixed positioning no matter what the screen height or width. Percentages allow for adjustments as the page gets smaller or larger.
#uniqueID {
padding: 20px;
border: 2px solid black;
margin-left: 5%;
}CSS frameworks are libraries that provide styling and animations for your website. There are many out there but some ones worth looking into are: Materialize based on Google Material UI design, Bootstrap which was created by Twitter, and my personal favorite Semantic UI.
CSS Frameworks really speed up development time. Developers can quickly create really nice looking website with a complete UI that comes pre-built. Frameworks can easily handle all cross browser compatability. Not all browsers have the same abilities for CSS. Frameworks handle this and adapt to still lool nice no matter the browser that is being used. Lastly all frameworks come with a pre-built grid system to enforce responsiveness of screen sizes.
CSS Frameworks do speed up development time but there is a learning curve to using them. That initial learning curve can slow down initial development. If a developer chooses to download the minified CSS then they are adding a lot of extra weight on their code. Additionally if they choose to use the CDN, it is another dependency on the code. If the CDN goes down their website will not look good. Additionally if something changes on the CDN it can break some code. Lastly a developers site can look very similar to other sites because many developers use this styling.
Additionally when working with designers, they will generally give you a specific set of instructions for designing UI components that don't always fall inline with a single Framework.
Grid Systems allow a developer to give fixed positioning to an HTML Element on a site by determining where it should go using rows and columns to divide up the page. Different frameworks use different sized grids. For example, Materialize and Bootstrap use a 12 column grid where Semantic UI uses a 16 column grid.
Grid columns can be combined so developers do not have to fit their elements into 12 small columns. Elements can use only 1 column or all columns.
CSS animations can be tricky but they can be done by defining a @keyframes rule and listing it as an animation-name in your CSS block. For example having a block turn from green to red:
<div id="animatedDiv">#animatedDiv {
width: 100px;
height: 100px;
background-color: green;
animation-name: transform-div;
animation-duration: 4s;
}
@keyframes transform-div {
from {background-color: green;}
to {background-color: red;}
}A really great tutorial for learning some CSS Animation is on CSS Tricks
There are many ways to do it alternating rows with different classes is one approach with:
.oddRows {
background-color: white;
}
.evenRows {
background-color: slategrey;
}Another way to do it is to use selectors to target all of the even trs:
tr:nth-child(even) {
background-color: slategrey;
}Using CSS Frameworks such as Materialize come pre-built with "Striped" css features. For example in Materialize this will produce a striped table:
<table class="striped">
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td>Daniel</td>
</tr>
<tr>
<td>Milo</td>
</tr>
<tr>
<td>Annelys</td>
</tr>
</tbody>
</table>The simple answer is:
p {
vertical-align: middle;
}
However it is normally not as simple as that. CSS can get a little complicated depending on if what you are trying to center vertically is a child component. Again CSS Tricks has a lot of great solutions depending on what you are specifically trying to do because it really varies from situation to situation.
I really like Semantic UI over other frameworks because it is simple and I really enjoy the UI of it. It is not flashy like Materialize and is not used commonly used on everything like Materialize or Bootstrap.
- What are the four common ways to target an element?
- What is the box model?
- When would you use a framework and when would you not use a framework?
Build a navbar: https://github.com/danielmarcgardner/NSBE-Webinar-NavBar-Example
Master Branch was what I started with and Branch Solution is the end result.
Build a Fullpage site with Materialize: https://github.com/danielmarcgardner/NSBE-Webinar-Full-Page
Master Branch was what I started with and Branch Styled is the end result.
- Go to galvanize.learn.com
- Once logged in you should see an "Exercises Tab" at the top of the page.
- Navigate to and click on "NSBE Personal Website".
- Paste github link.