👉CSS (Cascading Style Sheet)
👉CSS (Cascading Style Sheet)
👉Overview
CSS Stands for Cascading Style Sheet
CSS is a simple design language intended to simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, layout designs,variations in display for different devices and screen sizes as well as a variety of other effects.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media
CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML and XHTML.
External stylesheets are stored in CSS files
👉Advantages of CSS
- Pages load faster − If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply it to all the occurrences of that tag. So less code means faster download times.
- Global web standards − Now HTML attributes are being deprecated and it is being recommended to use CSS.
- Easy maintenance − To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
- CSS saves time − You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.
👉Example of CSS
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
👉CSS colors and color code
CSS uses color values to specify a color. Typically, these are used to set a color either for the foreground of an element (i.e., its text) or else for the background of the element. They can also be used to affect the color of borders and other decorative effects.
You can specify your color values in various formats.
Format | Syntax | Example |
---|---|---|
Hex Code | #RRGGBB | p{color:#FF0000;} |
Short Hex Code | #RGB | p{color:#6A7;} |
RGB % | rgb(rrr%,ggg%,bbb%) | p{color:rgb(50%,50%,50%);} |
RGB Absolute | rgb(rrr,ggg,bbb) | p{color:rgb(0,0,255);} |
keyword | aqua, black, etc. | p{color:teal;} |
👉Color With Color Code
Color | Color Code |
---|---|
#000000 | |
#FF0000 | |
#00FF00 | |
#0000FF | |
#FFFF00 | |
#00FFFF | |
#FF00FF | |
#C0C0C0 | |
#FFFFFF |
👉How to set Background Color in CSS
Set the Background Color
Following is the example which demonstrates how to set the background color for an element.
👉Example
<html> <head> </head> <body> <p style = "background-color:Red;"> a Red background color. </p> </body> </html>
👉Output
a Red background color
👉CSS Comments
👉CSS Comments
Comments are used to explain the code, and may help when you edit the source code at a later date.
Comments are ignored by browsers.
A CSS comment is placed inside the <style>
element, and starts with /*
and ends with */
:
👉Example
/* This is a single-line comment */
p {
color: red;
}
👉CSS Margins
The CSS Margin properties are used to create space around elements,
👉Example
margin-top: 150px;
margin-bottom: 230px;
margin-right: 190px;
margin-left: 90px;
}
👉CSS Border
The border property specifies what kind of border to display.
👉Example
p.solid {border-style: solid;}
p.inset {border-style: inset;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.mix {border-style: dotted dashed solid double;}
p.outset {border-style: outset;}
p.none {border-style: none;}
p.hidden {border-style: hidden;}
👉CSS Fonts
👉Example
.sansserif {
font-family: verdana, sans-serif;
}
.serif {
font-family: "Arial", Times, serif;
}
.monospace {
font-family: "Lucida Console", Courier, monospace;
}
👉Output
This is Arial Font
👉CSS Navigation Bars
A navigation bar (or navigation system) is a section of a graphical user interface intended to aid visitors in accessing information. Navigation bars are implemented in file browsers, web browsers and as a design element of some web sites.
👉Example
<li><a href="default.asp">Home</a></li>
<li><a href="news.asp">Computer</a></li>
<li><a href="contact.asp">Contact US</a></li>
<li><a href="about.asp">About US</a></li>
</ul>
👉CSS Forms
CSS form is used to create interactive form for user
The attribute type of the input form can take a variety of form depending on user's choice.
It could be anything out of the possible types like text, search, url, tel, email, password, date pickers, number, checkbox, radio, file etc.
👉Example
👉CSS Image Gallery
CSS image gallary is used to create gallary👉Example
<head>
<style>
div.gallery {
margin: 5px;
border: 1px solid #ccc;
float: left;
width: 180px;
}
div.gallery:hover {
border: 1px solid #777;
}
div.gallery img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
</style>
</head>
<body>
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg" alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the image here</div>
</div>
</body>
</html>
0 Comments