Margin and Padding
background: pink; } -
- ( Interactive code slides thanks to - CoderDeck. Also, thanks to Pearl Chen and Mark Reale for creating the foundation for today's content. )
+ Thanks to Pearl Chen and Mark Reale for creating the foundation for today's content. @@ -82,13 +85,13 @@CSS (Cascading Style Sheets) is what makes websites look nice.
-While HTML tells the browser what different parts of the page are, CSS says what those pieces should look like.
+While HTML tells the browser what different parts of the page are, CSS says what those pieces should look like.
For example, p means paragraph in HTML. If we wanted to make all of our paragraphs red and underlined, we'd do something like:
p {
@@ -246,6 +249,7 @@ Let's add this to our HTML document
To indicate that we're adding CSS to blank.html, we need to find the opening and closing <style> tags between our opening and closing <head> tags.
<!doctype html>
+ <html>
<head>
<title>Ladies Learning Code HTML and CSS</title>
<style>
@@ -328,7 +332,7 @@ HTML tags
</body>
</html>
-
+<!DOCTYPE html> <html> @@ -362,7 +366,7 @@+</html>HTML tags
</head> <body> </body> -</html>
A CSS rule is made up of a selector and one or more declarations
A selector tells the browser what element(s) we are styling.
It looks like this:
-h2 {}The above selector will select all <h2> elements and apply our styles to them. Our styles will go between the curly brackets.
h2 {}The above selector will select all <h2> elements and apply our styles to them. Our styles will go between the curly brackets.
A property tells the browser what we are modifying (ex. font, colour, size)
A value tells the browser how to modify the property (ex. Arial, green, small)
A declaration looks like this:
-background-color: green;background-color: green;background-color: green;The value (the part after the colon) is specific to the property type
@@ -553,7 +557,7 @@
h2 {
background-color: green;
- font-size: 28px;
+ font-size: 50px;
}
Make sure you always end each declaration with a semi-colon
@@ -622,7 +626,7 @@Check outhttp://colorpicker.com for more awesome colours!
Let's change the font to a sans-serif like Helvetica:
body {
color: #444444;
- font-family: Helvetica, Arial, sans-serif;
+ font-family: Helvetica, Arial, sans-serif;
}
The font-family property accepts a list of font names: the first font is your first-choice font, the next ones are fallbacks in case that font is not available. Not all fonts are commonly available, so try to stick to 'web-safe' fonts like:
@@ -662,7 +666,7 @@If we want to make our <h1> and <h2> tags a bit bigger:
h1 {
@@ -686,7 +690,7 @@ Changing Line Height
We can write a selector in our css to target the element we added a class to using a .
p.classname {}
-And then apply the styles we want to only the item with the class:
p.classname {
color: red;
}
-Your HTML should look something like this:
-<img class="profile" src="images/profile.jpg">
+<img class="profile" src="images/profile.jpg">
And your CSS should look something like this:
img.profile {
border: 1px solid grey;
width: 200px;
- height:200px;
-}
-Add a class of "favourite" to each of the four images.
<img class="favourite" src="images/kitten.jpg" >
-Add some styles to your images, using things like width, height, and border.
Add some styles to your images, using things like width, height, and border.
The CSS "Box Model" describes the way CSS styles the size and spacing of HTML elements.
To understand the box model, we need to understand how the browser "sees" HTML elements.
To the browser, every HTML element is a rectangular box.
-If we show the outlines of all the elements in an HTML document, it looks a bit like the next slide:
+If we show the outlines of all the elements in an HTML document, it looks a bit like the next slide:
-
There are two CSS properties for adding space around our elements: margin, and padding
The margin property adds space around the element, outside of the border:
h2 {
margin: 40px;
-}
-This code adds 40px of space on every side of the element.
+} + +This code adds 40px of space on every side of the element.
This code adds 40px of space to every side of the element, but it does so within the border.
-
+
+ This code adds 40px of space to every side of the element, but it does so within the border.
+
The same goes for padding and border:
h2 {
padding-bottom: 40px;
border-left: 1px solid red;
}
-The 0 sets both the top margin and the bottom margin, and the auto sets both the left and right margins.
The 0 sets both the top margin and the bottom margin, and the auto sets both the left and right margins.
Add a class called logo to your logo <img> tag:
<img class="logo" src="images/logo.png">
-Then write a selector in your CSS and apply the margin property:
Then write a selector in your CSS and apply the margin property:
img.logo {
margin: 0 auto;
}
-This is because images are inline elements. Inline elements do not take up the full width of the page, they only take up as much space as the content requires.
Most elements, like <h2>, <p>, or <ul> take up the whole width of the page, these are called block elements.
Because our logo element is only as wide as the image, we can't centre it relative to the page. Luckily, this is easy to fix: we just tell the <img> tag to behave like a block element instead, by setting the display property.
Our site looks much better now, but now it's time to style the individual sections.
We'll need a way to target each section independently, grouping elements within the same section together, creating a layout.
-Conveniently enough, HTML provides the <section> tag. We'll wrap each section within a <section> tag and add a class to each one, so we can style each section using CSS.
+
Conveniently enough, HTML provides the <section> tag. We'll wrap each section within a <section> tag and add a class to each one, so we can style each section using CSS.
<section> with a selector in your CSS
-section.banner {}
-
section.banner {
padding-top: 110px;
padding-bottom: 110px;
}
-background-image property lets you specify a path to an image in much the same way as you would in an HTML <img> tag:
background-image: url('images/background.jpg');
->You can write a child selector to select only those tags which are children of another tag.
We add a space between the parent and the child selector to specify:
-section img {}
-The above selector will select only those <img> tags which are nested within <section> tags.
To target the <p> tag within the banner <section>, we use:
-section.banner p {}
-Try increasing the font-size of the selected <p> tag.
Try increasing the font-size of the selected <p> tag.
Select the <h1> tag in the banner section in the same way and capitalize the text using text-transform: uppercase. Your CSS should look something like this:
section.banner p {
@@ -1112,7 +1116,7 @@ CSS Child Selectors
section.banner h1 {
text-transform: uppercase;
}
-We want to align the profile image to the left, and allow the text to wrap around it. We do this using CSS Floats.
Remember how all HTML elements are rectangular boxes stacked on top of each other?
-
+
We have to break that stacking flow by floating the image to the side. This will cause the text after the image to move up beside it, because we've disrupted the flow of the rectangular boxes.
@@ -1170,13 +1174,15 @@We already wrote the selector for our profile <img>, so let's add the declaration float: left; to it:
We'll also add a margin to the right of the image, so we get some space between the image and the rest of the section.
img.profile {
float: left;
+ margin-right: 20px;
}
-This has 'floated' our image to the left, but there's a problem...can you figure out what it is?
-
+
+ This has 'floated' our image to the left, but there's a problem...can you figure out what it is?
+
Let's write a selector for the section we just created:
-section.favourites {}
+section.favourites {}
And centre-align it:
+And centre-align it:
section.favourites {
text-align: center;
}
-And your CSS:
+And your CSS:
section.contact {
text-align: center;
@@ -1258,7 +1264,7 @@ Solution: Contact Section
section.contact img {
margin: 20px;
}
-
section.box {}
And add a bunch of padding to all our sections:
+And add a bunch of padding to all our sections:
section.box {
padding: 50px 100px;
}
-We can also use our box class to target the headings in each of these sections.
Since we're targeting both our <h2> and <h3> tags, we'll write a selector for both, separating them with a comma:
section.box h2, section.box h3 {}
-And change the colour of our headings:
section.box h2, section.box h3 {
color: #A8258D;
}
-Find the code in Step 3 of the instructions, and paste it into the <head> of your HTML document (remember how the <head> section sends invisible instructions to our browser?)
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
-Let's add a menu to the top of our document so our users can navigate.
Menus are commonly marked up as lists with links inside each list item.
There are two types of lists in HTML: ordered and unordered (numbered and bulleted). -
Since we don't need numbers, we'll use an unordered list, which is marked up with <ul></ul> tags to indicate where the list starts and ends.
+
Since we don't need numbers, we'll use an unordered list, which is marked up with <ul></ul> tags to indicate where the list starts and ends.
Each bullet or "list item" in an unordered list is marked up as an <li></li> tag nested within the <ul> tag.
<ul>
<li>One list item</li>
<li>Another list item</li>
</ul>
-