CSS Primer
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://stamford.uconn.edu/"> link to UCONN Stamford 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
=====================================================================
p {
color: blue;
}
a {
color: red;
}
========================================================
File is saved as “style.css” in the same directory as your HTML page then it can be linked to in the HTML like this:
========================================================================
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="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://stamford.uconn.edu/"> link to UCONN Stamford 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 UCONN World in 24pt size</h1>
<p class="p1">Classroom blogs use Arial font</p>
<p class="p2">Coding examples use Courier New</p>
<p> Body background color set to light blue</p>
<p>Hello UCONN World!</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
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 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;
}
</style>
</head>
<body>
<p id="para1">Hello UCONN Stamford!</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>
=======================================================
The CSS margin properties are used to create space around elements, outside of any defined borders.
padding is the space between an element's border and the element's content.
div {
border: 1px solid black;
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
background-color: lightblue;
}
The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
====================================================================
<!DOCTYPE html>
<html>
<head>
<style>
p.dotted {border-style: dotted;border-width: 5px0;margin-top: 100px;
margin-bottom: 100px;margin-right: 150px;margin-left: 80px;background-color: lightblue;}
p.dashed {border-style: dashed;border-color: red;margin-top: 50px;margin-bottom: 50px;margin-right: 100px;margin-left: 40px;background-color: lightgreen;}
p.solid {border-style: solid;border-width: thick;padding: 70px;}
p.double {border-style: double; border-color: blue;padding: 100px;}
</style>
</head>
<body>
<h2>The border-style Property</h2>
<p>This property specifies what kind of border to display:</p>
<p class="dotted">A dotted border: border-width: 5px0; margin-top: 100px;
margin-bottom: 100px;margin-right: 150px;margin-left: 80px;background-color: lightblue .</p>
<p class="dashed">A dashed border border-width: 5px0;margin-top: 100px;
margin-bottom: 100px;margin-right: 150px;margin-left: 80px;background-color: lightblue;.</p>
<p class="solid">A solid border.border-width: thick;padding: 70px;</p>
<p class="double">A double border.border-color: blue;padding: 100px;</p>
</body>
</html>
====================================================================
No comments:
Post a Comment