Skip to main content

CSS

 CSS

So far, our webpages have been pretty boring - white background, black text, default fonts, etc.


To make life more interesting, we're going to learn how to use cascading style sheets (CSS) to beautify our pages.


CSS has made this a lot easier, since before it, web coders had to individually tell each element how to look. CSS lets us create default settings & formats and apply them to parts of our page. It's a bit like having formatting subroutines that you can call at any time.


👉 You may have already noticed a style.css file in your left hand file pane, and this line in our boilerplate code:


<link href="style.css" rel="stylesheet" type="text/css" />


This means that any repl you create automatically comes with it's own styling file that is loaded into the webpage.


This is what the starter style.css page looks like:


html, body {

  height: 100%;

  width: 100%;

}


This CSS code tells the <head> and <body> tags how to look. They have a height & width of 100% (ie they fill the page).


Now let's start creating a webpage and learning about the tags. 

👉 I've created a basic baldy page here (It's already in the index.html file for you.):


<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>replit</title>

  <link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>

  

  <h1>Baldies Page 2</h1>

  <p>The continuation of the epic website showing the best of the bald bunch.</p>

  <h2>Yul Brynner</h2>

  <img src="yulBrynner.jpg" width ="200px">

  <p>Yul Brynner is another amazing baldie, a famous actor in the 20th Century, he is most remembered for his roles in "The King and I", and the original "Westworld".</p>

  

</body>

</html>


Before you get started...

The curly braces are important - they surround the style for each tag.

Each line should finish with a semi colon - or it won't work.

Font family lets you pick a particular font or general style for your text. It's generally good practice to use general style rather than specify one font, because the one you pick might not be supported by all web browsers. Check out some web safe fonts here.

A cool Replit feature is to give you a color picker when you type the color name. You can click on the colored box to fine tune your color selection.

Heading Style

👉 The first thing I'm going to style is the heading. I do this in the style.css page by creating a new style for the <h1> tag. The settings I create here will be applied to all the <h1> tags in my html file.


html, body {

  height: 100%;

  width: 100%;

}

h1{

  font-family: sans-serif;

  font-size: 24px;

  color: blue;

  background-color: #d3d345;

    

}


Let's see what this code has done to my webpage. Go back to the index.html file and refresh the webview pane:



Paragraph Style
👉 Now, I'm going to style my <p> tags:

html, body {
  height: 100%;
  width: 100%;
}
h1{
  font-family: sans-serif;
  font-size: 24px;
  color: blue;
  background-color: #d3d345;
}
p{
  font-family: sans-serif;
  font-size: 10px;
  color: blue;
 
    
}

This has changed my paragraphs to smaller, blue text.


Background Color
👉 To set the background color for the whole page, add the setting to the html, body style:

html, body {
  height: 100%;
  width: 100%;
  [background-color: red;](background-color: #e4e2e2;)
} 

Alignment
Another cool thing that we can do in css is to align our text.

👉 Let's align the <h1> and <p> tag text. I'm using center, but you can also use left or right.

h1{
  font-family: sans-serif;
  font-size: 24px;
  color: blue;
  background-color: #d3d345;
  text-align:center;
    
}
p{
  font-family: monospace;
  font-size: 10px;
  color: blue;
   text-align:center;
    
}

👉 I also want to apply the <h1> settings to the <h2> tag, but instead of creating a whole new style, I can just add the tag name at the top of the <h1> style:

h1, h2{ 
font-family: sans-serif;
  font-size: 24px;
  color: blue;
  background-color: #d3d345;
  text-align:center;
    
}

However, I do want <h2> to be a bit smaller, so I can define a new style after the 'h1, h2' style and just change the font size: 

html, body {
  height: 100%;
  width: 100%;
  background-color: #e4e2e2;
}

h1, h2{
  font-family: sans-serif;
  font-size: 24px;
  color: blue;
  background-color: #d3d345;
  text-align:center;
    
}

''' THIS IS THE NEW BIT'''
h2{
  font-size: 12px;
  
}

p{
  font-family: monospace;
  font-size: 10px;
  color: blue;
   text-align:center;
    
}

Images
👉 We can also use CSS with our image tags. Centering an image isn't very intuitive, but we can do it like this:

img{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
  
}

Tags and Classes
It's also possible to directly address a single tag by giving it a class name.

👉 Here's an example of how I've created the blurb class directly in a <p> tag in the index.html page.

<p class = "blurb">Yul Brynner is another amazing baldie, a famous actor in the 20th Century, he is most remembered for his roles in "The King and I", and the original "Westworld".</p>

Now, I can style my blurb class in the style.css file. Notice how I've referred to it using dotblurb -> .blurb 

.blurb{
  font-style: italic;
  font-weight: bold;
}





Comments

Post a Comment

Popular posts from this blog

Hide & Remove,Come Back!,

 Hide & Remove DISCLAIMER: I promise the good stuff is coming back. We have to go through the valley to get to the mountain, right? Sometimes, we want to remove a button, image or piece of text from the screen. To do this, we use pack_forget(). 👉 We'll start with our default tkinter program. import tkinter as tk window = tk.Tk() window.title("Hello World")  window.geometry("300x200")  hello = tk.Label(text = "Hello World")  hello.pack()  button = tk.Button(text = "Click me!")  button.pack() tk.mainloop() 👉 Now I'm going to add a new subroutine to hide the label and call it on a button click. import tkinter as tk window = tk.Tk() window.title("Hello World")  window.geometry("300x200")  # New subroutine def hideLabel():   hello.pack_forget() # Removes the 'hello' label hello = tk.Label(text = "Hello World")  hello.pack()  button = tk.Button(text = "Click me!", command = hideLabel) # Call...
Post a Comment
Read more

Web Scraping

 Web Scraping Some websites don't have lovely APIs for us to interface with. If we want data from these pages, we have to use a tecnique called scraping. This means downloading the whole webpage and poking at it until we can find the information we want. You're going to use scraping to get the top ten restaurants near you. Get started 👉 Go to a website like Yelp and search for the top 10 reastaurants in your location. Copy the URL.   url = "https://www.yelp.co.uk/search?find_desc=Restaurants&find_loc=San+Francisco%2C+CA%2C+United+States"   Import libraries 👉 Import your libraries. Beautiful soup is a specialist library for extracting the contents of HTML and helping us parse them. Run the Repl once your imports are sorted because we want the Beautiful Soup library to be installed (it'll run quicker this way). import requests from bs4 import BeautifulSoup url = "https://www.yelp.co.uk/search?find_desc=Restaurants&find_loc=San+Francisco%2C+CA%2C+Unite...
Post a Comment
Read more

String Manipulation

   String Manipulation Does this code look familiar from the insult generator project? name = input("What's your name? ") if name == "David" or name == "david":   print("Hello Baldy!") else:    print("What a beautiful head of hair!") Right now, if the user writes "DAVID" or "david", the if statement works correctly. However, "DaVID" does not give the correct output. To the computer, " david", "dAviD", and "david" are completely different. To simplify what the user typed in, we can add these functions to the end of the name of the variable: .lower() = all letters are lower case .upper() = all letters are upper case .title() = capital letter for the first letter of every word .capitalize() = capital letter for the first letter of only the first word    
Post a Comment
Read more