Just Tech. Just Physics.: June 2016

Monday, June 27, 2016

Cascading Style Sheets - 3: Colors

Today’s post is short, I will be discussing about colors.

Colors make your webpage look brighter and catch the viewer’s eyes easily. Colors are always expressed in terms of RGB i.e. Red Green Blue.

There are 3 ways to specify a particular color in terms of RGB:

· A valid name is the easiest option – like “blue” or “red” but that stuff is for basic colors and is quite okay if that is what is required by you.

· The next way to specify the color is by specifying the detail of the amount of intensity of red, green and blue. Let me give an example and I’ll then explain in detail

Ex: rgb(255,0,0) This code, specifies red color. Intensity of each color is determined from the number specified. Range of the numbers is between 0 and 255 with 255 being the highest intensity number.

Ex2: rgb(100,0,100) This code equally divide intensity of red and blue and has no intensity of green. Now, a combination of red and blue gives purple. Hence, this code specifies purple color.

So depending on numbers, intensity of any of the three main colors can be varied and a new color can be specified.

· This way is a little complex (in a way) because it involves specifying rgb intensity in terms of hexadecimal numbers. Again, I’ll give an example and then explain in detail.

Ex: #ff0000 This code specifies red color. Every color code contains 6 digits. First 2 digits specify intensity of red; the next two specify intensity of green and the last two specify intensity of blue. In hexadecimal, the decimal number 255 is represented by ‘ff’.

Conversion of numbers from decimal to Hex goes like this:

Decimal	Hexadecimal
0-9	0-9
10	A
11	B
12	C
13	D
14	E
15	F
16-25	10-19
26-32	1A-1F

This table continues till the last number 255 or in hexadecimal, FF.

This method of specifying intensity is widely used, as it is otherwise simple once we know hex numbers and the code also looks compact.

Hence, I conclude this post on colors and the 3 ways to specify them.

Sunday, June 26, 2016

Cascading Style Sheets - 2: Ways to insert CSS

In my previous post, I wrote about the three basic types of selectors used in CSS. If you haven’t checked it out yet, I would recommend you see that post once and come back here to the next part of CSS that I’m about to discuss, which is – Ways to insert the CSS codes on your webpage. Here’s a link to the previous post: http://justechjustphy.blogspot.in/2016/06/cascading-style-sheets-css.html

There are three ways of inserting CSS codes and each of them has its own advantages and disadvantages.

· External Style Sheet.

· Internal Style Sheet.

· Inline Style.

1. The External Style Sheet:

The code of the style sheet is separately written and saved with the extension “.css” and it can’t contain any html tags (examples of html tags are <body>, <head>, etc.)

In your html document, to insert the css code that is externally saved, you need to add a link to that file so html can know there’s an external editing file to be added to the webpage.

So, how do we link the css file?

Simple! By using the <link> tag in html between <head> and </head> tags.

Its syntax goes like this:

· In the above syntax, the “rel” is an attribute used to tell html of the type of document to be linked. In this case, it is “stylesheet”

· Type refers of course to the type of document, which is in this case, a text document or a css document.

· Href is a very important attribute because it specifies where the webpage should be linked, which is your file name, followed by “.css” extension.

So, now we know how to externally link a CSS file to a webpage. This is very advantageous as it doesn’t mess with the html code. What I mean to tell, is that the editing or the designing part of the webpage code is separate and the actual content of the webpage is separate. That really helps improve readability.

Ex:

CSS code:

.p{

color: red;

} // (file is saved as para.css)

Html code:

<html>

<head>

</head>

<body>

<p> This is the affected paragraph colored red using an external style sheet </p>

</body>

</html>

Output:

This is the affected paragraph colored red using an external style sheet

So, properties of the webpage can be changed anytime, just by changing the file name in href section of the html code. That makes using the External Style sheets very versatile and easy.

2. Internal Style Sheets:

As the heading states it, the CSS code is written within the html document between the <head> and </head> tags. There are some examples in my previous post. This form of adding CSS code is pretty basic and useful for small websites and is mostly used when there’s not much editing involved in the webpage.

3. Inline Style Sheets:

It is used to apply a unique style for a single element. It comes within the <body> and </body> tags unlike in previous 2 cases where the internal code is written (or the external code is linked) within the <head> and </head> tags.

Ex:

<html>

<body>

<p style = “ color: blue; “> The affected paragraph </p>

</body>

</html>

Output:

