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

Automate! Automate!

 Making this customizable 👉So how about making our search user customizable? In the code below, I have: Asked the user to input an artist (line 14) Tidied up their input (line 15) formatted the search URL as an fString that includes the artist (line 19) Here's tAutomate! Automate! We are so close. I can taste it, folks! Massive kudos on getting this far! Today's lesson, however, will work best if you have one of Replit's paid for features (hacker plan or cycles). Free plan Repls 'fall asleep' after a while. Automation kinda relies on the Repl being always on. If you have hacker plan or you've bought some cycles, then you can enable always on in the drop down menu that appears when you click your Repl name (top left).he code: This is important because when our repl is always running, it can keep track of time and schedule events. 👉 I've set up a simple schedule that prints out a clock emoji every couple of seconds. It works like this: Import schedule librar...
Post a Comment
Read more

HTTP & Sessions

 HTTP & Sessions One of the main protocols (rules that govern how computers communicate) on the web is called HTTP. HTTP is what is known as a stateless protocol. This means that it doesn't 'remember' things. It's a bit like having a conversation with a goldfish. You can ask a question and get a reply, but when you ask a follow up question, the original has already been forgotten, as has who you are and what you were talking about. So if HTTP is stateless, how come my news site remembers to give me the weather for my home town, my preferred South American river based online store tells me when it's time to order more multivitamins, and I'm justifiably proud of my #100days success streak? The answer is......... Sessions Sessions are a way of storing files on your computer that allows a website to keep a record of previous 'conversations' and 'questions' you've asked. By using sessions, we can store this info about the user to access later....
Post a Comment
Read more

Incoming!

 Incoming! Today, we're going to learn how to deal with data from forms in Flask. 👉 To start, I've added yesterday's HTML code for my form in main.py for you already. (You're welcome!) Go take a look! 👉 However, at the moment, the app.route() has no method associated with it, so I need to create a route for this page to receive the data. First, I need a new import: request. Then I create the app.route - I also need to add an extra argument to specify the methods being received. At the moment, that's just 'post', but it does need to be ALL CAPS - POST. Finally I define the process() subroutine that returns request.form 👉 Here's the new code on its own: from Flask import Flask, request app.route('/process', methods=["POST"]) def process():   return request.form 👉 And here it is as part of the whole code: from flask import Flask, request app = Flask(__name__) app.route("/process", methods=["POST"]) def process():   ...
Post a Comment
Read more