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>
=======================================================
CSS Paragraph format
The primary use of CSS on paragraphs is to ensure the text is legible.
CSS for paragraphs as a way to control separation and style.
font-family: Sets the typeface (e.g., Sans-serif for modern looks, Serif for traditional).
line-height: Often called "leading." A value of 1.5 to 1.6 is generally considered the "sweet spot" for web readability.
font-size: Standard body text usually sits between 16px and 18px.
id selector uses the id attribute of an HTML element to select an element.
Elements should be unique within a page.
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 UCONN World!</p>
CSS Class Example
CSS classes as reusable labels you can stick onto any HTML element to give it a specific look or behavior.
Reusability: Write the code once, apply it to hundreds of elements.
Consistency: Ensures all buttons, headers, or cards look identical across your site.
Flexibility: An element can have multiple classes, allowing you to "stack" styles.
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