Styling (CSS) Introduction

Adding styles to your page

To add CSS (Cascading Style Sheet) to your website you need to add a  <style> </style> tag which will hold the unique CSS markup.

In our exercise app there is a special panel to enter your styles which automatically adds the style tag for you.

CSS Syntax Intro

To add CSS properly you must follow this syntax

First, we have a selector, this tells the CSS which element we want to add the styling to. There are three ways to select an element:

  1. You can use its class with the selector So if you have an element like
    <div class="hello"> Hi </div>  you would use the following CSS code to make it have a black background  .hello { background: black; }
  2. By using the id with the selector
  3. By using the element’s name (ideally only used for anchor or img) where first we select the parent element then add a space and list the element, for example:
    <div class="button">
        <a href="#">Welcome</a>
    </div>

    We would use the following CSS to make the anchor have green text color

    .button a {
       color: green;
    }

    The space indicates an element inside the selected element.

    The proper syntax to specify each style declaration (each thing you’re changing) looks like this:

We enter the property like background then we enter a colon separator so we can define the value we want to set like red and we must end the declaration with a semi-colon ;

Here is sample code with two declarations:

.button a {
    color: green;
    background: black;
}

You can find a nice list of CSS properties you can use here.

 

Tips & Tricks to save you hours!

Absolute must shortcuts!

Command Windows  Mac Preview
Cut
Remove selected text and place it in your clipboard so you can paste it elsewhere. Essential for moving a box into another box!
Ctrl+X ⌘+X
Copy
Copy selected text into clipboard
Ctrl+C ⌘+C
Paste
Paste from clipboard
Ctrl+V ⌘+V
Undo
Go back one change
Ctrl+Z ⌘+Z
Redo
Redo the change you undid
Ctrl+Y ⌘+Shift+Z
Find
Search for some text in the window, like a div class name
Ctrl+F ⌘+F
Find/Replace
Replace a given text like parent to be replaced where found with flex
Ctrl+Shift+F ⌘+Shift+F
Select next/previous word
Highlight each next word quickly to either erase it, copy it, or cut it. An example would be to select a class=”flex” declaration
Alt + Shift + Arrows Alt + Shift + Arrows
Select / highlight a block of text
Hightlight an entire line of text quickly
CTRL+SHIFT+Arrows ⌘+Shift+Arrows
Beginning of the line
Quickly move your cursor to the beginning of the line without highlighting
CTRL+LEFT ⌘+LEFT
Next Chrome Tab CTRL + TAB ⌘+TAB
Switch to Previous Tab CTRL + SHIFT + TAB ⌘+ SHIFT +TAB
Switch between Applications Win + Tab Ctrl+Tab
Switch between the windows of current application Alt+~ ⌘+~

Advanced clipboard

To be able to paste more than the last thing you copied for mac you can use https://tapbots.com/pastebot/ for windows http://www.joejoesoft.com/vcms/97/

Basically instead of clicking Ctrl/Cmd+V you do something like Ctrl/Cmd+Shift+V and it shows you the last 50 things you copied like this

 

Flex Hell Exercise #2

Let’s really get down and dirty with flex

We’ll need to recreate the following box/text setup ourselves

Tips & Tricks

  • Break this down into sections!! (tackle each box one at a time, when done collapse)
  • If there is text that isn’t surrounded by a border on every side (like one) it’s going to have elements appear after it, otherwise there should be a whole box for every other text you see
  • To save time add a class .flex { display: flex; } so you can easily add it to each div that has columns

Use this CodePen and click the Fork button to create your own copy!  Scroll down for final working code example:

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

See the Pen FlexHell by Angel Grablev (@agrublev) on CodePen.0

Flex Exercise #1

The Goal

We want to add 3 columns which contain a bullet image, a title, and some long text. The final result would look like this:

Use this src for the image http://ucsbwebdev.college/first/bullet.png

Remember, the trick is to always set a parent for any columns you want, aka items that appear side by side should have 1 immediate parent!

Scroll down for final solution:

 

 

 

 

 

 

 

 

 

 

 

 

See the Pen MGwYKZ by Angel Grablev (@agrublev) on CodePen.0

 

Creating a website from a design

