Login With Github

CSS Introduction

Before deeping into CSS, you need to understand the background of CSS and other related web technologies.

What is CSS

CSS means Cascading Style Sheets. CSS styles which define how to display HTML elements are usually stored in style sheets.

External style sheets which can be applied into multiple pages can improve our efficiency obviously. And the external style sheets are usually stored in CSS files.

What problem does CSS solve?

HTML tags were originally designed to define document content. By using the tags such as <h1>, <p>, and <table>, you can express the corresponding information such as “this is a heading”, “this is a paragraph”, and “this is a table” . For example:

<h1>This is a heading</h1>

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

You can use the browser to do with the layout of a document.

But it's becoming more and more difficult to render web pages just relying on HTML documents because the two main browsers (Netscape and Internet Explorer) are continuing to add new HTML tags and attributes (such as <font> tag and color attribute) to the HTML specification.

To solve this problem, the World Wide Web Consortium (W3C) created CSS (Cascading Style Sheets) after HTML 4.0. So you don't need to define complex styles in HTML documents any more. And CSS is supported by all major browsers.

Relationship between HTML, CSS, and JavaScript

HTML, CSS and JavaScript are the most basic three technologies in website development area. They take different responsibilities:

  • HTML is used to define HTML documents and describe what elements you want to contain on the page.
  • CSS is used to define styles and specify how the elements should be displayed on the page.
  • JavaScript is used to define actions. For instance, you want to trigger a series of events after clicking a button.

Here is a simple example that maybe you can try it by yourself to understand better:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML,CSS,JavaScript Demo</title>
<style type="text/css">

.default_head{
    color:black;
    font-size:20px
}

.new_head{
    color:red;
    font-size:30px;
}

.button_style{
    padding:5px;
}

</style>
</head>
<body>

<h1 class="default_head" id="heading">Hello,My First Heading.</h1>

<input type="button" value="Click to change heading style" onclick="changeStyle()" />

<script>
function changeStyle(){
var h1 = document.getElementById('heading');
if(h1.className=='default_head'){
    h1.className = 'new_head';
}
else{
    h1.className = 'default_head';
}
}

</script>

</body>
</html>

The meaning of "Cascading"

"Cascading" means that the same element is to be set multiple times, and the final style of the element is determined by the style priority.

In general, the style priority is as follows:

Inline style (the style attribute of the HTML element)> Internal style (<style> tag inside <head> tag)> External style> Browser default settings

So you can use an external style sheet to define a set of styles for multiple pages in a unified way. Then the style of a particular element can be rewrittenwith an internal or inline style on each page. It will make you improve your efficiency greatly.

0 Comment

temp