Stylesheet

Cascading Style Sheets or CSS are used to customize appearance styles. With CSS do you influence style for example paragraph, heading, link, etc. Here we study the basics.

Proposed time: at least 20 hours.

This lecture is linked to Learning Objective 9.

This study module is individual and can be studied at any time.

Stylesheets UP

A browser's task is to interpret the HTML and rename (view) the result. If no further Style information is available, so the browser's built-in feature is used. CSS code replaces browser's built-in "style". Examples of styles can be font, text size and color.

Purpose with CSS UP

The sooner you understand the following, the easier you get with the understanding of CSS.

The purpose of the "style language" CSS is to set over the browser's built-in style template. You can not get into a mode where no style prevails.

This is important!

  • The browser has a built-in style template
  • All written CSS code over ride the browser's embedded stylesheet on the respective HTML elements

HTML together with the Cascading Style Sheet (CSS) technology combines web design.

Here you will learn how CSS provides style to HTML.

Open standard UP

The W3C.org standardization agency works with many open technical standards and CSS is one of them. Instead of treat and upgrade the entire CSS as a singularity, then split up Module's and collections of updated modules are published in so-called Level's. These constantly updated and improved modules and levels are documented as new Snapshot's with one or a few years apart. A web browser therefore needs to be able to implement all of these recommendations and it is inter alia therefore we have updates for just the browser.

The Working Group definition on different statuses

        
  1. Working Draft (WD)
    2.     
  2. Last Call Working Draft (LC or LCWD)
    3.     
  3. Candidate Recommendation (CR)
    4.     
  4. Proposed Recommendation (PR)
    5.     
  5. W3C Recommendation (REC)

The CSS Snaphot 2017 (latest) documentation contains completed modules since January 31, 2017.

CSS Selectors UP

Using CSS code to override the browser's existing style is by entering a (or more) HTML element (type. p, img, h1, a, table, etc.). In the CSS code, the designated HTML element is called Selector and provided with its new Declaration according to a Property - Value format. Several declarations are separated by a semi-colon sign. CSS code containing selectors and declarations is called Rules.

picture 1. A selector and it's declaration (credit: w3schools.com)

h1 { color: blue; font-size: 12px; }

Code 1. Selectorn H1 and it's declaration

Result

Warning

Result where H1 is blue and font-size is 12px

Think layer UP

Now we have studied HTML, CSS in relation to information. Advantageously, you share the work with one web page in three layers.

  • The information - In its purest form, completely unformatted. What should it consist of
  • Structure - The markup language structures information and talks about what is heading, paragraph, link, etc. This is done exclusively with HTML
  • Style - Final presentation of structured information, usually with the intention of increasing understanding, readability etc. This is done exclusively with CSS

Each HTML element has its attributes and many attributes can be applied to several of the HTML elements. A img may have the height attribute and the same attribute can also be a tr (table row).

Get Started Practically UP


Introduction to CSS in VS Code (11.51)
Introduction to DIV & SPAN with VS Code (16.05)
Introduction to layout with HTML, CSS and VS Code (14.04)
Introduction to CSS - Box Model (4.18)
Introduction to CSS - Colors (12.06)

Bootstrap UP

Bootstrap is a framework for HTML/CSS/JS and simplifies everyday designs on the user interface. Developers on Twitter have created Bootstrap and The result has become very popular among web designers.

Bootstrap is nothing more than a well-written stylesheet class that can be used on HTML files throughout. bootstrap described, and can be downloaded from getbootstrap.com.

After downloading the bootstrap.min.css file and linking it into your own project, it is clear that used. Below is an example ...

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap Test</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
</head>
 
<body>
    <!--Innehållscontainer med Bootstrap-->
    <div class="container">

        <h1 class="page-header">Hello, world!</h1>
 
        <!--Typografi med Bootstrap-->
        <p class="lead">Fugiat laboris consequat irure eiusmod consectetur
              laborum ad id aliquip qui eiusmod ullamco sunt in.</p>
        <p>Voluptate reprehenderit quis amet ex sunt veniam excepteur ea
              aliqua duis exercitation. Laboris nostrud sit ipsum commodo
              nulla excepteur eu officia. Id et id sint ex ipsum quis ad dolor
              adipisicing ex. Reprehenderit laborum id tempor laborum.</p>
        <hr>
 
        <!--Text Justeringar med Bootstrap-->
        <p class="text-left">Vänsterjusterad text</p>
        <p class="text-center">Centrerad text</p>
        <p class="text-right">högerjusterad text</p>
        <p class="text-justify">Marginaljusterad text</p>
        <p class="text-nowrap">Enkelrad Enkelrad Enkelrad Enkelrad Enkelrad...</p>
        <hr>
 
        <div class="pull-right">Div justerad till höger</div>
        <div class="pull-left">Div justerad till vänster</div>
        <div class="clearfix"></div>
        <hr>
 
        <!--Listor med Bootstrap-->
        <ul class="list-unstyled list-inline">
            <li>ett</li>
            <li>två</li>
            <li>tre</li>
        </ul>
        <hr>
 
        <!--Bilder med Bootstrap-->
        <img src="images/face320x400.jpg" height=100>
        <img class="thumbnail" src="images/face320x400.jpg" height=100>
        <img class="img-rounded" src="images/face320x400.jpg" height=100>
        <img class="img-circle" src="images/face320x400.jpg" height=100>
        <hr>
 
        <!--Länkar med Bootstrap-->
        <a class="btn btn-default"   href="#">Länk</a>
        <a class="btn btn-primary" href="#">Länk</a>
        <a class="btn btn-success" href="#">Länk</a>
        <a class="btn btn-info"       href="#">Länk</a>
        <a class="btn btn-warning" href="#">Länk</a>
        <a class="btn btn-delete"  href="#">Länk</a>
        <a class="btn btn-link"    href="#">Länk</a>
    </div>
 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
</body>
 
</html>

Kod 2. HTML-element with Bootstrap class
Introduction to Bootstrap (16.55)
Introduction to Bootstrap typography (15.07)
Introduction to effective use of Bootstrap (10.50)

Layout with CSS UP

Since 2017, a draft new standard has been dealt with and recommended on W3.org called CSS-Grid Layout. The proposal has CR status (written September 2018). The module in CSS allows you to create blocks using DIV element to create a layout on a web page. Study the movie below.

Introduction to CSS Grid Layout (19min 48sec)

Individual task UP

  • If you are new to HTML, I recommend that you follow the videos and learn by them.
  • When you understand the principle of how you can override Bowsers built in style for HTML, you are ready for LAB1
Published by:
Johan Sundström
Page updated 9/17/2020 11:37:12 AM