22Sep, 2020
CSS Cascading style sheet coding for kids

CSS Cascading style sheet coding for kids

  • CSS used to give styles on our HTML webpage including font colors, margin, height, width, background, images, lines, position, layout and all types of visual aspects.
  • We need to link the HTML and CSS together in order to apply different formatting on our webpage.
  • In more simple words, CSS decides how the HTML webpage should look like.
  • Even though there are a lot of browsers with different versions. CSS stills support each browser and each version of browsers.
  • It is good to check your webpage appearance on all browsers. So we can get to know the errors and layout of each browser.
  • We consider CSS a powerful tool as compared to HTML that can change the mood and tone of your webpage more efficiently.

teachers CSS CODING

  • CSS stands for Cascading Style Sheets
  • how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files

 

Three Ways to Insert CSS


There are three ways of inserting a style sheet:

  • Internal CSS
  • Inline CSS
  • External CSS

 

Internal CSS


An internal style sheet may be used if one single HTML page has a unique style.

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

css coding kids

Inline styles

Inline styles are defined within the “style” attribute of the relevant element:

<!DOCTYPE html>
<html>
<body>

<h1 style=”color:blue;text-align:center;”>This is blue color</h1>
<p style=”color:red;”>This is red color.</p>

</body>
</html>

css coding for kids

External CSS

  • External css is very important CSS and commonly use .
  • In External CSS we create a CSS file where we give all the elements of CSS and save it with CSS extension .
  • Then we link that file with an HTML file so we can use this CSS file in the HTML document.
  • With an external style sheet, you can change the look of an entire website by changing just one file
  • link under head tag Example <head><link rel=”stylesheet” href=”mystyle.css”></head>

 

Link FIle in CSS

<!DOCTYPE html>
<html>
<head>
<link rel=”stylesheet” href=”mystyle.css”>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

 

CSS Basic Selector

 

  • By Tag Name
  • Class
  • Id

Tag name

h1 {

color:red;

font-size:15px;

}

table{

}

div {

)

In the element, all the elements under the curly bracket we will give our CSS elements which are called as a selector, and all the selector such  h1 table and div will use all the elements known as tag name selector of CSS and this tag name selector make changes to all our h1 table and div class..

Class Selector

.header {

color:red;

font-size:15px;

}

 

Here we created a class .header where the dot is the property of the class and underclass, we will give properties of CSS. Now we can use this class selector in any HTML file.

and to use the above class selector in the Html file we use the following

<div class=”header”></div>

 

Class Name name specification 

u can use class name in multiple ways

  • .header{ 

}

using dot in the beginning and create a class

  • .list-main {

}

You can use the class name with a hyphen.

  • .side_txt{

}

You can use the class name with an underscore.

  • .footHeat {

}

You can use the class name with the camelcase. Note space is not allowed in class.

 

ID selector 

#menu {

}

<ul id=”menu”>

<li> text</li>

</li>text<li>

</ul>

  • Here we are using Id now the difference between Id and class is that we can use Id selector only once whereas class can be used mutiple times.

 

 

 

 

CSS Comments


Comments are used to explain the code and may help when you edit the source code at a later date. Comments are ignored by browsers.

example


/* This is a single-line comment */

<!DOCTYPE html>
<html>
<body>
/* This is a single-line comment */
<h1 style=”color:blue;text-align:center;”>Comment not shown in CSS</h1>
<p style=”color:red;”>Comment not shown in CSS</p>

</body>
</html>

Setting Font property in CSS

The .

Example

Font size ,Font family Font weight and Font style

<!DOCTYPE html>
<html lang=”en”>
<head>

<title>Specify Colors in CSS using Color Names</title>
<style>

