basic computer knowledge: CSS (Cascading Style Sheet)

v Cascading Style Sheet(CSS) is a style sheet which offers set of style rules to display HTML elements in a webpage.

v CSS allows a number of page of a website to have same formatting.

v It also provides ore flexibility and control in the way in which the content is displayed on a webpage.

Advantage of CSS

• CSS saves time - You can write CSS once and then reuse the same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many web pages as you want.

• Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So, less code means faster download times.

• Easy maintenance - To make a global change, simply change the style, and all the elements in all the web pages will be updated automatically

• CSS is easy to learn and understand.

Disadvantage of CSS

CSS is very limited in browser.
There are multiple levels of CSS such as CSS, CSS 2, CSS 3. This can create confusion for non-developers and beginners.

CSS Syntax

A CSS comprises of style rules that are interpreted by
the browser and then applied to the corresponding
elements in your document.
A style rule is made of three parts:
Selector: A selector is an HTML tag at which a style will be applied. This could be any tag like <h1> or <table> etc
Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color, border, etc.
Value: Values are assigned to properties. For example,
color property can have the value either red etc

CSS Syntax

CSS Selectors

A selector is an HTML tag which a style applied. This could be any tag like <h1>,<p>, <table> etc.
There are different type of selectors:
Type, id and class selector

External style

We define style sheet rules in a separate CSS file and then include that file in the HTML document using HTML <LINK> tag.
external style
.RED {
Color: red:
}
.thick {
Font-size:20px;
}
external style
<html>
<head>
<title> html external CSS </title>
<link rel=“stylesheet” type=“text/css” href=“style.css”>
</head>
<body>
<p class=“red”>This is red</p>
<p class=“thick”>This is thick</p>
<p class=“thick red”>This is thick and red</p>
</body>
</html>

output

This is red
This is thick
This is thick and red

Internal style

If you want to use similar formatting for all the tags of the same type on a web page, you should use internal styles
Internal style
<html>
<head>
<title> html internal CSS </title>
<style type =“text/css”>
.red { color:red; }
.thick {Font-size:20px; }
</style>
</head>
<body>
<p class=“red”>This is red</p>
<p class=“thick”>This is thick</p>
<p class=“thick red”>This is thick and red</p>
</body>
</html>

output

This is red
This is thick
This is thick and red

In-Line(the attribute style)

One way to apply CSS to HTML is by using the Inline style.
You can put your CSS rules into an HTML document using the <style> Element.
<element/tagname style=declaration in quotes>

In-Line(the attribute style)

<html>
<head>
<title> html inline CSS </title>
</head>
<body>
<p style=“color:red;”>This is red</p>
<p style =“font-size:20px;”>This is thick</p>
<p style =“color:red;font-size:20px;”>This is thick and red</p>
</body>
</html>

output
This is red
This is thick
This is thick and red

Colors in CSS

The use of colours in creation of web page is an important aspect to give web page a distinctive and attractive look. We can use color names, HEX values, RGB, etc values to specify colors. Color can help you to change color of many elements in the web page like, background, text, margins, etc.

Hex codes

A hexadecimal is a 6 digit representation of a color. The first two digits (RR) represent value, the next two are a green value(GG),and the last are the blue value (BB).
A hexadecimal value can be taken from any graphics software like Adobe Photoshop, PaintShop Pro, or even using Advanced paint brush. Each hexadecimal code will be preceded by a pound or hash sign #.
Following are the examples to use hexadecimal notation:

Short Hex codes

This is a shorter form of the six-digit-notation. In this format, each digit is replicated to arrive at an equivalent six-digit value. For example #F00 becomes #FF0000.
This color value is specified using the RGB) property. This property takes three value, one each for red, green and blue.
The value can be an integer between 0 and 255 or a percentage.

Browser safe colors

216 colors are supposed to be most safe and computer independent colours. These colours vary from hexa code 000000 to FFFFFF.
These colours are safe use because they ensure that your computer would display the color correctly when running a 256 colours palette.
The colour property in CSS can be used in many different elements like background text border margins, outline etc.

Cascading Style Sheet in HTML
Part 2

Background in CSS:

The CSS background properties define the background effect for element like, background-color

background-image

background-repeat

background-attachment

background-position

Background Color:

The background-color property specifies the background color of an element.

The background-color of a page is set by using the code.

Body {

Bgcolor: Lightblue;

}

Background Image:

The background-image property specifies an image to use as the background of an element. By default, the image is repeated so it covers the entire element.

The background-image of a page is set by using the code.

Body {

Background-image: url(“bg.gif”);

}

Background Image-repeat Horizontally or vertically:

By default, The background-image property repeats an image both horizontally or vertically.

Some images should be repeated only horizontally or vertically, or they will look strange, like this:

Body {

Background-image: url(“gradient_bg.gif”);

}