The affected paragraph

As seen in the above example, this way of adding CSS can be used to give a really quick edit to the webpage. It kind of saves up on the number of lines of code required and comes handy.

Multiple Style Sheets:

In case of 2 distinct CSS codes editing the same element and are included in the same html file, then the first defined code is applied and the other one is just ignored.

Ex:

CSS file:

P {

Font-size:20px;

} // file name is myfile.css

Html code:

<html>

<head>

<style>

P { color: purple;}

</style>

</head>

<body>

<p> Paragraph affected with the first defined css style </p>

Output:

Paragraph affected with the first defined css style

In the code above, the CSS with color edit is defined first and hence, only the color edit is applied to the paragraph. If the style tag was written before the link tag, then the font-size edit would be applied to the paragraph.

Now, we move to the final topic of this post, the order of cascading.

Cascading Order:

In case of above multiple style sheets, we have priorities assigned to each type of method of applying CSS. So one with highest priority is applied to the html element, and the rest are ignored. The precedence is as follows and number one has the highest priority:

1. Inline style (within html element)

2. External and internal style sheet (whichever is defined first)

3. Browser Defaults.

Now, we have come to the end of this post which dealt with methods of applying CSS code onto websites.

Saturday, June 18, 2016

Cascading Style Sheets (CSS)

Today I will be talking about CSS and will be discussing about its basics. CSS is a programming language that is used to design websites. It is like a designing extension to html.

Before I talk further on CSS, let me discuss some basics of html:

Say you're creating a website, and the first thing you want is the text "Hello World". Let us see how to code it using HTML.

The code will go as follows, and every line has a meaning.

<html>

<body>

<p>

Hello World

</p>

</body>

</html>

· <html> is the opening line.

· <body> indicates that the webpage content starts after that.

· <p> indicates paragraph.

· Finally after these opening codes, you type your webpage content

· After typing, close all the opening codes by simply adding this (slash) /

· So the closing codes will be

· </p>

· </body>

· </html>

These “/ “ tell the computer that it is the end of file. Anything typed beyond "/html" is ignored.

Say, you want “hello world” as a heading. Then the code goes as follows:

<html>

<body>

<h1> Hello World </h1>

</body>

</html>

As you can see, the only change is <h1> and </h1>. Now, these h1, p and even body are all called elements of html.

Need of CSS –

When it comes to website design, using only html makes it tedious and even stunts its readability so CSS comes to the rescue. Now that we have the need of CSS established, it is time to talk about its syntax.

Syntax of CSS contains 2 main portions-

1. Selector – The selector points to the html element which is to be designed.

Ex: <h1> or <p> - These are elements of html which can be selected to design in CSS.

2. Declarations – These include the actual design code that manipulates the element of html selected in the syntax.

Ex: color: red //gives red color to the selected element.

Now, we have established the general format of CSS syntax. There are different ways of how selectors can select a particular html element. It can do so by referring to the element by name, id, class, attributes or others. To explain all these, I will be taking a simple <p> element of html.

· Element Selector: This refers to selecting the html element by name.

Ex: p {

color: green;

}

Html Code: <html>

<head>

<style>

p { color: green; }

</style>

</head>

<body> <p> Hello World! </p> </body>

</html>

Output: Hello World!

· id selector: This refers to selecting the html element which is linked with the id name given.

Ex: #para { color: green; }

Html Code: <html>

<head>

<style>

#para {

color: green;

}

</style>

</head>

<body>

This is the paragraph affected with css code </p>

<p> This paragraph is not affected </p>

</body>

</html>

Output: This is the paragraph affected with css code

This paragraph is not affected

· class selector: This refers to selecting the html element by the class name provided in the html code.

Ex: .para {color: green; }

html code: <html>

<head>

<style>

.para{color: green;}

</style>

</head>

<body>

<p class="para"> Paragraph affected </p>

<h1 class="para"> Heading affected </h1>

<p> Paragraph Not affected </p>

</body>

</html>

Output: Paragraph affected

Heading affected

Paragraph Not affected

These were the 3 main type of selectors used in CSS to edit html elements. In the above examples, I have only used color manipulation when in actual website designing, lot of manipulation or editing may be required. At that time, CSS is the most helpful tool to use as it is simple to understand and quite efficient. My next post will be on using css codes in different methods to edit html pages.

Here are some helpful links if anyone is further interested:

· http://learnlayout.com/

· https://www.codecademy.com/learn/web