CSS and Bootstrap MIS 2402 Jeremy Shafer Department of MIS Fox School of Business Temple University
Recall from last time… The URL you asked for … The response you got back.
What’s in the response? A successful response will return at least one text file. (Really, usually more than one… but let’s start here!) In the HTTP response you are likely to find all three of these languages in a single text file. HTML and CSS are special purpose languages, while JavaScript is a general purpose programming language. HTML CSS JavaScript Each language is interpreted by the browser and each language has a job to do.
Our focus for today … HTML CSS JavaScript CSS is our focus for today … as well as a nice CSS framework called Bootstrap.
How to specify a CSS rule The pattern: selector { property : value ; … } For example: .banner { background-color: red; font-weight: bold; font-style: italic; width: 100%; } The rule in the example above tell us that any HTML tag with the of class banner will have a red background, and that any text inside the tag will be styled as bold and italic. The tag’s width will take up 100 percent of the width available to the tag.
What’s a selector? The pattern: selector { property : value ; … } The selector here indicates the HTML elements in the document that should be altered by the CSS rule. There are three simple options here, and many other variations on those simple options. But, basically, the selector can be: The name of a tag A specific tag identified by an id A collection of tags identified by a class The pattern: selector { property : value ; … } Take a moment and look at selector_example.zip
An example of different selectors The CSS rules: p { font-weight: bold; font-size: 2em; } #unique_and_pretty { font-weight: default; background-color: pink; color: white; .pretty { font-style: italic; The HTML: <p> I feel pretty </p> <p id='unique_and_pretty’> Oh, so pretty </p> <p> I feel pretty and witty and bright! </p> <p class='pretty’> And I pity </p> <p class='pretty'> Any girl who isn't me tonight </p> <p> I feel charming </p> <p> Oh, so charming </p> <p> It's alarming how charming I feel! </p> <p> And so pretty </p> <p> That I hardly can believe I'm real </p> Notice that class selectors are prefixed with a “.” id selectors are prefixed with a “#” and tag selectors have no prefix.
Our example in a browser The HTML: <p> I feel pretty </p> <p id='unique_and_pretty’> Oh, so pretty </p> <p> I feel pretty and witty and bright! </p> <p class='pretty’> And I pity </p> <p class='pretty'> Any girl who isn't me tonight </p> <p> I feel charming </p> <p> Oh, so charming </p> <p> It's alarming how charming I feel! </p> <p> And so pretty </p> <p> That I hardly can believe I'm real </p> It turns out the idea of a selector is pretty important one. If you memorize these basic CSS selector conventions now, you will be better off later on the course!
The tricky part… For the new learner the tricky part is, of course, learning what all the possible CSS attributes and values are. A good reference can be found here: https://www.w3schools.com/cssref/default.asp In this course, we will use a very small subset of the CSS properties and will introduce new ones as needed. If you ever see a new-to-you CSS property that you don’t recognize you should either look it up or ask about it. Here are the properties highlighted in your HTML Essentials Reference: background-color, font-size, font-family, padding, margin, width
Where do the CSS style rules go? CSS style rules can be specified in one of two places: Inside the current document (this is an internal style sheet) Outside the current document (this is an external style sheet!) Technically, there’s a third way to apply a CSS style. It is called an inline style. It is advisable to use inline styles sparingly…. or not at all! So, we’re going to disregard inline styles for the moment.
Where do the CSS style rules go? (2) Internal style sheet: <head> <style> h1 { color: blue; margin-left: 40px; } body { font-family: "Arial"; } </style> </head> External style sheet: <head> <link rel="stylesheet" href="mystyle.css"> </head> Look! We used the HTML tag <link> to reference an external resource. The <link> tag had the attributes rel and href.
As it turns out… As it turns out making attractive, easy to use, html pages can require a lot of CSS. And it takes even more CSS to make html pages that are responsive. (HTML pages with a “responsive web design” will automatically adapt to present themselves adequately on different devices.) So… if designing for just one form factor (like a laptop screen) was hard, imagine trying to design for a desktop, big screen TV, tablet and mobile device. Sigh… if only people would stop inventing things.
It would be nice if… It would be nice if some expert web developers got together and made a bunch of CSS classes for everybody to use. That way: Most developers wouldn’t have to start from scratch with every new project. More web pages would have a similar appearance, making the whole internet itself just a little bit more friendly for everyone to use. Well, guess what?? … that happened.
Bootstrap In 2011 Bootstrap was released by a development team at Twitter. Bootstrap is a CSS framework. (A framework is a collection of existing technologies, bundled together in a new, novel, and consistent way. Bootstrap is a convenient way to get a flexible grid layout. Bootstrap is free to use, Open Source, and remains popular today. To “bootstrap” something is a figure of speech. It means to start up, or begin.
Before you begin… Before you begin doing anything with bootstrap, you need to add in a number of references to the <head> tag of the html document. The following code sample will be used repeatedly throughout the remainder of the course. <head> <title>SOME TITLE HERE</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Bootstrap 4 References --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <!-- Link to FontAwesome --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Your custom CSS --> <link rel="stylesheet" href="css/SOMETHING_HERE.css"> </head>
What was all that?? Those long URLs we just saw are called Content Delivery Network (CDN) references. A CDN is a server farm set up to deliver content to web users as efficiently as possible. It is common for popular frameworks (like Bootstrap) to be distributed in this way. Pro tip! Knowing what a CDN URL is, and how to add one to your solution, is a powerful way to extend the options available to you, the programmer. You don’t need to download or install anything to start using bootstrap. Just include the CDN reference in the <head> of your HTML document and your browser does the rest!
Next step… <div class="col-sm-12">Some Content here.</div> Once you have linked the bootstrap CDN references, you get a whole bunch of classes set up for you, for free! The “container” class is essential. Everything needs to be inside of it. The “row” class is almost as important. Use it to specify groupings of columns. Finally, there are a number of classes named with the pattern col-sm-?. (huh?) <div class="col-sm-12">Some Content here.</div> Number of spans
Spans should add up to 12 Width in spans <div class="col-sm-12">Some Content here.</div> “sm” is short for “small” There are other acceptable abbreviations, like “md” and “lg”. But we will always use “sm”. In bootstrap, 12 spans equate to the full width of the page. Think of one span as one twelfth of the page width. The bootstrap grid system is responsive, and the columns will re-arrange automatically depending on the screen size. Best practice: make sure that the column widths add up to 12.
Some sample code for a 3 column layout <div class="container"> <div class="row"> <div class="col-sm-4">A</div> <div class="col-sm-4">B</div> <div class="col-sm-4">C</div> </div> A B C
Another example 6 spans ROW #1 6 spans CONTAINER ROW #2 2 spans
Contextual Classes Bootstrap also gives us contextual classes. For example, there are CSS classes for background colors: .bg-primary, .bg-success, bg-info, bg-warning, and .bg-danger <p class="bg-primary">This text is important.</p> <p class="bg-success">This text indicates success.</p> <p class="bg-info">This text represents some information.</p> <p class="bg-warning">This text represents a warning.</p> <p class="bg-danger">This text represents danger.</p> The class names are “contextual” because they convey the meaning of the style, not it’s appearance.
Contextual Classes - buttons See index.html in mis2402_rwd.zip
Flexible Images Flexible Images are necessary to scale images fluidly. The CSS attribute that allows us to do this is: max-width: 100%; That is, if we apply that style to an image, then it will expand (or shrink) to the size of its containing element. Note: It’s important to have a containing element! There are a number of extra steps that are necessary to implement this effect in legacy browsers… like IE9. Assuming that you are using a browser released in the last few years you don’t need to worry about that!
FontAwesome FontAwesome is technically separate from Bootstrap. But the two CDN references commonly appear together. FontAwesome is a way to bring icons into your HTML pages with very little effort! Here are some examples:
When we meet next…