-
What is a CSS File? What is the purpose of its use
What is a CSS File? What is the purpose of its use
Keep in mind HTML (Hypertext Markup Language)? The coding language that serves as the foundation for all web development? Well, if HTML is the first language you’ll want to learn when you’re interested in building websites, its cousin CSS is a close second.
What is CSS? And How Does It Relate to HTML?
CSS stands for Cascading Style Sheets with an emphasis placed on “Style.” While HTML is utilized to structure a web document (defining things like headlines and paragraphs, and enabling you to embed video, images and other media), CSS comes through and specifies your document’s style— colors, fonts, and page layouts are all determined with CSS.
Think of HTML as the foundation (there is one in every home), and CSS as aesthetic choices (there is a huge difference between a Victorian palace and a mid-century modern home).
Read also : how do you integrate a css file into your webpage
How Does CSS Work?
CSS brings style to your website pages by interacting with HTML elements. Elements are the individual HTML components of a web page—for instance a paragraph—which in HTML may resemble this:
<p>This is my paragraph!</p>
If you wanted to make this paragraph appear pink and bold to people viewing your web page through a web browser, you’d use CSS code that looks like this:
p { color:pink; font-weight:bold; }
In this case, “p” (the paragraph) is known as the “selector”—it’s the part of CSS code specifying which HTML element the CSS styling will impact. In CSS, the selector written in left of the first curly bracket. The information between curly brackets is called a declaration, and it contains properties and values that are applied to the selector. Properties are things like color, margins, and font size, while the values are settings for those properties. In the above example, there are both "color" and "font-weight" properties, and "pink" and "bold" are the values. Full bracketed set of
{ color:pink; font-weight:bold; }
is the declaration, and again, “p” (meaning the HTML paragraph) is the selector. These same basic principles can be applied to change font sizes, background colors, margin indentations, and more. For instance. . .
body { background-color:lightblue; }
. . .would make your page’s background light blue, or. . .
p { font-size:20px; color:blue; }
. . .will create a 20 point font paragraph with blue.
External, Internal, or Inline CSS?
You may consider how this CSS code is really applied to HTML content, though. Much like HTML, CSS is written in basic, plain text through a text editor or word processor on your computer, and there are three principal approaches to add that CSS code to your HTML pages.CSS codes can be external, internal or inline.
External style sheets are saved as .css files and can be utilized to decide the presence of a whole site through one file (rather than adding individual instances of CSS code to every HTML element you need to modify). In order to use an external style sheet, your .html files need to include a header section that links to the external style sheet and looks something like this:
<head>
<link rel=”stylesheet” type=”text/CSS” href=mysitestyle.css”>
</head>
This will link the .html file to your external style sheet (in this case, mysitestyle.css), and all of the CSS instructions in that file will then apply to your linked .html pages.
Internal style sheets are CSS instructions written directly into the header of a particular .html page. (This is particularly valuable if you have a single page on a site that has a unique look.) An internal style sheet looks something like this. . .
<head>
<style>
Body { background-color:thistle; }
P { font-size:20px; color:mediumblue; }
</style>
</head>
. . . a thistle background color and paragraphs with 20 points, the medium blue font will now be applied to this single .html page.
Finally, inline styles are snippets written directly to the CSS HTML code, and apply only for one coding example. For example:
<h1 style=”font-size:40px;color:violet;”>Check out this headline!</h1>
A specific title on Any single the html page will cause the violet to display in 40 point fonts.
Generally speaking, external style sheets are the most efficient technique for implementing CSS on a website (it's simpler to monitor and implement a site’s style from a dedicated CSS file), while internal style sheets and inline style can be utilized on a case by case basis when individual style changes need to be made.
Thus, if HTML is the foundation, wall, frame, and digit that supports your website, CSS should consider the, window styles, paint colors, and landscaping that come up later.
You can't go anywhere without putting that establishment up first, yet—when you do—you'll need to follow up with some style, and CSS is the ticket to unleashing your inner decorator.
Published by Web designing training in Chandigarh
Tags : css, html, style, color, this
-
Commentaires
Suivre le flux RSS des commentaires
Ajouter un commentaire
|
 Créer mon blog |
Créer mon compte |