Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.pink;
What is CSS? and the way will It Relate to HMTL?
➤ CSS stands for Cascading Style Sheets with a stress placed on “Style.” whereas markup language is employed to structure an internet document ( defining things like headlines and paragraphs, and permitting you to insert pictures, video, and different media ), CSS comes through and specifies your document’s style page layouts, colors, and fonts square measure all determined with CSS. consider markup language because of the foundation (every house has one ), and CSS because of the aesthetic decisions (there’s a giant distinction between a Victorian mansion and a mid-century fashionable home ).
How will CSS Work?
➤ CSS brings style to your web content by interacting with hypertext markup language components. components area unit the individual hypertext markup language parts of an online page, for instance, a paragraph which in hypertext markup language may seem like this:
< p > This is a paragraph < /p >
➤ If you needed to create this paragraph seem blue and daring to folks viewing your website through an online browser, you’d use CSS code that appears like this:
p { color : blue; font-weight : bold ; }
➤ In this case, “p” (the paragraph) is named the “selector”—it’s a part of CSS code specifying that the hypertext mark-up language part the CSS styling can impact. In CSS, the selector is written to the left of the primary curling bracket. the knowledge between curling brackets is named a declaration, and it contains properties and values thaCSS stands for Cascading Style Sheets with a stress placed on “Style.” whereas markup language is employed to structure an internet document ( defining things like headlines and paragraphs and permitting you to insert pictures, video, and different media ), CSS comes through and specifies your document’s style page layouts, colors, and fonts square measure all determined with CSS. consider markup language because of the foundation ( every house has one ), and CSS because of the aesthetic decisions (there’s a giant distinction between a Victorian mansion and a mid-century fashionable home ).t are applied to the selector. Properties are things like font size, color, and margins, whereas values are the settings for those properties. within the example on top of, “color” and “font-weight” ar each property, and “blue” and “bold” are values. the complete bracketed set of
{color : green ; fontweight : bold ; }
➤ Is the declaration, and again, “p” (meaning the markup language paragraph) is that the selector. These same basic principles may be applied to vary font sizes, background colors, margin indentations, and more. as an example. . .
body { background-color : lightgreen ; }
➤ would create your page’s background lightweight green, or. . .
p { font-size : 48px ; color : pink ; }
➤ will create a 48 point font paragraph with pink letters.
External, Internal, or Inline CSS?
➤ You might be questioning, however, this CSS code is really applied to hypertext markup language content, though. very similar to a hypertext markup language, CSS is written in straightforward, plain text through a text editor or application on your laptop, and there are 3 main ways in which to feature that CSS code to your hypertext markup language pages. CSS code
(or vogue Sheets) will be external, internal, or inline. External vogue sheets are saved as .css files and maybe accustomed verify the looks of a whole web site through one file (rather than adding individual instances of CSS code to each hypertext markup language component you would like to adjust). so as to use an associate external sheet, your .html files got to embrace a header section that links to the external sheet and appears one thing like this:
< head >
< link rel = "stylesheet" type = "text/CSS" href = mysitestyle.css" >
< /head>
➤ This will link the .html file to your external sheet
(in this case, mysitestyle.css), and every one of the CSS
directions therein file can then apply to your joined .html pages.
➤Internal style sheets square measure CSS directions written directly into the header of a selected .html page. (This is particularly helpful if you've got one page on a website that includes a distinctive look.) an indoor sheet appearance one thing like this. . .
< head >
< style >
Body { background-color : green ; }
P { font-size : 20px ; color : mediumred ; }
< /style >
< /head>
< style >
Body { background-color : green ; }
P { font-size : 20px ; color : mediumred ; }
< /style >
< /head>
➤ green background color and paragraphs with twenty
purpose, medium blue font can currently be applied to the current single .html page.
➤Finally, inline designs area unit snippets of CSS written directly into hypertext mark-up language code, and applicable solely to one cryptography instance. For example:
< h1 style = "font-size : 48px ; color : pink ;"> headline </h1>
➤would cause one specific headline on one .html page to look in pink, 48 point font.
➤Generally speaking, external style sheets are the foremost economical methodology for implementing CSS on a web site (it’s easier to stay track of and implement a site’s style from a fervent CSS file), whereas internal style sheets and inline style will be used on a case by case basis once individual style changes ought to be created.
➤So if markup language is that the foundation, frames, walls,
and girders supporting your web site, think about CSS the paint color, window designs, and landscaping that comes on after. You can’t get anyplace while not golf stroke that foundation up 1st, but once you do—you’ll wish to follow up with some vogue,
and CSS is that the price ticket to unleashing your inner decorator.
and girders supporting your web site, think about CSS the paint color, window designs, and landscaping that comes on after. You can’t get anyplace while not golf stroke that foundation up 1st, but once you do—you’ll wish to follow up with some vogue,
and CSS is that the price ticket to unleashing your inner decorator.
No comments:
Post a Comment