We’ll learn about building a webpage by following every step of the process for the second Website Project. The final page should look similar to this:

Step 1: Breaking the design into boxes

We’ll start by breaking down the major sections in the website. These are typically easy to spot as they are visually separated. Here is the breakdown:

At this point we can safely add each section to our web page as a div which has the class of the named section like this:

<div class="header">

</div>

Or we can continue to break down each section into smaller boxes. I’ll go through each section and how to break it down. Let’s start with the header

The header has two columns, one that appears on the left and houses the logo, and one that is on the right and has our navigation.

Important: To create columns you need a parent

In this situation, we want two columns in the header, meaning that we’ll need to have only two direct children inside the element. This is already going to be the case as long as we’ve created a div.header and added inside two elements, the img.logo and div.menu. However, in other situations, there may be a third element that should remain on a separate row. For example:

In this situation, if we simply added the 3 elements inside the parent we would get 3 columns if we applied flex to the parent. To resolve this we’ll need to add an additional element that wraps the image on the left and the title on the right. This new element is the immediate parent of the two children that should appear as columns.

<div class="main-parent">
    <img src="image.png">
    <div class="title">Title</div>
    <div class="description">
        Description Here
    </div>
</div>

<!-- SHOULD NOW BE -->

<div class="main-parent">
    <div class="flex-parent">
        <img src="image.png">
        <div class="title">Title</div>
    </div>
    <div class="description">
        Description Here
    </div>
</div>

As you can see the before only has 3 immediate children inside the .main-parent which are img, div.title, and div.description. In the second piece of code .flex-parent has only two direct children img and .title meaning that they will be the only two items appearing next to each other.

Back to the header

Okay let’s resume with the header

There are two direct children of .header

<div class="header">
    <img src="logo.png">
    <div class="menu">
        <a href="#" class="menu-item">
            Home
        </a>
        <a href="#" class="menu-item">
            Features
        </a>
        <a href="#" class="menu-item">
            ...
        </a>
    </div>
</div>

The img and the .menu. Inside the menu box, we simply add our links with a class .menu-item. We’ll need the classes on the anchors because that’s the only way to change their color from the default blue later on.

Next, we break down the hero

Inside the .hero box, we only have 3 elements (no columns). The big title becomes .main-title and then the text below .main-description and finally the button .main-button

The sub-points section has 3 columns, meaning we need 3 immediate children called .sub-point-column. Inside each, we’ll need two rows, the .sub-point-header which will contain the img and the .sub-point-title allowing them to display as columns when flex is applied, and the .sub-point-description for the paragraph of text.

The communicate section has two columns, the first is the img on the left, the second is the wrapper called .communicate-right-column  because if we had the title and description without a wrapper they would both appear as columns, instead we want them to appear as rows and we add the parent wrapper to house .communicate-title and .communicate-description.

The about section is probably the most difficult one. The first part is realizing that the top title “ABOUT SIMPLA” is an element on its own called .about-title row followed by another element .about-columns which is needed to make its children into flex columns.

Inside the .about-columns we have two immediate children .about-left and .about-right. Inside the left column, we’ll also need a header element called .about-left-header which will be flexed to have two immediate children which are columns. An img and a .about-left-title will be directly inside the header box. After that, we add the description box .about-left-description and with that, the left side is done.

In the right column we need the special title .about-right-title then for each skill, we’ll add a new box .about-right-skill. Which contains two immediate children .about-skill-header and img (which contains the percent indicator in blue). Inside the .about-skill-header (which is not written in the image example as there is no space) we have two children, .about-skill-title which should appear on the left as a column (meaning .about-skill-header is flexed) and .about-skill-percent which is the right column containing the number of percents.

The footer is quite straightforward. We have 3 immediate children which will be columns named .footer-column. Inside the first two we add a .footer-title and a .footer-description. In the last column instead of a description, we add a .footer-gallery to allow its immediate children img to display as columns.

Step 2: Adding the boxes as HTML

Now let’s convert each section into HTML code

