Introduction Use the following cSS requirements to add style cSS Requirements • Link an external style sheet to your html file - give that file an appropriate name • Your style rules should use consistent colors, fonts and sizes The external style sheet should include the following selector types o 1 x Element selector o 1 x Grouped selector o 1x Child selector o 1x Class selector o 1x ID selector
what I have so far
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
<title>About me</title>
</head>
<body>
<h1>Josiah McSweeney</h1>
<div >
<div>
<h2>A bit about me</h2>
</div>
<p>I'm a very open individual I like to chat maybe a little too much I love working with technology which is probably one of the biggest reasons why I'm here now and something that you may need to know about me is I have dysgraphia which is a medical condition and it makes it so I'm unable to write anything down on paper/write anything that could be read on paper
</p>
<p>Some other things to know about me are but I am very meticulous about any and all of my work but I'm not sure if this is because I'm responsible or because of my anxiety disorder which causes me to not forget about anything I really am not sure about this but I'm going to take it as is
</p>
<div>
<h2>Stuff I like</h2>
</div>
</div>
<p>Here below are a couple of lists of all things I like these made between food, computers and other things </p>
<ul>
<li>video games</li>
<li>cheesecake</li>
<li>technology</li>
</ul>
<dl>
<dt>My moms name</dt>
<dd>Sharon</dd>
<dt>My dads name</dt>
<dd>Mike</dd>
</dl>
<img src="joe.jpg" alt="image here">
<div class="intro">
<footer>
<p>Author: Josiah McSweeney</p>
<p id="para1"><a href="332boyman@gmail.com">332boyman@gmail.com</a></p>
</footer>
</div>
</body>
</html>
Element selector:
Element selectors select all elements by their tag and give the same style to all of them.
Example:
|
h1{ color: blue; } |
It will give color blue to all h1 elements on the whole page.
Grouped selector:
The grouping selector selects all elements and gives the same style it will be any form of selector separated by a comma.
Example:
without grouped selector code:
|
h1{
.class-selector {
|
Using grouped selector code:
| h1, .class-selector, #idSelector{ color: blue; } |
It will give color blue to all h1 tags, all elements that have the class-selector class name, and element that has idselector id.
Class selector:
The class selector selects all elements with the specified class names and applies CSS or style to those particular elements. this type of selector must start with (.) and after the class name.
syntax:
|
.class_name{ /* your style */ } |
example:
|
.margin-top{ margin-top: 10px; } |
In the above example, we used the .margin-top class that we can use in HTML code to any place where margin-top 10px is required.
Child selector:
The child selector selects all elements that are the children of a particular element and apply to your CSS to those elements.
example:
| div > h1 { color: red; } |
In the above example, it will select all <h1> elements that are children of the <div> element.
Id selector:
The id selector selects a specific element whose id's value and id selector name are the same.
Id selector always starts with # and then id.
example:
| #idSelector { color: blue; } |
Step by step
Solved in 3 steps
