Lab 3.1 - CSS Fundamentals

Scripting With Style

In this lab we shall cover the fundamentals of CSS

Task 1

Follow the link below to open the repl. Fork the project then sign in.

Open Lab 3

Every HTML element has the following properties which determine their sizing and layout.

Height
Width
Padding: Spacing within an element
Border: The edges of the element
Margin: Spacing outside the element

Together these properties make up the box model

Padding, margin and border can have specific styles applied to its four directions, top, right, bottom and left.

Task 2

Update index.html the following and view the result

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
        <style>
                div{
                        background-color: lightgrey;
                        width: 300px;
                        border-bottom: solid;
                        padding: 50px;
                        margin:20px 10px 40px 20px;
                }
        </style>
  </head>
  <body>
        <div>
                This the div content
        </div>
    <script src="script.js"></script>
  </body>
</html>

Open the preview in a new tab by clicking the "Open in new tab" () button.

In the new tab right click the element and select inspect (chrome). This will open the chrome dev tools debugger and allow you to visualize the box model of the element.

If you want the same value for all directions simply use the generic property and provide the single value.
Example: padding : 50px

However, if you want the same value specified for all directions then simply provide the single value to the generic property.
Example: border-bottom: solid

If you want to style all directions with different values then the generic property can be used but with multiple values in the order top, right, bottom and left.

Example: margin: 20px 10px 40px 20px;

Most elements have an inherent display property which has the value block or inline. There can be 4 possible values for display.

block: The element always starts on a newline and takes up the full width of its parent
inline: The element only takes up the necessary space for it to be displayed
inline-block: Allows the width, height, margins and paddings to be set on an inline element without breaking the line
none: Hides an element from the dom but preserving its space
grid: Used for grid layout
flex: Used for flex layout

Task 3

Use the :hover pseudo class to hide elements of an ordered list when the mouse hovers over them.

Solution:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
        <style>
        li:hover {
           display: none
        }
        </style>
  </head>
  <body>
        <ol>
           <li>Item 1</li>
           <li>Item 2</li>
           <li>Item 3</li>
           <li>Item 4</li>
        </ol>
    <script src="script.js"></script>
  </body>
</html>

Text elements can be styled with several properties some of them are as follows:

color: changes the colour
line-height: sets the vertical spacing of text lines
text-decoration-line: eg underline, overline, line-through
text-decoration-color: eg red, blue, #F5F5f5
text-decoration-style: eg solid, wavy, dotted, dashed, double
text-decoration: a combination of line, color and style eg underline wavy blue
vertical-align: vertical alignment; baseline, text-top, text-bottom, sub, super
text-align: horizontal alignment; left, center, right, justify

Task 4

Edit index.html to complete the following

Delete the styles and the unordered list from the previous task.
Add a section element to the page with a height of 80vh which should contain the following elements
Add a heading 1 element with the content "Sample Poem"
Add a heading 2 element with the title of a poem of your choice
Add the poem below to the page placing each stanza in a paragraph tag.
Center align the heading 2 element
Justify the content of the paragraphs
Add a solid black over and underline to the heading 2

You can use the following content for the poem

We use the following properties to affect the display of fonts of the text in an element.

font-family: Affects the typeface used eg Times new Roman , Arial
font-size: Affects the size eg 34px
font-style: normal, italic, oblique
font-weight: Affects the thickness of the font; normal, bold, bold, lighter, 100-900

Task 5

Edit index.html to complete the following on the poem from Task 4

Using span elements and an appropriate class style the first word of every paragraph to be bold.
Style all paragraphs to have a width of 50vw and set the left and right margins to auto

Your result should look something like.

We can style the background of your elements to be an image, solid color or gradient.