<div class="header">
    <div class="logo">
        <img src="http://ucsbwebdev.college/sites/second/logo.png">
    </div>
    <div class="menu">
        <a href="#" class="menu-item">
            Home
        </a>
        <a href="#" class="menu-item">
            Features
        </a>
        <a href="#" class="menu-item">
            Portfolio
        </a>
    </div>
</div>

<div class="hero">
    <div class="main-title">
        Welcome
    </div>
    <div class="main-description">
        WElcome to my call to action
    </div>
    <a href="#" class="main-button">
        Learn More
    </a>
</div>

<div class="sub-points">
    <div class="sub-point-column">
        <div class="sub-point-header">
            <img src="http://ucsbwebdev.college/sites/second/bullet1.png">
            <div class="sub-point-title">
                Understand the project!
            </div>
        </div>
        <div class="sub-point-description">
            IJjisd iasjd aiosjd oisaj doiasjd iosaj dioasjd oiasjd oiasjd oiasj dioasjd ioasjd ioasjd
        </div>
    </div>
    <div class="sub-point-column">
        <div class="sub-point-header">
            <img src="http://ucsbwebdev.college/sites/second/bullet1.png">
            <div class="sub-point-title">
                Understand the project!
            </div>
        </div>
        <div class="sub-point-description">
            IJjisd iasjd aiosjd oisaj doiasjd iosaj dioasjd oiasjd oiasjd oiasj dioasjd ioasjd ioasjd
        </div>
    </div>
    <div class="sub-point-column">
        <div class="sub-point-header">
            <img src="http://ucsbwebdev.college/sites/second/bullet1.png">
            <div class="sub-point-title">
                Understand the project!
            </div>
        </div>
        <div class="sub-point-description">
            IJjisd iasjd aiosjd oisaj doiasjd iosaj dioasjd oiasjd oiasjd oiasj dioasjd ioasjd ioasjd
        </div>
    </div>
</div>

<div class="communicate">
    <img src="http://ucsbwebdev.college/sites/second/idea-image.png">
    <div class="communicate-right-column">
        <div class="communicate-title">
            Communicate your idea
        </div>
        <div class="communicate-description">
            jsadioas jdojas dij asjasdoij asoidj asiodj asd
            asdij asoidj aisodj aiosdj ioasd ioasjdas
            dasjiod ioasjd ioasjd ioajs d
        </div>
    </div>
</div>

<div class="about">
    <div class="about-title">
        Title of about
    </div>
    <div class="about-columns">
        <div class="about-left">
            <div class="about-left-header">
                <img src="http://ucsbwebdev.college/sites/second/about-title-image.png">
                <div class="about-left-title">
                    Title of left col
                </div>
            </div>
            <div class="about-left-description">
                ijsadoj asidoja sdioj asiod jasiod jaiosd ioas disad
            </div>
        </div>
        <div class="about-right">
            <div class="about-right-title">
                Our Skills
            </div>
            <div class="about-right-skill">
                <div class="about-skill-header">
                    <div class="about-skill-title">
                        WORD PRESS
                    </div>
                    <div class="about-skill-percent">
                        65%
                    </div>
                </div>
                <img src="http://ucsbwebdev.college/sites/second/skills-1.png">
            </div>
            <div class="about-right-skill">
                <div class="about-skill-header">
                    <div class="about-skill-title">
                        WORD PRESS
                    </div>
                    <div class="about-skill-percent">
                        65%
                    </div>
                </div>
                <img src="http://ucsbwebdev.college/sites/second/skills-2.png">
            </div>
            <div class="about-right-skill">
                <div class="about-skill-header">
                    <div class="about-skill-title">
                        WORD PRESS
                    </div>
                    <div class="about-skill-percent">
                        65%
                    </div>
                </div>
                <img src="http://ucsbwebdev.college/sites/second/skills-3.png">
            </div>
        </div>
    </div>
</div>

<div class="footer">
    <div class="footer-column">
        <div class="footer-title">
            Title
        </div>
        <div class="footer-description">
            Description
        </div>
    </div>
    <div class="footer-column">
        <div class="footer-title">
            Title
        </div>
        <div class="footer-description">
            Description
        </div>
    </div>
    <div class="footer-column">
        <div class="footer-title">
            Title
        </div>
        <div class="footer-gallery">
            <img src="http://ucsbwebdev.college/sites/second/footer-1.png">
            <img src="http://ucsbwebdev.college/sites/second/footer-2.png">
            <img src="http://ucsbwebdev.college/sites/second/footer-3.png">
            <img src="http://ucsbwebdev.college/sites/second/footer-4.png">
        </div>
    </div>
