Showing posts with label CSS. Show all posts

Monday, December 13, 2021

In CSS you can group your selects into one declarations. For example you want to create a read alert text for your h2 HTML element tag.

You can define each property one at a time like so

<style>
h2{font: bold 25px arial, verdana;}
h2{color: red;}
h2{background:black;}
</style>

When you type in <h2>Alert</h2> you will get this effect

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.

Monday, October 11, 2021

Bootstrap 4: Grid System Cheat Sheet

One of the main concept of working with Bootstrap is the Grid system. It could be intimidating at first to work with the Grid system. But the system is quite elegant and simple solution.

The most important thing you have to remember about the grid system is that it divides the page into 12 columns, and it is responsive meaning it will adjust to the size of the client's screen.

You can control the size of the column with the .col-sm, .col-md, .col-lg, .col-xl, which translates to small, medium, large, and extra large screens. In addition to the screen size you can also control the with of the column with the -n at the end of class attribute. For example if you want a column for a small screen to span three columns it would be .col-sm-3.

Here is the cheat sheet, I am going to use color coding for the different sizes.

Small - Green
Medium - Orange
Large - Red
Extra Large - Blue

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 30, 2021

CSS: Combinators

Combinators in CSS is term used to define a style that combines more than one selectors together.

For example let's say you have the following markup

<div id="combinator-div"><h1>I'll be back.</h1></div>
<h1>Combinator me</h1>

Let's say you only want to apply the styles for the <h1> tag that's inside the combinator-div, you can use a combinator style which is a combination of the div id and the h1 tag as combination to style a very specific element on the page. The style would look like the following

#combinator-div h1 {font-family: sans-serif; font-weight: bold; color: green;}

If you run the page with the code then you would get the following output

As you can see only the I'll be back <h1> is styled, the other <h1> is just not cool enough to get styled.

Friday, July 23, 2021

CSS: Using Google Fonts

In this post we are going to use Google Fonts in our HTML markup, using Google Fonts is really easy to do. All you have to do is go to https://fonts.google.com/ then select the fonts that you would like to use. Let's we want to use the Manjari, then All we have to do is click on the + sign next to the font.

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>

Tuesday, April 3, 2018

CSS : HTML Selectors

In CSS you can define styles for HTML elements and apply the styles globally on the page where the HTML element is used. For example you can define styles for the entire html element or the p element. Like the following markup

        html {color:blue;}
        p {font-weight:bold;}
        h1 {color:red;}

This is a paragraph

This h1 tag

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.

Sunday, June 19, 2016

CSS: Bootstrap: Setting Up Bootstrap Using The Bootstrap CDN (Bootstrap 4)

"Bootstrap is the most popular HTML, CSS, and JS Framework for developing responsive, mobile first projects on the web." - getbootstrap.com

Brief Introduction:

Bootstrap is a front-end framework using HTML, CSS and JavaScript to build menus, navigations, layouts, forms, tables, and etc. What is special about Bootstrap is that mobile-first, and responsive design is it's default behavior. Okay, hold on, let me put my professor's glasses on!

Okay class here goes:

Mobile-First Design: You design your site for mobile devices first so the desktop version is second class citizen.

CSS: Padding Properties

padding: top right bottom left

padding:100px 75px 50px 25px;

Long hand version

padding-top:100px;
padding-right:75px;
padding-bottom:50px;
padding-left:25px;

All four sides 100px

padding:100px;

Thursday, April 16, 2015

CSS: Using Bootstrap To Make Your Form Fields Look More Professional

In this blog we will turn ordinary form fields to a more modernized and professional looking form fields by using the bootstrap library. Let's say we have the following form fields with no formatting, or layouts applied to it with the following markup.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <title></title>
    </head>
    <body>
         <form>
   First Name: <input name="First Name" type="text"><br/>
   Last Name: <input name="Last Name" type="text"><br/>
   E-Mail: <input name="E-Mail" type="text"><br/>
   Password: <input name="Password" type="password"><br/>
   Gender:
   <br/><input type="radio" name="gender" value="male" checked>Male<br/>
    <input type="radio" name="gender" value="female">Female<br/> 
   <input type="submit" value="Sign-Up"/>
  </form> 
    </body>
</html>