h1 {
font-size: 38pt; font-family: “Courier New”;
}
p {font-size: 18pt;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

css font formatting

css font formatting 1

Background color in CSS

The background color of a page is set like this:

<!DOCTYPE html>
<html lang=”en”>
<head>

<title>Specify Colors in CSS using Color Names</title>
<style>
body {
background-color: lightblue;
}

h1 {
font-size: 38pt; font-family: “Courier New”;
}
p {font-size: 18pt;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

background color in CSS

Background Image in CSS

  • In order to place background image in Css you need to have notepad file and image on the same folder.
  • Go to the properties to image and find its extension whether it jpg png or gif
Example 

<!DOCTYPE html>
<html lang=”en”>
<head>

<title>Specify Colors in CSS using Color Names</title>
<style>
body { background-image: url(“LETSCODE.JPG”);

}

h1 {
font-size: 38pt; font-family: “Courier New”;
}
p {font-size: 18pt;
font-weight: bold;
font-style: italic;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

background image in CSS

 

CSS Text Color

Example

<!DOCTYPE html>
<html>
<body>

<h3 style=”color:Tomato;”>CSS coding for kids</h3>

<p style=”color:DodgerBlue;”>There is no question all
students should learn how to code by the end
of high school</p>

<p style=”color:MediumSeaGreen;”>Kids as young as 7 years
of age can start coding and learning programming basics.
</p>

</body>
</html>

color in css coding

color in css coding for kids

CSS Border Color

Border has three properties

  • Border width
  • Border style
  • Border color

<!DOCTYPE html>
<html>
<body>

<h1 style=”border: 4px solid blue;”>”Opportunities don’t happen. You create them.”</h1>

<h1 style=”border: 4px solid Violet;”>”Try not to become a man of success. Rather become a man of value.”</h1>

</body>
</html>

css border color

css border color result

CSS Font Family

<!DOCTYPE html>
<html>
<body>
<style>
.serif {
font-family: “Times New Roman”, Times, serif;
}

.sansserif {
font-family: Arial, Helvetica, sans-serif;
}

.monospace {
font-family: “Lucida Console”, Courier, monospace;
}
</style>
<h1 style=”border: 8px solid Violet;”>”Try not to become a man of success.
Rather become a man of value.”</h1>

<h1 class=”monospace”; style=”border: 4px solid blue;”>”Opportunities don’t happen. You create them.”</h1></body>
</html>

css font family

css font family 1

How to create Border in CSS (Cascading Style Sheet)

 

Border Propertied in CSS:

 In CSs Border has three properties such as

 

1.Border width: 

it means the width of border

It can be 1px 2px …10px.. and so on.

 

2.Border Style: 

CSS has 10 styles of border

No

Border Style

1

Solid

2

Dotted

3

Dashed

4

Double

5

Grooved

6

Ridge

7

Inset

8

Outset

9

None

10

Mix

 

  1. Border Color: 
  2. its can be red ,blue ,green or any color code .

Border Code of the above can be like this .

Example:

border-width :2px;

border-style: solid;

border-color: blue;

CODE OF BORDER IN CSS

Example :

<html>

<head>

<title> CSS border</title>

<style>

h1 {

border-width:3px;

border-style:solid;

border-color:red;

}

</style>

</head>

<body>

<h1>this is my border</h1>

</body>

<html>

CSS short Hand

If we want to write the code in one line it called CSS shorthand .

You need not to write three different line .

border:3px dashed green

Example:

<html>

<head>

<title> CSS border</title>

<style>

h1 {

border:3px dashed green;

}

</style>

</head>

<body>

<h1>this is my border</h1>

</body>

<html>

border in css

If border on one side of the CSS

If border on one side of the text

  • Border-top
  • Border-right
  • Border-bottom
  • Border-left
sequence is top right bottom left as given in the example below

<html>

<head>

<title> CSS border</title>

<style>

h1 {

border-width:3px;

border-top:solid;

border-color:red;

}

h2
{

border-width:4px;

border-style:solid dotted dashed dotted;

border-color: green;

}

</style>

</head>

<body>

<h1>this is my border</h1>

<h2> this is border 2</h2>

</body>

<html>

border in each side 1

How to make CSS outline cascading style sheet

Three CSS outline properties

  • Outline-width
  • Outline-style
  • Outline-color
  • Outline-offset

Outline properties are use to make outline outside border properties in CSS.They are used to make colorful block of text. Outline offset is used to make a gap between outline and border properties.

 

CSS outline Style

No

Style

1

Solid

2

Dotted

3

Dashed

4

Double

5

Grove

6

Ridge

7

Inset

8

Outset

9

none

 

 

How to write a code of outline shorthand in CSS

 

Outline -width: 2px;

Outline-style-dotted;

Outline-Color: red;

Outline shorthand:-

Outline:2px solid red;

Now practically implementing outline in HTML code with use of CSS is given in below example:

Example of Outline in CSS

<html>

<head><title>how to create outline in CSS</title>

<style>

#my {

border:8px solid green;

outline:8px solid red;

 

}

</style>

</head>

<body>

<div id =”my”>

This my paragraph about how to create a outline in css with border </div>

</body>

</html>

CSS Outline 11

How to create Outline Offset in CSS :

It is the gap between the border and the outline

 

<html>

<head><title>how to create outline in CSS</title>

<style>

#my {

border:2px solid green;

outline-width:2px;

outline-style:solid;

outline-color:red;

outline-offset:4px;

}

</style>

</head>

<body>

<div id =”my”>

This my paragraph about how to create a outline in css with border </div>

</body>

</html><body>

<div id =”my”>

This my paragraph about how to create a outline in css with border </div>

</body>

</html>

Outline offset in CSS

How to create CSS padding in Cascading style sheet

Padding is the gap between the border and text or content .This is the way to increase the gap between text and border.

Padding can be:

Padding-top: 10px;

Padding-right:10px;

Padding-bottom:10px;

Padding-left : 10px;

Short hand of padding :

Padding :10px 20px 30px 40px;

Padding is from top right bottom left; is the shorthand of padding.

Example of Padding in Cascading style sheet where we have 10px padding from each side

Padding in CSS where we have equal padding from each side

<html>
<head><title>how to create outline in CSS</title>
<style>
#my {
border:2px solid green;
outline-width:2px;
outline-style:solid;
outline-color:red;
outline-offset:4px;
padding: 10px ;
}
</style>
</head>
<body>
<div id =”my”>
This my paragraph about how to create a outline in css with borderThis my paragraph about how to create a outline in css with border This my paragraph about how to create a outline in css with border
This my paragraph about how to create a outline in css with border </div>
</body>
</html>

Padding in CSS

Example of padding with different padding each side

html>
<head><title>how to create outline in CSS</title>
<style>
#my {
border:2px solid green;
outline-width:2px;
outline-style:solid;
outline-color:red;
outline-offset:4px;
padding: 10px 20px 30px 40px;
}
</style>
</head>
<body>
<div id =”my”>
This my paragraph about how to create a outline in css with borderThis my paragraph about how to create a outline in css with border This my paragraph about how to create a outline in css with border
This my paragraph about how to create a outline in css with border </div>
</body>
</html>

different padding each side CSS

Add Your Heading Text Here