Getting started with CSS Introduction Topic
This draft deletes the entire topic.
Examples
-
An external CSS stylesheet can be applied to any number of HTML documents by placing a
<link>element in each HTML document.The attribute
relandhrefof the<link>tag have to be set to"stylesheet"and the relative or absolute path to the stylesheet, respectively. While using relative URL paths is generally considered good practice, absolute paths can be used, too. In HTML5 thetypeattribute can be omitted.It is recommended that the
<link>tag be placed in the HTML file's<head>tag so that the styles are loaded before the elements they style. Otherwise, users will see a flash of unstyled content.Example
hello-world.html
<html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>Hello world!</h1> <p>I ♥ CSS</p> </body> </html>style.css
h1 { color: green; text-decoration: underline; } p { font-size: 25px; font-family: 'Trebuchet MS'; } -
CSS enclosed in
<style></style>tags within an HTML document functions like an external stylesheet, except that it lives in the HTML document it styles instead of in a separate file, and therefore can only be applied to the document in which it lives. Note that this element must be inside the<head>element for HTML validation (though it will work in all current browsers if placed inbody).<head> <style> h1 { color: green; text-decoration: underline; } p { font-size: 25px; font-family: 'Trebuchet MS', sans-serif; } </style> </head> <body> <h1>Hello world!</h1> <p>I ♥ CSS</p> </body> -
-
CSS styles can not only be imported into HTML, but also into another CSS file using
@import.The following line imports a CSS file named
additional-styles.cssin the root directory into the CSS file in which it appears:@import '/additional-styles.css';Importing external CSS is also possible. A common use case are font files.
@import 'https://fonts.googleapis.com/css?family=Lato';An optional second argument to
@importrule is a list of media queries:@import '/print-styles.css' print; -
Use inline styles to apply styling to a specific element. Note that this is not optimal. Placing style rules in a
<style>tag or external CSS file is encouraged in order to maintain a distinction between content and presentation.Inline styles override any CSS in a
<style>tag or external style sheet. While this can be useful in some circumstances, this fact more often than not reduces a project's maintainability.The styles in the following example apply directly to the elements to which they are attached.
<h1 style="color: green; text-decoration: underline;">Hello world!</h1> <p style="font-size: 25px; font-family: 'Trebuchet MS';">I ♥ CSS</p> -
Pure JavaScript
It's possible to add, remove or change CSS property values with JavaScript through an element's
styleproperty.var el = document.getElementById("element"); el.style.opacity = 0.5; el.style.fontFamily = 'sans-serif';Note that style properties are named in lower camel case style. In the example you see that the css property
font-familybecomesfontFamilyin javascript.As an alternative to working directly on elements, you can create a
<style>or<link>element in JavaScript and append it to the<body>or<head>of the HTML document.jQuery
Modifying CSS properties with jQuery is even simpler.
$('#element').css('margin', '5px');If you need to change more than one style rule:
$('#element').css({ margin: "5px", padding: "10px", color: "black" });jQuery includes two ways to change css rules that have hyphens in them (i.e.
font-size). You can put them in quotes or camel-case the style rule name.$('.example-class').css({ "background-color": "blue", fontSize: "10px" });See also
Remarks
Styles can be authored in several ways, allowing for varying degrees of reuse and scope when they are specified in a source HTML document. External stylesheets can be reused across HTML documents. Embedded stylesheets apply to the entire document in which they are specified. Inline styles apply only to the individual HTML element on which they are specified.
Sign up or log in
Save edit as a guest
Join Stack Overflow
We recognize you from another Stack Exchange Network site!
Join and Save Draft