Web Development

Introduction to CSS & Syntax – CSS

As we are already familiar with the concepts of HTML, we are going to use one of the finest and most popular keytool in web design. To learn CSS first, you must know the basics of HTML.

That’s why CSS is also known as the sister technology of HTML that is used style your web pages. Let us begin with the CSS basics.

CSS Introduction

  1. CSS stands for Cascading Style Sheets
  2. Extension to basic HTML
  3. Normally stored in CSS files eg. [MyStyle.CSS]
  4. Styles to web pages might be adding styles like fonts, colours, spacing to the web documents.

CSS Syntax

  • In CSS, there are two blocks: a selector block and a declaration block.
  • First selector block points to the HTML document you want to style. 
  • Similarly, the declaration block contains declarations. 
  • Different declarations have a different property name and a value.
CSS Selectors

Note: The declaration part must end with a semicolon and curly braces after each declaration.

h1 { color:#fff; border:#f00; }

Example of CSS:

body {
background-color: #333;
}

h1{
color:#f00;
text-align:justify;
}
p {
font-family:”Arial”;
font-size:18px;
}

 

Where to Insert CSS Code.

  1. CSS code is added inside the <head></head> section. Because it is the decoration part. It will display the change in HTML document. It doesn’t display any content so it goes at the <head></head> section.
  2. CSS needs <style></style> tag to execute the CSS code. So we always write CSS code inside <style></style> tag.

CSS Example:

<html> 
<head>

<style type='text/css'>
body {background-color: #333;} 
h1{color:#f00;text-align:justify;} 
p {font-family:"Arial";font-size:18px;} 
</style>

</head>

<body>
</body>
</html> 
 

Tuts

About Author

Tutsmaster.org provides tutorials related to tech and programmings. We are also setting up a community for the users and students.

You may also like

HTML introduction
Web Development

HTML – Introduction, History & Syntax

  • December 21, 2019
So, first of all, I would like to ask a question for the first time when you heard this term
html heading tag
Web Development

HTML – Heading Tag With Syntax

  • December 21, 2019
A heading tag is one of the most important tags we focus on in HTML or web development because, without