Tags in CSS
Tags in CSS
What is CSS ?
- Cascading Style Sheets (CSS)
- CSS, by itself, does nothing.
- Responsible for determining how your HTML looks
Why Does CSS Exist?
- CSS formats your webpage. Without it, there is only content, and no structure or styles.
- Can be written within HTML, or using an external style sheet (the correct way)
- Creating external style sheets prevents you from having to write code multiple times, and makes it easy to modify.
Styling Text With CSS
- Using CSS properties, you can modify the appearence of your HTML.
- This can done by targeting HTML elements.
Inline Style
Adding the style onto the HTML element directly
Uses the style attribute of an element
Declarations go within the style attribute value
<h1 style="color: red; font-size: 32px;">
Example:
Let's say we have the following HTML:
<!DOCTYPE html>
<html>
<head>
<title>My Cat</title>
</head>
<body>
<h1>My Cat Bob</h1>
<p>My cat is named Bob. He is a lazy cat.</p>
</body>
</html>
Here is an example of CSS:
h1 {
color:red;
font-size:24px;
}
p {
color:blue;
font-size: 12px;
}
What is the CSS doing here?
Selectors and Properties
- CSS is constructed of selectors and properties.
- Selectors determine where the styles are applied.
- Properties determine what those styles are.
- CSS begins with a selector, followed by curly braces.
- Declare your styles inside the curly braces.
Examples of Selectors
selector meaning
p, div, etc. element selector
.class class selector
#id ID selector
* Wildcard ("any")
Examples of Properties
property meaning
color text color
border Defines border width, style, and color
text-align justifies text
font-size size of font
font-family defines font
Compound Selectors 1
Selectors can target elements nested within other elements
p img {
max-width: 320px;
height: auto;
}
Compound Selectors 2
Selectors can target specific elements with a class
h1 .title {
display: block;
margin: 0, auto;
padding-top: 1em;
}
Compound Selectors 3
Selectors can target specific elements with several layers of nesting
main .introduction > p {
background-color: lightgray;
margin: 10px auto;
}
"apply these styles to all ps that are direct children of a div of class introduction inside the main section"
Psuedo-Class Selectors
You can target the state of an element using psuedo-class selectors
- Hover
- Visited
- Checked
- Active
- Many others
- Full List on MDN
MDN Psuedo-Class Tutorial
a:hover {
background-color: red;
}
a:clicked {
background-color: blue;
}
a:active {
background-color: green;
}
Including CSS into HTML
There are several ways to add style to an HTML page
<style> Embedded CSS
<link> Tag to a CSS file
<h1 style="color: red; font-size: 32px;"> Inline
<link> Tag to a CSS file
<style> Tags with @import of a CSS file
CSS Style Tags
<!DOCTYPE html>
<html>
<head>
<title>My Cat</title>
<style type="text/css" media="screen">
div {
float: left;
width: 49%;
height: 100px;
border: solid red 1px;
}
button {
float: left;
clear: both;
}
</style>
</head>
<body>
<h1>My Cat Bob</h1>
<p>My cat is named Bob. He is a lazy cat.</p>
</body>
</html>
Linking to CSS
<!DOCTYPE html>
<html>
<head>
<title>My Cat</title>
<link href="styles/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>My Cat Bob</h1>
<p>My cat is named Bob. He is a lazy cat.</p>
</body>
</html>
@import
- You can put all your CSS in one file
- You can load one CSS file into another using @import
Example
<style type="text/css" media="screen">
@import 'my_special_css_file.css';
</style>
Comments
Post a Comment