Replace the entire contents of index.html with the following

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
    <style>
          .bold{
                 font-weight: bold;
           }
            
           h2{
                 text-align: center;
                 text-decoration: underline overline solid black;
           }

           p{
                 text-align: justify;
                 width:50vw;
                 margin-left: auto;
                 margin-right: auto;
           }

           section{
                 border-bottom: 5px solid black;
           }

           #section1{
                 height: 80vh;
           }

           #section1::before{
             background-image: url("https://images.unsplash.com/reserve/LJIZlzHgQ7WPSh5KVTCB_Typewriter.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
             background-size: stretch;
             background-position: center;
             content: "";
             position: absolute;
             width:100%;
             height: 100%;
             z-index: -2;
             opacity: 0.3;
           }

          #section2{
             padding: 2em;
             color: white;
             height: 60vh;
             background: rgb(131,58,180);
             background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(29,211,253,1) 50%, rgba(252,176,69,1) 100%);
           }

    </style>
  </head>
  <body>
    <section id="section1">
              <p>
                    Why won't students come to labs? This is something I always ponder. 
                    After unprepared students write exams, They watch their marks in wonder. 
              </p>
               <p>
                   Why won't students come to labs? What is more important than class? 
                   How can you be a student if you don't even try to pass?
               </p> 
                <p>
                   Why won't students come to labs? It happens all the time. 
                   If you came to labs, you'd know what to do. But you would rather duck and go lime.
               </p>
               <p>
                  Why won't students come to labs? I see them all now stressing. 
                  If you only learned this basic programming, You would surely now be zessing.
                </p>
      <!-- This is how html comments are done btw -->
    </section>
    <section id="section2">
         <h1>Section 2</h1>
    </section>
    <script src="script.js"></script>
  </body>
</html>

This should apply an image background to section 1 and a gradient background to section 2.

The selector ‘::' is used to specify pseudo elements. We use the pseudo element "before" to write a background image to the dom before the section 1 element. The styles within the selector is just a recipe we follow for displaying background images while keeping the text readable.

Just like margin, borders of all 4 directions of an element can be set in one line or individually. Some properties for styling borders are as follows:

border-style: type of border dotted, dashed, solid, double, groove, hidden, none
border-color: sets the colour
border-radius: sets the curvature of the border eg 5px
border-width: sets the thickness eg 10px;
border-[direction]-[property]: styles an individual direction of a border eg border-top-width
border: used to set all properties in all directions in one line eg. 5px dotted red

Task 7

For each section add a solid black bottom border of 5px thick.

You should now have a border separating your sections.

Outlines are drawn outside of an element's border and are used to highlight an element.

Outlines are styled similarly to borders with the following properties and values:

outline-style: type of outline dotted, dashed, solid, double, groove, hidden, none
outline-color: sets the colour
outline-radius: sets the curvature of the outline eg 5px
outline-width: sets the thickness eg 10px;
outline-[direction]-[property]: styles an individual direction of a outline eg outline-top-width
outline: used to set all properties in all directions in one line eg. 5px dotted red

Task 8

Use the :hover pseudo class to add a red double outline 2px thick around any paragraph which is hovered by the mouse.

Solution

p:hover{
        outline: 2px double red;
}

This should create the following effect.

Overflow is used to make content scrollable on a page when it cannot fit into the space allocated for it. Typically we want to avoid nested scrollbars in our application so if elements on a page are scrollable in a direction then the page itself should not be scrollable in the same direction. The overflow properties are as follows:

overflow-x: affects horizontal scrolling
overflow-y: affects vertical scrolling
overflow: affects scrolling in both directions.

Overflow properties can have the following values:

visible Contents are allowed to spill outside of their elements box (default);
hidden Removes the scrollbar
scroll Adds a scroll bar to make content viewable and fit in the element.
auto Makes the content obey the element width and become scrollable if it cannot fit in the element

Let's resize our sections so that they both fit on the page.

Update the styles in index.html to the following.

<style>
.bold{
  font-weight: bold;
}

h2{
  text-align: center;
  text-decoration: underline overline solid black;
}

p{
  text-align: justify;
  width:50vw;
  margin-left: auto;
  margin-right: auto;
}

section{
  border-bottom: 5px solid black;
  height: 40vh;
  overflow-y:scroll
}

#section1::before{
  background-image: url("https://images.unsplash.com/reserve/LJIZlzHgQ7WPSh5KVTCB_Typewriter.jpg?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=80");
  background-size: stretch;
  background-position: center;
  content: "";
  position: absolute;
  width:100%;
  height: 40vh;
  z-index: -2;
  opacity: 0.3;
}

