Simple CSS hints (part_1)

Default featured post

This post is about CSS hints which I noted when I was learning web designing. It is also kind of tutorial for those who have not worked with CSS yet but have some HTML background. If you want to refresh your HTML background, you can go and read Simple HTML hints (part_1) and Simple HTML hints (part_2) posts.

CSS is a language that allows you to change the appearance of elements on the page: the size, style, and color of text, background colors, border styles and colors—even the position of elements on the page.

Those CSS attributes and effects which are used inside of HTML element are called as inline CSS or inline style. For example, we want to change the color of the specific paragraph in a web page, inline CSS is applied like below,

<p style="color: red;">
Content
</p>
view raw test.html hosted with ❤ by GitHub

Instead of b tag you also can make CSS such as below,

<p style= "font-weight: bold">
Contents display in bold
</p>
view raw test.html hosted with ❤ by GitHub

In order to apply style in especial words or phrases instead of paragraph, span element could be used, look at the example,

<p>
Here is the content
<span style="color : blue; font-weight : bold">
for example
</span>.
</p>
view raw test.html hosted with ❤ by GitHub

In above example for example phrase is shown in blue color and bold style.

You also can italicize your text such as i element with CSS like following,

<p style="font-style: italic;">
The content is shown in italic
</p>
view raw test.html hosted with ❤ by GitHub

An embedded style sheet is a section you add to the start of a web page that sets out all the styles that will be used on that page. To do this, you need to use the style element inside the head. Look at below example,

<head>
<title> Web page title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
p {
font-weight: bold;
}
</style>
</head>
view raw test.html hosted with ❤ by GitHub

In the above code style element is used to put CSS code there. Between open and close style element, it applied bold style in all paragraphs of the web page. p represent paragraph element. You also can apply changes instead of paragraph on span element with replacing p with span.

An external style sheet provides a location in which you can place styles that can be applied on all of your web pages. This is where the true power of CSS lies . For doing it so, you need to dedicate separate CSS file and put all your CSS code there which is applied in the entire website. Look at the below example,

/* Comment CSS for Your Website */
p {
font-weight: bold;
color: blue;
}
view raw style1.css hosted with ❤ by GitHub

Commenting style in CSS is the same as C (/* Comment */).

Now after making your CSS file you need to link it to every web page head tag which you want to use this CSS file. For example,

<head>
<title>My Web page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
view raw test.html hosted with ❤ by GitHub

The href attribute tells the web browser where the style sheet file (style1.css ) can be found, in the same way that the href attribute is used in an anchor to point to the destination file (e.g. Home ).

The rel="stylesheet" and type="text/css" part of the link tag tell the browser what kind of file is being linked to, and how the browser should handle the content. You should always include these important attributes when linking to a .css file.