In this post we will talk about
- Fonts
- Web Fonts
- Text Transformations
Fonts
We can use any fonts which are available on the users system. We also specify a font family and in that case the user’s browser will use any font available from that font family. The three most popularly used fonts are:
Serif Fonts
These fonts are generally used in articles or paragraphs as these provide easier reading. Some of the Serif fonts are
- Baskerville
- Georgia
- MS Serif
- New York
- Palatino Linotype
- Times
- Times New Roman
If we want to default to any available font from this family available on the user system then we can use serif.
Sans-Serif Fonts
These fonts are generally used for headlines as they stand out. Some of the Sans-Serif fonts are
- Arial
- Arial Black
- Century Gothic
- Geneva
- Helvetica
- Impact
- Lucida Grande
- Palatino Linotype
- Tahoma
- Trebuchet MS
- Verdana
If we want to default to any available font from this family available on the user system then we can use sans-serif.
Monospace Fonts
These fonts are good for writing code. Some of the Monospaced fonts are
- Andale Mono
- Cooperplate
- Courier
- Courier New
- Lucida Console
- Monaco
If we want to default to any available font from this family available on the user system then we can use monospace.
So with this all this new knowledge on fonts let us go ahead and change the fonts in our html.
p
{
color: #24981f;
font-family: Georgia 'Times New Roman' serif;
font-size: medium;
}
h1
{
color: #0f769d;
font-family: Impact Tahoma 'Century Gothic' sans-serif;
font-size: larger;
}
h2
{
color: #1197c9;
font-family: Impact Tahoma 'Century Gothic' sans-serif;
font-size: large;
}
And our page with new fonts looks something like below
Fonts
Web Fonts
The fonts mentioned above need to be present on the user’s system, so that the web page could use it but in the case of Web Fonts we can specify to download these fonts on the user’s machine. But sometimes this might not be the right choice as this might lead to ownership issues because of the font’s ownership. The best solution around that is to use a Font Server and better yet use Google font server. To get the specific font all we need to do is get the link of a particular font from the Google font server and include it in the web page so that it is downloaded as and when it is needed.
Let’s try to use Web Fonts and for that we need to go to http://www.google.com/fonts. On the left hand panel we can see various options to filter and customize our fonts.
Google Web Fonts
We also have multiple option to select the text we want to analyze, the size we want to analyze and the various way we can sort it. We can also see it in poster, paragraph, sentence or word.
Google Web Fonts
To use a particular type of font we need to add it to the collection and click on Use at the bottom right corner of the page.
Google Web Fonts
Once we do that we see all the instructions as to how we can use that font in our web page. And before we use it we can include or exclude the stuff we want and also see the load time of that font in the web page.
Google Web Fonts
We will go ahead and use this font in our webpage for paragraph and headings.
<head>
<meta charset="utf-8" />
<title>Learn CSS3</title>
<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>
<style>
p
{
color: #24981f;
font-family: 'Noto Serif', serif;
font-size: medium;
}
h1
{
color: #0f769d;
font-family: 'Noto Serif', serif;
font-size: larger;
}
h2
{
color: #1197c9;
font-family: 'Noto Serif', serif;
font-size: large;
}
It works really well even after the fact this font is not present on my system.
Web Fonts
Font Size
Just selecting the font family is enough, for our webpage to look really amazing we also need set the font size appropriately as well. We can specify the font size in
- em – It is a scalable unit. 1em = current font size. So if the current font size is 16 px then 1em = 16px and 2em = 32px.
- percentage – It is similar to em but the current font size is 100%. So if the current font size is 16px then 100% = 16px and 200% = 32px.
- px – These are the fixed sized unit where 1px = one on screen.
- keywords (small, medium, large, etc) – These are also fixed sized units. One point = 1/72 of an inch.
Font Color
We can also set the font color in our styles. The various ways to set font color are
- rgb – We need to pass the red, green and blue hexadecimal values of the color
- rgba – This is similar to rgb with an additional attribute of a which repsents the opacity. The value of a ranges between 0(Transparent) and 1(Opaque).
Font Style
We could also use Font style. The various font styles that we can set in our font are
- italic – This will italicize the content.
- bold – This will make the content bold.
Also if font style is already set before in the hierarchy then we can reset it to normal which will remove any font style that is already present.
Other Text Decorations
We can use to change the text to
- text-transform: lowercase
- text-transform: uppercase
- text-transform: capitalize
- font-variance: small caps
- text-decoration: overline
Below is the usage of all of these
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
h1
{
text-transform: capitalize;
}
h2
{
text-transform: uppercase;
}
h3
{
font-variant: small-caps;
}
h4
{
text-decoration: overline;
}
p
{
text-transform: lowercase;
}
</style>
</head>
<body>
<article id="first-article">
<section id="header-section">
<h1>Learn everything about CSS</h1>
<h2>Learn everything about CSS</h2>
<h3>Learn everything about CSS</h3>
<h4>Learn everything about CSS</h4>
<p>
LEARN EVERYTHING ABOUT CSS
</p>
</section>
</article>
</body>
</html>
Text Decorations
Kerning
The “font-kerning” property controls metric kerning, kerning that utilizes adjustment data contained in the font.
- letter-spacing: 1px;
- word-spacing: 2px;
Leading
The CSS line-height property is similar to leading in desktop publishing – it determines the “line height”. This results in lines of text appearing closer together or further apart.
- line-height: 1.5
- line-height: 150%
li { letter-spacing: -1px; word-spacing: 5px; line-height: 150%; }
Text Decorations
Box Model
In CSS3 we can consider our page to consist a set of boxes. Every element that we have could be considered as an individual box. So an image will be a box so will be a paragraph or any other element on our page.
Border
It is the line around each of these boxes. It can be set for all four sides of the element or individual side.
- border
- border-top
- border-right
- border-bottom
- border-left
Margin
All these boxes are separated by space which is known as margin. It can be set for all four sides of the element or individual side. An inline box cannot have top and bottom margins.
Padding
It is the space between the border and the content of the boxes. It can be set for all four sides of the element or individual side. An inline box cannot have top and bottom paddings.
Block level and Inline Tags
The various block level tags are:
- p
- div
The various inline tags are as below. These tags cannot have top and bottom margin.
- strong
- em
- image
By default we have a square box for the elements however we can create a rounded corner box for the elements using the following style
.box-rounded-corner
{
border-radius: 25px;
background-color: green;
}
And
<ul> <li>learn everything about css</li> <li>learn everything about css</li> <li>learn everything about css</li> <li>learn everything about css</li> </ul>
Round Corners
Let us apply few of the these changes on our initial page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Learn CSS3</title>
<link href='http://fonts.googleapis.com/css?family=Noto+Serif' rel='stylesheet' type='text/css'>
<style>
p
{
color: #24981f;
font-family: 'Noto Serif', serif;
font-size: medium;
}
h1
{
color: #0f769d;
font-family: 'Noto Serif', serif;
font-size: larger;
text-align: center;
padding: 5px
}
h2
{
color: #1197c9;
font-family: 'Noto Serif', serif;
font-size: large;
}
footer p
{
font-size: x-small;
}
.article-title
{
background-color: #c4c4c4;
}
.meta-article
{
font-style: oblique;
}
.meta-author
{
font-style: normal;
}
#first-article
{
background-color: #e8dede
}
ul :nth-child(odd) {background-color: #c4c4c4}
ul :nth-child(even) {background-color:#e8dede}
.webPage {
font-size: 16px;
color: #117c13;
background-color: #000000;
width: 800px;
margin-top: 25px;
margin-left: auto;
margin-right: auto;
border: 5px solid black;
border-radius: 25px;
background-color: green;
box-shadow: 0 0 15px 5px lightGray
}
</style>
</head>
<body>
<article id="first-article">
<section id="header-section">
<h1>Learn everything about CSS</h1>
<div>
<span>Posted on 12th Sep 2013</span>
<span>by</span>
<span>Abhishek Shukla</span>
</div>
</section>
<section>
<p> </p>
<p>In this section we will learn enough about CSS3 to get a good foundation for working on it.
<img alt="CSS3" title="CSS3" src="https://www.abhishekshukla.com/wp-content/uploads/2013/09/CSS3Logo.jpg" /></p>
<p>CSS 3 came along with HTML5 and has enhanced the capabilities that are available in HTML5.
In this course we will have a look at the various basics of CSS3.
We will also get our hands dirty with some practical examples.</p>
</section>
<aside>
<section>
<h2>About CSS3</h2>
</section>
<section>
This section is generally used for the side panels. Somethime it is also used to give additional information.
<ul>Here is a list of few useful concepts in CSS
<li>Selectors</li>
<li>Inheritance</li>
<li>Specificity</li>
<li>Border</li>
<li>Margin</li>
<li>Padding</li>
<li>Positioning</li>
</ul>
</section>
</aside>
</article>
<footer>
<p>Copyright 2013 Abhishek Shukla</p>
</footer>
</body>
</html>
Border Margin Padding
The code for this post can be found here or @ mirror
Any questions. comments or feedback are most welcome.