#section2{
  padding: 2em;
  color: white;
  background: rgb(131,58,180);
  background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(29,211,253,1) 50%, rgba(252,176,69,1) 100%);
}

p:hover{
  outline: 2px double red;
}
</style>

Now both sections fit on the page with their individual scrollbars. Notice there is no nested scrolling.

Shadows add depth to the elements on a webpage and come in two properties.

box-shadow: used to add a shadow on an element:
text-shadow: used to add a shadow on text

We can use tools like a box shadow generator to generate the styles needed for our desired shadow effect.

Task 10

Add a 400px by 300px div in the center of the second section with a white background colour, 4px border radius, a 5px padding and a box shadow of your choice using the generator. The div should have a heading2 with the text "My Div" in black and centered and no text decoration.

div{
  width: 400px;
  height: 300px;
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  margin-bottom: auto;
  background-color: white;
  color: black;
  text-align: center;
  box-shadow:  0 8px 16px 0 rgba(0,0,0,0.2);
  border-radius:4px;
  padding: 5px;
}

div> h2{
  text-decoration: none;
}

Notice we must select the h2 child element and apply a text decoration of none so that it overrides the other h2 style written in task 4.

This should produce the following result.

That's it for your first real dive into css, the next lab will go into things like animations and layout.

Exercise

You are required to add styles to a page to achieve the design below. You are not allowed to change any markup on the page.

How to read the Specifications

The specifications are categorised by test suites and test cases. A test suite specifies a css selector, while a test case specifies a css rule.

Example The follow spec:

Test Suite	Test Cases
All tables	must have a blue background must have white text

Is satisfied by the following CSS

table {
    color: white;
    background-color: blue;
}

Add styles to the following workspace according to the specification below.

Test Suite	Test Cases
The Body	must be full width must have no spacing outside of its border in any direction must have no spacing between its content and border in any direction must be coloured #fafafa
The Stories Section	Must be 90px tall Must be as long as 70% of the Viewport Must have a space of -5px outside the top of the element's border Must be spaced automatically outside the left of the element's border Must be spaced automatically outside the right of the element's border Must have a 1px solid border coloured #b5b5b5; Must have the corner of its borders curved by 2px Must have a space of 30px between the element's content and left border.
The User class	Should be as long as 18% the of its parent's width Should be displayed as an inline block
The paragraph descendants of the user class	Should be centre aligned Should have no spacing outside of its borders Should be in "Lucida Sans Unicode" font Should have a weight of 100 Should have be in smaller font
The post-header class	Should be coloured white Should be 50px tall Should be sized according to its border Should inherit its parents width Should have a spacing of 5px between its content and border Should have a 1px solid border on the bottom coloured #b5b5b5
The Navbar	should be displayed as an inline-block should be coloured white must be full width must be 54 pixels tall must have a solid border below it that is 1 pixel thick with the colour #e5e5e5
The instagran Image	must be 40px tall must positioned relative to its parent
The search box	must be 25px tall must be positioned relative to is parent must be have a width that spans 30% of the viewport width must be positioned 35vw to the left must be positioned 35vw to the right must be coloured #fafafa must have its text-centred must have a solid #b5b5b5 coloured 1px thick border rounded with a radius of 3px
The actions image	must be 40px tall must be positioned relative to is parent must be positioned 0px to the right of its parent
Test Suite 1 The Image Descendants of the User Class	Should have a 5px space on the top Should have a rounded border that is 50% of its parent in size Should have a double border 4px thick and coloured #b5b5b5 Should be 56px wide Should be 56px tall Should be displayed as a block Should have an automatic spacing to the left of the element Should have an automatic spacing to the right of the element
Test Suite 2 the post class	Should have a solid 1px border #b5b5b5 in colour Should have a rounded border with a curve of 2px Should have a height that is 60% of the viewport height Should have a width that is 560px wide Should have a 119px spacing to the left of the element Should have a 119px spacing to the right of the element Should have a 10px space above the element
Test Suite 3 the post-header class	Should be coloured white Should be 50px tall Should be sized according to its border Should inherit its parents width Should have a spacing of 5px between its content and border Should have a 1px solid border on the bottom coloured #b5b5b5

Exercise Workspace