Tech Junkie Blog - Real World Tutorials, Happy Coding!: Web Design

Showing posts with label Web Design. Show all posts

Wednesday, December 1, 2021

CSS: Linking to An External Stylesheet With the link Tag and The @import Directive

One of the first thing you would do in web development is to link an external Cascading Stylesheet to an HTML document. As a matter of fact bootstrap would not work if you didn't link the bootstrap.css file in your HTML document. Linking an external document is easy enough you often see the link like this

    <link href="Content/bootstrap.css" media="all" rel="stylesheet" type="text/css"></link>
    <script src="Scripts/bootstrap.js"></script>

Now let's break it down link attributes, there are four possible attributes for the link tag.

They are the following:

rel (required) - Relations, relationship to this page. For CSS stylesheets its "stylesheet"
type (optional) - is the type of the link, "text/css" is the type for CSS stylesheets
href (required) - is the location of the resource, it could a relative path or an actual URL like a CDN
media (optional) - with this attribute you can specify which media the stylesheet is meant for. For example the media attribute can have the "projector" value.

Friday, August 20, 2021

CSS HTML Attribute Selectors

In addition to class and ids you can also apply styles based on an element's attribute. For example you can bold a href attribute that has the value "google.com" in it and match it exactly like this

<style>
a[href="https://www.google.com"]{font-weight: bold;font-size:200%;}
</style>

As an HTML creator you don't even need to worry about the markup, the selector automatically applies the styles once it finds the value. So the markup would be like this

<a href="https://www.google.com">google.com</a>

Friday, August 13, 2021

The ID And Class Selectors in CSS

The most commonly used selectors in CSS are the class and ID selectors. A class in CSS is defined with a . in front of it. For example you can have class call .rainbow and an ID for a div call rainbow those are two different things.

To apply a style to a class you define the class in the stylesheet as

.rainbow { color: pink; font-weight: bold; font-size:24px;}

Then you would use the class as such in the HTML markup

<p class="rainbow">What color am I?</p>

But if you want to apply style to an id that's used in HTML markup you have to do the opposite.
To reference an id in HTML you have to prefix your CSS style with the # character so in the CSS style you would have the following declaration

Friday, August 6, 2021

Target Specific Media Environments With CSS Media And Feature Queries

If you use media queries in CSS you can target a specific media with a stylesheet. It is defined by the media attribute in the link tag.

The possible media values are the following:

all - all presentation media
print - used for display print and print preview
screen - all screens that uses the browser user agents

Here are a few examples:

Or you can have multiple media types like this

Friday, July 16, 2021

CSS: text-transform

With text-transform you can transform your text into Autobots or Deceptacon? Not exactly, but what you can do is transform your text to uppercase, lowercase, capitalize it. It's pretty self explanatory.

Here are the examples of a text-transform:

p.upper {text-transform:uppercase}
p.lower {text-transform:lowercase}
p.cap {text-transform: capitalize}

Here are the HTML markup:

<p class="upper">uppercase me</p>
<p class="lower">LOWERCASE ME</p>
<p class="cap">captain america me</p>

Here is the output:

Previous: CSS: The em Unit

Friday, July 9, 2021

CSS: Take Control Of Your Text Indentation With text-indent

Have you always wished to have more control with your text position, but feel like you limited with the text alignment of

Align Left text-align: left;

Align Center text-align: center;

Align Right text-align: right;

Justify text-align: justify;

Well you could always do that with CSS with the text-indent property, the only caveat is that it has to be a block based element. Meaning it automatically puts a line break after the tag. If you need a refresher on block vs line element, I have an excellent post on this topic here. I know a shameless plug, oh and please click on my ads so that I can retire on a tropical island!...lol

Anyways back to the tutorial. So with the text indent you have total control over the indentation you need on your block element. It could either be a length value or a percentage value.

Well first let's define a div that we want our text to be in, then the text-indent will be based on that div.

Let's say we have the following styles:

div { width: 800px}

p.tdp {text-indent: 15%}

And the following markup

<div>
<p class="tdp">Indent this text please Indent this text please Indent this text please Indent this text please</p>
<p>This is just normal text This is just normal text This is just normal text This is just normal text This is just normal text</p>
</div>

