CSS Tutorial – Advance user’s CSS guide Part 2

arp14 CSS, Tutorial Tags: , , 1

Hello guys. This CSS tutorial is for advance users. You may have a look at the previous part of this CSS Tutorial – “CSS Tutorial – a Beginner’s CSS Guide Part 1”.

In this CSS tutorial, you will learn importing CSS, class, ID, specificity, colors, background, media, formatting text, lists etc. So, let’s start…

CSS Tutorial - Advance user's guide Part 2

Importing CSS

You can use any of these two methods to import an external CSS file into your HTML document.

<head>
	<style type="text/css">
		@import url(FileName.css);
	</style>
</head>

or,

<head>
	<link rel="stylesheet" type="text/css" href="FileName.css"/>
</head>

The second method is mostly used and recommended.

Classes

A Class is a kind of selector in CSS, a class is an attribute in HTML. Classes don’t have to be unique. One or more classes can be added to a HTML element at the same time. Classes are defined by adding a “.” (dot) as prefix in CSS. Example:

<span class="className"> CSS Tutorial is so cool... </span>

Defining class rules on css file:

.className {color: blue; background: lime;}

or,multiple classes on same element

<span class="className1 className2"> CSS Tutorial is so cool... </span>

Defining class rules on css file:

.className1 {color: blue; background: lime;}

.className2 {font-weight: bold; text-decoration: underline;}

ID

IDs are similar to classes. But a ID is always unique, it can’t be used more than one time on a valid html document. IDs are defined by adding a “#” sign as prefix in CSS. Example:

<span id="IDname">CSS Tutorial is so cool...</span>

Defining ID rules on css file:

#IDname {color: red; background: pink;}

Specificity

If you have two or more conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and then render the element based on that specific rule. Specificity is measured high to low as below –

Measuring CSS Specificity

Inline Style > ID > Class > Number of Elements

Specificity Can be measured by four digits x1, x2, x3, x4. And their values are respectively Inline Style, ID, Class, Number of Elements. Example:

li{color: green;} => li = one element, specificity = 0, 0, 0, 1.
body li{color: green;} => li = 1 element, body = 1 element, total 2 elements, specificity = 0, 0, 0, 2.
li.first{color: green;} => li = 1 element, first = 1 class, specificity = 0, 0, 1, 1.
html body li.first{color: green;} html+body+li = 3 elements, first = 1 class, specificity = 0, 0, 1, 3.
#mainBody li{color: green;} => mainBody = 1 id, li = 1 element, specificity = 0, 1, 0, 1.
style="color: green;" => inline style = 1, specificity = 1, 0, 0, 0.
  • Starting top to bottom, left to right have higher specificity (on situation).
  • h1{background green !important;} => no matter what, “!important” get higher specificity.
  • Very useful for debugging.
  • Inherited values always have specificity of 0 (zero).

EM = “M”

p{margin: 1em; font-size: 20px;} => 1em is equal to width of one “M” (letter “M”) of current font-size which is 20 pixels height of a letter.

CSS Colors

