CSS Explained
CSS, or Cascading Styles Sheets, is a way to style and present HTML. Whereas the HTML is the meaning or content, the style sheet is the presentation of that document.
There are three ways to apply CSS to HTML:
Inline, internal, and external.
Inline - styles are put straight into the HTML tags using the style attribute.
<p style="color: red">text</p>
=================================================
<!DOCTYPE html>
<html>
<head>
<title>Very simple example
</title>
</head>
<body>
<p style="color: red">Inline commands control style inside html body</p>
</body>
</html>
=================================================
Internal - Embedded, or internal, styles are used for the whole page.
Inside the head element, the style tags surround all of the styles for the page.
=====================================================
<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
p {
color: blue;
}
a {
color: red;
}
</style>
</head>
<body>
<p style="color: blue">text</p>
<p>This paragraph will appear in the color blue</P>
<a href="https://google.com"> link to Google web page will appear red</a>
</body>
</html>
==========================================================
This will make all of the paragraphs in the page blue and all of the links red.
External - Styles are used for the whole, multiple-page website. There is a separate CSS file that needs to be present. The best practice is to place all CSS files in a dedicated css (or styles) subdirectory within your project's publicly accessible.
=====================================================================
p {
color: blue;
}
a {
color: red;
}
========================================================
File is saved as “style.css” in a subdirectory called static. Your HTML page then it can be linked to in the HTML like this:
========================================================================
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="static/style.css">
</head>
<body>
<h1>This is a heading</h1>
<p>The color is from the sytle.css file set up for web pages to use.</p>
<a href="https://google.com/"> link to Google web page will appear red</a>
</body>
</html>
===================================================================
This will apply the given values to the font-size and color properties to the body selector.
CSS Syntax
A CSS rule-set consists of a selector and a declaration block:
CSS selector
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a CSS property name and a value, separated by a colon.
A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.
In the following example all <p> elements will be center-aligned, with a blue
text color:
Some of the most commonly used CSS command
FONTS
Family
Arial
Courier New
.p1 {
font-family: Arial, Helvetica, sans-serif;
}
.p2 {
font-family: "Lucida Console", "Courier New", monospace;
}
Style
p.italic {
font-style: italic;
}
Size
h1 {
font-size: 24px;
}
Background
body {
background-color: lightblue;
Text Align
p {
text-align: center;
}
=======================================================
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: red;
text-align: center;
}
p {
color: blue;
text-align: center;
}
.p1 {
font-family: Arial ;
}
.p2 {
font-family: "Lucida Console", "Courier New", monospace;
}
h1 {
font-size: 24px;
}
p.italic {
font-style: italic;
}
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Hello Google World in 24pt size</h1>
<p class="p1">Classroom blogs use Arial font</p>
<br>
<p class="p2">Coding examples use Courier New</p>
<br>
<p> Body background color set to light blue</p>
<p>Google cloud platform!</p>
<p>These paragraphs are styled with CSS.</p>
<p class="italic">Use the font style to display a paragraph in italic</p>
</body>
</html>
=======================================================
No comments:
Post a Comment