CSS Learning #17

-



CSS

CSS is used to control and format the style of a web document or web pages in a simple and easy way.

 

WHAT IS CSS?

CSS stands for Cascading Style Sheets.

Once the styles are defined in CSS, it can be used by any page that references the CSS file. and if we want to change any format or style of several pages we have to change only CSS file at once.

CSS is a method to beautify html pages. it is a power of beautification that is apply on simple HTML pages.

Using style sheet language, you can add effects or animations to your website, animations like different buttons effects, spinners or loaders and animated backgrounds.

 

CSS  Syntax:

               

               

                h1 color: red ; font-size:10px;}

               

                                      

 

The declaration block contains one or more declarations in braces separated by semi-colons. Each declaration itself contains a property, a colon (:), and a value.


There are three different ways to implement CSS Styles:

Inline

External

Internal

Internal CSS

we can also called embedded CSS to internal CSS. the style of CSS is specified between opening<head> and closing </head> tags. internal CSS affects all the elements in the body section.

 

located in the <head> opening tag in HTML page.

after that put following code:

               

Example:

<html>

<head>

<body>

{

h1{                    

}

</style>

</head>

<h1> Heading Tag </h1>

</body>

</html>


we can also use class and ID selectors in this style sheet.

Example:

.class{

}

#id{

 

Since we'll only add the code within the same HTML file. we don't need to upload multiple files.

one disadvantage is that, adding the code to the HTML file can increase the page's size and loading time.


External CSS

External style sheet is the most and best used method to add styles to a web pages. you can link your web pages to an external .css file, .css file can be created by any text editor in your device for example Notepad++.

with this type of CSS you can change the entire website's look by changing just one file.

you have to include a reference to the external style sheet file inside the <link> element, inside the head section of each HTML page.

<link rel="stylesheet" type="text/css" href="style.css">

   

Inline CSS

An inline style used to apply a special style for a single html element. it can use for styling a single page, used for limited section.

 

inline style is the simple way to apply style to html elements. you have to add styles directly to html elements.

<body>

</body>

 


CSS Comments

Comments are used in CSS to explain a code or to make changes during development. the code doesn't execute which is commented.

comment starts with /* and ends with */:                                                                                            

/* This is a single-line comment */

p{

Add comments wherever you want:

p{

color: blue; /* This is a single-line comment */

 

Multiple line Comments:

p{

color: blue; /* paragraph tag,

               

               

 

Comments

Post a Comment

Thanks you
for comment and your suggestion

Popular posts from this blog

Hacker Directory #49

-
Image
  Do you feel dumb when you don't know the meaning of a certain term?  Well, then this will certainly help you out!  If you are ever unsure about anything, simply swipe left and find that specific word, then read the definition.  ABBREVIATIONS DDoS = Distributed Denial of Service DrDoS = Distributed Reflected Denial of Service Attack, uses a list of reflection servers or other methods such as DNS to spoof an attack to look like it's coming from multiple ips.  Amplification of power in the attack COULD occur.  FTP = File Transfer Protocol. Used for transferring files over an FTP server. FUD = Fable Hex = In computer science, hexadecimal base - refers to the number 16. These are the numbers that use the digits in the series: 0123456789ABCDEF. In the C programming language (as well as Java, JavaScript, C and other places), hexagonal numbers are subscribed by a bull. Thus, one can say that the number 0x80 is not equal to 80 decimals but equal to 128...
Read more

Programmer Know about following concept #21

-
Image
1. Caching 2. Time Complexity 3. Networking basics 4. Cloud Computing 5. Data structures and Algorithms 6. Database and SQL 7. Text editors 8. UNIX 9. Programming languages 10. Scripting languages   Explain  : 1. Caching A cache is stores data, that is hardware or software component so that future requests for that data can be served faster. Without cache no modern web system can runs. 2. Time Complexity Time complexity is the computational complexity that   describes the amount of time it takes to run on algorithm. 3. Networking basics You have to understand the basics of how the network in order to be a good programmer. Through switches, routers and wireless access points, devices connected to your network can communicate with one another and with other networks, like internet. Routers, wireless access points and Switches perform very different functions in a network. 4. Cloud Computing It's the on-demand availability of computer system resources, especially data s...
Read more

You are Founder of Software company #20

-
Image
Visual Design: The Goal of visual design is to shape and improve the user experience through considering the effects of illustration typography, space, etc. it is important to note that the visual side needs to comply with the UX design. Having a product that looks good cannot justify poor usability. Tips : Try developing a sense of good design by reading something (example: relevant digests) for 30 min every week to train your perception. you don’t need to have any actual design skill.   Resources: designernews.co Sodebar.io   UX Design: User experience describe all the interaction between customer and a product – From visual on a landing page to support request. Bad user experience designed make people hate your product. Tips : If you are not an expert. Follow establish design patterns and try copy great products design when possible. Those teams spent a lot of resources on experiments to improve their UX design, so it ...
Read more