There are five ways to define colors in CSS. Keyword (ex: black), Hex (ex: #cc3300), Short Hex (ex: #c30), RGB Decimal (ex: rgb(204, 51, 0)), RGB Percent (ex: rgb(80%, 20%, 0%)). CSS 2.1 has 17 keywords available —

Maroon => #800000, Red => #ff0000, Orange => #ffa500, Yellow => #ffff00, Olive => #8080000,
Purple => #800080, Fuchsia => #ff00ff, White => #ffffff, Lime => #00ff00, Green => #0080000,
Navy => #000080, Blue => #0000ff, Aqua => #00ffff, Teal => #008080,
Black => #000000, Silver => #c0c0c0, Grey => #808080.

RGB Colors

#xxyyzz is a rgb color, first tow digits represents Red, second two represents Green and thirs two represents Blue in hexadecimal number system.

Converting RGB Decimal values to Rgb Percentage

Davide RGB value by 255, Example: rgb(204, 51, 0).

* 204/255 = 0.8 (80%)
* 51/255 = 0.2 (20%)
* 0/255 = 0 (0%)
Result: rgb(80%, 20%, 0%)
[!] Result won't be perfect because Browser's round-ceil functions varies.

Background

background: url(url.gif) no-repeat 50% 75% rgb(85%, 85%, 85%)
  1. URL of an image file for background.
  2. No-repeat – No-tiled – show image count #1
  3. Background position – 50% from left and 75% from top.
  4. Color (any notation).

[!] Background-attachment: scroll/fixed; => Controlling by scrollability.

Line Height and Font Size

Line-height: 3; => Multiply Element’s font size by 3 (actually depends / particularly 3 in this case).

Line-height: 3em; => Same visual effect as above.

[!] The default line height is 1.2em approx.

Line-height: 1.5em; vs. Line-height: 1.5;

1.5em of current/mentioned element and it’ll applied to all elements – no matter if their size is bigger or smaller. Recommended 1.5 of each elements — all relational measurement

Font-size: 200%; => means 200% of parent element. Same as font-size: 2em;

Shorthand font declaration

font: weight style variant size/line-height family;

[!] If line-height declared outside of “font: ;” or standalone, then it must be after “font: ;”, – otherwise it won’t work.

Vertical Align

Vertical-align: sub; => make element downwards a bit.

Vertical-align: super; => make element upwards a bit.

Vertical-align: 1em; => make element upwards by 1em.

Vertical-align: -1em; => make element downward by 1em.

Vertical-align: baseline; => default.

Text transform

Text-transform: *value*; => Values are uppercase / lowercase / capitalize.

Text decoration

Text-decoration: *value*; => values are underline, overline, linethrough, none.

Margins and Paddings

What is the Difference between margin and padding?

margins are always outside of an element where paddings are inside of an element. Please see this example on margin vs. padding.

Margin Collapsing

Margins of two elements facing each others get collapsed and inherit margin height of the maximum one.

Centerize element by margin

set the left and right margin value auto to centerize the element automatically.

Media

While importing a CSS file, add attribute and value media=”all” to let the stylesheet be applied to all medium such as browser, print media, projection media, etc. For printings, backgrounds are disabled by default. Other values are screen, print etc.

Formatting text

p:first-line{} => Deal with first line of a paragraph.

Text-align: justify; => justify by word spacing.

Text-align: left/right; => align texts left/right.

Text-justify: inter-word; => justify by word spacing.

Text-justify: inter-character; => justify by letter/character spacing.

white-space: pre; => works Similar to <pre> tag.

Text-indent: -9999px; => used for indenting quotation, first line of paragraph.

Anchor tags / Links

Anchor tags has five css property:

a:link{}, a:visited{}, a:hover{}, a:active{}, a:focus{}
To remember, use these short forms "L-V-H-A-F" - people call it LOVE-HATE(LVHA)!

Lists

List-style-type: ; values are dics, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, none.

List-style-image: ; values are url(file_image.gif), none.

List-style-position: ; values are inside, outside.

Many Other Things to Know

Position: relative;

It is very confusing thing for many people. It means it is relative to itself, not to any other element. It’s letting overflow auto or as default flow. It’s a magnet, absolute positioned contents will be getting offset from it – if the absolute positioned content is inside the “relative” element.

Overflow: hidden/auto/scroll;

It is how content will be flowing if it happen to be taller that it’s parent element. The value “hidden” will hide the extra flowing part of content. The value “auto” will make parent element automatically re-sizable. The value “scroll” generates scroll bar on the parent element.

Negative Margins

Use negative margins to float contents. Better use for layout.

I hope this tutorial helped you.

Having problem? Need help? Just comment below, I’ll be back to you – Thank you.

One thought on “CSS Tutorial – Advance user’s CSS guide Part 2

Leave a Reply

Note: Your email address will not be published. Required fields are marked *