Friday, July 2, 2021

CSS: inherit and initial Keywords

There are certain keywords in CSS that works on a global scale and inherit is one of them.
The keyword inherit simply means that current element inherit the properties of it's parent element.
It is applied automatically be default, but it could be useful when you want to be specific about what you want.

For example if you define the following style for the parent element

#parentElem {color: red; font-weight: bold}

And have the following markup, the style will automatically be applied to the child element

<div id="parentElem">
<p>Child element</p>
</div>

Friday, June 25, 2021

CSS: The em Unit

There are often times when you see the measurement in CSS that looks something like this font-size: 2em; what does that actually mean? Well an em simply means its the multiplier of the font-size of the element. For instance 2em means that it will multiply the font-size of the element by 2x.

Let's say we have a div with a font-size of 15px, and there's a span tag with a font-size of 2em. The span font-size of the span would be 30px, because the span is part of the div element.

Let's say have the following styles:

div {
font-size: 15px;
}

span {
font-size: 2em;
}

And with the following HTML markup:

<div>The font-size of the div element. <span>The span font-size</span>.</div>

The output is the following:

Friday, June 18, 2021

CSS Stretch And Condense Fonts With font-stretch

One descriptor of the font property in CSS is the font-stretch descriptor. This descriptor widens and narrows a font family that has width-variant faces.

The values for widening and narrowing fonts are the following:

normal
ultra-condensed
extra-condensed
condensed
semi-condensed
semi-expanded
expanded
extra-expanded
ultra-expanded

The way you define a font-stretch is the following

p.uc {font-family: Verdana; font-stretch: ultra-condensed;}

Friday, June 11, 2021

CSS: Use @font-face To Use Custom Fonts

By using @font-face declaration you can use custom fonts in your web pages. The way this works is that you can host the fonts on your server, and then the user agent will download the font for future renders, for example you can specify the following markup to use a custom font that's not widely available.

@font-face{
font-family: "Verana";
src: url("Verana-Regular.otf");
}

You can get the free fonts here at Arkandis Digital Foundry to play around with custom fonts.
The url can be a local resource within the local server, or a remote resource on the internet.

Friday, June 4, 2021

CSS Parent Child Selectors

A big part of web development is dealing with the DOM (Document Object Model) the DOM is organized in a hierarchical order. You locate an element in the DOM by traversing through the DOM tree. For instance if you have an ordered list there's a natural hierarchical order to it.

Let's say you have the following markup

<ul>

  <li>item 1</li>
  <li>
      <ul>
          <li>sub item 1</li>
          <li>sub item 2</li>
          <li>sub item 3</li>
      </ul>
  </li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

Monday, November 27, 2017

CSS : block vs inline Elements

Since CSS does not live in an island no technology does. It has to interact with it's neighbor HTML on a regular basis. In the HTML world there's the block-level elements and then there's the inline-level elements. Most developers could care less what the meanings of these words mean. For the designers, it's okay they are just trying to make things look pretty cut them some slack :)

First let's look at block elements:

Block elements are needs to stand on it's own, meaning there's no elements at either sides. They generate a break on the top of bottom of itself.

Here is an example:

The <h1> and <p> tags are block elements. Even if you write the code <h1>This is H1<h1><p>This is a paragraph tag!</p> in one line next to each other without any breaks. The resulting respresentation of those tags in the browser would look like this.

Thursday, April 2, 2015

GIMP: Cropping An Image

Cropping an image is something that you will do often when you want to take out parts of the photo is uninteresting or distracting. For this blog we will be using the Key West photo that we resized in this blog.

Tuesday, March 31, 2015

GIMP: Resize A Large Photo

Resizing images is a common task that you have to do to show your photo image on a website. Most digital camera or smart phones takes photos that are a lot larger than what most web sites can display in it's original size. In this blog we will show you how to resize your photo in GIMP.

Step By Step Instructions:

1. Open the original photo in GIMP

Monday, March 30, 2015

GIMP Layout : Single Window Mode

Most new users to GIMP gets intimidated with the floating windows that is the default view when you first open GIMP.