Border in CSS

The border properties allow you to specify the style, which and color of an element’s border.

Border Style

Border width

Border Style:

The border-style properties specifies what kind of border to display.

Border Width:

The border width property specifies the width of the four borders.

The width can be set as a specific size (in PX, PT, CM, EM, etc.) or by using one of the three pre-defined values: thin, medium, or thick.

The border-width property can have from one to four values (for the top border, right border, bottom border and the left border)..

Example:

H1 {

BORDER-STYLE: SOLID;

BORDER-WIDTH: 4PX;

}

H2 {

BORDER-STYLE: DOUBLE;

BORDER-WIDTH: MEDIUM;}

border-color property

The border-color property is used to set the color of the four borders. The color can be set by:

Name - specify a color name, like "GREEN",

Hex - specify a hex value, like " #00FF00",

RGB - specify a RGB value, like "RGB(0,255,0)"

border-color property example:

The border-color property also has one to four values. If border-color is not set, it inherits the color of the element.

Example:

P.ONE {

BORDER-STYLE: SOLID;

BORDER-COLOR: RED;

}

border-color property example:

In CSS, there are also properties for specifying each of the borders (top, right, bottom and left) we can use to specify different border styles, colors, etc. Example:

P{

BORDER-TOP-STYLE: DOTTED:

BORDER-RIGHT-STYLE: SOLID;

BORDER-LEFT-COLOR RED;

}

border-color property example:

We can also use short code, to specify all the individual border (width, color, style) properties in one property.

Example:

P

{

BORDER: 6PX DOTTED GREEN;

}

Margin in CSS

The margin property allows us to set the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom and margin-left. The top and bottom margins have no effect on non-replaced inline elements, such as <span> or <code>.

CSS has properties for specifying the margin for each side of an element:

MARGIN-TOP

MARGIN-RIGHT

MARGIN-BOTTOM

MARGIN-LEFT

All the margin properties can have the following values:

Auto, where the browser calculates the margin automatically.

Length specifies a margin in PX, PT, CM, etc.

Percentage specifies a margin in % of the width of the containing element.

Inherit specifies that the margin should be inherited from the parent element.

Margin in CSS:

Example:

P {

MARGIN-TOP: 100PX;

MARGIN-BOTTOM: 100PX;

MARGIN-RIGHT: 150PX;

MARGIN-LEFT: 80PX;

}

Values of Margin

When one value is specified, it applies the same margin to all four sides.

When two values are specified, the first margin applies to the top and bottom, the second to the left and right.

When three values are specified, the first margin applies to the top, the second to the left and right, the third to the bottom.

When four values are specified, the margins apply to the top, right, bottom and left in that order (clockwise)

Height and Width in CSS

The height and width properties are used to set the height and width of an element. The height and width can be set to auto or be specified in length values, like PX, CM, etc., or in per cent (9%) of the containing block.

Height and Width in CSS

Example:

DIV {

HEIGHT: 200PX;

WIDTH: 50%;

BACKGROUND-COLOR: POWDERBLUE: }

Outline in CSS

An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".

Outline differs from borders; the outline is drawn outside the element's border and may overlap other content.

The outline is not a part of the element's dimensions; the element's total width and height is not affected by the width of the outline.

Outline Color

The outline-color property is used to set the color of the outline.

The color can be set by Name, RGB, Hex,Invert, etc.

Outline Color

Example:

P.EX1 {

BORDER: 1PX SOLID BLACK;

OUTLINE-STYLE: SOLID;

OUTLINE-COLOR: RED;

}

Cascading Style Sheet in HTML PART 3

Font in CSS:

The Font property is used to change the size, color and typeface of text on an HTML page.

It can be used according to the attribute it has, like:

COLOR, face, size attribute

Font in color attribute:

COLOR attribute specifies the color of text.

For example:

<FONT COLOR="RED"> Text </FONT>

THE FONT COLOR IS RED

Font in face attribute:

FACE attribute specifies a font face or you can say font family of the text.

For example:

<FONT FACE = "ARIAL"> Text </FONT>

THE FONT IS ARIAL

Font in size attribute:

SIZE attribute specifies the size of text, where 1 is the smallest font size and 7 is the largest.

For example:

<FONT SIZE="6"> Type your text here</FONT> <FONT SIZE = "+1"> means to increase text size after the tag by size 1 until </FONT> tag.

CSS Font Families

CSS, there are two types of font family names: generic family & font family. We will further study about them in the below table:

Font in family attribute:

P{

FONT FAMILY: "TIMES NEW ROMAN", TIMES, SERIF;

}

Font style

The font style property is mostly used to specify italic text. This property has three major values:

Normal - The text is shown normally

Italic - The text is shown in italics

Oblique - The text is "leaning" as similar to italic, but is less supported.

Font style

For example

