CSS Primer
CSS, or Cascading Styles Sheets, provides a method to provide a style of how web pages should be displayed. This allows developers to provide style templates that web pages can use for consistent look.
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 - Internal uses the style section of the <HEAD> section to have styles used for the entire 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 makes all of the paragraphs in the page display in blue text and all of the links displayed in red.
External - A style.css file can be created and referenced from each web page. This allows web pages to share a file and all CSS commands display the same. Look and feel stays consistent throughout the site.
=========================================================
p {
color: blue;
}
a {
color: red;
}
========================================================
The 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>
=========================================================
The font-size and color properties to all the tags in the body selector.
CSS selector will point to the HTML element you want to affect.
Some of the most commonly used CSS command
Fonts
font-family: Arial, Helvetica, sans-serif;
Style
font-style: italic;
Size
font-size: 24px;
Background
background-color: lightblue;
Text Align
text-align: center;
Can use the class selector to create a specific style for any element you want to apply it for. They create reusable label for styling.
=======================================================
<!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>
=======================================================
CSS Paragraph format
The id selector uses the HTML attribute id element to select an element.
Elements need to be unique within a page.
The hash (#) character, followed by the id of the element.
The style rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: blue;
}
<p id="para1">Hello Google World!</p>
CSS ID Example
The class selector selects elements with a specific class attribute.
write a period (.) character, followed by the name of the class.
=======================================================
<!DOCTYPE html>
<html>
<head>
<style>
#para1 {
text-align: center;
color: blue;
}
.center {
text-align: center;
color: blue;
font-size: 18px;
}
</style>
</head>
<body>
<p id="para1">Hello Google World!</p>
<p>This paragraph is not affected by the style.</p>
<h1 class="center">Blue and center-aligned heading</h1>
<p class="center">Blue and center-aligned paragraph.</p>
</body>
</html>
=======================================================
No comments:
Post a Comment