CSS stands for Cascading Style Sheet. CSS is used to control the style of web document in a simple and easy way. CSS to control the style and layout of multiple web pages all at once. CSS is created and maintained through a group of people within the W3C called the CSS working group.
The <style> tag should be included within the <head> tag on your page. The type attributes indicates the MIME type of style sheet. text/css is the only value you'll use. It's not required on HTML5, and most designers leave it out. The body of the style sheet consists of a series of rules. All rules have the same structure:
selector { property1: value1; property2: value2; ..}
Styles
- CSS was introduced to provide better way to style html elements.
- Can we attached as a separate document or embedded in html document itself.
👉Three methods:-
1. Inline Styles:
- Using style attribute in html start tag
- Have highest property
- Includes series of CSS property and value pairs.
Example
<h1 style = "color : red; font-size : 35px;"> This is a heading </h1>
<p style = "color : rgb(1, 128, 0); font-size : 20px;"> This is a paragraph </p>
<div style = "color : #0000FF; font-size : 22px;"> This is my brown div </div>
2. Embedded / Internal Styles:
- Using <style> element in head section of document.
- Have lowest property
- Any number of <style> elements inside head section.
Example
<head>
<style>
body { background-color : #EE82EE"; }
h1 { color : orange;}
p { color : rgb(128, 0, 128); }
</style>
</head>
3. External Styles:
- Using <link> element pointing to external CSS files.
- Have lowest priority
👉Two ways to attach external style sheet
Linking
<head>
<link rel = "stylesheet" href = "css/style.css">
</head>
Importing
<style>
@import URL("css/style.css");
</style>
NOTES.....
1. A CSS file contains the body of a <style> tag. To turn the style sheet from the previous section into a separate file, you could just save the following to a file called styles.css
2. The href attribute is the same as that of the <a> tag. It can be relative URL, an absolute URL, or even a fully qualified URL that points to a different server. As long as the browser can be fetch the file, any URL will work.
