CSS Cascading style sheet coding for kids

Spread the love

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

example of css


</style>

<!DOCTYPE html>
<html>
<head>
<style>
p {
color: red;
text-align: center;
}
</style>
</head>
<body>

<p>this is my page</p>
<p>this is my page.</p>

</body>
</html>

css coding for kids

<style> p { color: red;text-align: center; } </style>

here paragraph is in red colour and center of page

 

Three Ways to Insert CSS


There are three ways of inserting a style sheet:

  • External CSS
  • Internal CSS
  • Inline CSS

External CSS

With an external style sheet, you can change the look of an entire website by changing just one file

<!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>

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

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

<!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

Leave a Reply

Your email address will not be published. Required fields are marked *