Style starts here CSS was created to separate the styling from the structure of an HTML document. We’ll explore three types of CSS inclusions: inline, internal, and external. We’ll only focus on the basics. We’ll style text, images, and a few other HTML elements. The main focus of this chapter though will be on responsive design. Responsive design allows your website to scale properly across any screen size. We’ll tackle this the hard way first, utilizing pure CSS only, and then we’ll use the Bootstrap framework to simplify that process. CSS (Cascading Style Sheets) is the “language for describing the presentation of web pages, including colors, layout, and
Category: Programming
Where plain markup falls short There are a few issues that HTML cannot solve. HTML is great for displaying small information to a user, but it lacks in displaying a large number of content: think about an e-commerce website. Those websites might have hundreds of thousands of item numbers and each of those item numbers might produce a single page. Do you think that each page is created by a person? Of course not. Next, think about a form on a website. What happens when you fill out your information and click submit? Magic? HTML cannot answer those questions for
HTML evolves into a richer web standard HTML5 is the latest version of HTML and was standardized in 2014 by the W3C. HTML5 was created to take over HTML4 and XHTML. HTML5 provides the developer with APIs for web applications. It also introduces new syntax to the equation. HTML5 enhances the semantics of the content we create, especially when that content is being grouped together. Certain tags that were not available in HTML4 or its predecessors include: <video> <audio> <section> <article> <header> <footer> <nav> <aside> <main> The W3 standard is created and updated by the World Wide Web Consortium (W3C).
Meet the building blocks of markup It’s time to start looking at the various HTML elements that make up the HTML language. The elements that we’re going to examine in this section are: <a> <br /> <button> <em> <form> <h1> <h2> <hr /> <img> <input> <li> <table> <thead> <tr> <th> <tbody> <td> <textarea> <ul> Let’s examine the code on the next page in more detail. It may look cluttered in the beginning, but when you start looking at it closely, you’ll notice that it follows a simple pattern. Let’s look at the code together. We’ll begin by locating the opening
Lay the foundation of every webpage We’re ready to start looking at what makes up HTML. We’ll examine HTML elements and we’ll see how those elements fit together to form a web-page. Later, we’ll look at HTML5 and some of the differences between it and the previous versions. Each HTML site has a few tags that must be present. These include the doctype, html tag, head tag, and body tag. As a matter of fact, each time you start creating any website, you’ll want to include these elements first to get them out of the way of more complicated code.
Build the web one tag at a time HTML is a markup language that is read by the web-browser and translated into the website that a user can interact with. HTML stands for Hyper-Text-Markup-Language. There exist numerous HTML elements that make up each web-page. To get acquainted with some of these, right click on your favorite website and click on “View Page Source” (this procedure varies slightly from browser to browser). You should see some code resembling the one listed below. Reviewing this portion, you’ll notice that there exist elements and each element has an opening tag and a closing
Make every pic fit perfectly Image responsiveness is on top of the list for making a site responsive. Bootstrap has an easy class called img-fluid. The img-fluid style sets the image width to the width of the container and makes the height proportional. https://www.dinocajic.com/bootstrap-p4-buttons/ <div class=”col-4 m-1″> <img src=”pocket-watch.jpg” class=”img-fluid” alt=”Pocket Watch”> </div> In the example above, we add a col-4 class to the outer container. Currently, just know that there are 12 columns that we can use, and we’ve set the div container to take up 4 columns, or roughly 1/3rd of the page. We’ll discuss columns later. The image class is set to img-fluid. This ensures
Click-worthy styles in a single class Buttons are made easy with Bootstrap. The team at Bootstrap has taken the guesswork out of button design and has created a set of styles that look modern. Only rarely do I sway away from the default bootstrap design. Buttons were briefly looked at in our previous article. We’ll go into further detail in this section. https://www.dinocajic.com/bootstrap-p3-margin-and-padding/ The btn class must be applied to each button in order to start using bootstrap’s button styles. Let’s see the changes between the default button style and bootstrap’s version. <button>Unstyled</button> <button class=”btn”>Styled with Bootstrap</button> When the btn class is applied to
Space elements the smart way Margin and padding are made easy with Bootstrap. Most of your padding and margin needs can be done with these Bootstrap properties. Padding is implemented with 6 different classes, each beginning with p-. Similarly, margin classes begin with m-. The padding classes include: p-0, p-1, p-2, p-3, p-4, and p-5. The following classes are defined for margins: m-0, m-1, m-2, m-3, m-4, and m-5. Let’s look at each of these. <div> <button class=”btn btn-primary p-0″>Padding 0</button> <button class=”btn btn-primary p-1″>Padding 1</button> <button class=”btn btn-primary p-2″>Padding 2</button> <button class=”btn btn-primary p-3″>Padding 3</button> <button class=”btn btn-primary p-4″>Padding 4</button> <button class=”btn btn-primary p-5″>Padding 5</button> </div> <div> <button class=”btn btn-primary m-0″>Margin 0</button> <button
Typography and colors, tamed Before we jump into the more intermediate features of bootstrap, we’ll first explore some of the basic styles that you might come in to contact with. In order to make your site responsive using bootstrap, you must include the container style. https://www.dinocajic.com/bootstrap-p1-and-installation/ <!doctype html> <html lang=”en”> <head> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <title>Text and Colors</title> <link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css” rel=”stylesheet” integrity=”sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT” crossorigin=”anonymous”> </head> <body> <div class=”container”> <h1>Bootstrap Example</h1> <p>Bootstrap look a lot nicer on the screen</p> </div> <script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js” integrity=”sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8″ crossorigin=”anonymous”> </script> </body> </html> Opening the page inside your browser will display the text with the bootstrap