A Complete CSS Guide for Beginners.
Sidh Prakash
Founder of Nerd Blogs|Python Developer (Self Employed) | Freelance|Web designer |Blogger|
Introduction to CSS
CSS is a short abbreviation for 'Cascading Style Sheet' . It was launched on 17th December 1996 and was developed by W3C(World Wide Web Consortium).CSS is a Styling language used to style and embed special features in Webpages with the help of markup languages like HTML(Hypertext Markup Language) or XML(Extensible Markup Language). CSS comes with a special properties for all elements of a webpage like Font ,Text, Border, color, margin, padding, transitions etc.
The First Version of CSS was CSS 1 launched in 1996 and CSS 2 was developed in 1998 . The Latest Version of CSS is CSS 4.15 and was developed in December 2020. Now as CSS come under W3C recommendation so it is also aligned in a hierarchical Structure of DOM discussed in the next paragraph.
.
DOM
DOM stands for 'Document Object Model'. DOM is data representation of objects the contains a logical and hierarchal structure of contents and elements in webpages. DOM is also used for presenting the a way that how a document should be accessed or manipulated. We can Understand DOM by a simple hierarchy model structure..
By seeing Figure1.0 we can clearly understand how the following HTML Tags are in a proper hierarchy Model Structure Firstly we have created one document named as document.html(ext.) then opened up with a <html> tags containing two sub tags <head> and <body>. <head> tag contain <title> tag with a text value. and <body> tag contains <p> and <ul> tag . <p> tag contains text value whereas, <ul> contains 3 <li> tags with 3 text value. Now we will write these in a proper code manner.
<html>
<head>
<title>text</title>
</head>
<body>
<p>
<ul>
<li>text</li>
<li>text<li>
<li>text<li>
</ul>
</p>
</body>
</html>
DHTML
DHTML Stands for 'Dynamic Hypertext Markup language' . It is not a language like HTML but it is a combination of web development technologies which contains a Markup Language(HTML), Styling Language(CSS) , Scripting Language Like(JavaScript & TypeScript). For creating webpages more creative , dynamic and attractive.
CSS Syntax
For Defining CSS Syntax we should be familiar with some terms.
Linking CSS with HTML Document
<a href = "www.google.com" style = "color: hot pink; margins:0;">Click Here</a>
<link rel = "stylesheet" type="text/css" href="name of file.css">
Properties of CSS
CSS contain some Properties for designing and making html elements more beautiful and attractive. The Types of CSS Properties are as follows:-
Font-Properties
Font Properties are a set of features and rule applied for styling font of a webpage.
There are 4 type of Font-Properties
a{
font-family: italic;
}
a{
font-family:normal;
} a{font-family: oblique;}
领英推荐
body{
font-size:16px;
}
h1{
font-size:10pt
}
p{
font-size:1em
}
a{
font-size:35%
}
i{
font-size:1em
line-height:1.5
} /* here in the <i>tag the relative font-size is 1em=16px
and number=1.5 so , line-height=16px*1.5=24px */
Text-Properties
Text-Properties Determines and styles texts elements of webpage
Example:-
p{
color: blue;
text-align: center;
text-decoration: underline;
text-transform: uppercase;
text-shadow: 2px 2px 4px red;
text-indent: 20px;}
Border-Properties
Border-Properties styles the border element of a webpage.
Example:
div {
border-style: solid;
border-color: green;
border-width: 2px;
border-radius: 10px;
}
Background-Properties
Background Property sets the background of a page.
Example:-
div { background-color: yellow;
background-image: url('path_to_image.jpg');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
background-attachment: fixed;
}
Outline-Properties
Outline Property designs the outline or the outer border of webpage.
Example:-
a{
outline-style: dotted;
outline-color: orange;
outline-width: 3px;
outline-offset: 5px;
}
Margins and Padding
Example:
div {
margin: 10px 20px 10px 20px;
}
Example:-
p {margin:150px;}
Height and Width Property
Height and width property is used to set the height and width of elements. It contains six properties.
Example:
div { /* height = 100px or 100/16 = 6.25em*/
height: 100px; /* width = 200px or 200/16 = 12.50em*/
width: 200px; /*max-height = 150px or 9.375em*/
max-height: 150px; /*max width = 250px or 15.625em*/
max-width: 250px; /*min-height = 50px or 3.125 */
min-height: 50px; /*min-width = 100px */
min-width: 100px;
}
Student at Loyola High School, Patna
11 个月great it helped me ??