Catch bugs before they hit the browser Testing CSS is simple when you’re using the correct tools. One tool that we’ll cover is Google DevTools that comes packaged with Google Chrome. To access DevTools, right click on your site and click Inspect. You will be greeted with a page that looks like this. The left side contains your website as is viewed for that screen resolution. To the right is the HTML code and underneath is the CSS code. The border that separates the left and right sides can be dragged to the left or right to resize the panel
Category: PHP
One stylesheet, every screen Have you seen websites that scale differently based on screen size? That’s accomplished through responsive web design. Below you’ll seen an example of a website that was created with responsiveness in mind. Prior to the modern era of website design, developers would build multiple versions of the same site. The mobile version would usually be placed under a sub-domain such as m.dinocajic.com. The mobile version would contain code that’s separate from the website that’s viewed on a desktop computer. There are a couple of issues with this approach: You must maintain two separate code bases The
Layouts that just click into place We’ll only touch on this topic slightly in this article since we’ll cover it in more detail later when we start designing our responsive web pages. CSS — P8: Box Model Understanding the box model is a necessity before reading this article. When designing appealing, responsive websites, most of time you’ll want each section to span across the entire page. Let’s look at an example of a website whose header spans across the entire page. If we examine the page, the navigation and the main content span across the entire width of the screen.
Know your edges, own your layout Block type elements live on the principle of the box model. The box model is made up of: Content Box Changes the size of the content box Uses width and height properties Padding Box Adds whitespace around the content Uses the padding property Border Box Adds a border around the padding box Uses the border property Margin Box Adds whitespace between the border and other HTML elements Uses the margin property The easiest way to explain the box model is through an example. We’ll start by creating an <h1> element and setting the background
Master flow with display types and floats You might have noticed in our previous examples that when we enter certain HTML tags, such as <p> or <h1>, the elements are each displayed on a new line. When we enter tags such as <a>, the elements are displayed alongside each other. https://www.dinocajic.com/css-p6-image-styling/ Element Types Elements, such as the paragraph element, are called block elements. Block elements will appear on a new line and will span 100% of the width of the container. Inline elements will be the width of the content they enclose. Since inline elements do not span the width of the container, un-styled inline elements will
Make every image pop with CSS finesse Just like with any styling with CSS, we can start writing and never finish since there are so many unique ways that individuals can style an image. We’ll cover a few basic ways to style an image, which is what you’ll really want to see, and a couple of ways to style background images in the end. https://blog.devgenius.io/css-p5-text-styling-4bb0809638bb Basic Image Styling Let’s start by including an image into our HTML file. <section> <img src=”st-augustine-trip.jpg” alt=”St. Augustine Trip”> </section> This will display the image with its current height and width. To set the height
Fine-tune styles with smart selectors Continuing down our CSS path. The previous article can be found here: https://blog.devgenius.io/css-p3-nested-styling-and-styling-multiple-elements-ea40cc5ac727 Pseudo-class Selectors The last type of selector that we’ll cover is the pseudo-class selector. The ones that you will likely encounter are the ones pertaining to anchor tags, <a>. Let’s start by creating a simple link. <a href=”https://dinocajic.com”>Dino Cajic</a> The browser will underline the link and make the text color blue. When you hover over it, you may or may not see the color change. Visiting the link will likely change the color of from blue to purple. To modify the link appearance,
Style whole sections with one smart rule Let’s continue with the CSS Basics. If you haven’t read the previous article, make sure to read it first. https://www.dinocajic.com/css-p2-basic-styling/ Nested Styling CSS allows for nested HTML element styling. In the example below, we have two paragraph tags. Each paragraph has a link and a button. <p id=”first-p”> <a href=”#”>Link 1</a> <button>Click Me</button> </p> <p id=”second-p”> <a href=”#”>Link 2</a> <button>No, Click Me</button> </p> Since neither the link, nor the button, has neither an id nor a class attribute, we must specify their styles through nesting. To select the link contained inside the first paragraph, we would write
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
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