P.NORMAL [FONT STYLE: NORMAL;}

P.ITALIC {FONT STYLE: ITALIC; }

P.OBLIQUE { FONT STYLE: OBLIQUE: }

Font size

The font size property sets the size of the text. It allows you to customise the text size and giving a special appearance to the web page. The font size value can be an absolute or relative size.

1)Absolute Size 2) Relative size

1)Absolute Size

Sets the text to a specified size and does not allow a user to change the text size in all browsers.

Absolute size is useful when the physical size of the output is known.

2) Relative Size

Sets the size relative to surrounding elements and allows a user to change the text size in browsers.

IEM is equal to the current font size. The default text size in browsers is 16PX. So, the default size of IEM is16PX.

Example:

H1{FONT SIZE: 40PX;}

P{FONT SIZE: 0.875EM;}

BODY {FONT SIZE: 100%; }

FONT SIZE IN CSS

FONT SIZE IN CSS

FONT SIZE IN CSS

Font Weight

The font weight property specifies the weight of a font:

P.NORMAL {FONT WEIGHT: NORMAL;}

THE TEXT IS NORMAL

P.THICK {FONT WEIGHT: BOLD;}

THE TEXT IS BOLD

Align in CSS

The align property in CSS helps to set the position of an element as like a division or text or an image.

Horizontal Alignment of a Division Element

For horizontal alignment of a division we set the width of the element which prevents it from stretching out to the edges of its container. The element takes up the specified width, and the remaining space splits equally between the two margins:

Example

CENTER {

MARGIN: AUTO;

WIDTH: 40%;

BORDER: 2PX SOLID BLUE;

PADDING: 8PX;

}

Align Text

The text can be left right or center aligned. You can also justify the text so that each line is stretched and every line has equal width, along with left and right margins straight.

Align Text

Example:

CENTER {

TEXT-ALIGN: CENTER;

BORDER: 2PX SOLID BLUE

We can set left and right margin to auto and make

IMG {DISPLAY: BLOCK;

MARGIN-LEFT: AUTO;

MARGIN-RIGHT: AUTO;

WIDTH: 40%:}

Using Position

The position helps you to align the image, it may be right, left or center.

Example:

.RIGHT{

POSITION: ABSOLUTE;

RIGHT: 0PX;

WIDTH: 400PX;

BORDER: 2PX SOLID #73AD21;

PADDING: 10PX;

}

Using Padding

There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding:

.CENTER {

PADDING: 60PX 0;

BORDER: 2PX SOLID BLUE;}

To align both vertically and horizontally, use padding and text-align: center:

.CENTER {

PADDING: 70PX 0;

BORDER: 2PX SOLID BLUE;

TEXT-ALIGN: CENTER; }

Using Line-height

Another trick is to use the line-height property with a value that is equal to the height property.

.CENTER {

PADDING: 60PX 0;.CENTER{

LINE-HEIGHT: 200PX;

HEIGHT: 200PX;

BORDER: 2PX SOLID BLUE;

TEXT-ALIGN: CENTER;}

Using Position & Transform

If padding and line-height are not options, a third solution is to use positioning and the transform property:

.CENTER {

HEIGHT: 200PX;

POSITION: RELATIVE;

BORDER: 3PX SOLID GREEN;

}

.CENTER P {

MARGIN: 0;

POSITION: ABSOLUTE;

TOP: 50%;

LEFT: 50%;

TRANSFORM: TRANSLATE ( -50 %, -50%);

}

Float in CSS

The float property is used for positioning and layout on web pages.

it can have one of the following values:

Left Right None

Left

The element floats to the left of its container.

IMG {

FLOAT: LEFT;

}

RIGHT

The element floats to the right of its container.

IMG {

FLOAT: RIGHT;

}

None

The element does not flow and remains in between the text where it is placed.

IMG {

FLOAT: NONE;

}

Saturday 18 December 2021

CSS (Cascading Style Sheet)

Advantage of CSS

Disadvantage of CSS

CSS Syntax

CSS Syntax

CSS Selectors

External style

output

Internal style

output

In-Line(the attribute style)

In-Line(the attribute style)

output

Colors in CSS

Hex codes

Short Hex codes

Browser safe colors

Cascading Style Sheet in HTMLPart 2

Background in CSS:

Background Color:

Background Image:

Background Image-repeat Horizontally or vertically:

Border in CSS

Border Style:

Border Width:

border-color property

border-color property example:

border-color property example:

Margin in CSS

Example:

Values of Margin

Height and Width in CSS

Outline in CSS

Cascading Style Sheet in HTML PART 3

Font in CSS:

Font in color attribute:

Font in face attribute:

Font style

Font Weight

Align in CSS

Using Position

Using Position & Transform

Float in CSS

1 comment:

CSS (Cascading Style Sheet)

Cascading Style Sheet in HTML
Part 2