- Get link
- Other Apps
Discuss about CSS -
CSS -
CSS (cascading style sheets) we use it for making our document type HTML beautiful or look good and attractive css help us for making it we write css in in three ways inline , External , Internal it save our lots of work it can control layout of multiple web pages all at once . all the layout was controlled by css and their color combination , padding , margin all these type of thing are control by cascading style sheets css was very simple to understand and learn it was very useful and time saver for all web developer.
Points -
1. It style core html
2. It gives style to your web page
3. Make website cool
4. We use it for structure our website
5. Take responsibility of website
syntax -
P { color : red ;}
p - it is a selector
color- it is a property
red - it is a value
for group selector :-
p,h1,header { color : red ;}
the way to add css in markup are -
1. Inline -
Css added to the element directly using style attribute or say directly to the html tag .
syntax -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>inline css</title>
</head>
<body>
<!-- take a paragraph -->
<p style="color: black;border: 2px solid red;">
this is an inline css
</p>
</body>
</html>
2. Internal -
Css kept inside the head by using <style> tag in html
syntax -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>internal css</title>
<!-- this is an internal css -->
<style>
.css{
color: red;
}
</style>
</head>
<body>
<!-- take a paragraph -->
<p class="css">
this is an inline css
</p>
</body>
</html>
3. External -
Css kept separate inside a css style sheet which we connect to html file using link tag
syntax -
Html file -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>extrnal css</title>
<link rel="stylesheet" href="blog.css">
</head>
<body>
<!-- take a paragraph -->
<p class="css">
this is an inline css
</p>
</body>
</html>
CSS -
.css{
color: blue;
}
Selector -
1. It is use to find element whose property will set
2. we are target html through it
3. through it we have easy to get single or multiple element of html
type of basic selector -
1. element
2. id
3. class
4. grouping
NOTE - for targeting class we using " .class_name " and for targeting id we use " #id_name "more was explained in tutorial second
code -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>tags in html</title>
<style>
.class_name{
color: red;
}
#id_name{
color: blue;
}
</style>
</head>
<body>
<!-- semantic tags -->
<!-- article -->
<article>
article tag in html
</article>
<!-- aside tag -->
<aside>
this is aside tag
</aside>
<!-- id -->
<p id="id_name">
this is how we take id in html
</p>
<!-- class in html -->
<p class="class_name">
this is how we take class
</p>
</body>
</html>
on the live server -
this is how we take id in html
this is how we take class
Comments
Post a Comment