CSS Styling
You should start with something like this
You should have a page with a header, some text organized with divs and paragraphs, an image, and at least one link
Putting Html & css together
HTML is the walls of a house, but CSS is the paint, furniture, curtains, and rugs.
Content is defined by HTML, while the padding, border, and margins are defined by CSS in a box model. You can also style the content with CSS.
By changing the CSS, you can change the entire look of a page without changing the HTML structure.
<head>
<title>Your Name</title>
<link rel="stylesheet" href="/style.css" />
</head>Add a Stylesheet
In the <head> tag of your index.html file, there's a special <link> tag that tells the browser where to find your style sheet. This tells the browser that if it follows a link with the relationship stylesheet, it will find the stylesheet at the location of your file. (<link rel="stylesheet" href="/style.css" />)
How CSS works
p {
color: red;
}
p {
color: red;
font-size: 20px;
}By using HTML tags, you can style parts of your page in different ways. Here, we're telling the browser to color all paragraph <p></p> text red, and then make it 20px instead of the default 12.
In style.css, CSS rules go inside brackets {}, and each line must end with a semicolon ;
If your CSS doesn't work, check that you've closed your brackets and ended with a semicolon!
Selective styling
You can get even more specific by giving HTML tags classes. A class lets you tell the browser to style only divs of a specific class, and not all divs.
Try changing some of your divs to <div class="classname">
"classname" can be anything, but it must be all lower caps and one word!
<!DOCTYPE html>
<html>
<head>
<title>Your Name</title>
<link rel="stylesheet" href="kane-style.css">
</head>
<body>
<h1>Your Name</h1>
<div class="cats">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a turpis ut mauris rutrum rutrum vitae a mi. Vivamus sit amet fringilla turpis. Praesent id erat nisi. Vestibulum auctor ex ac pharetra bibendum.</p>
</div>
<div class="dubstep">
<p>I am interested in <b>cats</b> and <i>dubstep</i>. I would like to run away and <b>join the circus</b> when I grow up.</p>
<p>I am very good at googling things and very bad at <i>writing things</i>.</p>
<p><b>I would like to improve my skills in finding <i>cat pictures</i>.</b></p>
</div>
<div class="cats">
<img src="cat.jpg" width=500px height=auto>
</div>
<div class="dubstep">
<p><a href="https://twitter.com/MaeveKane">My Twitter</a></p>
</div>
</body>
</html>Selective styling
In the stylesheet, specify a class with .classname {}
Native HTML tags don't need a dot, but classes that you define must have a dot with no space before the class name.
p {
color: red;
font-size: 20px;
}
.cats {
background: blue;
}
.dubstep {
background: gray;
}Fancy!
By specifying classes, we've colored all our paragraph text and given divs with different classes different background colors!
/*CHANGE FONT SIZE*/
.cats {
font-size: 20px;
}
/*CHANGE FONT*/
.cats {
font-family: helvetica, sans-serif;
}
/*CHANGE FONT COLOR*/
.cats {
color: lightskyblue;
}
/*ADD A BORDER AND ROUND THE BORDER EDGES*/
.cats {
border: 1px solid black;
border-radius: 3px;
}
/*CHANGE THE BACKGROUND COLOR*/
.cats {
background-color: yellow;
}
/*PAD A DIV*/
.cats {
padding: 10px;
}
/*MAKE SPACE BETWEEN ONE PIECE OF CONTENT AND ANOTHER*/
.cats {
margin: 10px;
}Play around!
What does adding or replacing rules do?
If you're writing several rules for one class, you can combine them between brackets {} as long as they're on separate lines and end with semicolons:
.cats {
color: lightskyblue;
border: 1px solid black;
background-color: yellow;
}What colors are allowed?
You can use "named colors" or their hexcode or rgba equivalents. Follow the links for further reference.
Try some different color combinations using these palettes. Color your divs, your headers, your paragraphs, or the body. If it has a tag or a class you can style it!
| named color | color: red; | no quotes, no spaces |
|---|---|---|
| hexcode | color: #FF0000; | hashtag required, no quotes |
| rgba | color: rgba(255, 0, 0, 1); | red, blue, green, alpha (transparency) |
What Can be styled?
Anything that has a class or a tag can be styled. Try some of these examples and see what they do.
/*STYLE A LINK*/
a {
text-decoration: none;
text-transform: uppercase;
color: white;
}
/*STYLE THE WHOLE BODY*/
body {
background-color: mintcream;
}
/*STYLE A HEADER*/
h1 {
color: white;
text-align: center;
padding: 2px;
border-bottom: 5px solid blue;
text-shadow: 4px 4px 4px black;
}how about a fancy font
You can include an external font like you would link to a stylesheet. Find a display or handwriting font from Google and link it in the <head></head> of your HTML file. If it has a space in the name, replace the space with a +
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">
OR
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC">h1 {
font-family: 'Lobster', serif;
}In your CSS file, use your new font by writing a rule with the font name in quotes.
Try including a serif or sans serif font and using it to just style your paragraph <p></p> text!
What about rule conflicts?
h1 {
color: pink;
padding: 20px;
margin: 20px;
background-color: blue;
}
h1 {
color: black;
padding: 5px;
margin: 50px;
border: 5px solid black;
border-radius: 10px;
background-color: white;
}These two rules both govern <h1> What happens if we include both?
If you include a rule that governs the same tag or class, the later style rule takes precedence.
What's next?
Try playing around. Check out W3School's CSS Reference for other properties you can write rules for.
Try out background-image, borders on only one side (hint: there was an example of this earlier), opacity, or text-shadow to fancy up your page.
Challenge mode: see if you can figure out how to add additional pages to your project and link them from index.html.
Sharing
Share this one to just share the finished, public version of your page when you're done
Share this one to get help with your code. You can also invite me or classmates to your project to make edits. I'm @mkane2
Your page is always visible online, but to show it to others you'll need to click the Share button to share the link
<!DOCTYPE html>
<html>
<head>
<title>Your Name</title>
<link rel="stylesheet" href="kane-style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lobster">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Krub">
</head>
<body>
<h1>Your Name</h1>
<div class="cats">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi a turpis ut mauris rutrum rutrum vitae a mi. Vivamus sit amet fringilla turpis. Praesent id erat nisi. Vestibulum auctor ex ac pharetra bibendum.</p>
</div>
<div class="dubstep">
<p>I am interested in <b>cats</b> and <i>dubstep</i>. I would like to run away and <b>join the circus</b> when I grow up.</p>
<p>I am very good at googling things and very bad at <i>writing things</i>.</p>
<p><b>I would like to improve my skills in finding <i>cat pictures</i>.</b></p>
</div>
<div class="cats">
<img src="cat.jpg" width=500px height=auto>
</div>
<div class="dubstep">
<p><a href="https://twitter.com/MaeveKane">My Twitter</a></p>
</div>
</body>
</html>HTML
p {
font-family: 'Krub', sans-serif;
}
.dubstep {
background: lightgray;
color: red;
padding: 5px;
}
/*CHANGE FONT SIZE*/
.cats {
font-size: 20px;
color: lightskyblue;
border: 1px solid black;
border-radius: 3px;
background-color: yellow;
padding: 10px;
margin: 10px;
}
/*STYLE A LINK*/
a {
text-decoration: none;
text-transform: uppercase;
color: white;
}
/*STYLE THE WHOLE BODY*/
body {
background-color: lightgreen;
}
/*STYLE A HEADER*/
h1 {
font-family: 'Lobster', cursive, serif;
color: white;
text-align: center;
padding: 2px;
border-bottom: 5px solid blue;
text-shadow: 4px 4px 4px black;
}