</div>

Step 3: Making columns appear

To make each box that has columns work we need to apply display: flex;

To save time, and make it easier to work with, we’ll create one single class called flex which we can add to all parents that have columns. So in our style declaration, we add

.flex {
    display: flex;
}

Then for each element like the header we add the class flex by adding a space after the initial class like this

<div class="header flex">

The following elements should have the flex class added

  • header
  • menu
  • communicate
  • sub-points
  • sub-point-header
  • about-columns
  • about-left-header
  • about-skill-header
  • footer
  • footer-gallery

In some situations, like the .header we want the columns to have space between them and display on each side. To do this we use a flex property called justify-content with value space-between to look like this

.header {
    justify-content: space-between;
}

We should add this style declaration to the following classes

  • header
  • menu
  • communicate
  • sub-points
  • about-columns
  • about-skill-header
  • footer
  • footer-gallery

Your stylesheet should look something like this

.header {
    justify-content: space-between;
}
.menu {
    justify-content: space-between;
}
.communicate {
    justify-content: space-between;
}
.sub-points {
    justify-content: space-between;
}
.about-columns {
    justify-content: space-between;
}
.about-skill-header {
    justify-content: space-between;
}
.footer {
    justify-content: space-between;
}
.footer-gallery {
    justify-content: space-between;
}

In some situations, we need to have the columns align vertically to be centred like in the .sub-point-header where the image needs to be exactly on the same level as the .sub-point-title. To do this we use another flex property called align-items with value center like this

.sub-point-header {
    align-items: center;
}

Apply it to the following

  • sub-point-header
  • about-left-header
  • about-skill-header

Step 4: Adding images

To add all the images needed please use the following link https://www.dropbox.com/s/yzzwaswuhlimjgp/colors-and-links.txt?dl=0

Step 5: Adding styling

To finalize the website we need to add some styling. Let’s start with the header.

In the header the menu items are links which appear blue and underlined. To adjust this we have to override the browsers default styling for an anchor by specifying a style declaration which targets the links, in our case we used the class .menu-item

So we need a style like this

.menu-item {
    color: #787878;
    text-decoration: none;
}

The color declaration change sit from blue to dark gray, and the text-decoration will remove the underline. Now to make these items spaced nicely and increase the clickable area so it’s easier to click we need to first change the anchor from an inline element (used when shown amongst other text) to an inline-block element which gives it ability to distance itself in any way we see fit. Should now look like this

.menu-item {
    color: #787878;
    text-decoration: none;
    display: inline-block;
    padding: 20px;
}

I also added some padding which adds spacing inside the element.

Inside the hero we need to make the text of the title big, white, and bold. To do this we’ll use the same color property as above and we need font-size alongside font-weight which we set to bold. 

.main-title {
    font-size: 100px;
    font-weight: bold;
    color:white;
}

We’ll probably also want to add some distance underneath it, to do this we use margin which pushes away from the outside. So to push below we do

.main-title {
    font-size: 100px;
    font-weight: bold;
    color:white;
    margin-bottom: 20px;
}

Notice we added margin-bottom which only changes the bottom push.

We’ll also want to make all text inside the hero centred and add the hero background image. For this we use text-align and then set a background with the url(); value

.hero {
    text-align: center;
    background: url(http://ucsbwebdev.college/sites/second/hero.png);
}

Do the same color change as we did for the .main-title to the .main-description and also apply similar styling to the .main-button as we did to the .menu-item buttons. One additional thing we’ll add is a white border which is done with border: 1px solid white;

Using the same color, font-size, margin-bottom, and font-weight add more styling to make the website look closer to the final product.

In the footer we can add a border to the .footer-title only on the bottom just like this

.footer-title {
    border-bottom: 2px solid #ccc;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 15px;
}

After you’ve played around let me know and i’ll assist you with getting it finalized!

  • 1
  • 4
  • 5