About CSS
In this article we will know "What is CSS ?". Different people do different types of work like someone doing their own business, someone doing online jobs and someone working inside a company.
Whether the work is big or small, a person has to work hard in every work, only then he can earn money. In the same way, a Web Developer also earns money by working hard through the Internet. If you thinking you will start web design and coding first of all you should know basic of html and CSS. It's necessary to learn html and CSS. Every website has using html and CSS so we will learn here what is CSS and how it's works. So let's go ππ
body {margin: 0;background-color: green;}Save this code as “style.css” in the same folder as the .html file. You can thenuse the <link> tag above to link this CSS file to your HTML file.The second method to add CSS rules to our site is to embed the code directlyinto our HTML source code, within the head element. This is done with the<style> tag. An example is shown below. The embedded CSS code starts afterthe <style> start tag and ends before the </style> end tag.<head><style>div {color: blue;width: 100px;height: 200px;}</style></head>
Now that we know how to apply CSS rules to our HTML files, let’s move on to
learn some actual CSS code. The first thing to learn about CSS is its syntax,
which is relatively straightforward. The syntax is:
selector { property : value; property : value; property : value; }
For instance, if you want to style the contents inside a <div> tag, you write the
rule as
div {
background-color: green;
font-size: 12px;
}
The first word div is the selector. It tells the browser that the set of rules inside
the curly brackets { } applies to all elements with the <div> tag.
Inside the curly brackets, you write all your declarations. You start by declaring
the property that you want to set (background-color in the first declaration),
followed by a colon (:). Next, you give the value that you want (green in this
case). Finally, you end each declaration with a semi-colon (;).
Indentation and line breaks do not matter in CSS. You can also write your
declarations like this:
div { background-color: green; font-size: 12px; }
There are basically two ways to do it. The first method is to use the id attribute. In your HTML document, instead of just using the <div> tag, you can add an id attribute to it. For instance, you can write
<div id=”para1”>
Some text.
</div>
<div id=”para2”>
More text.
</div>
In our CSS code, we can then select the respective id by adding a # sign in front
of the id name. An example is shown below:
div {
background-color: green;
}
#para1
{
font-size: 12px;
}
#para2
{
font-size: 14px;
}
All elements in CSS are treated as boxes. CSS boxes consist of margins, borders,
padding, and the actual content as shown below.
The thick black line is the border. Within the border is the padding and the actual
content. Outside the border is the margin of the box. The thickness of the
padding, border and margin can all be modified with CSS. To understand how
this box model works, let’s analyze the code below. You can download this code
at http://learncodingfast.com/css.
<!doctype html>
<html>
<head><title>Chapter 4 - CSS Box Model</title>
<style type="text/css">
#box1 {
margin: 20px;
padding: 10px;
border: 5px solid black;
width: 100px;
height: 100px;
text-align: justify;
float: left;
}
#box2 {
margin: 20px;
padding: 50px;
border: 5px solid black;
width: 100px;
height: 100px;
text-align: justify;
float: left;
}
</style></head>
<body>
<div id="box1">Learn CSS in One Day and Learn It Well. CSS is easy.
</div>
<div id="box2">Learn CSS in One Day and Learn It Well. CSS is easy.
</div>
<p>Welcome to TechnoTips</p>
</body>
</html>
If you run this code, you’ll get the boxes below. The gibberish text beside and
below the boxes is added to show the margin.
Text and Font
Text and font properties in CSS are used to format the appearance of words and text on a webpage. The font property is concerned with how the characters look, such as whether they are ‘fat’ or ‘thin’, ‘big’ or ‘small’, and what font type to use. The text property is used to style everything else. In this chapter, we’ll be covering the text and font properties commonly used.
Font Properties
font-family
The font-family property is used to set the font type.
There are three main categories of font types: serif, san serif and monospace.
Serif fonts have a small line at the end of some characters.
Start with a more specific font (such as “Times New Roman”) and end with a generic font family. If the font name is more than one word, quotation marks should be used.
Example:
font-family: "Times New Roman", Times, serif;
font-style: italic;
Comments
Post a Comment